yh-i18n 2.3.7 → 2.3.9

package/list.vue

@@ -105,23 +105,33 @@
     class="form-drawer"
     v-model="formShow"
     @close="cancelForm"
+    :close-on-click-modal="false"
     draggable
     :title="formData.id ? ct('编辑翻译') : ct('新增翻译')">
-    <vxe-form
-      title-align="right"
-      title-width="100px"
-      ref="vxeFormRef"
-      title-colon
-      :data="formData"
-      :items="formItems"
-      :rules="formRules"></vxe-form>
+    <el-form
+      ref="formRef"
+      :model="formData"
+      :rules="formRules"
+      label-width="100px"
+      label-position="right">
+      <el-form-item :label="ct('翻译键值')" prop="name">
+        <el-input tabindex="1" v-model="formData.name" class="i18n-form-item" id="i18nFormItem1" />
+      </el-form-item>
+      <el-form-item
+        v-for="(item, index) in langFields"
+        :key="item.field"
+        :label="ct(item.label)"
+        :prop="item.field">
+        <el-input ref="langFieldsRef" :tabindex="index + 2" v-model="formData[item.field]" class="i18n-form-item" :id="item.id" />
+      </el-form-item>
+    </el-form>
     <template #footer>
       <div class="yh-i18n-form-actions">
         <el-button
           @click="prevOne"
           text
           :disabled="!isNaN(formDataIndex) && formDataIndex <= 0">
-          {{ ct('上一个') }}（←）
+          {{ ct('上一个') }} （ctrl/alt + ←）
         </el-button>
         <el-button
           type="primary"
@@ -132,27 +142,47 @@
         <el-button
           type="primary"
           @click="saveOne">
-          {{ ct('保存') }}
+          {{ ct('保存') }}（ctrl + S）
         </el-button>
         <el-button
           @click="nextOne"
           text
-          :disabled="!isNaN(formDataIndex) && formDataIndex >= dataList.leng - 1">
-          {{ ct('下一个') }}（→）
+          :disabled="!isNaN(formDataIndex) && formDataIndex >= dataList.length - 1">
+          {{ ct('下一个') }}（ctrl/alt + →）
         </el-button>
       </div>
     </template>
   </el-dialog>
 </template>
 <script setup lang="ts">
-import {reactive, ref, onMounted, watch} from 'vue';
+import {reactive, ref, onMounted, onUnmounted,onActivated,onDeactivated, watch} from 'vue';
 import {ElLoadingService, ElMessage, ElMessageBox} from 'element-plus';
-import {useI18nStore, ct} from 'yh-i18n';
+import {useI18nStore, ct} from './index';
 import http from '@/libs/api.request';
-import {VxeFormInstance, VxeFormPropTypes} from 'vxe-table';
-import {exportExcel, importExcel} from './excelTool';
+import {exportExcel, importExcel, parseTranslateContent} from './excelTool';
+
+interface TranslateItem {
+  id?: string;
+  name: string;
+  content: string;
+  [key: string]: any;
+}
+
+interface ListColumn {
+  field: string;
+  title: string;
+  minWidth: string;
+}
+
+interface SaveData {
+  name: string;
+  content: Record<string, string> | string;
+  id?: string;
+}
+
 const i18nStore = useI18nStore();
-const vxeFormRef = ref<VxeFormInstance>();
+const formRef = ref<FormInstance>();
+const langFieldsRef = ref<InstanceType<typeof import('element-plus')['ElInput']>>();
 
 const insertUrl = '/translate/insert';
 const updateUrl = '/translate/edit';
@@ -165,8 +195,8 @@ const listForm = reactive({
   pageSize: 10,
   total: 0,
 });
