feat: 添加国际化支持 (#79)

Author: YufJi

packages/vue3/source/mobile/src/App.vue

@@ -8,7 +8,14 @@
 
 <script setup>
 import VErrorBoundary from './VErrorBoundary.vue';
-// TODO: 约定一种通用方式
-const locale = window.$libraries?.ElementPlus?.locale?.zhCn;
+import { getUserLanguage } from './i18n';
 
+const { ConfigProvider, transformKeys = v => v } = window.lcapStandardUI;
+
+const { appConfig } = window.appInfo;
+const { i18nInfo } = appConfig;
+// 获取当前语言
+const lang = getUserLanguage(appConfig, i18nInfo.messages);
+// 拿到messages
+const locale = i18nInfo.enabled ? transformKeys(i18nInfo.messages[lang]) : undefined;
 </script>

packages/vue3/source/mobile/src/common/utils.js

@@ -25,7 +25,9 @@ export function installDirectives(vm, directives) {
 }
 
 export function installLibraries(vm, libraries) {
-  window.$libraries = {};
+  if (!window.$libraries) {
+    window.$libraries = {};
+  }
 
   Object.keys(libraries).forEach((key) => {
     window.$libraries[key] = libraries[key];

packages/vue3/source/mobile/src/global-variables.ts

@@ -5,8 +5,7 @@ import { useGlobalStore } from '@/store';
 export const useGlobalVariables = () => {
   const globalStore = useGlobalStore();
 
-  const $frontendVariables = globalStore.frontendVariables;
-  const $userInfo = globalStore.userInfo;
+  const { frontendVariables: $frontendVariables, userInfo, i18nInfo, ...rest } = globalStore;
 
   onBeforeMount(() => {
     const variableSet = window.$localCacheVariableSet;
@@ -34,7 +33,9 @@ export const useGlobalVariables = () => {
   });
 
   return {
-    $frontendVariables,
-    $userInfo,
+    frontendVariables: $frontendVariables,
+    userInfo,
+    i18nInfo,
+    ...rest,
   };
 };

packages/vue3/source/mobile/src/i18n.ts

@@ -0,0 +1,48 @@
+import * as VueI18n from 'vue-i18n'
+
+export function createI18nInstance(appConfig) {
+  let locale = 'zh-CN';
+  if (appConfig.i18nInfo) {
+    const { I18nList, messages } = appConfig.i18nInfo;
+    locale = getUserLanguage(appConfig, messages);
+    // 重置当前生效语言
+    appConfig.i18nInfo.locale = locale;
+    appConfig.i18nInfo.currentLocale = locale;
+    // 设置当前语言名称
+    appConfig.i18nInfo.localeName = I18nList?.find((item) => item.id === locale)?.name;
+  }
+  const i18nInfo = appConfig.i18nInfo;
+
+  const i18n = VueI18n.createI18n({
+    legacy: false,
+    locale,
+    messages: i18nInfo.messages || {},
+  })
+
+  return i18n;
+}
+
+export function getUserLanguage(appConfig, messages = {}) {
+  let locale = localStorage.i18nLocale;
+  // 如果local里没有就读主应用的默认语言
+  if (!messages[locale]) {
+    // 如果当前浏览器的设置也没有，就读取主应用的默认语言
+    locale = navigator.language || navigator.userLanguage;
+
+    if (!messages[locale]) {
+      // 如果不在列表中，获取语言代码的前两位
+      const baseLang = locale.substring(0, 2);
+      const languageList = Object.keys(messages);
+      // 查找列表中是否有与基础语言代码相同的项
+      const match = languageList.find((lang) => lang.startsWith(baseLang));
+      // 如果存在前两位一样的就用这个
+      if (match) {
+        locale = match;
+      } else {
+        // 如果不存在，就用默认语言
+        locale = appConfig.i18nInfo.locale || 'zh-CN';
+      }
+    }
+  }
+  return locale;
+}

packages/vue3/source/mobile/src/init.ts

@@ -23,6 +23,7 @@ import { installComponents, installDirectives, installLibraries } from '@/common
 import { getTitleGuard } from '@/guards';
 
 import App from './App.vue';
+import { createI18nInstance } from './i18n';
 import { setConfig } from './setConfig';
 
 import './index.css';
@@ -120,6 +121,8 @@ const init = (appConfig, platformConfig, routes, metaData) => {
 
   app.use(pinia);
 
+  app.use(createI18nInstance(appConfig));
+
   // rendered 事件
   if (typeof window?.rendered === 'function') {
     window.rendered();

packages/vue3/source/mobile/src/store/global.ts

@@ -1,7 +1,4 @@
 import { defineStore } from 'pinia';
 export const useGlobalStore = defineStore('global', {
-  state: () => ({
-    userInfo: window.$global.userInfo,
-    frontendVariables: window.$global.frontendVariables,
-  }),
+  state: () => window.$global,
 });

packages/vue3/source/pc/src/App.vue

@@ -10,11 +10,12 @@
 import VErrorBoundary from './VErrorBoundary.vue';
 import { getUserLanguage } from './i18n';
 
+const { ConfigProvider, transformKeys = v => v } = window.lcapStandardUI;
+
 const { appConfig } = window.appInfo;
 const { i18nInfo } = appConfig;
 // 获取当前语言
 const lang = getUserLanguage(appConfig, i18nInfo.messages);
 // 拿到messages
-const transformKeys = window.lcapStandardUI?.transformKeys || ((obj) => obj);
 const locale = i18nInfo.enabled ? transformKeys(i18nInfo.messages[lang]) : undefined;
 </script>