yh-i18n 0.0.1-security → 2.3.15

package/excelTool.ts

@@ -0,0 +1,270 @@
+import ExcelJS from 'exceljs';
+import Config from '@/config';
+import {ElMessage, ElLoading} from 'element-plus';
+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,
+    text: '正在获取所有翻译字段……',
+    background: 'rgba(255, 255, 255, 0.2)',
+  });
+  const i18nStore = useI18nStore();
+  let records = await http
+    .request({
+      url: '/translate/select',
+      method: 'post',
+      data: {
+        pageNum: 1,
+        pageSize: total,
+      },
+    })
+    .then((res) => {
+      let localKeys = i18nStore.localList.map((item) => item.value);
+      let {records} = res.data.data;
+      records = records.map((item) => parseTranslateContent(item, localKeys));
+      return records;
+    });
+  loading.setText('正在序列化表格数据……');
+  const workbook = new ExcelJS.Workbook();
+  workbook.creator = '力控元海';
+  workbook.lastModifiedBy = '力控元海技术中心前端';
+  workbook.keywords = verificationCode;
+  workbook.created = new Date();
+  workbook.modified = new Date();
+  const sheet = workbook.addWorksheet(`${Config.title}-系统待翻译文字`);
+
+  let columns: any[] = [
+    {width: 0, hidden: true},
+    {width: 0, hidden: true},
+  ];
+  let title: string[] = ['', ''];
+  let titleObj = {
+    zh_CN: '中文',
+    en_US: '英语',
+    th: '泰语',
+    vi: '越南语',
+    tr: '土耳其语',
+    fa_IR: '波斯语',
+  };
+  Config.i18nList.forEach((item) => {
+    columns.push({
+      width: 30,
+      alignment: {vertical: 'middle', horizontal: 'center', wrapText: true},
+      value: item,
+    });
+    title.push(titleObj[item]);
+  });
+
+  sheet.columns = columns;
+  sheet.addRow(title);
+  sheet.addRows(
+    records.map((item) => {
+      let {id, name} = item;
+      let row = [id, name];
+      Config.i18nList.forEach((valKey) => {
+        row.push(item[valKey]);
+      });
+      return row;
+    })
+  );
+  sheet.getRows(1, 1)?.forEach((row, index) => {
+    row.height = 25;
+    row.eachCell({includeEmpty: true}, (cell, cellIndex) => {
+      cell.font = {bold: true};
+      cell.alignment = {
+        vertical: 'middle',
+        horizontal: 'center',
+        wrapText: true,
+      };
+      cell.border = {
+        top: {style: 'thin'},
+        left: {style: 'thin'},
+        bottom: {style: 'thin'},
+        right: {style: 'thin'},
+      };
+    });
+  });
+  sheet.getRows(2, records.length)?.forEach((row, index) => {
+    row.height = 25;
+    row.eachCell({includeEmpty: true}, (cell, cellIndex) => {
+      cell.alignment = {
+        vertical: 'middle',
+        horizontal: 'left',
+        wrapText: true,
+      };
+      cell.border = {
+        top: {style: 'thin'},
+        left: {style: 'thin'},
+        bottom: {style: 'thin'},
+        right: {style: 'thin'},
+      };
+    });
+  });
+  sheet.views = [{state: 'frozen', xSplit: 0, ySplit: 1, activeCell: 'C2'}];
+  loading.setText('正在生成表格文件……');
+  workbook.xlsx.writeBuffer().then((data) => {
+    const blob = new Blob([data], {
+      type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=UTF-8',
+    });
+    let downloadA = document.createElement('a');
+    downloadA.download = `${Config.title}-系统待翻译文字.xlsx`;
+    downloadA.href = window.URL.createObjectURL(blob);
+    downloadA.click();
+    loading.close();
+    ElMessage.success('导出成功，请到下载目录查看');
+  });
+}
+
+async function getFile() {
+  // @ts-ignore
+  let fileHandle = await window.showOpenFilePicker({
+    id: 'importTranslateExcel',
+    types: [
+      {
+        description: '请选择之前导出的文件',
+        accept: {
+          'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet': ['.xlsx', '.xls'],
+        },
+      },
+    ],
+  });
+  if (Array.isArray(fileHandle)) {
+    fileHandle = fileHandle[0];
+  }
+  let state = await fileHandle.queryPermission({mode: 'read'});
+  if (state === 'denied') {
+    return false;
+  } else {
+    if (state === 'prompt') {
+      fileHandle.requestPermission({
+        mode: 'read',
+      });
+    }
+    return await fileHandle.getFile();
+  }
+}
+
+async function saveData(dataList) {
+  return await http
+    .request({
+      url: '/translate/save',
+      type: 'json',
+      method: 'POST',
+      data: dataList,
+    })
+    .then((res) => {
+      return res?.data?.status === 200;
+    });
+}
+
+export async function importExcel(e, getDataList) {
+  // if (!window["showOpenFilePicker"]) {
+  //   ElMessage({
+  //     message: "请使用Chrome(Edge) 102 及以上版本的浏览器",
+  //     type: "warning",
+  //   });
+  //   return false;
+  // }
+  // let file = await getFile();
+  const file = e.target.files[0];
+  if (!(file instanceof File)) {
+    ElMessage({
+      message: '请选择文件',
+      type: 'warning',
+    });
+    return false;
+  } else {
+    try {
+      const workbook = new ExcelJS.Workbook();
+      // @ts-ignore
+      await workbook.xlsx.load(file);
+      if (workbook.keywords !== verificationCode) {
+        ElMessage({
+          message: '您选择的文件不是系统导出的文件',
+          type: 'warning',
+        });
+        e.target.value = '';
+        return false;
+      }
+      const loading = ElLoading.service({
+        lock: true,
+        text: '开始读取已翻译的字段',
+        background: 'rgba(255, 255, 255, 0.5)',
+        customClass: 'yh-i18n-loading',
+      });
+      let sheet = workbook.worksheets[0];
+      // @ts-ignore
+      let len = sheet._rows.length - 1;
+      let dataList: any[] = [];
+      sheet.getRows(2, len)?.forEach((row) => {
+        let id = row.getCell(1).value;
+        let name = row.getCell(2).value;
+        let content: any = {};
+        Config.i18nList.forEach((item, index) => {
+          content[item] = row.getCell(index + 3).value;
+        });
+        dataList.push({
+          id,
+          name,
+          content: JSON.stringify(content),
+        });
+      });
+      loading.setText('读取完成，正在更新');
+
+      let dataLen = dataList.length;
+      let flag = true;
+      let saveLength = 200;
+      while (flag) {
+        if (dataList.length > saveLength) {
+          let perCent = (dataLen - dataList.length) / dataLen;
+          let fillIndex = parseInt(((perCent / 0.5) * 10).toFixed(0));
+          let loadingText = new Array(20);
+          loadingText.fill('◇', 0, 20 - fillIndex);
+          loadingText.fill('◆', 20 - fillIndex);
+          loading.setText(`${(perCent * 100).toFixed(2)}%　${loadingText.join('')}　正在更新…………`);
+          await saveData(dataList.splice(0, saveLength));
+        } else {
+          await saveData(dataList);
+          flag = false;
+        }
+      }
+      loading.close();
+      ElMessage.success('导入数据保存成功');
+      getDataList();
+    } catch (error) {
+      ElMessage.error('导入保存翻译数据遇到错误：', error.message);
+    } finally {
+      e.target.value = '';
+    }
+  }
+}

