!264 chore i18n 动态加载

Merge pull request !264 from a20070322/dev

web-vue/src/App.vue

@@ -1,6 +1,6 @@
 <template>
   <a-config-provider
-    :locale="lang[nowLang]?.antd"
+    :locale="antdLang"
     :theme="{
       algorithm: themeAlgorithm
       // token: {
@@ -19,14 +19,19 @@
 import { theme } from 'ant-design-vue'
 import { onMounted, onUnmounted } from 'vue'
 import { SpinProps } from 'ant-design-vue/es/spin/Spin'
-import { lang } from './i18n'
+import { changeLang } from './i18n'
 import { useI18n } from 'vue-i18n'
+import { Locale } from 'ant-design-vue/es/locale'
 const routerActivation = ref(true)
 const useGuideStore = guideStore()
 const getGuideCache = useGuideStore.getGuideCache
 const i18nHook = useI18n()
 const t = i18nHook.t
 
+const antdLang = ref<Locale>({
+  locale: 'zh-cn'
+})
+
 const nowLang = computed(() => {
   return useGuideStore.getLocale()
 })
@@ -40,9 +45,16 @@ const nowLang = computed(() => {
 const onMatchMediaChange = (e: MediaQueryListEvent) => {
   useGuideStore.setSystemIsDark(e.matches)
 }
+const changeI18n = async (lang: string) => {
+  changeLang(lang).then((antdLoadLang) => {
+    antdLang.value = antdLoadLang
+  })
+  i18nHook.locale.value = lang
+}
+
 onMounted(() => {
   window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', onMatchMediaChange)
-  i18nHook.locale.value = nowLang.value
+  changeI18n(nowLang.value)
 })
 
 onUnmounted(() => {
@@ -187,3 +199,4 @@ provide('globalLoading', globalLoading)
   flex: 1;
 }
 </style>
+./i18n

web-vue/src/d.ts/components.d.ts

@@ -106,7 +106,6 @@ declare module 'vue' {
     ColumnHeightOutlined: typeof import('@ant-design/icons-vue')['ColumnHeightOutlined']
     CompositionTransfer: typeof import('./../components/compositionTransfer/composition-transfer.vue')['default']
     CompressOutlined: typeof import('@ant-design/icons-vue')['CompressOutlined']
-    copy: typeof import('./../components/customModal copy/index.vue')['default']
     CopyOutlined: typeof import('@ant-design/icons-vue')['CopyOutlined']
     CustomDrawer: typeof import('./../components/customDrawer/index.vue')['default']
     CustomInput: typeof import('./../components/customInput/index.vue')['default']

web-vue/src/i18n/index.ts

@@ -9,64 +9,48 @@
 ///
 
 import { createI18n } from 'vue-i18n'
-// @ts-ignore 兼容i8n_tools插件
-import { zhCN, enUS } from './locales'
 
-import antdZhCN from 'ant-design-vue/es/locale/zh_CN'
-import antdEnUS from 'ant-design-vue/es/locale/en_US'
-
-/** 以中文为主,定义语言类型 */
-export type I18nLocaleType = typeof zhCN
-
-// 深层递归合并，防止出现其他语言未覆盖问题
-const deepMerge = (...objects: Record<string, any>[]) => {
-  const result: Record<string, any> = {}
-  for (const obj of objects) {
-    for (const key in obj) {
-      if (Object.prototype.hasOwnProperty.call(obj, key)) {
-        if (typeof obj[key] === 'object' && obj[key] !== null) {
-          result[key] = deepMerge(result[key] || {}, obj[key])
-        } else {
-          result[key] = obj[key]
-        }
-      }
-    }
-  }
-  return result
+type LangType = {
+  antd: () => Promise<any>
+  local: () => Promise<any>
 }
 
-const usLocal = deepMerge(zhCN, enUS)
-
-export const lang: { [key: string]: any } = {
+export const langDict: { [key: string]: LangType } = {
   'zh-cn': {
-    antd: antdZhCN,
-    local: zhCN
-  },
-  'zh-CN': {
-    antd: antdZhCN,
-    local: zhCN
+    antd: () => import(/* @vite-ignore  */ 'ant-design-vue/es/locale/zh_CN'),
+    local: () => import(/* @vite-ignore  */ './locales/zh_cn.json')
   },
   'en-us': {
-    antd: antdEnUS,
-    local: usLocal
-  },
-  'en-US': {
-    antd: antdEnUS,
-    local: usLocal
+    antd: () => import(/* @vite-ignore  */ 'ant-design-vue/es/locale/en_US'),
+    local: () => import(/* @vite-ignore  */ './locales/en_us.json')
   }
 }
 
-const i18n = createI18n<I18nLocaleType>({
+const i18n = createI18n<Record<string, any>>({
   legacy: false,
-  locale: 'zh-cn', //'en-us', // 默认显示语言
-  messages: Object.keys(lang).reduce((pre: { [key: string]: any }, key: string) => {
-    const { local } = lang[key]
-    pre[key] = local
-    return pre
-  }, {}),
+  // locale: 'zh-cn', // 默认显示语言
   warnHtmlMessage: false
 })
 
+export const changeLang = async (langKey: string) => {
+  langKey = langKey.toLowerCase()
+  const lang = langDict[langKey || 'zh-cn']
+  await loadLanguageAsync(langKey, lang)
+  return await lang.antd()
+}
+
+export const setI18nLanguage = (langKey: string) => {
+  // @ts-ignore
+  i18n.global.locale = langKey
+  return langKey
+}
+export const loadLanguageAsync = async (langKey: string, langDict: LangType) => {
+  const langFile = await langDict.local()
+  // 动态加载对应的语言包
+  i18n.global.setLocaleMessage(langKey, langFile)
+  return setI18nLanguage(langKey) // 返回并且设置
+}
+
 export default i18n
 
 export const { t } = i18n.global

web-vue/src/i18n/locales/index.js

@@ -1,3 +0,0 @@
-import zhCN from './zh_cn.json'
-import enUS from './en_us.json'
-export { zhCN, enUS }