gc_i18n 1.0.9 → 1.1.1

package/packages/index.js

@@ -4,100 +4,216 @@ import "view-ui-plus/dist/styles/viewuiplus.css";
 import { createApp, nextTick } from "vue";
 import { createI18n } from "vue-i18n";
 import configVue from "./components/config.vue";
-import LanguageTPL from "./components/language.vue";
-import { getTranslate } from "./libs/service";
+import { getLanguages, getTranslate } from "./libs/service";
 import { convertArrayToObject } from "./libs/utils";
+import { extractTranslationKeys } from "./libs/i18nUtils";
 import "./libs/http";
 import _ from "lodash-es";
 import store2 from "store2";
 
+import { jws } from "jsrsasign";
+
+// 生成 JWT 的函数
+function generateJWT(orgCode) {
+  const header = {
+    alg: "HS512" // 算法
+  };
+  const payload = {
+    orgCode
+  };
+  const sHeader = JSON.stringify(header);
+  const sPayload = JSON.stringify(payload);
+  const secret = "";
+  // 同步生成 JWT
+  return jws.JWS.sign("HS512", sHeader, sPayload, secret);
+}
 export default class I18n {
   constructor(options = {}) {
-    const { router, appCode, messages, token } = options;
-    this.token = token || store2.get("token");
+    const { router, appCode, messages, token, orgCode } = options;
+    this.token = token || generateJWT(orgCode);
     this.appCode = appCode;
     this.router = router;
     this.locale = store2.get("I18N_LANGUAGE") || navigator.language || "zh-CN";
     this.modalLoad = false;
     this.name = "";
     this.messages = messages || {};
+    this.translationKeys = [];
+
+    // 初始化路由守卫
+    this.initRouterGuards();
+
+    // 初始化 i18n 实例
+    this.initI18n(options);
+
+    // 路由首次加载完成后设置语言
+    this.router
+      .isReady()
+      .then(async () => {
+        await this.setLanguage(this.locale);
+        this.createModal();
+      })
+      .catch((error) => {
+        console.error("路由首次加载出错:", error);
+      });
+
+    keyboardJS.bind("shift > t", (e) => {
+      // 打开弹窗
+      this.configInstance.openModal({ name: this.name });
+    });
+
+    // 监听浏览器语言变化
+    this.setupLanguageChangeListener();
+  }
+
+  // 监听浏览器语言变化
+  setupLanguageChangeListener() {
+    if ("onlanguagechange" in window) {
+      window.addEventListener("languagechange", () => {
+        const newBrowserLanguage = navigator.language;
+        if (newBrowserLanguage !== this.locale) {
+          this.setLanguage(newBrowserLanguage);
+        }
+      });
+    }
+  }
+
+  // 初始化路由守卫
+  initRouterGuards() {
+    this.router.beforeEach(async (to, from, next) => {
+      const { language, token } = to.query;
+      this.configInstance && this.configInstance.closeModal();
+      this.name = to.name;
+      token && this.setToken(token);
+      // await this.setLanguage(language || this.locale);
+      if (to.matched.length > 0) {
+        let component = to.matched[0].components.default;
+        if (
+          typeof component === "function" &&
+          component.toString().includes("import(")
+        ) {
+          try {
+            component = await component();
+            component = component.default;
+          } catch (error) {
+            console.error("加载异步组件时出错:", error);
+            next();
+            return;
+          }
+        }
+        this.translationKeys = extractTranslationKeys(component);
+      }
+      next();
+    });
+  }
+
+  // 初始化 i18n 实例
+  initI18n(options) {
     this.i18n = createI18n({
-      locale: "zh-CN",
+      locale: this.locale,
       allowComposition: true,
       globalInjection: true,
       legacy: false,
-      silentTranslationWarn: true, // 屏蔽翻译未找到的警告
-      silentFallbackWarn: true, // 屏蔽回退语言的警告
-      missingWarn: false, // 屏蔽缺失翻译的警告
-      fallbackWarn: false, // 屏蔽回退过程中的警告
+      silentTranslationWarn: true,
+      silentFallbackWarn: true,
+      missingWarn: false,
+      fallbackWarn: false,
       ...options
     });
 
-    // 保存原始的 t 方法
     const originalT = this.i18n.global.t;
-    // 自定义 t 方法
-    this.i18n.global.t = (key, args, comment) => {
-      const routeName = _.toUpper(router?.currentRoute?.value?.name);
-      // 使用原始的 t 方法进行翻译
+
+    globalThis.$t = this.i18n.global.t = (key, args, comment) => {
+      const routeName = _.toUpper(this.router?.currentRoute?.value?.name);
       const originalTranslation = originalT(key, args);
-      // 如果没有找到翻译值，尝试使用路由名.key
-      if (originalTranslation === key && routeName) {
+      if (
+        (originalTranslation === key || originalTranslation === args) &&
+        routeName
+      ) {
         const prefixedKey = `${routeName}.${key}`;
-        // 同样使用原始的 t 方法进行翻译
         const routeTranslation = originalT(prefixedKey, args);
-
-        if (routeTranslation !== prefixedKey) {
+        if (routeTranslation !== prefixedKey && routeTranslation !== args) {
           return routeTranslation;
         } else {
-          if (comment) {
-            console.log(`找不到"${key}",使用"${comment}"`);
-            return comment;
+          const commonKey = `common.${key}`;
+          const commonTranslation = originalT(commonKey, args);
+          if (commonTranslation !== commonKey) {
+            return commonTranslation;
           } else {
-            return key;
+            if (comment) {
+              console.log(`找不到"${key}",使用"${comment}"`);
+              return comment;
+            } else {
+              return key;
+            }
           }
         }
       }
       return originalTranslation;
     };
 
-    this.i18n.global.changeLocale = (newLocale) => {
-      this.setLanguage(newLocale || this.locale);
+    globalThis.$deepScan = function (val) {
+      return val;
     };
-    this.createModal();
-    router.beforeEach(async (to, from, next) => {
-      const { language, token } = to.query;
-      this.configInstance && this.configInstance.closeModal();
-      this.name = to.name;
-      token && this.setToken(token);
-      await this.setLanguage(language || this.locale);
-      next();
-    });
-    keyboardJS.bind("shift > t", (e) => {
-      // 打开弹窗
-      this.configInstance.openModal({ name: this.name }); // 调用 openModal 方法
-    });
+
+    globalThis.$t = (key, val, nameSpace) => {
+      const languageStore = store2.namespace(`I18N_${_.toUpper(this.appCode)}`);
+      const message = _.get(languageStore.get(this.locale), "translatesDTOs");
+      // 获取i18n语言数据
+      const value = _.find(message, (val) => {
+        return `common.${key}` === val.key;
+      });
+      return _.get(value, "value", val);
+    };
+    globalThis.$changeLocale =
+      this.changeLocale =
+      this.i18n.global.changeLocale =
+        async (newLocale) => {
+          await this.setLanguage(newLocale || this.locale);
+        };
   }
   setToken(token) {
     this.token = token;
   }
-  async setLanguage(language = "zh-CN") {
+  getLanguage(language) {
+    return store2.get("I18N_TEST.zh-TW");
+  }
+  async getLanguages(isRemote = false) {
+    const langs = store2.get("I18N_LANGUAGES");
+    if (langs && !isRemote) {
+      return langs;
+    } else {
+      const res = await getLanguages({
+        appCode: this.appCode,
+        token: this.token
+      });
+      if (res.data) {
+        const languages = _.get(res.data, "retVal");
+        store2.set("I18N_LANGUAGES", languages);
+        return languages;
+      }
+    }
+  }
+  async setLanguage(language) {
     return new Promise(async (resolve, reject) => {
       const res = await getTranslate({
         appCode: this.appCode,
-        language,
+        language: language ? language : this.locale,
         token: this.token
       });
       if (res) {
-        const messages = convertArrayToObject(res);
-        console.log("messages", messages, language);
-        this.i18n.global.setLocaleMessage(
-          language,
-          _.assign({}, _.get(this.messages, language), messages)
+        const remoteMessages = convertArrayToObject(res);
+        const messages = _.assign(
+          {},
+          _.get(this.messages, language),
+          remoteMessages
         );
+        this.i18n.global.setLocaleMessage(language, messages);
       }
+      // if (language !== this.locale) {
       this.locale = language;
       this.i18n.global.locale.value = language;
       store2.set("I18N_LANGUAGE", language);
+      // }
       resolve(true);
     });
   }
@@ -108,31 +224,16 @@ export default class I18n {
       appCode: this.appCode,
       token: this.token,
       setLanguage: this.setLanguage.bind(this, this.locale),
-      name: this.name
+      name: this.name,
+      translationKeys: this.translationKeys
     })
       .use(iview)
       .mount(document.createElement("div")); // 挂载到一个临时的 div
   }
-  Language() {
-    return {
-      setup: () => {
-        return {
-          token: this.token
-        };
-      },
-      components: {
-        LanguageTPL
-      },
-      template: `<LanguageTPL :token='token'></LanguageTPL>`
-    };
-  }
   install(app, opts = {}) {
     app.use(iview, {
       i18n: this.i18n
     });
-    app.config.globalProperties.$t = this.i18n.global.t;
-    app.config.globalProperties.$i18n = this.i18n;
-    app.component("Language", this.Language());
     app.use(this.i18n);
   }
 }

package/packages/libs/http.js

@@ -33,7 +33,7 @@ axios.interceptors.response.use(
     } else {
       res.data.success = true;
     }
-    return res.data;
+    return res;
   },
   (err) => {
     if (err.response) {

package/packages/libs/i18nUtils.ts

@@ -0,0 +1,53 @@
+export function extractTranslationKeys(component: any): string[] {
+    const keys: string[] = [];
+    // 优化后的正则表达式，兼容 $t 和 _ctx.$t 的情况
+    const regex = /(?:\$t|_ctx\.\$t)\s*\(\s*(['"])([^'"]+?)\1/gs;
+
+    // 解析组件选项中的模板
+    if (component.template) {
+        let match;
+        while ((match = regex.exec(component.template)) !== null) {
+            // 提取第二个捕获组的内容，即引号内的值
+            keys.push(match[2]);
+        }
+    }
+
+    // 解析组件选项中的渲染函数
+    if (component.render) {
+        const renderCode = component.render.toString();
+        let match;
+        while ((match = regex.exec(renderCode)) !== null) {
+            keys.push(match[2]);
+        }
+    }
+
+    // 解析组件的 setup 函数或 methods 中的 JS 代码
+    if (component.setup) {
+        const setupCode = component.setup.toString();
+        let match;
+        while ((match = regex.exec(setupCode)) !== null) {
+            keys.push(match[2]);
+        }
+    }
+
+    if (component.methods) {
+        for (const methodName in component.methods) {
+            const methodCode = component.methods[methodName].toString();
+            let match;
+            while ((match = regex.exec(methodCode)) !== null) {
+                keys.push(match[2]);
+            }
+        }
+    }
+
+    // 递归处理子组件
+    if (component.components) {
+        for (const childComponentName in component.components) {
+            const childComponent = component.components[childComponentName];
+            keys.push(...extractTranslationKeys(childComponent));
+        }
+    }
+
+    // 合并同名的 key，利用 Set 去重
+    return [...new Set(keys)];
+}

package/packages/libs/service.js

@@ -33,8 +33,8 @@ export const fetchTranslate = async ({
         Authorization: token
       }
     });
-    if (res && res.result == 0) {
-      resolve(res.retVal);
+    if (res.data && res.data.result == 0) {
+      resolve(res.data.retVal);
     } else {
       resolve(res);
     }

package/src/main.js

@@ -7,12 +7,12 @@ import zh from "view-ui-plus/dist/locale/zh-CN";
 const i18n = new gc_i18n({
   appCode: "TEST",
   router,
+  orgCode: "GREENCLOUD",
   messages: {
     "zh-CN": { ...zh, test: "合计{0}条" }
   }
 });
-console.log("i18n", i18n);
-
+window.i18n = i18n;
 const app = createApp(App).use(router).use(i18n);
 
 app.mount("#app");

package/src/view/BOATNOTICE.vue

@@ -1,7 +1,7 @@
 <script setup>
 import { useI18n } from "vue-i18n";
 const { locale, changeLocale } = useI18n();
-
+import { ref } from "vue";
 defineProps({
   msg: String
 });
@@ -19,6 +19,7 @@ const langs = [
     code: "zh-TW"
   }
 ];
+const TEST = ref($t("gbfb"));
 const total = [100];
 const change = (lang) => {
   changeLocale(lang);
@@ -40,17 +41,61 @@ const change = (lang) => {
     </div>
 
     <div>
-      <div>有变量的:</div>
-      <div>{{ $t("test", total) }}</div>
+      <div>有变量的xxx:</div>
+      <div>{{ $t("test", total, "找不到test") }}</div>
     </div>
     <div>
       <div>不带前缀:</div>
-      <div>{{ $t("DAOCHU", "找不到") }}</div>
+      <div>{{ $t("xwlywz7", "找不到") }}</div>
       <!-- <div>{{ $t("中文{0}", [{ comment: "找不到" }]) }}</div> -->
     </div>
     <div>
-      <div>完全找不到的数据:</div>
-      <div>{{ $t("ggbb", "找不到") }}</div>
+      <div>测试:</div>
+      <div>{{ $t("ewzh2", "找不到") }}</div>
+    </div>
+    <div>
+      <div>测试:</div>
+      <div>{{ $t("4j3dy81", "找不到") }}</div>
+    </div>
+    <div>
+      <div>测试:</div>
+      <div>{{ $t("4j3dy82", "找不到") }}</div>
+    </div>
+    <div>
+      <div>测试:</div>
+      <div>{{ $t("4j3dy83", "找不到") }}</div>
+    </div>
+    <div>
+      <div>测试:</div>
+      <div>{{ $t("4j3dy85", "找不到") }}</div>
+    </div>
+    <div>
+      <div>测试:</div>
+      <div>{{ $t("4j3dy84", "找不到") }}</div>
+    </div>
+    <div>
+      <div>测试:</div>
+      <div>{{ $t("4j3dy87", "找不到") }}</div>
+    </div>
+    <div>
+      <div>测试:</div>
+      <div>{{ $t("4j3dy88", "找不到") }}</div>
+    </div>
+    <div>
+      <div>测试:</div>
+      <div>{{ $t("4j3dy86", "找不到") }}</div>
+    </div>
+    <div>
+      <div>测试:</div>
+      <div>{{ $t("4j3dy86", "找不到") }}</div>
+    </div>
+    <div>
+      <div>测试:</div>
+      <div>{{ $t("4j3dy86", "找不到") }}</div>
+    </div>
+    <div>
+      <div>测试:</div>
+      <div>{{ $t("4j3dy86", "找不到") }}</div>
     </div>
     <Page
       :total="40"

package/src/view/Home.vue

@@ -2,12 +2,16 @@
 import { useI18n } from "vue-i18n";
 const { locale, changeLocal } = useI18n();
 
-const change = (lang) => {
-  changeLocal(lang);
+const change = async (lang) => {
+  const res = await i18n.getLanguages();
+  console.log("res", res);
+  // locale.value = lang;
 };
 </script>
 
 <template>
   {{ locale }}
-  <Language :more="true"></Language>
+  {{ $t("home", "主页", "lang") }}
+  <button @click="change('en')">en</button>
+  <button @click="change('zh')">zh</button>
 </template>

package/vite.config.js

@@ -19,7 +19,16 @@ export default defineConfig({
     rollupOptions: {
       terserOptions: false,
       // 确保外部化处理那些你不想打包进库的依赖
-      external: ["vue", "axios", "lodash-es", "view-ui-plus"],
+      external: [
+        "vue",
+        "axios",
+        "lodash-es",
+        "view-ui-plus",
+        "store2",
+        "jsrsasign",
+        "vue-i18n",
+        "keyboardjs"
+      ],
       output: {
         // 在 UMD 构建模式下为这些外部化的依赖提供一个全局变量
         globals: {
@@ -38,9 +47,9 @@ export default defineConfig({
     },
     outDir: "lib"
     // outDir:
-    //   "/Users/huqiliang/Documents/lvyun/dpms-front/node_modules/gc_i18n/lib"
+    //   "/Users/huqiliang/Documents/github/auto-i18n-translation-plugins/example/vue3/node_modules/gc_i18n/lib"
     // outDir:
-    //   "/Users/huqiliang/Documents/lvyun/travel-ship-standard-front/node_modules/gc_i18n/lib"
+    //   "/Users/huqiliang/Documents/lvyun/dpms-front/node_modules/gc_i18n/lib"
   },
   plugins: [vue(), vueJsx(), libCss()]
 });

package/packages/components/language.vue

@@ -1,93 +0,0 @@
-<script>
-import { getLanguages } from "../libs/service";
-import store from "store2";
-import _ from "lodash-es";
-import { useI18n } from "vue-i18n";
-
-export default {
-  setup() {
-    const { changeLocal, locale } = useI18n();
-    return {
-      changeLocal,
-      locale
-    };
-  },
-  name: "LangChange",
-  data() {
-    return {
-      languages: []
-    };
-  },
-  props: {
-    token: String,
-    simple: {
-      type: Boolean,
-      default: false
-    }
-  },
-  methods: {
-    toggle() {
-      const langToggle = _.find(
-        this.languages,
-        (item) => item.code !== this.locale
-      );
-
-      this.changeLocal(langToggle.code);
-    }
-  },
-  async mounted() {
-    this.language = store.get("I18N_LANGUAGE") || navigator.language;
-    const res = await getLanguages(this.token);
-    if (res && res.result === 0) {
-      this.languages = res.retVal;
-    }
-  }
-};
-</script>
-<template>
-  <div
-    class="gc_i18n_language"
-    v-if="languages && languages.length > 0"
-  >
-    <div v-if="languages.length === 1">
-      <span>{{ languages[0].name }}</span>
-    </div>
-    <div
-      v-else-if="languages.length === 2"
-      class="two"
-    >
-      <span
-        class="item"
-        v-for="item in languages"
-        @click="toggle"
-        :class="item.code == locale ? 'active' : 'hide'"
-        >{{ item.name }}</span
-      >
-    </div>
-    <Select
-      :modelValue="locale"
-      @on-change="changeLocal"
-      v-else
-    >
-      <Option
-        :value="item.code"
-        :label="item.name"
-        v-for="item in languages"
-        >{{ item.name }}</Option
-      >
-    </Select>
-  </div>
-</template>
-
-<style lang="less" scoped>
-.gc_i18n_language {
-  .two {
-    .item {
-      cursor: pointer;
-    }
-    .hide {
-      display: none;
-    }
-  }
-}
-</style>