gc_i18n 1.0.6 → 1.0.8

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "gc_i18n",
-  "version": "1.0.6",
+  "version": "1.0.8",
   "gc_i18n": {
     "appCode": "TEST"
   },

package/packages/components/language.vue

@@ -0,0 +1,93 @@
+<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>

package/packages/index.js

@@ -1,22 +1,23 @@
 import keyboardJS from "keyboardjs";
 import iview from "view-ui-plus";
+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 LangChange from "./components/LangChange.vue";
-//
+import LanguageTPL from "./components/language.vue";
 import { getTranslate } from "./libs/service";
 import { convertArrayToObject } from "./libs/utils";
 import "./libs/http";
 import _ from "lodash-es";
 import store2 from "store2";
+
 export default class I18n {
   constructor(options = {}) {
     const { router, appCode, messages, token } = options;
     this.token = token || store2.get("token");
     this.appCode = appCode;
     this.router = router;
-    this.locale = navigator.language || "zh-CN";
+    this.locale = store2.get("I18N_LANGUAGE") || navigator.language || "zh-CN";
     this.modalLoad = false;
     this.name = "";
     this.messages = messages || {};
@@ -35,7 +36,7 @@ export default class I18n {
     // 保存原始的 t 方法
     const originalT = this.i18n.global.t;
     // 自定义 t 方法
-    this.i18n.global.t = (key, args) => {
+    this.i18n.global.t = (key, args, comment) => {
       const routeName = _.toUpper(router?.currentRoute?.value?.name);
       // 使用原始的 t 方法进行翻译
       const originalTranslation = originalT(key);
@@ -43,13 +44,14 @@ export default class I18n {
       if (originalTranslation === key && routeName) {
         const prefixedKey = `${routeName}.${key}`;
         // 同样使用原始的 t 方法进行翻译
-        const routeTranslation = originalT(prefixedKey);
+        const routeTranslation = originalT(prefixedKey, args);
 
         if (routeTranslation !== prefixedKey) {
           return routeTranslation;
         } else {
-          if (args && _.has(args, "comment")) {
-            return _.get(args, "comment");
+          if (comment) {
+            console.log(`找不到"${key}",使用"${comment}"`);
+            return comment;
           } else {
             return key;
           }
@@ -58,7 +60,7 @@ export default class I18n {
       return originalTranslation;
     };
 
-    this.i18n.global.changeLocal = (newLocale) => {
+    this.i18n.global.changeLocale = (newLocale) => {
       this.setLanguage(newLocale || this.locale);
     };
     this.createModal();
@@ -67,22 +69,9 @@ export default class I18n {
       this.configInstance && this.configInstance.closeModal();
       this.name = to.name;
       token && this.setToken(token);
-      await this.setLanguage(language);
+      await this.setLanguage(language || this.locale);
       next();
     });
-    // router.afterEach((to, from) => {
-    //   nextTick(() => {
-    //     console.log("this.configInstance", this.configInstance);
-
-    //     if (!this.configInstance) {
-    //       console.log("to", to, to.name);
-    //       this.name = to.name;
-    //     } else {
-    //       this.configInstance.closeModal();
-    //       this.configInstance = null;
-    //     }
-    //   });
-    // });
     keyboardJS.bind("shift > t", (e) => {
       // 打开弹窗
       this.configInstance.openModal({ name: this.name }); // 调用 openModal 方法
@@ -107,6 +96,7 @@ export default class I18n {
       }
       this.locale = language;
       this.i18n.global.locale.value = language;
+      store2.set("I18N_LANGUAGE", language);
       resolve(true);
     });
   }
@@ -122,11 +112,26 @@ export default class I18n {
       .use(iview)
       .mount(document.createElement("div")); // 挂载到一个临时的 div
   }
-  install(app, { router }) {
-    app.use(this.i18n);
+  Language() {
+    return {
+      setup: () => {
+        return {
+          token: this.token
+        };
+      },
+      components: {
+        LanguageTPL
+      },
+      template: `<LanguageTPL :token='token'></LanguageTPL>`
+    };
+  }
+  install(app, opts = {}) {
     app.use(iview, {
       i18n: this.i18n
     });
-    app.component("LangChange", LangChange);
+    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/service.js

@@ -62,7 +62,7 @@ export const saveTranslate = async (data, token) => {
 export const getTranslate = async ({ appCode, language = "zh-CN", token }) => {
   return new Promise(async (resolve, reject) => {
     // const appCodeStore = i18nStore.get(appCode);
-    const languageStore = store2.namespace(`i18n_${appCode}`);
+    const languageStore = store2.namespace(`I18N_${_.toUpper(appCode)}`);
     const options = {
       appCode,
       language,
@@ -92,7 +92,7 @@ export const getTranslate = async ({ appCode, language = "zh-CN", token }) => {
             lastPullDate: res.lastPullDate,
             translatesDTOs: data
           };
-          const languageStore = store2.namespace(`i18n_${appCode}`);
+          const languageStore = store2.namespace(`I18N_${_.toUpper(appCode)}`);
           languageStore.set(language, saveData, ":"); // Only update the specific key
           resolve(data);
         } else {

package/src/main.js

@@ -2,16 +2,17 @@ import { createApp } from "vue";
 import App from "./App.vue";
 import gc_i18n from "../packages/index";
 import router from "./router/index";
-import "view-ui-plus/dist/styles/viewuiplus.css";
-import iview from "view-ui-plus";
+import zh from "view-ui-plus/dist/locale/zh-CN";
 
-const { i18n } = new gc_i18n({
+const i18n = new gc_i18n({
   appCode: "TEST",
   router,
-  messages: {}
+  messages: {
+    "zh-CN": zh
+  }
 });
 console.log("i18n", i18n);
 
-const app = createApp(App).use(router).use(iview).use(i18n);
+const app = createApp(App).use(router).use(i18n);
 
 app.mount("#app");

package/src/router/index.js

@@ -7,9 +7,9 @@ const routes = [
     component: () => import("../view/Home.vue")
   },
   {
-    path: "/BOOK",
-    name: "BOOK",
-    component: () => import("../view/book.vue")
+    path: "/BOATNOTICE",
+    name: "BOATNOTICE",
+    component: () => import("../view/BOATNOTICE.vue")
   }
 ];
 const router = createRouter({

package/src/view/{book.vue → BOATNOTICE.vue}

@@ -1,6 +1,6 @@
 <script setup>
 import { useI18n } from "vue-i18n";
-const { locale, changeLocal } = useI18n();
+const { locale, changeLocale } = useI18n();
 
 defineProps({
   msg: String
@@ -19,32 +19,38 @@ const langs = [
     code: "zh-TW"
   }
 ];
+const total = 100;
 const change = (lang) => {
-  changeLocal(lang);
+  changeLocale(lang);
 };
 </script>
 
 <template>
   <div>
-    {{ locale }}
+    <div>当前语言: {{ locale }}</div>
     <Button
       v-for="item in langs"
       :type="item.code === locale ? 'primary' : 'default'"
       @click="change(item.code)"
       >{{ item.label }}</Button
     >
-    <!-- <div>
+    <div>
       <div>带路由前缀:</div>
-      <div>{{ $t("BOOK.KAIHANGSHIJIAN", { comment: "找不到" }) }}</div>
-    </div> -->
+      <div>{{ $t("BOATNOTICE.DAOCHU", "找不到2") }}</div>
+    </div>
+
+    <div>
+      <div>有变量的:</div>
+      <div>{{ $t("HJ: {0}GT", [total], "合xxx计:{0}条") }}</div>
+    </div>
     <div>
       <div>不带前缀:</div>
-      <div>{{ $t("KAIHANGSHIJIAN", { comment: "找不到" }) }}</div>
+      <div>{{ $t("DAOCHU", "找不到") }}</div>
       <!-- <div>{{ $t("中文{0}", [{ comment: "找不到" }]) }}</div> -->
     </div>
     <div>
       <div>完全找不到的数据:</div>
-      <div>{{ $t("BOOK.KAIHANGSHIJIAN", { comment: "找不到" }) }}</div>
+      <div>{{ $t("ggbb", "找不到") }}</div>
     </div>
     <Page
       :total="40"

package/src/view/Home.vue

@@ -9,4 +9,5 @@ const change = (lang) => {
 
 <template>
   {{ locale }}
+  <Language :more="true"></Language>
 </template>

package/vite.config.js

@@ -37,6 +37,10 @@ export default defineConfig({
       }
     },
     outDir: "lib"
+    // outDir:
+    //   "/Users/huqiliang/Documents/lvyun/newipms-front/node_modules/gc_i18n/lib",
+    // outDir:
+    //   "/Users/huqiliang/Documents/lvyun/travel-ship-standard-front/node_modules/gc_i18n/lib"
   },
   plugins: [vue(), vueJsx(), libCss()]
 });

package/packages/components/LangChange.vue

@@ -1,38 +0,0 @@
-<script>
-import { getLanguages } from "../libs/service";
-export default {
-  name: "LangChange",
-  data() {
-    return {
-      languages: [],
-      language: ""
-    };
-  },
-  props: {
-    more: {
-      type: Boolean,
-      default: false
-    }
-  },
-  async mounted() {
-    this.language = navigator.language || "zh-CN";
-    const res = await getLanguages();
-    if (res && res.result === 0) {
-      this.languages = res.retVal;
-    }
-  }
-};
-</script>
-<template>
-  <div>
-    <div v-if="more">
-      <span>切换语种</span>
-    </div>
-    <Select
-      v-model="language"
-      v-else
-    >
-      <Option value="zh-CN">中文</Option>
-    </Select>
-  </div>
-</template>