فهرست منبع

多语言组件优化

Cyrus Zhou 6 ماه پیش
والد
کامیت
435759f07a
2فایلهای تغییر یافته به همراه203 افزوده شده و 68 حذف شده
  1. 119 0
      Web/lang/index.json
  2. 84 68
      Web/src/components/multiLangInput/index.vue

+ 119 - 0
Web/lang/index.json

@@ -12822,5 +12822,124 @@
     "zh-tw": "否",
     "en": "No",
     "it": "No"
+  },
+  "c0pv6i5": {
+    "zh-cn": " 增加表 ",
+    "zh-hk": "增加表",
+    "zh-tw": "新增資料表",
+    "en": "Add Table",
+    "it": "Aggiungi tabella"
+  },
+  "h4bec35": {
+    "zh-cn": " 编辑表 ",
+    "zh-hk": "編輯表",
+    "zh-tw": "編輯資料表",
+    "en": "Edit Table",
+    "it": "Modifica tabella"
+  },
+  "bh5yqk5": {
+    "zh-cn": " 删除表 ",
+    "zh-hk": "刪除表",
+    "zh-tw": "刪除資料表",
+    "en": "Delete Table",
+    "it": "Elimina tabella"
+  },
+  "bna02p5": {
+    "zh-cn": " 可视化 ",
+    "zh-hk": "可視化",
+    "zh-tw": "視覺化",
+    "en": "Visualization",
+    "it": "Visualizzazione"
+  },
+  "c0gmkr5": {
+    "zh-cn": " 增加列 ",
+    "zh-hk": "增加欄",
+    "zh-tw": "新增欄位",
+    "en": "Add Column",
+    "it": "Aggiungi colonna"
+  },
+  "bdf2h26": {
+    "zh-cn": " 生成实体 ",
+    "zh-hk": "生成實體",
+    "zh-tw": "產生實體",
+    "en": "Generate Entity",
+    "it": "Genera entità"
+  },
+  "b8xvec6": {
+    "zh-cn": " 生成种子 ",
+    "zh-hk": "生成種子",
+    "zh-tw": "產生種子",
+    "en": "Generate Seed",
+    "it": "Genera seed"
+  },
+  "i898fx5": {
+    "zh-cn": " 表编辑 ",
+    "zh-hk": "表編輯",
+    "zh-tw": "資料表編輯",
+    "en": "Table Editing",
+    "it": "Modifica tabella"
+  },
+  "bdmju65": {
+    "zh-cn": " 列编辑 ",
+    "zh-hk": "欄編輯",
+    "zh-tw": "欄位編輯",
+    "en": "Column Editing",
+    "it": "Modifica colonna"
+  },
+  "cjromq8": {
+    "zh-cn": " 生成种子数据 ",
+    "zh-hk": "生成種子數據",
+    "zh-tw": "產生種子資料",
+    "en": "Generate Seed Data",
+    "it": "Genera dati seed"
+  },
+  "dxri64": {
+    "zh-cn": " 增加 ",
+    "zh-hk": "增加",
+    "zh-tw": "新增",
+    "en": "Add",
+    "it": "Aggiungi"
+  },
+  "b5btaq6": {
+    "zh-cn": " 生成配置 ",
+    "zh-hk": "生成配置",
+    "zh-tw": "產生設定",
+    "en": "Generate Configuration",
+    "it": "Genera configurazione"
+  },
+  "him4pp6": {
+    "zh-cn": " 增加配置 ",
+    "zh-hk": "增加配置",
+    "zh-tw": "新增設定",
+    "en": "Add Configuration",
+    "it": "Aggiungi configurazione"
+  },
+  "v62uxpj": {
+    "zh-cn": " 保证字段值的唯一性,排除null值 ",
+    "zh-hk": "保证字段值的唯一性,排除null值",
+    "zh-tw": "保證欄位值的唯一性,排除null值",
+    "en": "Ensure field value uniqueness, excluding null values",
+    "it": "Garantire l'unicità dei valori dei campi, escludendo i valori null"
+  },
+  "9kg3rb9": {
+    "zh-cn": "确定要删除选中的 ",
+    "zh-hk": "确定要删除选中的",
+    "zh-tw": "確定要刪除選取的",
+    "en": "Confirm deletion of selected",
+    "it": "Confermi di voler eliminare i selezionati"
+  },
+  "b6xani6": {
+    "zh-cn": " 条记录吗?",
+    "zh-hk": "条记录吗?",
+    "zh-tw": "筆記錄嗎?",
+    "en": "records?",
+    "it": "record?"
+  },
+  "dzz9z4": {
+    "zh-cn": " 复制 ",
+    "zh-hk": "复制",
+    "zh-tw": "複製",
+    "en": "Copy",
+    "it": "Copia"
   }
 }