-const listColumns = reactive<any>([]);
-const dataList = ref<any>([]);
+const listColumns = reactive<ListColumn[]>([]);
+const dataList = ref<TranslateItem[]>([]);
 function getDataList(isReset = false) {
   let {name, pageNum, pageSize} = listForm;
   if (isReset) {
@@ -188,26 +218,14 @@ function getDataList(isReset = false) {
     .then((res) => {
       let localKeys = i18nStore.localList.map((item) => item.value);
       let {records, total} = 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));
       dataList.value = records;
       listForm.total = total;
     })
+    .catch((error) => {
+      ElMessage.error('获取数据失败');
+      console.error('获取列表数据失败:', error);
+    })
     .finally(() => {
       loading.close();
     });
@@ -238,15 +256,17 @@ function resetList() {
 }
 
 const langList = Object.keys(i18nStore.langList);
-const formDataIndex = ref();
-const formData = reactive<any>({});
+const formDataIndex = ref<number>();
+const formData = reactive<TranslateItem>({
+  name: '',
+  content: '',
+});
 const formShow = ref(false);
-let inputs: HTMLInputElement[] = [];
 function cancelForm() {
-  vxeFormRef?.value?.reset();
-  vxeFormRef?.value?.clearValidate();
+  formRef.value?.resetFields();
+  formRef.value?.clearValidate();
   formDataIndex.value = void 0;
-  formData.id = null;
+  formData.id = undefined;
   formShow.value = false;
 }
 
@@ -255,7 +275,7 @@ function addOne() {
 }
 
 function prevOne() {
-  if (formDataIndex.value > 0) {
+  if (formDataIndex.value !== void 0 && formDataIndex.value > 0) {
     let index = formDataIndex.value - 1;
     let item = dataList.value[index];
     editOne(item, index);
@@ -264,6 +284,13 @@ function prevOne() {
 
 function editOne(item, index) {
   formDataIndex.value = index;
+  // 先清空表单数据，除了 id
+  for (const key in formData) {
+    if (key !== 'id') {
+      delete formData[key];
+    }
+  }
+  // 然后将新项目的数据复制到表单
   for (const key in item) {
     if (Object.prototype.hasOwnProperty.call(item, key)) {
       const val = item[key];
@@ -272,13 +299,12 @@ function editOne(item, index) {
   }
   formShow.value = true;
   setTimeout(() => {
-    (document.querySelector('#i18nFormItem1 input') as HTMLInputElement)?.focus();
-    inputs = Array.from(document.querySelectorAll('.i18n-form-item input'));
+    langFieldsRef.value[0]?.focus();
   }, 500);
 }
 
 function nextOne() {
-  if (formDataIndex.value < dataList.value.length - 1) {
+  if (formDataIndex.value !== void 0 && formDataIndex.value < dataList.value.length - 1) {
     let index = formDataIndex.value + 1;
     let item = dataList.value[index];
     editOne(item, index);
@@ -286,10 +312,10 @@ function nextOne() {
 }
 
 function saveOne() {
-  let isAdd = !!formData.id;
+  let isAdd = !!!formData.id;
   let url = updateUrl;
-  vxeFormRef?.value?.validate().then((errMap) => {
-    if (!errMap) {
+  formRef.value?.validate((valid) => {
+    if (valid) {
       let data: any = {
         name: formData.name,
         content: {},
@@ -316,13 +342,13 @@ function saveOne() {
           if (res?.data?.status === 200) {
             ElMessage.success(res.data.msg);
             if (isAdd) {
+              cancelForm();
+              getDataList(true);
+            } else {
               dataList.value[formDataIndex.value] = {
                 ...formData,
               };
               nextOne();
-            } else {
-              cancelForm();
-              getDataList();
             }
           } else {
             ElMessage.error(res.data.msg);
@@ -355,7 +381,8 @@ function delOne(id) {
 
 function delMore() {
   ElMessageBox.confirm('确认删除选中的翻译记录吗？').then(async () => {
-    let ids = i18nList.value?.getSelectionRows().map((row) => row.id);
+    const selectedRows = i18nList.value?.getSelectionRows();
+    const ids = selectedRows?.map((row) => row.id) || [];
     if (ids && ids.length) {
       let len = ids.length;
       let loading = ElLoadingService({
@@ -391,20 +418,10 @@ function delMore() {
   });
 }
 
-const formItems = reactive<VxeFormPropTypes.Items>([
-  {
-    field: 'name',
-    span: 24,
-    title: '翻译键值',
-    itemRender: {
-      name: '$input',
-      props: {class: 'i18n-form-item', id: `i18nFormItem${1}`},
-    },
-  },
-]);
+const langFields = reactive<{field: string; label: string; id: string}[]>([]);
 
-const formRules = reactive<VxeFormPropTypes.Rules>({
-  name: [{required: true, type: 'string', message: '请输入翻译键值'}],
+const formRules = reactive({
+  name: [{required: true, message: '请输入翻译键值', trigger: 'blur'}],
 });
 
 let needInit = true;
@@ -419,14 +436,10 @@ watch(
           title: item.label,
           minWidth: '200',
         });
-        formItems.push({
+        langFields.push({
           field: item.value,
-          span: 24,
-          title: item.label,
-          itemRender: {
-            name: '$input',
-            props: {class: 'i18n-form-item', id: `i18nFormItem${index + 2}`},
-          },
+          label: item.label,
+          id: `i18nFormItem${index + 2}`,
         });
       });
     }
@@ -437,51 +450,41 @@ watch(
   }
 );
 
+function keydownHandler(e: KeyboardEvent) {
+  if (!formShow.value) return;
+  const {key, ctrlKey, altKey} = e;
+  if (key === 's' && ctrlKey) {
+    e.preventDefault();
+    e.stopPropagation();
+    saveOne();
+  }
+  if (key === 'ArrowRight' && (ctrlKey || altKey)) {
+    e.preventDefault();
+    e.stopPropagation();
+    nextOne();
+  }
+  if (key === 'ArrowLeft' && (ctrlKey || altKey)) {
+    e.preventDefault();
+    e.stopPropagation();
+    prevOne();
+  }
+}
+
 onMounted(() => {
   getDataList();
-  window.addEventListener('keydown', (e) => {
-    let {key, ctrlKey, altKey} = e;
-    if (key === 's' && ctrlKey) {
-      e.preventDefault();
-      e.stopPropagation();
-      saveOne();
-    }
-    if (key === 'ArrowRight' && (ctrlKey || altKey)) {
-      e.preventDefault();
-      e.stopPropagation();
-      nextOne();
-    }
-    if (key === 'ArrowLeft' && (ctrlKey || altKey)) {
-      e.preventDefault();
-      e.stopPropagation();
-      prevOne();
-    }
-    if (key === 'Tab') {
-      e.preventDefault();
-      e.stopPropagation();
-      if (
-        document.activeElement ||
-        // @ts-ignore
-        inputs.includes(document.activeElement)
-      ) {
-        // @ts-ignore
-        let index = inputs.indexOf(document.activeElement);
+  window.addEventListener('keydown', keydownHandler);
+});
 
-        if (index === inputs.length) {
-          index = 0;
-        } else {
-          index++;
-        }
-        inputs[index].focus();
-      } else {
-        setTimeout(() => {
-          if (!document.activeElement || !inputs.includes(document.activeElement as HTMLInputElement)) {
-            (document.querySelector('#i18nFormItem1 input') as HTMLInputElement)?.focus();
-          }
-        }, 100);
-      }
-    }
-  });
+onUnmounted(() => {
+  window.removeEventListener('keydown', keydownHandler);
+});
+
+onActivated(() => {
+  window.addEventListener('keydown', keydownHandler);
+});
+
+onDeactivated(() => {
+  window.removeEventListener('keydown', keydownHandler);
 });
 </script>
 <style lang="scss">

package/newLanguage.vue

@@ -0,0 +1,71 @@
+<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: '/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 {storeToRefs} from 'pinia';
+  import {ref, watch} from 'vue';
+  import {useRouter} from 'vue-router';
+
+  const router = useRouter();
+
+  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.7",
+  "version": "2.3.9",
   "description": "对于国际化的封装",
   "main": "index.js",
   "scripts": {
@@ -15,7 +15,7 @@
     "vue-i18n": "^9.0.0",
     "vue": "^3.0.0",
     "vxe-table": "^4.3.10",
-    "element-plus": "^2.3.8"
+    "element-plus": "^2.9.0"
   },
   "author": "Liubin"
 }

package/lang/baseFa.js

@@ -1,27 +0,0 @@
-export default {
-  翻译键名: "کلید ترجمه",
-  翻译管理: "مدیریت ترجمه",
-  键入以筛选键名: "برای فیلتر کردن کلید تایپ کنید",
-  搜索: "جستجو",
-  新增: "جدید",
-  批量删除: "حذف گروهی",
-  重置: "بازنشانی",
-  编辑: "ویرایش",
-  删除: "حذف",
-  操作: "عملیات",
-  导出: "صادرات",
-  导入: "واردات",
-  翻译键值: "مقدار ترجمه",
-  新增翻译: "افزودن ترجمه",
-  编辑翻译: "ویرایش ترجمه",
-  请输入翻译键值: "لطفاً مقدار ترجمه را وارد کنید",
-  上一个: "قبلی",
-  下一个: "بعدی",
-  取消: "لغو",
-  中文简体: "چینی ساده شده",
-  English: "انگلیسی",
-  ไทย: "تایلندی",
-  "Việt nam": "ویتنامی",
-  Türkçe: "ترکی",
-  "فارسی": "فارسی",
-};

package/lang/baseTh.js

@@ -1,27 +0,0 @@
-export default {
-  翻译键名: "ชื่อคีย์การแปล",
-  翻译管理: "การจัดการการแปล",
-  键入以筛选键名: "พิมพ์เพื่อกรองชื่อคีย์",
-  搜索: "ค้นหา",
-  新增: "เพิ่มใหม่",
-  批量删除: "ลบแบทช์",
-  重置: "รีเซ็ต",
-  编辑: "บรรณาธิการ",
-  删除: "ลบ",
-  操作: "การดำเนินงาน",
-  导出: "ส่งออก",
-  导入: "นำเข้า",
-  翻译键值: "แปลค่ากุญแจ",
-  新增翻译: "เพิ่มการแปล",
-  编辑翻译: "แก้ไขการแปล",
-  请输入翻译键值: "โปรดป้อนค่ากุญแจการแปล",
-  上一个: "ก่อนหน้า",
-  下一个: "ถัดไป",
-  取消: "การยกเลิก",
-  中文简体: "ภาษาจีนตัวย่อ",
-  English: "ภาษาอังกฤษ",
-  ไทย: "ไทย",
-  "Việt nam": "เวียดนาม",
-  Türkçe: "ตุรกี",
-  "فارسی": "ภาษาเปอร์เซีย"
-};

package/lang/baseTr.js

@@ -1,27 +0,0 @@
-export default {
-  翻译键名: "Anahtar isimlerini çevir",
-  翻译管理: "Çeviri Yönetimi",
-  键入以筛选键名: "Anahtar isimlerini silmek için yazın",
-  搜索: "arama",
-  新增: "Yeni ekleme",
-  批量删除: "Toplu silme",
-  重置: "Sıfırla",
-  编辑: "edit",
-  删除: "Sil",
-  操作: "operasyon",
-  导出: "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.",
-  "Việt nam": "Vietnamca",
-  Türkçe: "Türkçe",
-  "فارسی": "Farsça"
-};

package/lang/baseVi.js

@@ -1,27 +0,0 @@
-export default {
-  翻译键名: "Tên khóa dịch",
-  翻译管理: "Quản lý phiên dịch",
-  键入以筛选键名: "Nhập để lọc các tên khóa",
-  搜索: "Tìm kiếm",
-  新增: "Mới",
-  批量删除: "Xóa hàng loạt",
-  重置: "Đặt lại",
-  编辑: "Chỉnh sửa",
-  删除: "Xoá",
-  操作: "Hoạt động",
-  导出: "Xuất",
-  导入: "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.",
-  "Việt nam": "Việt nam",
-  Türkçe: "Thổ Nhĩ Kỳ",
-  "فارسی": "Tiếng Ba Tư"
-};