yh-i18n 2.3.15 → 3.0.4

package/index.d.ts

@@ -3,13 +3,27 @@ import {Plugin, Component} from 'vue';
 import {StoreDefinition} from 'pinia';
 
 /**
- * zh_CN 简体中文
- * en_US 英语（美国）
- * th 泰语（泰国）
- * vi 越南语（越南）
- * tr 土耳其语（土耳其）
+ * 语言定义
  */
-type I18nList = 'zh_CN' | 'en_US' | 'th' | 'vi' | 'tr' | 'fa_IR';
+interface LangDefinition {
+  /** 语言键名，如 "zh_CN"、"th" */
+  key: string;
+  /** 显示名称（原始语言），如 "中文"、"ไทย" */
+  nativeName: string;
+  /** 列表显示名称，如 "中文简体"、"English" */
+  label: string;
+  /** 基础翻译数据 */
+  base: Record<string, string>;
+  /** VXETable 翻译数据（可选） */
+  vxe?: Record<string, any>;
+  /** element-plus 语言包（可选） */
+  elementLocale?: any;
+}
+
+/**
+ * 内置语言键，其他语言通过 string 扩展
+ */
+type I18nList = 'zh_CN' | 'en_US' | string;
 
 declare global {
   interface Window {
@@ -17,6 +31,10 @@ declare global {
     translateReady: boolean;
   }
 }
+
+/** 注册语言包 */
+export function registerLang(def: LangDefinition): void;
+
 /** 国际化组件实例 */
 export const i18n: I18n;
 

package/index.js

@@ -1,45 +1,33 @@
-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
-import zhCNBase from "./lang/baseZhCn.js";
-import enUSBase from "./lang/baseEnUS.js";
-import thBase from "./lang/baseTh.js";
-import viBase from "./lang/baseVi.js";
-import trBase from "./lang/baseTr.js";
-import faBase from "./lang/baseFa.js"
-// vxe table
-import zhCNVXETable from "./lang/zh.js";
-import enUSVXETable from "./lang/en.js";
-import thVXETable from "./lang/th.js";
-import viVXETable from "./lang/vi.js";
-import trVXETable from "./lang/tr.js";
-import faVXETable from "./lang/fa.js"
-
-// element-plus
-import el_zh_CN from "element-plus/dist/locale/zh-cn.mjs";
-import el_en_US from "element-plus/dist/locale/en.mjs";
-import el_th from "element-plus/dist/locale/th.mjs";
-import el_vi from "element-plus/dist/locale/vi.mjs";
-import el_tr from "element-plus/dist/locale/tr.mjs";
-import el_fa from "element-plus/dist/locale/fa.mjs";
+import {reactive, ref, computed} from 'vue';
+import {defineStore} from 'pinia';
+import {createI18n} from 'vue-i18n';
+import languageVue from './language.vue';
+import newLanguageVue from './newLanguage.vue';
+import axios from '@/libs/api.request';
+
+// 内置语言包
+import zhCNBase from './lang/baseZhCn.js';
+import enUSBase from './lang/baseEnUS.js';
+import zhCNVXETable from './lang/zh.js';
+import enUSVXETable from './lang/en.js';
+import el_zh_CN from 'element-plus/dist/locale/zh-cn.mjs';
+import el_en_US from 'element-plus/dist/locale/en.mjs';
 
 // 自动根据浏览器系统语言设置语言
-let navLang = navigator.language.replace("-", "_");
-if (navLang.indexOf("en") > -1 && navLang !== "en_US") {
-  navLang = "en_US";
+let navLang = navigator.language.replace('-', '_');
+if (navLang.indexOf('en') > -1 && navLang !== 'en_US') {
+  navLang = 'en_US';
 }
 
-if (navLang.indexOf("zh") > -1 && navLang !== "zh_CN") {
-  navLang = "zh_CN";
+if (navLang.indexOf('zh') > -1 && navLang !== 'zh_CN') {
+  navLang = 'zh_CN';
 }
-const initlang = localStorage.translateLanguage || navLang || "zh_CN";
+const initlang = localStorage.translateLanguage || navLang || 'zh_CN';
 
 export let i18n = null;
-window.translateReady = localStorage.translateReady ? localStorage.translateReady === "1" : import.meta.env.DEV;
+window.translateReady = localStorage.translateReady
+  ? localStorage.translateReady === '1'
+  : import.meta.env.DEV;
 let contentReady = false;
 
 const keySet = new Set();
@@ -50,25 +38,50 @@ Object.keys(zhCNBase).forEach((key) => {
 
 const unHandle = [];
 
-function addTranslate (name) {
-  if (name && name.indexOf("vxe") === -1) {
+// 语言注册表
+const langRegistry = new Map();
+
+function registerLang(def) {
+  langRegistry.set(def.key, def);
+}
+
+// 注册内置语言
+registerLang({
+  key: 'zh_CN',
+  nativeName: '中文',
+  label: '中文简体',
+  base: zhCNBase,
+  vxe: zhCNVXETable,
+  elementLocale: el_zh_CN,
+});
+registerLang({
+  key: 'en_US',
+  nativeName: 'English',
+  label: 'English',
+  base: enUSBase,
+  vxe: enUSVXETable,
+  elementLocale: el_en_US,
+});
+
+function addTranslate(name) {
+  if (name && name.indexOf('vxe') === -1) {
     try {
       axios.request({
-        url: "/translate/insert",
-        method: "POST",
+        url: '/translate/insert',
+        method: 'POST',
         data: {
           name,
           content: `{"zh_CN":"${name}"}`,
         },
       });
     } catch (error) {
-      console.error("insert error：");
+      console.error('insert error：');
     }
   }
 }
 
 let recursionAddTimer = null;
-function recursionAddTranslate () {
+function recursionAddTranslate() {
   if (recursionAddTimer !== null) {
     return false;
   }
@@ -103,12 +116,12 @@ export const ct = (key, args = []) => {
 };
 
 /** i18n 相关的 store */
-export const useI18nStore = defineStore("i18nStore", () => {
+export const useI18nStore = defineStore('i18nStore', () => {
   const lang = ref(initlang);
   /**
    * @param {I18nList} l 要设置的新语言
    */
-  function setLang (l) {
+  function setLang(l) {
     lang.value = l;
     localStorage.translateLanguage = l;
     if (i18n) {
@@ -116,56 +129,20 @@ export const useI18nStore = defineStore("i18nStore", () => {
     }
   }
 
-  const langList = reactive({
-    zh_CN: "中文",
-    en_US: "English",
-    th: "ไทย",
-    vi: "Việt nam",
-    tr: "Türkçe",
-    fa_IR: "فارسی",
-  });
+  const langList = reactive({});
+
+  function rebuildLangList() {
+    Object.keys(langList).forEach((k) => delete langList[k]);
+    langRegistry.forEach((def, key) => {
+      langList[key] = def.nativeName;
+    });
+  }
 
   const localList = reactive([]);
-  function setLocalList (list) {
-    list.forEach((item) => {
-      switch (item) {
-        case "zh_CN":
-          localList.push({
-            label: "中文简体",
-            value: "zh_CN",
-          });
-          break;
-        case "en_US":
-          localList.push({
-            label: "English",
-            value: "en_US",
-          });
-          break;
-        case "th":
-          localList.push({
-            label: "ไทย",
-            value: "th",
-          });
-          break;
-        case "vi":
-          localList.push({
-            label: "Việt nam",
-            value: "vi",
-          });
-          break;
-        case "tr":
-          localList.push({
-            label: "Türkçe",
-            value: "tr",
-          });
-          break;
-        case "fa_IR":
-          localList.push({
-            label: "فارسی",
-            value: "fa_IR",
-          });
-          break;
-      }
+  function rebuildLocalList() {
+    localList.length = 0;
+    langRegistry.forEach((def) => {
+      localList.push({label: def.label, value: def.key});
     });
   }
 
@@ -174,48 +151,33 @@ export const useI18nStore = defineStore("i18nStore", () => {
   });
 
   const eleLang = computed(() => {
-    switch (lang.value) {
-      case "zh_CN":
-        return el_zh_CN;
-      case "en_US":
-        return el_en_US;
-      case "th":
-        return el_th;
-      case "vi":
-        return el_vi;
-      case "tr":
-        return el_tr;
-      case "fa_IR":
-        return el_fa;
-    }
+    const def = langRegistry.get(lang.value);
+    return def?.elementLocale || el_en_US;
   });
 
   return {
     lang,
     setLang,
     langList,
+    rebuildLangList,
     localList,
-    setLocalList,
+    rebuildLocalList,
     title,
     eleLang,
   };
 });
 
-async function getRemoteMessage (list) {
+async function getRemoteMessage(list) {
   try {
-    let messages = {
-      zh_CN: {},
-      en_US: {},
-      th: {},
-      vi: {},
-      tr: {},
-      fa_IR: {},
-    };
+    let messages = {};
+    list.forEach((key) => {
+      messages[key] = {};
+    });
     let {
-      data: { data },
+      data: {data},
     } = await axios.request({
-      url: "/translate/getContent",
-      method: "POST",
+      url: '/translate/getContent',
+      method: 'POST',
       data: {
         pageNum: 1,
         pageSize: 10,
@@ -249,103 +211,119 @@ async function getRemoteMessage (list) {
   } catch (error) {}
 }
 
-function createLocalMessage (list) {
+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;
-      case "fa_IR":
-        messages["fa_IR"] = Object.assign(faBase, faVXETable);
-        break;
-      default:
-        break;
+  list.forEach((key) => {
+    const def = langRegistry.get(key);
+    if (def) {
+      messages[key] = Object.assign({}, def.base, def.vxe || {});
     }
   });
   return messages;
 }
 
-export function addI18nPage (router) {
-  router.addRoute("Index", {
-    path: "translate",
-    name: "翻译管理",
+export function addI18nPage(router) {
+  router.addRoute('Index', {
+    path: 'translate',
+    name: '翻译管理',
     meta: {
-      icon: "md-notifications",
-      title: "翻译管理",
+      icon: 'md-notifications',
+      title: '翻译管理',
     },
-    component: () => import("yh-i18n/list.vue"),
+    component: () => import('yh-i18n/list.vue'),
   });
 }
 
-export function cLog (string, isError = false) {
+export function cLog(string, isError = false) {
   if (isError) {
-    console.error("%cyhI18n：%c", "font-size: 16px;font-weight: bold;color: #00ffff", "font-size: 16px;font-weight: bold;color: #ccccc", string);
+    console.error(
+      '%cyhI18n：%c',
+      'font-size: 16px;font-weight: bold;color: #00ffff',
+      'font-size: 16px;font-weight: bold;color: #ccccc',
+      string
+    );
   } else {
-    console.log("%cYh-i18n%c " + string, "font-size: 18px;font-weight: bold;color: #61AFEF", "font-size: 12px;color: #999");
+    console.log(
+      '%cYh-i18n%c ' + string,
+      'font-size: 18px;font-weight: bold;color: #61AFEF',
+      'font-size: 12px;color: #999'
+    );
   }
 }
 
 export const yhI18n = {
-  install (app, config) {
-    let { list, router, pinia, VXETable } = config;
-    if (!list) {
-      cLog("请设置 Config.i18nList ,并将其设置到 yhI18n 的 congfig.list 上，否则 国际化插件将失效");
-      return false;
+  install(app, config) {
+    let {locales = [], VXETable} = config;
+
+    // 注册外部传入的语言包
+    if (locales?.length) {
+      locales.forEach((def) => registerLang(def));
     }
+
+    const list = [...langRegistry.keys()];
     let messages = createLocalMessage(list);
     i18n = createI18n({
       locale: initlang,
       messages,
     });
     app.use(i18n);
-    app.config.globalProperties.$T = ct;
 
     if (!window.translateReady) {
-      cLog("没有开启翻译管理，可以在开发环境或者在控制台运行后面的代码再刷新页面： `localStorage.translateReady = '1'`");
-    }
-    if (router) {
-      addI18nPage(router);
-    } else {
-      if (!router) {
-        cLog("没有传递 router 对象，所以无法将翻译管理页面添加到应用中", true);
-      }
+      cLog(
+        "没有开启翻译管理，可以在开发环境或者在控制台运行后面的代码再刷新页面： `localStorage.translateReady = '1'`"
+      );
     }
+    getRemoteMessage(list);
+
+    const isNew = app.config.globalProperties.$isNew;
+    if (isNew) {
+      const {
+        $addInitTask: addInitTask,
+        $pinia: pinia,
+        $router: router,
+        $slotsStore: slotsStore,
+        $setCt: setCt
+      } = app.config.globalProperties;
+      addInitTask(async () => {
+        if (!router || !router.hasRoute('Index')) return;
+        addI18nPage(router);
+      });
 
-    if (pinia) {
+      setCt(ct)
       const i18nStore = useI18nStore(pinia);
-      i18nStore.setLocalList(list);
+      i18nStore.rebuildLangList();
+      i18nStore.rebuildLocalList();
+
+      slotsStore.registerSlot({
+        location: 'HEADER_RIGHT',
+        component: newLanguageVue,
+      });
     } else {
-      if (!pinia) {
-        cLog("没有传递 router 对象，所以无法为国际化插件设置语言列表", true);
+      const {router, pinia} = config;
+      app.config.globalProperties.$T = ct;
+      app.config.globalProperties.ct = ct;
+      if (router) {
+        addI18nPage(router);
+      } else {
+        cLog('没有传递 router 对象，所以无法将翻译管理页面添加到应用中', true);
+      }
+      if (pinia) {
+        const i18nStore = useI18nStore(pinia);
+        i18nStore.rebuildLangList();
+        i18nStore.rebuildLocalList();
+      } else {
+        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);
-      }
+      cLog('没有传递 VXETable 对象，所以无法为 SLW 和 VXETable 设置国际化', true);
     }
-
-    getRemoteMessage(list);
   },
 };
 

package/list.vue

@@ -155,7 +155,7 @@
   </el-dialog>
 </template>
 <script setup lang="ts">
-import {reactive, ref, onMounted, onUnmounted, watch} from 'vue';
+import {reactive, ref, onMounted, onUnmounted,onActivated,onDeactivated, watch} from 'vue';
 import {ElLoadingService, ElMessage, ElMessageBox} from 'element-plus';
 import {useI18nStore, ct} from './index';
 import http from '@/libs/api.request';

package/newLanguage.vue

@@ -0,0 +1,75 @@
+<template>
+  <el-popover
+    placement="bottom"
+    popper-class="yh-user-popover"
+    :width="150"
+    trigger="hover">
+    <template #reference>
+      <div class="header-bar-button">
+        {{ title }}
+        <YhIcon
+          class="user-name-icon"
+          fontFamily="yhicon"
+          prefix="yh-"
+          name="down"></YhIcon>
+      </div>
+    </template>
+    <div class="user-actions">
+      <div
+        class="action-item"
+        v-for="lo in localList"
+        @click="setLang(lo.value)">
+        {{ lo.label }}
+      </div>
+      <el-divider content-position="left">翻译工具</el-divider>
+      <div
+        class="action-item"
+        @click="router.push({path: isAdmin?'/admin/translate':'/translate'})">
+        {{ ct('翻译') }}
+      </div>
+      <div class="action-item">
+        <el-switch
+          v-model="isCollect"
+          :active-text="ct('自动收集翻译')"
+          :inactive-text="ct('停止收集翻译')"
+          inline-prompt></el-switch>
+      </div>
+    </div>
+  </el-popover>
+</template>
+
+<script setup>
+  import {useI18nStore, ct} from 'yh-i18n';
+  import {ref, watch} from 'vue';
+  import {useRouter} from 'vue-router';
+  import {useClientStore} from 'yh-client';
+  import {storeToRefs} from 'pinia';
+
+  const router = useRouter();
+  const clientStore = useClientStore();
+  const {isAdmin} = storeToRefs(clientStore);
+
+  const isDev = ref(window.translateReady);
+
+  const i18nStore = useI18nStore();
+  const isCollect = ref(!!localStorage.translateCollect);
+
+  watch(
+    () => isCollect.value,
+    (val) => {
+      if (val) {
+        localStorage.translateCollect = '1';
+      } else {
+        localStorage.removeItem('translateCollect');
+      }
+      window.translateCollect = val;
+    },
+    {
+      immediate: true,
+    }
+  );
+
+  const {localList, title} = storeToRefs(i18nStore);
+
+  const {setLang} = i18nStore;
+</script>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "yh-i18n",
-  "version": "2.3.15",
+  "version": "3.0.4",
   "description": "对于国际化的封装",
   "main": "index.js",
   "scripts": {
@@ -8,14 +8,12 @@
     "pub:npm": "npm publish --registry https://registry.npmjs.org/ --no-git-checks",
     "pub:aliyun": "npm publish --registry https://packages.aliyun.com/60765e0161a945067837bb5f/npm/npm-registry/ --no-git-checks"
   },
-  "dependencies": {
-    "exceljs": "4.4.0"
-  },
   "peerDependencies": {
+    "exceljs": "4.4.0",
     "vue-i18n": "^9.0.0",
     "vue": "^3.0.0",
-    "vxe-table": "^4.3.10",
+    "vue-router": "^4.5.0",
     "element-plus": "^2.9.0"
   },
   "author": "Liubin"
-}
+}

package/readme.md

@@ -5,7 +5,6 @@
 **此包依赖最新，前端包**
 - vue 3.2.47
 - pinia 2.0.35
-- vxe-table 4.3.10
 - element-plus 2.4.4
 
 ## 基础配置