+ 84 - 68
Web/src/components/multiLangInput/index.vue

@@ -1,6 +1,7 @@
 <template>
     <div class="multi-lang-input">
-    <el-input v-model="inputModelValue" :placeholder="`请输入 ${currentLangLabel}`" clearable @update:model-value="(val: string) => { emit('update:modelValue', val); }">
+        <el-input v-model="inputModelValue" :placeholder="`请输入 ${currentLangLabel}`" clearable
+            @update:model-value="(val: string) => emit('update:modelValue', val)">
             <template #append>
                 <el-button @click="openDialog" circle>
                     <template #icon>
@@ -15,7 +16,8 @@
                 <el-row :gutter="35">
                     <el-col v-for="lang in languages" :key="lang.code" :span="24" class="mb10">
                         <el-form-item :label="lang.label">
-                            <el-input v-model="multiLangValue[lang.code]" :placeholder="`请输入: ${lang.label}`" clearable />
+                            <el-input v-model="multiLangValue[lang.code]" :placeholder="`请输入: ${lang.label}`"
+                                clearable />
                         </el-form-item>
                     </el-col>
                 </el-row>
@@ -31,24 +33,18 @@
 </template>
 
 <script setup lang="ts">
-import { ref, computed, onMounted } from 'vue';
-import { useLangStore } from '/@/stores/useLangStore';
-import { Local } from '/@/utils/storage';
-import { getAPI } from '/@/utils/axios-utils';
-import { SysLangTextApi } from '/@/api-services/api';
-import { ElMessage } from 'element-plus';
-const emit = defineEmits<{ (e: 'update:modelValue', value?: string | null): void; }>();
-const ruleFormRef = ref();
-
-const fetchMultiLang = async () => {    
-    const result = await getAPI(SysLangTextApi).apiSysLangTextListPost({ entityName: props.entityName, entityId: props.entityId, fieldName: props.fieldName, pageSize: 200 }).then(res => res.data.result)
-    return result ?? [];
-};
+import { ref, computed, onMounted } from "vue";
+import { useLangStore } from "/@/stores/useLangStore";
+import { Local } from "/@/utils/storage";
+import { getAPI } from "/@/utils/axios-utils";
+import { SysLangTextApi } from "/@/api-services/api";
+import { ElMessage } from "element-plus";
+
+const emit = defineEmits<{
+    (e: "update:modelValue", value?: string | null): void;
+}>();
 
-const inputModelValue = computed({
-    get: () => props.modelValue,
-    set: (val) => emit('update:modelValue', val),
-});
+const ruleFormRef = ref();
 
 const props = defineProps<{
     modelValue?: string | null;
@@ -57,94 +53,109 @@ const props = defineProps<{
     fieldName: string;
 }>();
 
-// 全局语言
+const inputModelValue = computed({
+    get: () => props.modelValue,
+    set: (val) => emit("update:modelValue", val),
+});
 const langStore = useLangStore();
-const languages = ref<any>([] as any);
-
-// 当前语言(可根据用户设置或浏览器设置)
-const currentLang = ref('zh-CN');
-const activeLang = ref('zh-CN');
+const languages = ref<any[]>([]);
 
-// 是否弹框
+const currentLang = ref("zh-CN");
+const activeLang = ref("zh-CN");
 const dialogVisible = ref(false);
+const multiLangValue = ref<Record<string, string>>({});
 
-// 多语言对象
-const multiLangValue = ref<Record<string, string | null | undefined>>({});
-
-// 当前语言显示 Label
 const currentLangLabel = computed(() => {
     return (
-        languages.value.find((l: { code: string; }) => l.code === currentLang.value)?.Label || currentLang.value
+        languages.value.find((l) => l.code === currentLang.value)?.label ||
+        currentLang.value
     );
 });
 
-// 初始化语言
+const fetchMultiLang = async () => {
+    const result = await getAPI(SysLangTextApi)
+        .apiSysLangTextListPost({
+            entityName: props.entityName,
+            entityId: props.entityId,
+            fieldName: props.fieldName,
+            pageSize: 200,
+        })
+        .then((res) => res.data.result);
+    return result ?? [];
+};
+
 onMounted(async () => {
     if (langStore.languages.length === 0) {
         await langStore.loadLanguages();
     }
-    const themeConfig = Local.get('themeConfig');
+    languages.value = langStore.languages;
+
+    const themeConfig = Local.get("themeConfig");
     const globalI18n = themeConfig?.globalI18n;
+
     if (globalI18n) {
-        const matched = langStore.languages.find(l => l.code === globalI18n);
-        const langCode = matched?.code || 'zh-CN';
+        const matched = langStore.languages.find(
+            (l) => l.code === globalI18n || l.value === globalI18n
+        );
+        const langCode = matched?.code || "zh-CN";
         currentLang.value = langCode;
         activeLang.value = langCode;
-    }
-    languages.value = langStore.languages;
-
-    if (languages.value.length > 0) {
+    } else if (languages.value.length > 0) {
         currentLang.value = languages.value[0].code;
         activeLang.value = languages.value[0].code;
     }
 });
+
 const aiTranslation = async () => {
-    languages.value.forEach(async (element: { code: string; value: string | null; }) => {
-        if (element.code == currentLang.value) {
-            return;
-        }
-        multiLangValue.value[element.code] = '正在翻译...';
+    for (const element of languages.value) {
+        if (element.code === currentLang.value) continue;
+        multiLangValue.value[element.code] = "正在翻译...";
         try {
-            const text = await getAPI(SysLangTextApi).apiSysLangTextAiTranslateTextPost({ originalText: props.modelValue, targetLang: element.value }).then(res => res.data.result);
-            if (text) {
-                multiLangValue.value[element.code] = text;
-            } else {
-                multiLangValue.value[element.code] = '';
-            }
+            const text = await getAPI(SysLangTextApi)
+                .apiSysLangTextAiTranslateTextPost({
+                    originalText: props.modelValue,
+                    targetLang: element.code,
+                })
+                .then((res) => res.data.result);
+
+            multiLangValue.value[element.code] = text || "";
         } catch (e: any) {
-            multiLangValue.value[element.code] = '';
+            multiLangValue.value[element.code] = "";
             ElMessage.warning(e.message);
         }
-    });
-}
+    }
+};
 
