refactor(i18n): 重构国际化模块结构

src/composables/useMetaLayoutsMenuOptions.tsx

@@ -16,7 +16,7 @@ export function useMetaLayoutsNMenuOptions({ menuInstRef }: { menuInstRef: Ref<M
       return key;
     },
     fallbackRoot: true,
-    messages: locales4RouteMessages,
+    messages: i18nRouteMessages,
   });
 
   // 获取路由表但是不包含布局路由

src/locales-utils/i18n-auto-imports.ts

@@ -0,0 +1,28 @@
+/* https://github.com/intlify/bundle-tools/tree/main/packages/unplugin-vue-i18n#static-bundle-importing
+ * All i18n resources specified in the plugin `include` option can be loaded
+ * at once using the import syntax
+ */
+import messages from '@intlify/unplugin-vue-i18n/messages';
+
+import { createI18n } from 'vue-i18n';
+
+const locale = useLocalStorage<string>('app-locale', navigator.language);
+
+// https://vue-i18n.intlify.dev/guide/essentials/started.html#registering-the-i18n-plugin
+export const i18nInstance = createI18n({
+  legacy: false, // you must set `false`, to use Composition API
+  locale: locale.value,
+  fallbackRoot: false,
+  // flatJson: true,
+  missing: (locale, key /* , instance, type */) => {
+    consola.warn(`缺少国际化内容: locale='${locale}', key='${key}'`);
+    return `[${key}]`;
+  },
+  missingWarn: !true,
+  fallbackWarn: !true,
+  messages,
+});
+
+watchEffect(() => {
+  locale.value = i18nInstance.global.locale.value;
+});

src/locales-utils/route-messages/README.md

@@ -1,4 +1,4 @@
-# `locales-4-route`
+# route-messages
 
 此目录存放专门用于**路由名称**的国际化（i18n）消息。这些消息通过一套自定义的编译时安全机制，为应用的导航菜单提供标题。
 
@@ -27,7 +27,7 @@
 3.  **编译时检查**：此目录下的每个语言环境文件（如 `en-US.ts`）都必须使用 `satisfies PageTitleLocalizations` 来进行类型断言。
 
     ```typescript
-    // src/locales-4-route/en-US.ts
+    // ./en-US.ts
     export default { ... } satisfies PageTitleLocalizations;
     ```
 
@@ -52,13 +52,13 @@
     使用上一步中自动生成的 `name` 作为键，在此目录的每个语言文件中添加翻译。
 
     ```ts
-    // src/locales-4-route/zh-CN.ts
+    // ./zh-CN.ts
     export default {
       // ... 其他翻译
       DemosApiDemo: 'API 演示',
     } satisfies PageTitleLocalizations;
 
-    // src/locales-4-route/en-US.ts
+    // ./en-US.ts
     export default {
       // ... 其他翻译
       DemosApiDemo: 'API Demo',

src/locales-utils/route-messages/route-messages-auto-imports.ts

@@ -1,13 +1,13 @@
 import type { I18nOptions } from 'vue-i18n';
 
-const modules = import.meta.glob(['./*.ts', '!./_messages-auto-imports.ts'], {
+const modules = import.meta.glob(['./*.ts', '!./route-messages-auto-imports'], {
   eager: true,
   import: 'default',
 });
 
 type MessageType = Record<string, string>;
 
-export const locales4RouteMessages: I18nOptions['messages'] = Object.entries(modules).reduce(
+export const i18nRouteMessages: I18nOptions['messages'] = Object.entries(modules).reduce(
   (messages, [path, mod]) => {
     const locale = path.replace(/(\.\/|\.ts)/g, '');
     messages[locale] = mod as MessageType;

src/pages/demos/i18n-demo.page.vue

@@ -1,13 +1,9 @@
 <script setup lang="ts">
-definePage({
-  meta: {
-    order: 1,
-  },
-});
-const { t, locale } = useI18n();
+definePage({ meta: { order: 1 } });
+const { t, locale } = useI18n({});
 
 function setLocale(newLocale: 'en-US' | 'zh-CN') {
-  locale.value = newLocale;
+  i18nInstance.global.locale.value = newLocale;
 }
 </script>
 

src/plugins/00.vueI18n-plugin.ts

@@ -1,30 +1,3 @@
-/* https://github.com/intlify/bundle-tools/tree/main/packages/unplugin-vue-i18n#static-bundle-importing
- * All i18n resources specified in the plugin `include` option can be loaded
- * at once using the import syntax
- */
-import messages from '@intlify/unplugin-vue-i18n/messages';
-
-import { createI18n } from 'vue-i18n';
-
 export function install({ app }: { app: import('vue').App<Element> }) {
-  const locale = useLocalStorage<string>('app-locale', navigator.language);
-
-  // https://vue-i18n.intlify.dev/guide/essentials/started.html#registering-the-i18n-plugin
-  const i18n = createI18n({
-    legacy: false, // you must set `false`, to use Composition API
-    locale: locale.value,
-    fallbackRoot: false,
-    // flatJson: true,
-    missing: (locale, key /* , instance, type */) => {
-      consola.warn(`缺少国际化内容: locale='${locale}', key='${key}'`);
-      return `[${key}]`;
-    },
-    missingWarn: !true,
-    fallbackWarn: !true,
-    messages,
-  });
-  watchEffect(() => {
-    locale.value = i18n.global.locale.value;
-  });
-  app.use(i18n);
+  app.use(i18nInstance);
 }