fix: 组件库的i18n

Justin3go · May 29, 2024 · 8e6ddcf · 8e6ddcf
1 parent 29f0ad4
commit 8e6ddcf
Show file tree

Hide file tree

Showing 4 changed files with 80 additions and 54 deletions.
diff --git a/docs/.vitepress/config/en.ts b/docs/.vitepress/config/en.ts
@@ -1,19 +1,13 @@
 import { defineConfig} from 'vitepress'
 
 import { createSideBarEN } from "../utils/createSideBar";
-import { handleHeadMeta } from "../utils/handleHeadMeta";
 
 // https://vitepress.dev/reference/site-config
 export default defineConfig({
   title: "FAV0 Weekly",
   description: "FAV0 Weekly: Documenting Weekly Observations and Experiences, with a Focus on Front-end Development, AI, and Computer-related Topics",
   lang: "en-US", //语言
 
-  // https://vitepress.dev/reference/site-config#transformhead
-  async transformHead(context) {
-    return handleHeadMeta(context)
-  },
-
   themeConfig: {
     // https://vitepress.dev/reference/default-theme-config
 

diff --git a/docs/.vitepress/config/zh.ts b/docs/.vitepress/config/zh.ts
@@ -1,19 +1,13 @@
 import { defineConfig } from 'vitepress'
 
 import { createSideBarZH } from "../utils/createSideBar";
-import { handleHeadMeta } from "../utils/handleHeadMeta";
 
 // https://vitepress.dev/reference/site-config
 export default defineConfig({
   title: "FAV0周刊",
   description: "《FAV0周刊》：记录每周所见所闻，主要关注前端、AI领域以及计算机相关内容",
   lang: "zh-Hans", //语言
 
-  // https://vitepress.dev/reference/site-config#transformhead
-  async transformHead(context) {
-    return handleHeadMeta(context)
-  },
-
   themeConfig: {
     // https://vitepress.dev/reference/default-theme-config
     outlineTitle: "大纲",

diff --git a/docs/.vitepress/theme/components/ImageViewer.vue b/docs/.vitepress/theme/components/ImageViewer.vue
@@ -1,59 +1,84 @@
 <template>
-  <div class="image-viewer">
-    <t-image-viewer v-model:visible="show" :images="previewImageInfo.list" :default-index="previewImageInfo.idx"
-      :key="previewImageInfo.idx" @close="show = false">
-    </t-image-viewer>
-    <TDesignDark />
-  </div>
+	<div class="image-viewer">
+		<t-config-provider :global-config="globalConfig">
+			<t-image-viewer
+				v-model:visible="show"
+				:images="previewImageInfo.list"
+				:default-index="previewImageInfo.idx"
+				:key="previewImageInfo.idx"
+				@close="show = false"
+			>
+			</t-image-viewer>
+			<TDesignDark />
+		</t-config-provider>
+	</div>
 </template>
 <script setup lang="ts">
-import { onMounted, onUnmounted, reactive, ref } from 'vue'
-import TDesignDark from './TDesignDark.vue';
+import { onMounted, onUnmounted, reactive, ref, watch } from "vue";
+import { useRoute } from "vitepress";
+import enConfig from 'tdesign-vue-next/es/locale/en_US';
+import zhConfig from 'tdesign-vue-next/es/locale/zh_CN';
 
-const show = ref(false)
+import TDesignDark from "./TDesignDark.vue";
+
+// 处理TDesign的国际化
+const route = useRoute();
+const globalConfig = ref< typeof zhConfig | typeof enConfig>(zhConfig);
+watch(
+	() => route.path,
+	() => {
+    globalConfig.value = route.path.startsWith("/en") ? enConfig : zhConfig;
+	},
+	{
+		immediate: true,
+	}
+);
+
+// 处理图片预览
+const show = ref(false);
 const previewImageInfo = reactive<{ url: string; list: string[]; idx: number }>(
-  {
-    url: '',
-    list: [],
-    idx: 0
-  }
-)
+	{
+		url: "",
+		list: [],
+		idx: 0,
+	}
+);
 function previewImage(e: Event) {
-  const target = e.target as HTMLElement
-  const currentTarget = e.currentTarget as HTMLElement
-  if (target.tagName.toLowerCase() === 'img') {
-    const imgs = currentTarget.querySelectorAll<HTMLImageElement>(
-      '.content-container .main img'
-    )
-    const idx = Array.from(imgs).findIndex(el => el === target)
-    const urls = Array.from(imgs).map(el => el.src)
+	const target = e.target as HTMLElement;
+	const currentTarget = e.currentTarget as HTMLElement;
+	if (target.tagName.toLowerCase() === "img") {
+		const imgs = currentTarget.querySelectorAll<HTMLImageElement>(
+			".content-container .main img"
+		);
+		const idx = Array.from(imgs).findIndex((el) => el === target);
+		const urls = Array.from(imgs).map((el) => el.src);
 
-    const url = target.getAttribute('src')
-    previewImageInfo.url = url!
-    previewImageInfo.list = urls
-    previewImageInfo.idx = idx
+		const url = target.getAttribute("src");
+		previewImageInfo.url = url!;
+		previewImageInfo.list = urls;
+		previewImageInfo.idx = idx;
 
-    // 兼容点击main之外的图片
-    if (idx === -1 && url) {
-      previewImageInfo.list.push(url)
-      previewImageInfo.idx = previewImageInfo.list.length - 1
-    }
-    show.value = true
-  }
+		// 兼容点击main之外的图片
+		if (idx === -1 && url) {
+			previewImageInfo.list.push(url);
+			previewImageInfo.idx = previewImageInfo.list.length - 1;
+		}
+		show.value = true;
+	}
 }
 onMounted(() => {
-  const docDomContainer = document.querySelector('#VPContent')
-  docDomContainer?.addEventListener('click', previewImage)
-})
+	const docDomContainer = document.querySelector("#VPContent");
+	docDomContainer?.addEventListener("click", previewImage);
+});
 
 onUnmounted(() => {
-  const docDomContainer = document.querySelector('#VPContent')
-  docDomContainer?.removeEventListener('click', previewImage)
-})
+	const docDomContainer = document.querySelector("#VPContent");
+	docDomContainer?.removeEventListener("click", previewImage);
+});
 </script>
 <style>
 /* 不提供下载功能，隐藏下载按钮，tdesign下载有问题 */
 .t-image-viewer__modal-icon:nth-child(7) {
-  display: none !important;
+	display: none !important;
 }
 </style>
diff --git a/docs/.vitepress/theme/components/Subscribe.vue b/docs/.vitepress/theme/components/Subscribe.vue
@@ -1,5 +1,9 @@
 <template>
-	<t-popup placement="right" show-arrow destroy-on-close>
+	<t-button v-if="isEN" theme="default" variant="dashed" style="margin-bottom: 10px" @click="jumpToMedium">
+		<template #icon><NotificationIcon /></template>
+		Subscribe in Medium
+	</t-button>
+	<t-popup v-else placement="right" show-arrow destroy-on-close>
 		<template #content>
 			<div class="img-container">
 				<img src="https://oss.justin3go.com/Justin3goWXGZH_QR.png" alt="" />
@@ -12,7 +16,16 @@
 	</t-popup>
 </template>
 <script setup lang="ts">
+import { computed } from "vue";
+import { useRoute } from "vitepress";
 import { NotificationIcon } from "tdesign-icons-vue-next";
+
+const route = useRoute();
+const isEN = computed(() => route.path.startsWith("/en"));
+
+function jumpToMedium() {
+	window.open("https://medium.com/@Justin3go", "_blank");
+}
 </script>
 <style scoped>
 .img-container {