yh-i18n 1.3.0 → 2.0.0

package/index.js

@@ -1,6 +1,7 @@
 import { reactive, ref, computed } from "vue";
 import { defineStore } from "pinia";
 import { createI18n } from "vue-i18n";
+import languageVue from "./language.vue";
 import axios from "@/libs/api.request";
 
 // base
@@ -24,12 +25,18 @@ import el_vi from "element-plus/dist/locale/vi.mjs";
 import el_tr from "element-plus/dist/locale/tr.mjs";
 
 // 自动根据浏览器系统语言设置语言
-const navLang = navigator.language;
+const navLang = navigator.language.replace("-", "_");
 const initlang = localStorage.translateLanguage || navLang || "zh_CN";
 
 export let i18n = null;
-window.translateReady = !!localStorage.translateReady || false;
+window.translateReady = !!localStorage.translateReady || import.meta.env.DEV;
 const isDev = window.translateReady;
+
+const keySet = new Set();
+Object.keys(zhCNBase).forEach((key) => {
+  keySet.add(key);
+});
+
 function addTranslate(key) {
   if (key.indexOf("vxe") === -1) {
     try {
@@ -46,10 +53,6 @@ function addTranslate(key) {
     }
   }
 }
-const keySet = new Set();
-Object.keys(zhCNBase).forEach((key) => {
-  keySet.add(key);
-});
 
 export const ct = (key, args) => {
   if (isDev) {
@@ -65,6 +68,7 @@ export const ct = (key, args) => {
   }
 };
 
+/** i18n 相关的 store */
 export const useI18nStore = defineStore("i18nStore", () => {
   const lang = ref(initlang);
   /**
@@ -155,33 +159,15 @@ export const useI18nStore = defineStore("i18nStore", () => {
   };
 });
 
-async function createMessage(list) {
-  let messages = {};
-  list.forEach((item) => {
-    switch (item) {
-      case "zh_CN":
-        messages["zh_CN"] = Object.assign(zhCNBase, zhCNVXETable);
-        break;
-      case "en_US":
-        messages["en_US"] = Object.assign(enUSBase, enUSVXETable);
-        break;
-      case "th":
-        messages["th"] = Object.assign(thBase, thVXETable);
-        break;
-
-      case "vi":
-        messages["vi"] = Object.assign(viBase, viVXETable);
-        break;
-
-      case "tr":
-        messages["tr"] = Object.assign(trBase, trVXETable);
-        break;
-
-      default:
-        break;
-    }
-  });
+async function getRemoteMessage(list) {
   try {
+    let messages = {
+      zh_CN: {},
+      en_US: {},
+      th: {},
+      vi: {},
+      tr: {},
+    };
     let {
       data: { data },
     } = await axios.request({
@@ -200,31 +186,50 @@ async function createMessage(list) {
           keySet.add(mKey);
         }
         Object.entries(itemObj).forEach(([key, val]) => {
-          if (list.includes(key)) {
-            if (!messages[key][mKey]) {
-              messages[key][mKey] = val;
-            }
+          if (!messages[key][mKey]) {
+            messages[key][mKey] = val;
           }
         });
       } catch (err) {
-        console.error(err);
+        if (isDev) {
+          console.error(err);
+        }
       }
     });
+    list.forEach((key) => {
+      let m = i18n.global.getLocaleMessage(key);
+      i18n.global.setLocaleMessage(key, Object.assign(m, messages[key]));
+    });
   } catch (error) {}
-  return messages;
 }
 
-/**
- *
- * @param {import("vue").App} app
- * @param {I18nList[]} list
- */
-export async function initI18n(list) {
-  let messages = await createMessage(list);
-  i18n = createI18n({
-    locale: initlang,
-    messages,
+function createLocalMessage(list) {
+  let messages = {};
+  list.forEach((item) => {
+    switch (item) {
+      case "zh_CN":
+        messages["zh_CN"] = Object.assign(zhCNBase, zhCNVXETable);
+        break;
+      case "en_US":
+        messages["en_US"] = Object.assign(enUSBase, enUSVXETable);
+        break;
+      case "th":
+        messages["th"] = Object.assign(thBase, thVXETable);
+        break;
+
+      case "vi":
+        messages["vi"] = Object.assign(viBase, viVXETable);
+        break;
+
+      case "tr":
+        messages["tr"] = Object.assign(trBase, trVXETable);
+        break;
+
+      default:
+        break;
+    }
   });
+  return messages;
 }
 
 export function addI18nPage(router) {
@@ -240,3 +245,77 @@ export function addI18nPage(router) {
     });
   }
 }
+
+export function cLog(string, isError = false) {
+  if (isError) {
+    console.error(
+      "%cyhI18n：",
+      "font-size: 16px;font-weight: bold;color: #61AFEF",
+      string
+    );
+  } else {
+    console.log(
+      "%cYHI18n",
+      "font-size: 18px;font-weight: bold;color: #61AFEF",
+      string
+    );
+  }
+}
+
+export const yhI18n = {
+  install(app, config) {
+    let { list, router, pinia, VXETable } = config;
+    if (!list) {
+      cLog(
+        "请设置 Config.i18nList ,并将其设置到 yhI18n 的 congfig.list 上，否则 国际化插件将失效"
+      );
+      return false;
+    }
+    let messages = createLocalMessage(list);
+    i18n = createI18n({
+      locale: initlang,
+      messages,
+    });
+    app.use(i18n);
+    app.config.globalProperties.$T = ct;
+
+    if (!isDev) {
+      cLog(
+        "没有开启翻译管理，可以在开发环境或者在控制台运行后面的代码再刷新页面： `localStorage.translateLanguage = '1'`"
+      );
+    }
+    if (router && isDev) {
+      addI18nPage(router);
+    } else {
+      if (!router) {
+        cLog("没有传递 router 对象，所以无法将翻译管理页面添加到应用中", true);
+      }
+    }
+
+    if (pinia) {
+      const i18nStore = useI18nStore(pinia);
+      i18nStore.setLocalList(list);
+    } else {
+      if (!pinia) {
+        cLog("没有传递 router 对象，所以无法为国际化插件设置语言列表", true);
+      }
+    }
+    if (VXETable) {
+      VXETable.setup({
+        i18n: (key, args) => ct(key, args),
+        translate: (key, args) => ct(key, args),
+      });
+    } else {
+      if (!pinia) {
+        cLog(
+          "没有传递 VXETable 对象，所以无法为 SLW 和 VXETable 设置国际化",
+          true
+        );
+      }
+    }
+
+    getRemoteMessage(list);
+  },
+};
+
+export const Language = languageVue;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "yh-i18n",
-  "version": "1.3.0",
+  "version": "2.0.0",
   "description": "对于国际化的封装",
   "main": "index.js",
   "scripts": {