yh-i18n 1.1.0 → 1.2.1

package/excelTool.ts

@@ -0,0 +1,201 @@
+import * as ExcelJS from "exceljs";
+import Config from "@/config";
+import { ElMessage, ElLoading } from "element-plus";
+import http from "@/libs/api.request";
+
+const verificationCode = "lkyhtranslateexcel";
+export async function exportExcel(dataList) {
+  const loading = ElLoading.service({
+    lock: true,
+    text: "正在导出当前页面的翻译字段",
+    background: "rgba(255, 255, 255, 0.2)",
+  });
+  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: "土耳其语",
+  };
+  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(
+    dataList.map((item) => {
+      let { adTranslateId, key } = item;
+      let row = [adTranslateId, key];
+      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, dataList.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" }];
+  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: "请选择之前导出并已经翻译好了的Excel文件",
+        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();
+  }
+}
+
+export async function importExcel(getDataList) {
+  if (!window["showOpenFilePicker"]) {
+    ElMessage({
+      message: "请使用Chrome(Edge) 102 及以上版本的浏览器",
+      type: "warning",
+    });
+    return false;
+  }
+  let file = await getFile();
+  if (file === false) {
+    ElMessage({
+      message: "请授权浏览器读取文件",
+      type: "warning",
+    });
+    return false;
+  } else {
+    const workbook = new ExcelJS.Workbook();
+    await workbook.xlsx.load(file);
+    if (workbook.keywords !== verificationCode) {
+      ElMessage({
+        message: "您选择的文件不是系统导出的文件",
+        type: "warning",
+      });
+      return false;
+    }
+    const loading = ElLoading.service({
+      lock: true,
+      text: "开始读取已翻译的字段",
+      background: "rgba(255, 255, 255, 0.2)",
+    });
+    let sheet = workbook.worksheets[0];
+    let len = sheet._rows.length - 1;
+    let dataList: any[] = [];
+    sheet.getRows(2, len)?.forEach((row) => {
+      let id = row.getCell(1).value;
+      let key = row.getCell(2).value;
+      let content: any = {};
+      Config.i18nList.forEach((item, index) => {
+        content[item] = row.getCell(index + 3).value;
+      });
+      dataList.push({
+        id,
+        key,
+        content: JSON.stringify(content),
+      });
+    });
+    loading.setText("读取完成，正在更新");
+
+    http
+      .request({
+        url: "/translate/save",
+        type: "json",
+        method: "POST",
+        data: dataList,
+      })
+      .then((res) => {
+        loading.close();
+        if (res?.data?.status === 200) {
+          ElMessage.success("导入成功！");
+          getDataList();
+        } else {
+          ElMessage.error(res.data.msg);
+        }
+      })
+      .finally((err) => {
+        loading.close();
+      });
+  }
+}

package/index.d.ts

@@ -1,3 +1,6 @@
+import { I18n } from "vue-i18n";
+import { StoreDefinition } from "pinia";
+
 /**
  * zh_CN 简体中文
  * en_US 英语（美国）
@@ -6,3 +9,18 @@
  * tr 土耳其语（土耳其）
  */
 type I18nList = "zh_CN" | "en_US" | "th" | "vi" | "tr";
+
+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;

package/index.js

@@ -30,7 +30,7 @@ const initlang = localStorage.local || localLang || "zh_CN";
 
 export let i18n = null;
 const isDev = import.meta.env.DEV;
-window.translateReady = false;
+window.translateReady = !!localStorage.translateReady || false;
 function addTranslate(key) {
   if (key.indexOf("vxe") === -1) {
     try {

package/lang/baseEnUS.js

@@ -1,14 +1,23 @@
 export default {
   翻译键名: "Translate key names",
   翻译管理: "Translation management",
-  键入以筛选键名: "filter key names",
-  搜索: "search",
+  键入以筛选键名: "Filter key names",
+  搜索: "Search",
   新增: "New addition",
   批量删除: "Batch deletion",
-  重置: "reset",
-  编辑: "edit",
-  删除: "delete",
-  操作: "operation",
+  重置: "Reset",
+  编辑: "Edit",
+  删除: "Delete",
+  操作: "Operation",
+  导出当前页: "Export current page",
+  导入: "Import",
+  翻译键值: "Translation Key Values",
+  新增翻译: "Add translation",
+  编辑翻译: "Edit translation",
+  请输入翻译键值: "Please enter the translation key value",
+  上一个: "Previous",
+  下一个: "Next",
+  取消: "Cancel",
   中文简体: "Simplified Chinese",
   English: "English",
   ไทย: "Thailand.",

package/lang/baseTh.js

@@ -9,6 +9,15 @@ export default {
   编辑: "บรรณาธิการ",
   删除: "ลบ",
   操作: "การดำเนินงาน",
+  导出当前页: "ส่งออกหน้าปัจจุบัน",
+  导入: "นำเข้า",
+  翻译键值: "แปลค่ากุญแจ",
+  新增翻译: "เพิ่มการแปล",
+  编辑翻译: "แก้ไขการแปล",
+  请输入翻译键值: "โปรดป้อนค่ากุญแจการแปล",
+  上一个: "ก่อนหน้า",
+  下一个: "ถัดไป",
+  取消: "การยกเลิก",
   中文简体: "ภาษาจีนตัวย่อ",
   English: "ภาษาอังกฤษ",
   ไทย: "ไทย",

package/lang/baseTr.js

@@ -9,6 +9,15 @@ export default {
   编辑: "edit",
   删除: "Sil",
   操作: "operasyon",
+  导出当前页: "Ağımdaki sayfanı dışarı aktar",
+  导入: "İçeri",
+  翻译键值: "Çeviri Anahtarı Değerleri",
+  新增翻译: "Çeviri ekle",
+  编辑翻译: "Çeviri düzenle",
+  请输入翻译键值: "Lütfen çevirim anahtarı değerini girin",
+  上一个: "Önceki",
+  下一个: "Sonraki",
+  取消: "iptal et",
   中文简体: "Basitleştirilmiş Çince",
   English: "İngilizce",
   ไทย: "Tayland.",

package/lang/baseVi.js

@@ -9,6 +9,15 @@ export default {
   编辑: "Chỉnh sửa",
   删除: "Xoá",
   操作: "Hoạt động",
+  导出当前页: "Xuất trang hiện tại",
+  导入: "Nhập khẩu",
+  翻译键值: "Dịch giá trị khóa",
+  新增翻译: "Thêm bản dịch",
+  编辑翻译: "Biên dịch",
+  请输入翻译键值: "Vui lòng nhập giá trị khóa dịch",
+  上一个: "Trước",
+  下一个: "Tiếp theo",
+  取消: "Hủy bỏ",
   中文简体: "Trung Quốc",
   English: "Tiếng Việt",
   ไทย: "Thái Lan.",

package/lang/baseZhCn.js

@@ -9,6 +9,15 @@ export default {
   编辑: "编辑",
   删除: "删除",
   操作: "操作",
+  导出当前页: "导出当前页",
+  导入: "导入",
+  翻译键值: "翻译键值",
+  新增翻译: "新增翻译",
+  编辑翻译: "编辑翻译",
+  请输入翻译键值: "请输入翻译键值",
+  上一个: "上一个",
+  下一个: "下一个",
+  取消: "取消",
   中文简体: "中文简体",
   English: "英语",
   ไทย: "泰语",

package/list.vue

@@ -1,14 +1,6 @@
 <template>
   <div class="yh-i18n-list-container">
     <div class="yh-i18n-list-actions">
-      <el-button type="primary" @click="addOne">
-        <i class="iconfont icon-add"></i>
-        {{ ct("新增") }}
-      </el-button>
-      <el-button type="danger" @click="delMore">
-        <i class="iconfont icon-delete"></i>
-        {{ ct("批量删除") }}
-      </el-button>
       <div class="yh-i18n-list-conditions">
         <el-form inline>
           <el-form-item :label="ct('翻译键名')">
@@ -25,15 +17,32 @@
       }}</el-button>
       <el-button @click="resetList">{{ ct("重置") }}</el-button>
     </div>
+    <div class="yh-i18n-list-actions">
+      <el-button type="primary" @click="addOne">
+        <i class="iconfont icon-add"></i>
+        {{ ct("新增") }}
+      </el-button>
+      <el-button type="danger" @click="delMore">
+        <i class="iconfont icon-delete"></i>
+        {{ ct("批量删除") }}
+      </el-button>
+      <el-button text @click="exportExcel(dataList)">
+        {{ ct("导出当前页") }}
+      </el-button>
+      <el-button text @click="importExcel(getDataList)">
+        {{ ct("导入") }}
+      </el-button>
+    </div>
     <el-table
       ref="i18nList"
+      stripe
       :data="dataList"
       row-key="adTranslateId"
       @row-click="rowClickHandler"
     >
       <el-table-column
         type="selection"
-        width="60"
+        width="50"
         align="center"
         fixed="left"
       ></el-table-column>
@@ -59,7 +68,12 @@
           }}</el-button>
         </template>
       </el-table-column>
-      <el-table-column prop="key" :label="ct('翻译键名')"></el-table-column>
+      <el-table-column
+        prop="key"
+        min-width="140"
+        fixed="left"
+        :label="ct('翻译键名')"
+      ></el-table-column>
       <el-table-column
         v-for="column in listColumns"
         :prop="column.field"
@@ -70,7 +84,7 @@
     </el-table>
     <el-pagination
       background
-      :page-sizes="[100, 200, 1000, 10000]"
+      :page-sizes="[100, 200, 1000, 100000]"
       v-model:page-size="listForm.pageSize"
       :total="listForm.total"
       v-model:current-page="listForm.pageNum"
@@ -125,7 +139,7 @@ import { ElLoadingService, ElMessage, ElMessageBox } from "element-plus";
 import { useI18nStore, ct } from "yh-i18n";
 import http from "@/libs/api.request";
 import { VxeFormInstance, VxeFormPropTypes } from "vxe-table";
-
+import { exportExcel, importExcel } from "./excelTool";
 const i18nStore = useI18nStore();
 const vxeFormRef = ref<VxeFormInstance>();
 
@@ -188,10 +202,17 @@ watch(
     getDataList();
   }
 );
+watch(
+  () => listForm.pageSize,
+  () => {
+    getDataList();
+  }
+);
 
 function rowClickHandler(row) {
   i18nList.value?.toggleRowSelection(row);
 }
+
 function resetList() {
   listForm.key = "";
   listForm.pageNum = 1;
@@ -211,9 +232,11 @@ function cancelForm() {
   formData.id = null;
   formShow.value = false;
 }
+
 function addOne() {
   formShow.value = true;
 }
+
 function prevOne() {
   if (formDataIndex.value > 0) {
     let index = formDataIndex.value - 1;
@@ -221,6 +244,7 @@ function prevOne() {
     editOne(item, index);
   }
 }
+
 function editOne(item, index) {
   formDataIndex.value = index;
   for (const key in item) {
@@ -237,6 +261,7 @@ function editOne(item, index) {
     inputs = Array.from(document.querySelectorAll(".i18n-form-item input"));
   }, 500);
 }
+
 function nextOne() {
   if (formDataIndex.value < dataList.value.length - 1) {
     let index = formDataIndex.value + 1;
@@ -244,15 +269,21 @@ function nextOne() {
     editOne(item, index);
   }
 }
+
 function saveOne() {
+  let isAdd = !!formData.adTranslateId;
   let url = updateUrl;
   vxeFormRef?.value?.validate().then((errMap) => {
     if (!errMap) {
-      let data = {
-        id: formData.adTranslateId,
+      let data: any = {
         key: formData.key,
         content: {},
       };
+      if (isAdd) {
+        url = insertUrl;
+      } else {
+        data.id = formData.adTranslateId;
+      }
       for (const key in formData) {
         if (key !== "key" && langList.includes(key)) {
           const val = formData[key];
@@ -269,10 +300,14 @@ function saveOne() {
         .then((res) => {
           if (res?.data?.status === 200) {
             ElMessage.success(res.data.msg);
-            dataList.value[formDataIndex.value] = {
-              ...formData,
-            };
-            nextOne();
+            if (!isAdd) {
+              dataList.value[formDataIndex.value] = {
+                ...formData,
+              };
+              nextOne();
+            } else {
+              cancelForm();
+            }
           } else {
             ElMessage.error(res.data.msg);
           }
@@ -280,6 +315,7 @@ function saveOne() {
     }
   });
 }
+
 function delOne(id) {
   ElMessageBox.confirm("确认删除这条翻译记录吗？").then(() => {
     http
@@ -300,6 +336,7 @@ function delOne(id) {
       });
   });
 }
+
 function delMore() {
   ElMessageBox.confirm("确认删除选中的翻译记录吗？").then(async () => {
     let ids = i18nList.value
@@ -338,6 +375,7 @@ const formItems = reactive<VxeFormPropTypes.Items>([
     },
   },
 ]);
+
 const fromRules = reactive<VxeFormPropTypes.Rules>({
   key: [{ required: true, type: "string", message: "请输入翻译键值" }],
 });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "yh-i18n",
-  "version": "1.1.0",
+  "version": "1.2.1",
   "description": "对于国际化的封装",
   "main": "index.js",
   "scripts": {
@@ -8,6 +8,7 @@
     "pub:aliyun": "npm publish --registry https://packages.aliyun.com/60765e0161a945067837bb5f/npm/npm-registry/ --no-git-checks"
   },
   "dependencies": {
+    "exceljs": "4.4.0",
     "vue-i18n": "9.8.0"
   },
   "peerDependencies": {