From c0c5e9763edb27d0a941be30fbf8861a7f5f44be Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E4=B8=A5=E6=B5=A9?= <me@yanhao.ren>
Date: Tue, 4 Nov 2025 11:09:39 +0800
Subject: [PATCH] =?UTF-8?q?feat(i18n):=20=E4=BC=98=E5=8C=96=E5=9B=BD?=
 =?UTF-8?q?=E9=99=85=E5=8C=96=E8=B7=AF=E7=94=B1=E6=A0=87=E9=A2=98=E8=AE=BE?=
 =?UTF-8?q?=E7=BD=AE=E9=80=BB=E8=BE=91=E5=B9=B6=E4=BF=AE=E5=A4=8D=E5=93=8D?=
 =?UTF-8?q?=E5=BA=94=E5=BC=8F=E9=97=AE=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/locales-utils/i18n-auto-imports.ts | 18 +++++++++---------
 src/main.ts                            |  1 +
 src/pages/demos/i18n-demo.page.vue     |  9 +++++++--
 3 files changed, 17 insertions(+), 11 deletions(-)

diff --git a/src/locales-utils/i18n-auto-imports.ts b/src/locales-utils/i18n-auto-imports.ts
index 072fc09..ffd9bc0 100644
--- a/src/locales-utils/i18n-auto-imports.ts
+++ b/src/locales-utils/i18n-auto-imports.ts
@@ -2,11 +2,12 @@
  * All i18n resources specified in the plugin `include` option can be loaded
  * at once using the import syntax
  */
-import { router } from '@/plugins/00.router-plugin';
 import messages from '@intlify/unplugin-vue-i18n/messages';
-import { createGetRoutes } from 'virtual:meta-layouts';
 
+import { router } from '@/plugins/00.router-plugin';
+import { createGetRoutes } from 'virtual:meta-layouts';
 import { createI18n } from 'vue-i18n';
+import { START_LOCATION } from 'vue-router';
 
 const locale = useLocalStorage<string>('app-locale', navigator.language);
 watchEffect(() => {
@@ -51,18 +52,17 @@ watchEffect(
 watch(
   () => i18nInstance.global.locale.value,
   () => {
+    const { t, te } = routeI18nInstance.global;
+
     routeI18nInstance.global.locale.value = i18nInstance.global.locale.value;
 
+    if (router.currentRoute.value.name && router.currentRoute.value !== START_LOCATION) {
+      router.currentRoute.value.meta.title = t(router.currentRoute.value.name as string);
+    }
+
     const routes = createGetRoutes(router)(); // 获取路由表但是不包含布局路由
 
     routes.forEach((route) => {
-      const { t, te } = routeI18nInstance.global;
-
-      if (router.currentRoute.value.name) {
-        router.currentRoute.value.meta.title = t(router.currentRoute.value.name as string);
-      }
-
-      route.meta = route.meta || {};
       const routeName = route.name as string;
       route.meta.title = te(routeName) ? t(routeName) : routeName;
     });
diff --git a/src/main.ts b/src/main.ts
index 887e053..05358b7 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -7,6 +7,7 @@ import { setupPlugins } from './plugins';
 consola.level = LogLevels.verbose;
 
 const app = createApp(App);
+if (__DEV__) Object.defineProperty(window, '__APP__', { value: app });
 setupPlugins(app);
 
 await new Promise((resolve) => setTimeout(resolve, 280));
diff --git a/src/pages/demos/i18n-demo.page.vue b/src/pages/demos/i18n-demo.page.vue
index e079586..b570e79 100644
--- a/src/pages/demos/i18n-demo.page.vue
+++ b/src/pages/demos/i18n-demo.page.vue
@@ -21,12 +21,17 @@ function setLocale(newLocale: 'en-US' | 'zh-CN') {
         {{ t('page.i18n-demo.hello', { name: 'Kilo' }) }}
       </n-p>
 
-      <n-p> $route.meta: {{ $route.meta }} </n-p>
-
       <n-space>
         <n-button type="primary" @click="setLocale('en-US')"> English </n-button>
         <n-button type="success" @click="setLocale('zh-CN')"> 简体中文 </n-button>
       </n-space>
     </n-card>
+
+    <!-- 这里响应式有问题: -->
+    <n-p> $route.meta.title: {{ $route.meta.title }} </n-p>
+    <!-- 这样才正常 -->
+    <n-p>
+      routeI18nInstance.global.t($route.name): {{ routeI18nInstance.global.t($route.name) }}
+    </n-p>
   </div>
 </template>