-// 打开对话框(点击按钮)
 const openDialog = async () => {
     if (!props.entityId) {
-        ElMessage.warning('请先保存数据!');
+        ElMessage.warning("请先保存数据!");
         return;
     }
-    multiLangValue.value = {};
     const res = await fetchMultiLang();
-    multiLangValue.value[currentLang.value] = props.modelValue;
-    res.forEach((element: { langCode?: string | null; content?: string | null; }) => {
-        multiLangValue.value[element.langCode ?? 0] = element.content ?? '';
+
+    const newValues: Record<string, string> = {};
+    res.forEach((element: { langCode?: string | null; content?: string | null }) => {
+        if (element.langCode) {
+            newValues[element.langCode] = element.content ?? "";
+        }
     });
+
+    newValues[currentLang.value] = props.modelValue ?? "";
+
+    multiLangValue.value = newValues;
     dialogVisible.value = true;
     ruleFormRef.value?.resetFields();
 };
 
-// 关闭对话框(只是关闭)
 const closeDialog = () => {
     dialogVisible.value = false;
     multiLangValue.value = {};
     ruleFormRef.value?.resetFields();
 };
 
-// 确认按钮(更新 + 关闭)
 const confirmDialog = async () => {
     const langItems = Object.entries(multiLangValue.value)
-        .filter(([_, content]) => content && content.trim() !== '')
+        .filter(([_, content]) => content && content.trim() !== "")
         .map(([code, content]) => ({
             entityName: props.entityName,
             entityId: props.entityId,
@@ -154,19 +165,21 @@ const confirmDialog = async () => {
         }));
 
     if (langItems.length === 0) {
-        ElMessage.warning('请输入至少一条多语言内容!');
+        ElMessage.warning("请输入至少一条多语言内容!");
         return;
     }
 
     try {
         await getAPI(SysLangTextApi).apiSysLangTextBatchSavePost(langItems);
-        ElMessage.success('保存成功!');
-        // 同步当前语言内容到父组件 input
-        emit('update:modelValue', multiLangValue.value[currentLang.value]);
+        ElMessage.success("保存成功!");
+        emit(
+            "update:modelValue",
+            multiLangValue.value[currentLang.value] ?? props.modelValue
+        );
         dialogVisible.value = false;
     } catch (err) {
         console.error(err);
-        ElMessage.error('保存失败!');
+        ElMessage.error("保存失败!");
     }
     dialogVisible.value = false;
     ruleFormRef.value?.resetFields();
@@ -177,5 +190,8 @@ const confirmDialog = async () => {
 .multi-lang-input {
     width: 100%;
 }
-.mb10:last-child { margin-bottom: 0 !important; }
+
+.mb10:last-child {
+    margin-bottom: 0 !important;
+}
 </style>