package/index.d.ts

@@ -0,0 +1,33 @@
+import {I18n} from 'vue-i18n';
+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';
+
+declare global {
+  interface Window {
+    /** 国际化翻译组件是否准备好 */
+    translateReady: boolean;
+  }
+}
+/** 国际化组件实例 */
+export const i18n: I18n;
+
+/** 自定义的翻译函数，这个函数包装了 t 函数，在翻译的前提下，可以帮忙手机键 */
+export const ct: (key: string, args?: any[]) => void;
+
+/** 国际化相关 Pinia Store 实例 */
+export const useI18nStore: StoreDefinition;
+
+/** 力控元海 vue-i18n 插件封装 */
+export const yhI18n: Plugin;
+
+/** 多语言选择插件 */
+export const Language: Component;

package/index.js

@@ -0,0 +1,352 @@
+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";
+
+// 自动根据浏览器系统语言设置语言
+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";
+}
+const initlang = localStorage.translateLanguage || navLang || "zh_CN";
+
+export let i18n = null;
+window.translateReady = localStorage.translateReady ? localStorage.translateReady === "1" : import.meta.env.DEV;
+let contentReady = false;
+
+const keySet = new Set();
+window.keySet = keySet;
+Object.keys(zhCNBase).forEach((key) => {
+  keySet.add(key);
+});
+
+const unHandle = [];
+
+function addTranslate (name) {
+  if (name && name.indexOf("vxe") === -1) {
+    try {
+      axios.request({
+        url: "/translate/insert",
+        method: "POST",
+        data: {
+          name,
+          content: `{"zh_CN":"${name}"}`,
+        },
+      });
+    } catch (error) {
+      console.error("insert error：");
+    }
+  }
+}
+
+let recursionAddTimer = null;
+function recursionAddTranslate () {
+  if (recursionAddTimer !== null) {
+    return false;
+  }
+  // 当触发 content 加载完成触发递归方法后，判断是否有需要处理的键，有则处理，没有则忽略
+  if (unHandle.length && contentReady) {
+    let key = unHandle.pop();
+    if (!keySet.has(key) && window.translateReady) {
+      keySet.add(key);
+      addTranslate(key);
+    }
+    // 通过延时降低任务密度，避免挤兑正常逻辑的运算资源
+    recursionAddTimer = setTimeout(() => {
+      recursionAddTimer = null;
+      recursionAddTranslate();
+    }, 150);
+  }
+}
+
+export const ct = (key, args = []) => {
+  if (key && window.translateReady && window.translateCollect) {
+    // 将 键的处理全部放入队列中，避免挤兑正常逻辑的运算资源
+    if (!keySet.has(key) && !unHandle.includes(key)) {
+      unHandle.push(key);
+      recursionAddTranslate();
+    }
+  }
+  if (key && i18n) {
+    return i18n.global.t(key, args);
+  } else {
+    return key;
+  }
+};
+
+/** i18n 相关的 store */
+export const useI18nStore = defineStore("i18nStore", () => {
+  const lang = ref(initlang);
+  /**
+   * @param {I18nList} l 要设置的新语言
+   */
+  function setLang (l) {
+    lang.value = l;
+    localStorage.translateLanguage = l;
+    if (i18n) {
+      i18n.global.locale = l;
+    }
+  }
+
+  const langList = reactive({
+    zh_CN: "中文",
+    en_US: "English",
+    th: "ไทย",
+    vi: "Việt nam",
+    tr: "Türkçe",
+    fa_IR: "فارسی",
+  });
+
+  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;
+      }
+    });
+  }
+
+  const title = computed(() => {
+    return langList[lang.value];
+  });
+
+  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;
+    }
+  });
+
+  return {
+    lang,
+    setLang,
+    langList,
+    localList,
+    setLocalList,
+    title,
+    eleLang,
+  };
+});
+
+async function getRemoteMessage (list) {
+  try {
+    let messages = {
+      zh_CN: {},
+      en_US: {},
+      th: {},
+      vi: {},
+      tr: {},
+      fa_IR: {},
+    };
+    let {
+      data: { data },
+    } = await axios.request({
+      url: "/translate/getContent",
+      method: "POST",
+      data: {
+        pageNum: 1,
+        pageSize: 10,
+      },
+    });
+    data.forEach((item) => {
+      try {
+        let itemObj = JSON.parse(item);
+        let mKey = itemObj.zh_CN;
+        if (window.translateReady && !keySet.has(mKey)) {
+          keySet.add(mKey);
+        }
+        Object.entries(itemObj).forEach(([key, val]) => {
+          if (!messages[key][mKey]) {
+            messages[key][mKey] = val;
+          }
+        });
+      } catch (err) {
+        if (window.translateReady) {
+          // console.count("翻译数据格式不对");
+        }
+      }
+    });
+    list.forEach((key) => {
+      let m = i18n.global.getLocaleMessage(key);
+      i18n.global.setLocaleMessage(key, Object.assign(m, messages[key]));
+    });
+    // 翻译内容加载完成，打开开关并运行递归函数，处理累积的数据
+    contentReady = true;
+    recursionAddTranslate();
+  } catch (error) {}
+}
+
+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;
+    }
+  });
+  return messages;
+}
+
+export function addI18nPage (router) {
+  router.addRoute("Index", {
+    path: "translate",
+    name: "翻译管理",
+    meta: {
+      icon: "md-notifications",
+      title: "翻译管理",
+    },
+    component: () => import("yh-i18n/list.vue"),
+  });
+}
+
+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);
+  } else {
+    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;
+    }
+    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);
+      }
+    }
+
+    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/lang/baseEnUS.js

