feat(i18n): 优化国际化路由标题设置逻辑并修复响应式问题

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;
     });

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));

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>