refactor(i18n): 优化语言加载与切换逻辑

Author: RSS1102

src/locales/index.ts

@@ -1,65 +1,44 @@
-import { useLocalStorage, usePreferredLanguages } from '@vueuse/core';
 import type { DropdownOption } from 'tdesign-vue-next';
 import en_US from 'tdesign-vue-next/es/locale/en_US';
 import zh_CN from 'tdesign-vue-next/es/locale/zh_CN';
 import { computed } from 'vue';
 import type { I18nOptions } from 'vue-i18n';
 import { createI18n } from 'vue-i18n';
 
-// 导入语言文件 (JSON 方式)
-const langModules = import.meta.glob<{ default: Record<string, unknown> }>('./lang/*.json', { eager: true });
-
-// TDesign 组件 locale 映射
-const TDESIGN_LOCALE_MAP: Record<string, Record<string, unknown>> = {
-  zh_CN,
-  en_US,
-};
-
 export const localeConfigKey = 'tdesign-starter-locale';
 
-// 获取浏览器默认语言环境
-const languages = usePreferredLanguages();
+const TDESIGN_LOCALE_MAP: Record<string, Record<string, unknown>> = { zh_CN, en_US };
 
-// 解析语言模块
-const parseLangModules = () => {
-  const langCode: string[] = [];
-  const messages: I18nOptions['messages'] = {};
-  const langList: DropdownOption[] = [];
-
-  Object.entries(langModules).forEach(([path, module]) => {
-    const match = path.match(/\.\/lang\/([^.]+)\.json$/);
-    if (match) {
-      const code = match[1];
-      langCode.push(code);
-      // 合并自定义语言包和 TDesign 组件 locale
-      messages[code] = {
-        ...module.default,
-        componentsLocale: TDESIGN_LOCALE_MAP[code],
-      };
-      langList.push({
-        content: module.default.lang as string,
-        value: code,
-      });
-    }
-  });
+const langModules = import.meta.glob<{ default: Record<string, unknown> }>('./lang/*.json', { eager: true });
 
-  return { langCode, messages, langList };
-};
+const langCode: string[] = [];
+const messages: I18nOptions['messages'] = {};
+const langList: DropdownOption[] = [];
 
-const { langCode, messages, langList } = parseLangModules();
+Object.entries(langModules).forEach(([path, module]) => {
+  const code = path.match(/\.\/lang\/([^.]+)\.json$/)?.[1];
+  if (!code) return;
+  langCode.push(code);
+  messages[code] = { ...module.default, componentsLocale: TDESIGN_LOCALE_MAP[code] };
+  langList.push({ content: module.default.lang as string, value: code });
+});
 
 export { langCode };
 
+// 初始化读取（一次性）
+const stored = localStorage.getItem(localeConfigKey);
+const preferred = navigator.languages?.[0];
+const candidate = (stored || preferred || 'zh_CN').replace(/-/g, '_');
+const initialLocale = langCode.includes(candidate) ? candidate : 'zh_CN';
+
 export const i18n = createI18n({
   legacy: false,
-  locale: (useLocalStorage(localeConfigKey, 'zh_CN').value || languages.value[0] || 'zh_CN').replace(/-/g, '_'),
+  locale: initialLocale,
   fallbackLocale: 'zh_CN',
   messages,
   globalInjection: true,
 });
 
 export const languageList = computed(() => langList);
-
 export const { t } = i18n.global;
-
 export default i18n;

src/locales/useLocale.ts

@@ -4,18 +4,21 @@ import { computed } from 'vue';
 import { useI18n } from 'vue-i18n';
 
 import { i18n, langCode, localeConfigKey } from '@/locales/index';
+import { useNotificationStore } from '@/store/modules/notification';
 
 export function useLocale() {
   const { locale } = useI18n({ useScope: 'global' });
-  function changeLocale(lang: string) {
-    // 如果切换的语言不在对应语言文件里则默认为简体中文
+  const storedLocale = useLocalStorage(localeConfigKey, 'zh_CN');
+
+  const changeLocale = (lang: string) => {
     if (!langCode.includes(lang)) {
       lang = 'zh_CN';
     }
-
     locale.value = lang;
-    useLocalStorage(localeConfigKey, 'zh_CN').value = lang;
-  }
+    storedLocale.value = lang;
+    // 刷新持久化的翻译数据
+    useNotificationStore().refreshMsgData();
+  };
 
   const getComponentsLocale = computed(() => {
     return i18n.global.getLocaleMessage(locale.value).componentsLocale as GlobalConfigProvider;

src/store/modules/notification.ts

@@ -60,5 +60,5 @@ export const useNotificationStore = defineStore('notification', {
       this.msgData = getMsgData();
     },
   },
-  persist: true,
+  persist: false,
 });