@@ -0,0 +1,27 @@
+export default {
+  翻译键名: "Translate key names",
+  翻译管理: "Translation management",
+  键入以筛选键名: "Filter key names",
+  搜索: "Search",
+  新增: "New addition",
+  批量删除: "Batch deletion",
+  重置: "Reset",
+  编辑: "Edit",
+  删除: "Delete",
+  操作: "Operation",
+  导出: "Export",
+  导入: "Import",
+  翻译键值: "Translation Key Values",
+  新增翻译: "Add translation",
+  编辑翻译: "Edit translation",
+  请输入翻译键值: "Please enter the translation key value",
+  上一个: "Previous",
+  下一个: "Next",
+  取消: "Cancel",
+  中文简体: "Simplified Chinese",
+  English: "English",
+  ไทย: "Thailand.",
+  "Việt nam": "Vietnamese",
+  Türkçe: "Turkish",
+  "فارسی": "Persian"
+};

package/lang/baseZhCn.js

@@ -0,0 +1,27 @@
+export default {
+  翻译键名: "翻译键名",
+  翻译管理: "翻译管理",
+  键入以筛选键名: "键入以筛选键名",
+  搜索: "搜索",
+  新增: "新增",
+  批量删除: "批量删除",
+  重置: "重置",
+  编辑: "编辑",
+  删除: "删除",
+  操作: "操作",
+  导出: "导出",
+  导入: "导入",
+  翻译键值: "翻译键值",
+  新增翻译: "新增翻译",
+  编辑翻译: "编辑翻译",
+  请输入翻译键值: "请输入翻译键值",
+  上一个: "上一个",
+  下一个: "下一个",
+  取消: "取消",
+  中文简体: "中文简体",
+  English: "英语",
+  ไทย: "泰语",
+  "Việt nam": "越南语",
+  Türkçe: "土耳其语",
+  "فارسی": "波斯语",
+};