yh-i18n 2.3.8 → 2.3.10

package/excelTool.ts

@@ -5,6 +5,33 @@ import http from '@/libs/api.request';
 import {useI18nStore} from './index';
 
 const verificationCode = 'lkyhtranslateexcel';
+
+/**
+ * 解析翻译内容，将 JSON 字符串解析并合并到 item 对象中
+ * @param item 翻译项对象
+ * @param localKeys 本地语言键列表
+ * @returns 处理后的翻译项对象
+ */
+export function parseTranslateContent(item: any, localKeys: string[]): any {
+  try {
+    let content = JSON.parse(item.content);
+    let keys = Object.keys(content);
+
+    keys.forEach((key) => {
+      let val = content[key];
+      item[key] = val;
+    });
+
+    localKeys.forEach((k) => {
+      if (!keys.includes(k)) {
+        item[k] = '';
+      }
+    });
+  } catch (error) {
+    console.error('解析翻译内容失败:', error);
+  }
+  return item;
+}
 export async function exportExcel(total) {
   const loading = ElLoading.service({
     lock: true,
@@ -24,23 +51,7 @@ export async function exportExcel(total) {
     .then((res) => {
       let localKeys = i18nStore.localList.map((item) => item.value);
       let {records} = res.data.data;
-      records = records.map((item) => {
-        try {
-          let content = JSON.parse(item.content);
-          let keys = Object.keys(content);
-
-          keys.forEach((key) => {
-            let val = content[key];
-            item[key] = val;
-          });
-          localKeys.forEach((k) => {
-            if (!keys.includes(k)) {
-              item[k] = '';
-            }
-          });
-        } catch (error) {}
-        return item;
-      });
+      records = records.map((item) => parseTranslateContent(item, localKeys));
       return records;
     });
   loading.setText('正在序列化表格数据……');
@@ -202,6 +213,7 @@ export async function importExcel(e, getDataList) {
           message: '您选择的文件不是系统导出的文件',
           type: 'warning',
         });
+        e.target.value = '';
         return false;
       }
       const loading = ElLoading.service({
@@ -251,6 +263,8 @@ export async function importExcel(e, getDataList) {
       getDataList();
     } catch (error) {
       ElMessage.error('导入保存翻译数据遇到错误：', error.message);
+    } finally {
+      e.target.value = '';
     }
   }
 }

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,11 +31,15 @@ declare global {
     translateReady: boolean;
   }
 }
+
+/** 注册语言包 */
+export function registerLang(def: LangDefinition): void;
+
 /** 国际化组件实例 */
 export const i18n: I18n;
 
 /** 自定义的翻译函数，这个函数包装了 t 函数，在翻译的前提下，可以帮忙手机键 */
-export const ct: (key: string, args: any[]) => void;
+export const ct: (key: string, args?: any[]) => void;
 
 /** 国际化相关 Pinia Store 实例 */
 export const useI18nStore: StoreDefinition;

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";
+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';
 
-// 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 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;
   }
@@ -87,7 +100,7 @@ function recursionAddTranslate () {
   }
 }
 
-export const ct = (key, args) => {
+export const ct = (key, args = []) => {
   if (key && window.translateReady && window.translateCollect) {
     // 将 键的处理全部放入队列中，避免挤兑正常逻辑的运算资源
     if (!keySet.has(key) && !unHandle.includes(key)) {
@@ -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,64 +211,56 @@ 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, router, pinia, VXETable, isNew} = config;
+
+    // 注册外部传入的语言包
+    if (locales?.length) {
+      locales.forEach((def) => registerLang(def));
     }
+
+    const list = [...langRegistry.keys()];
     let messages = createLocalMessage(list);
     i18n = createI18n({
       locale: initlang,
@@ -316,22 +270,33 @@ export const yhI18n = {
     app.config.globalProperties.$T = ct;
 
     if (!window.translateReady) {
-      cLog("没有开启翻译管理，可以在开发环境或者在控制台运行后面的代码再刷新页面： `localStorage.translateReady = '1'`");
+      cLog(
+        "没有开启翻译管理，可以在开发环境或者在控制台运行后面的代码再刷新页面： `localStorage.translateReady = '1'`"
+      );
     }
     if (router) {
-      addI18nPage(router);
+      if (isNew) {
+        const {addInitTask} = config;
+        addInitTask(async () => {
+          if (!router || !router.hasRoute('Index')) return;
+          addI18nPage(router);
+        });
+      } else {
+        addI18nPage(router);
+      }
     } else {
       if (!router) {
-        cLog("没有传递 router 对象，所以无法将翻译管理页面添加到应用中", true);
+        cLog('没有传递 router 对象，所以无法将翻译管理页面添加到应用中', true);
       }
     }
 
     if (pinia) {
       const i18nStore = useI18nStore(pinia);
-      i18nStore.setLocalList(list);
+      i18nStore.rebuildLangList();
+      i18nStore.rebuildLocalList();
     } else {
       if (!pinia) {
-        cLog("没有传递 router 对象，所以无法为国际化插件设置语言列表", true);
+        cLog('没有传递 router 对象，所以无法为国际化插件设置语言列表', true);
       }
     }
     if (VXETable) {
@@ -341,11 +306,18 @@ export const yhI18n = {
       });
     } else {
       if (!pinia) {
-        cLog("没有传递 VXETable 对象，所以无法为 SLW 和 VXETable 设置国际化", true);
+        cLog('没有传递 VXETable 对象，所以无法为 SLW 和 VXETable 设置国际化', true);
       }
     }
 
     getRemoteMessage(list);
+    if (isNew) {
+      const {slotsStore} = config;
+      slotsStore.registerSlot({
+        location: 'HEADER_RIGHT',
+        component: newLanguageVue,
+      });
+    }
   },
 };