From 49c8eb53b15a01553f31693c10a2a6d64ddc15c2 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E7=8E=8B=E4=B8=AD=E5=A5=87?= <wangzhongqi95@gmail.com>
Date: Sat, 17 May 2025 23:05:49 +0800
Subject: [PATCH] perf: dict add i18n

---
 .../advanced/table-row-check-alert.vue        | 10 ++--
 src/locales/langs/en-us.ts                    | 25 +++++++++-
 src/locales/langs/zh-cn.ts                    | 29 ++++++++++--
 src/typings/app.d.ts                          | 15 ++++++
 src/views/system/dict/index.vue               | 36 +++++++-------
 .../dict/modules/dict-data-operate-drawer.vue | 47 +++++++++++--------
 .../system/dict/modules/dict-data-search.vue  | 10 +++-
 .../dict/modules/dict-type-operate-drawer.vue | 27 ++++++-----
 8 files changed, 140 insertions(+), 59 deletions(-)

diff --git a/src/components/advanced/table-row-check-alert.vue b/src/components/advanced/table-row-check-alert.vue
index 729aa19a..db4e32d6 100644
--- a/src/components/advanced/table-row-check-alert.vue
+++ b/src/components/advanced/table-row-check-alert.vue
@@ -1,4 +1,6 @@
 <script setup lang="ts">
+import { $t } from '@/locales';
+
 defineOptions({
   name: 'TableRowCheckAlert'
 });
@@ -9,10 +11,12 @@ const checkedRowKeys = defineModel<CommonType.IdType[]>('checkedRowKeys', { requ
 <template>
   <NAlert type="info">
     <span v-if="checkedRowKeys.length">
-      已选择{{ checkedRowKeys.length }}条记录
-      <NButton class="pl-6px" text type="primary" @click="() => (checkedRowKeys = [])">清空</NButton>
+      {{ $t('common.selected') }} {{ checkedRowKeys.length }} {{ $t('common.anyRecords') }}
+      <NButton class="pl-6px" text type="primary" @click="() => (checkedRowKeys = [])">
+        {{ $t('common.clear') }}
+      </NButton>
     </span>
-    <span v-else>未选中任何记录</span>
+    <span v-else>{{ $t('common.noSelectRecord') }}</span>
   </NAlert>
 </template>
 
diff --git a/src/locales/langs/en-us.ts b/src/locales/langs/en-us.ts
index f7cd578a..2b0f2da9 100644
--- a/src/locales/langs/en-us.ts
+++ b/src/locales/langs/en-us.ts
@@ -66,7 +66,11 @@ const local: App.I18n.Schema = {
       yes: 'Yes',
       no: 'No'
     },
-    second: 'Second'
+    second: 'Second',
+    selected: 'selected',
+    anyRecords: 'records',
+    clear: 'Clear',
+    noSelectRecord: 'No Records Selected'
   },
   request: {
     logout: 'Logout user after request failed',
@@ -464,11 +468,15 @@ const local: App.I18n.Schema = {
       },
       dict: {
         title: 'Dictionary List',
+        dictTypeTitle: 'Dictionary Type List',
         dictName: 'Dictionary Name',
         dictType: 'Dictionary Type',
         status: 'Status',
         remark: 'Remark',
         createTime: 'Create Time',
+        refreshCacheSuccess: 'Refresh cache successfully',
+        refreshCache: 'Refresh Cache',
+        confirmDeleteDictType: 'Are you sure you want to delete dic type',
         data: {
           title: 'Dictionary Data List',
           label: 'Dictionary Label',
@@ -482,6 +490,14 @@ const local: App.I18n.Schema = {
           createTime: 'Create Time'
         },
         form: {
+          dictId: {
+            required: 'Please enter Dictionary Id',
+            invalid: 'Dictionary Id cannot be empty'
+          },
+          dictCode: {
+            required: 'Please enter Dictionary Code',
+            invalid: 'Dictionary Code cannot be empty'
+          },
           dictName: {
             required: 'Please enter Dictionary Name',
             invalid: 'Dictionary Name cannot be empty'
@@ -526,7 +542,12 @@ const local: App.I18n.Schema = {
         addDict: 'Add Dictionary',
         editDict: 'Edit Dictionary',
         addDictData: 'Add Dictionary Data',
-        editDictData: 'Edit Dictionary Data'
+        editDictData: 'Edit Dictionary Data',
+        addDictType: 'Add Dictionary Type',
+        editDictType: 'Edit Dictionary Type',
+        exportDictType: 'Export Dictionary Type',
+        refreshDictType: 'Refresh Dictionary Type',
+        dictTypeIsEmpty: 'Dictionary type is empty'
       },
       menu: {
         title: 'Menu List',
diff --git a/src/locales/langs/zh-cn.ts b/src/locales/langs/zh-cn.ts
index e751d6e0..da4dd3d1 100644
--- a/src/locales/langs/zh-cn.ts
+++ b/src/locales/langs/zh-cn.ts
@@ -66,7 +66,11 @@ const local: App.I18n.Schema = {
       yes: '是',
       no: '否'
     },
-    second: '秒'
+    second: '秒',
+    selected: '已选择',
+    anyRecords: '条记录',
+    clear: '清空',
+    noSelectRecord: '未选中任何记录'
   },
   request: {
     logout: '请求失败后登出用户',
@@ -464,24 +468,36 @@ const local: App.I18n.Schema = {
       },
       dict: {
         title: '字典列表',
+        dictTypeTitle: '字典类型列表',
         dictName: '字典名称',
         dictType: '字典类型',
         status: '状态',
         remark: '备注',
         createTime: '创建时间',
+        refreshCacheSuccess: '刷新缓存成功',
+        refreshCache: '刷新缓存',
+        confirmDeleteDictType: '确定删除字典类型',
         data: {
           title: '字典数据列表',
           label: '字典标签',
           value: '字典键值',
           dictSort: '字典排序',
           isDefault: '是否默认',
-          listClass: '回显样式',
+          listClass: '标签样式',
           cssClass: 'CSS样式',
           status: '状态',
           remark: '备注',
           createTime: '创建时间'
         },
         form: {
+          dictId: {
+            required: '请输入字典主键',
+            invalid: '字典主键不能为空'
+          },
+          dictCode: {
+            required: '请输入字典编码',
+            invalid: '字典编码不能为空'
+          },
           dictName: {
             required: '请输入字典名称',
             invalid: '字典名称不能为空'
@@ -519,14 +535,19 @@ const local: App.I18n.Schema = {
             invalid: '回显样式不能为空'
           },
           cssClass: {
-            required: '请输入CSS样式',
+            required: '请输入样式属性（其他样式扩展）',
             invalid: 'CSS样式不能为空'
           }
         },
         addDict: '新增字典',
         editDict: '编辑字典',
         addDictData: '新增字典数据',
-        editDictData: '编辑字典数据'
+        editDictData: '编辑字典数据',
+        addDictType: '新增字典类型',
+        editDictType: '编辑字典类型',
+        exportDictType: '导出字典类型',
+        refreshDictType: '刷新列表',
+        dictTypeIsEmpty: '暂无字典类型'
       },
       menu: {
         title: '菜单列表',
diff --git a/src/typings/app.d.ts b/src/typings/app.d.ts
index 6ac7af3f..d9ec7b98 100644
--- a/src/typings/app.d.ts
+++ b/src/typings/app.d.ts
@@ -362,6 +362,10 @@ declare namespace App {
           no: string;
         };
         second: string;
+        selected: string;
+        anyRecords: string;
+        clear: string;
+        noSelectRecord: string;
       };
       request: {
         logout: string;
@@ -606,11 +610,15 @@ declare namespace App {
           };
           dict: {
             title: string;
+            dictTypeTitle: string;
             dictName: string;
             dictType: string;
             status: string;
             remark: string;
             createTime: string;
+            refreshCacheSuccess: string;
+            refreshCache: string;
+            confirmDeleteDictType: string;
             data: {
               title: string;
               label: string;
@@ -624,6 +632,8 @@ declare namespace App {
               createTime: string;
             };
             form: {
+              dictId: FormMsg;
+              dictCode: FormMsg;
               dictName: FormMsg;
               dictType: FormMsg;
               status: FormMsg;
@@ -639,6 +649,11 @@ declare namespace App {
             editDict: string;
             addDictData: string;
             editDictData: string;
+            addDictType: string;
+            editDictType: string;
+            exportDictType: string;
+            refreshDictType: string;
+            dictTypeIsEmpty: string;
           };
           menu: {
             title: string;
diff --git a/src/views/system/dict/index.vue b/src/views/system/dict/index.vue
index 10f5b617..f76dc863 100644
--- a/src/views/system/dict/index.vue
+++ b/src/views/system/dict/index.vue
@@ -53,7 +53,7 @@ const { columns, columnChecks, data, getData, getDataByPage, loading, mobilePagi
     },
     {
       key: 'dictLabel',
-      title: '字典标签',
+      title: $t('page.system.dict.data.label'),
       align: 'center',
       minWidth: 80,
       resizable: true,
@@ -66,7 +66,7 @@ const { columns, columnChecks, data, getData, getDataByPage, loading, mobilePagi
     },
     {
       key: 'dictValue',
-      title: '字典键值',
+      title: $t('page.system.dict.data.value'),
       align: 'center',
       minWidth: 80,
       resizable: true,
@@ -76,7 +76,7 @@ const { columns, columnChecks, data, getData, getDataByPage, loading, mobilePagi
     },
     {
       key: 'dictSort',
-      title: '字典排序',
+      title: $t('page.system.dict.data.dictSort'),
       align: 'center',
       minWidth: 80,
       resizable: true,
@@ -86,7 +86,7 @@ const { columns, columnChecks, data, getData, getDataByPage, loading, mobilePagi
     },
     {
       key: 'remark',
-      title: '备注',
+      title: $t('page.system.dict.data.remark'),
       align: 'center',
       minWidth: 80,
       resizable: true,
@@ -96,7 +96,7 @@ const { columns, columnChecks, data, getData, getDataByPage, loading, mobilePagi
     },
     {
       key: 'createTime',
-      title: '创建时间',
+      title: $t('page.system.dict.data.createTime'),
       align: 'center',
       minWidth: 80,
       resizable: true,
@@ -193,7 +193,7 @@ async function handleReset() {
 async function handleRefreshCache() {
   const { error } = await fetchRefreshCache();
   if (error) return;
-  window.$message?.success('刷新缓存成功');
+  window.$message?.success($t('page.system.dict.refreshCacheSuccess'));
   await getData();
 }
 
@@ -260,7 +260,7 @@ function renderSuffix({ option }: { option: TreeOption }) {
         text
         type="primary"
         icon="material-symbols:drive-file-rename-outline-outline"
-        tooltip-content="修改"
+        tooltip-content={$t('common.edit')}
         onClick={(event: Event) => {
           event.stopPropagation();
           handleEditType(option as Api.System.DictType);
@@ -270,8 +270,8 @@ function renderSuffix({ option }: { option: TreeOption }) {
         text
         type="error"
         icon="material-symbols:delete-outline"
-        tooltip-content="删除"
-        popconfirm-content={`确定删除字典类型 ${option.dictType} 吗？`}
+        tooltip-content={$t('common.delete')}
+        popconfirm-content={`${$t('page.system.dict.confirmDeleteDictType')} ${option.dictType} ？`}
         onClick={(event: Event) => event.stopPropagation()}
         onPositiveClick={() => handleDeleteType(option as Api.System.DictType)}
       />
@@ -294,12 +294,12 @@ function handleEditType(dictType: Api.System.DictType) {
 async function handleDeleteType(dictType: Api.System.DictType) {
   const { error } = await fetchBatchDeleteDictType([dictType.dictId]);
   if (error) return;
-  window.$message?.success('删除成功');
+  window.$message?.success($t('common.deleteSuccess'));
   getTreeData();
 }
 
 async function handleExportType() {
-  download('/system/dict/type/export', searchParams, `字典类型_${new Date().getTime()}.xlsx`);
+  download('/system/dict/type/export', searchParams, `${$t('page.system.dict.dictType')}_${new Date().getTime()}.xlsx`);
 }
 
 const selectable = computed(() => {
@@ -308,14 +308,14 @@ const selectable = computed(() => {
 </script>
 
 <template>
-  <TableSiderLayout sider-title="字典类型列表">
+  <TableSiderLayout :sider-title="$t('page.system.dict.dictTypeTitle')">
     <template #header-extra>
       <ButtonIcon
         v-if="hasAuth('system:dict:add')"
         size="small"
         icon="material-symbols:add-rounded"
         class="h-18px text-icon"
-        tooltip-content="新增字典类型"
+        :tooltip-content="$t('page.system.dict.addDictType')"
         @click.stop="() => handleAddType()"
       />
       <ButtonIcon
@@ -323,14 +323,14 @@ const selectable = computed(() => {
         size="small"
         icon="material-symbols:download-rounded"
         class="h-18px text-icon"
-        tooltip-content="导出字典类型"
+        :tooltip-content="$t('page.system.dict.exportDictType')"
         @click.stop="() => handleExportType()"
       />
       <ButtonIcon
         size="small"
         icon="material-symbols:refresh-rounded"
         class="h-18px text-icon"
-        tooltip-content="刷新列表"
+        :tooltip-content="$t('page.system.dict.refreshDictType')"
         @click.stop="() => handleResetTreeData()"
       />
     </template>
@@ -354,7 +354,7 @@ const selectable = computed(() => {
           @update:selected-keys="handleClickTree"
         >
           <template #empty>
-            <NEmpty description="暂无字典类型" class="h-full min-h-200px justify-center" />
+            <NEmpty :description="$t('page.system.dict.dictTypeIsEmpty')" class="h-full min-h-200px justify-center" />
           </template>
         </NTree>
       </NSpin>
@@ -362,7 +362,7 @@ const selectable = computed(() => {
     <div class="h-full flex-col-stretch gap-12px overflow-hidden lt-sm:overflow-auto">
       <DictDataSearch v-model:model="searchParams" @reset="handleReset" @search="getDataByPage" />
       <TableRowCheckAlert v-model:checked-row-keys="checkedRowKeys" />
-      <NCard title="字典数据列表" :bordered="false" size="small" class="sm:flex-1-hidden card-wrapper">
+      <NCard :title="$t('page.system.dict.title')" :bordered="false" size="small" class="sm:flex-1-hidden card-wrapper">
         <template #header-extra>
           <TableHeaderOperation
             v-model:columns="columnChecks"
@@ -382,7 +382,7 @@ const selectable = computed(() => {
                 <template #icon>
                   <icon-material-symbols:refresh-rounded class="text-icon" />
                 </template>
-                刷新缓存
+                {{ $t('page.system.dict.refreshCache') }}
               </NButton>
             </template>
           </TableHeaderOperation>
diff --git a/src/views/system/dict/modules/dict-data-operate-drawer.vue b/src/views/system/dict/modules/dict-data-operate-drawer.vue
index efdc37bf..f2513440 100644
--- a/src/views/system/dict/modules/dict-data-operate-drawer.vue
+++ b/src/views/system/dict/modules/dict-data-operate-drawer.vue
@@ -34,8 +34,8 @@ const { createRequiredRule } = useFormRules();
 
 const title = computed(() => {
   const titles: Record<NaiveUI.TableOperateType, string> = {
-    add: '新增字典数据',
-    edit: '编辑字典数据'
+    add: $t('page.system.dict.addDictData'),
+    edit: $t('page.system.dict.editDictData')
   };
   return titles[props.operateType];
 });
@@ -68,9 +68,9 @@ function createDefaultModel(): Model {
 type RuleKey = Extract<keyof Model, 'dictCode' | 'dictLabel' | 'dictValue'>;
 
 const rules: Record<RuleKey, App.Global.FormRule> = {
-  dictCode: createRequiredRule('字典编码不能为空'),
-  dictLabel: createRequiredRule('字典标签不能为空'),
-  dictValue: createRequiredRule('字典键值不能为空')
+  dictCode: createRequiredRule($t('page.system.dict.form.dictCode.invalid')),
+  dictLabel: createRequiredRule($t('page.system.dict.form.dictLabel.invalid')),
+  dictValue: createRequiredRule($t('page.system.dict.form.dictValue.invalid'))
 };
 
 function handleUpdateModelWhenEdit() {
@@ -146,32 +146,41 @@ function renderTagLabel(option: { label: string; value: string }) {
   <NDrawer v-model:show="visible" :title="title" display-directive="show" :width="800" class="max-w-90%">
     <NDrawerContent :title="title" :native-scrollbar="false" closable>
       <NForm ref="formRef" :model="model" :rules="rules">
-        <NFormItem label="字典类型" path="dictType">
-          <NInput v-model:value="model.dictType" disabled placeholder="请输入字典类型" />
+        <NFormItem :label="$t('page.system.dict.dictType')" path="dictType">
+          <NInput
+            v-model:value="model.dictType"
+            disabled
+            :placeholder="$t('page.system.dict.form.dictType.required')"
+          />
         </NFormItem>
-        <NFormItem label="标签样式" path="listClass">
+        <NFormItem :label="$t('page.system.dict.data.listClass')" path="listClass">
           <NSelect
             v-model:value="model.listClass"
             clearable
             :options="listClassOptions"
-            placeholder="请选择标签样式"
+            :placeholder="$t('page.system.dict.form.listClass.required')"
             :render-label="renderTagLabel"
           />
         </NFormItem>
-        <NFormItem label="数据标签" path="dictLabel">
-          <NInput v-model:value="model.dictLabel" placeholder="请输入字典标签" />
+        <NFormItem :label="$t('page.system.dict.data.label')" path="dictLabel">
+          <NInput v-model:value="model.dictLabel" :placeholder="$t('page.system.dict.form.dictLabel.required')" />
         </NFormItem>
-        <NFormItem label="数据键值" path="dictValue">
-          <NInput v-model:value="model.dictValue" placeholder="请输入字典键值" />
+        <NFormItem :label="$t('page.system.dict.data.value')" path="dictValue">
+          <NInput v-model:value="model.dictValue" :placeholder="$t('page.system.dict.form.dictValue.required')" />
         </NFormItem>
-        <NFormItem label="css类名" path="cssClass">
-          <NInput v-model:value="model.cssClass" placeholder="请输入样式属性（其他样式扩展）" />
+        <NFormItem :label="$t('page.system.dict.data.cssClass')" path="cssClass">
+          <NInput v-model:value="model.cssClass" :placeholder="$t('page.system.dict.form.cssClass.required')" />
         </NFormItem>
-        <NFormItem label="显示排序" path="dictSort">
-          <NInputNumber v-model:value="model.dictSort" placeholder="请输入字典排序" />
+        <NFormItem :label="$t('page.system.dict.data.dictSort')" path="dictSort">
+          <NInputNumber v-model:value="model.dictSort" :placeholder="$t('page.system.dict.form.dictSort.required')" />
         </NFormItem>
-        <NFormItem label="备注" path="remark">
-          <NInput v-model:value="model.remark" :rows="3" type="textarea" placeholder="请输入备注" />
+        <NFormItem :label="$t('page.system.dict.data.remark')" path="remark">
+          <NInput
+            v-model:value="model.remark"
+            :rows="3"
+            type="textarea"
+            :placeholder="$t('page.system.dict.form.remark.required')"
+          />
         </NFormItem>
       </NForm>
       <template #footer>
diff --git a/src/views/system/dict/modules/dict-data-search.vue b/src/views/system/dict/modules/dict-data-search.vue
index 4c0cfbd3..e1ea2451 100644
--- a/src/views/system/dict/modules/dict-data-search.vue
+++ b/src/views/system/dict/modules/dict-data-search.vue
@@ -34,8 +34,14 @@ async function search() {
       <NCollapseItem :title="$t('common.search')" name="user-search">
         <NForm ref="formRef" :model="model" label-placement="left" :label-width="80">
           <NGrid responsive="self" item-responsive>
-            <NFormItemGi :show-feedback="false" span="12" label="字典标签" path="dictLabel" class="pr-24px">
-              <NInput v-model:value="model.dictLabel" placeholder="请输入字典标签" />
+            <NFormItemGi
+              :show-feedback="false"
+              span="12"
+              :label="$t('page.system.dict.data.label')"
+              path="dictLabel"
+              class="pr-24px"
+            >
+              <NInput v-model:value="model.dictLabel" :placeholder="$t('page.system.dict.form.dictLabel.required')" />
             </NFormItemGi>
             <NFormItemGi :show-feedback="false" span="12" class="pr-24px">
               <NSpace class="w-full" justify="end">
diff --git a/src/views/system/dict/modules/dict-type-operate-drawer.vue b/src/views/system/dict/modules/dict-type-operate-drawer.vue
index c1cdb51a..61aa1172 100644
--- a/src/views/system/dict/modules/dict-type-operate-drawer.vue
+++ b/src/views/system/dict/modules/dict-type-operate-drawer.vue
@@ -32,8 +32,8 @@ const { createRequiredRule } = useFormRules();
 
 const title = computed(() => {
   const titles: Record<NaiveUI.TableOperateType, string> = {
-    add: '新增字典类型',
-    edit: '编辑字典类型'
+    add: $t('page.system.dict.addDictType'),
+    edit: $t('page.system.dict.editDictType')
   };
   return titles[props.operateType];
 });
@@ -53,9 +53,9 @@ function createDefaultModel(): Model {
 type RuleKey = Extract<keyof Model, 'dictId' | 'dictName' | 'dictType'>;
 
 const rules: Record<RuleKey, App.Global.FormRule> = {
-  dictId: createRequiredRule('字典主键不能为空'),
-  dictName: createRequiredRule('字典名称不能为空'),
-  dictType: createRequiredRule('字典类型不能为空')
+  dictId: createRequiredRule($t('page.system.dict.form.dictValue.invalid')),
+  dictName: createRequiredRule($t('page.system.dict.form.dictName.invalid')),
+  dictType: createRequiredRule($t('page.system.dict.form.dictType.invalid'))
 };
 
 function handleUpdateModelWhenEdit() {
@@ -106,14 +106,19 @@ watch(visible, () => {
   <NDrawer v-model:show="visible" :title="title" display-directive="show" :width="800" class="max-w-90%">
     <NDrawerContent :title="title" :native-scrollbar="false" closable>
       <NForm ref="formRef" :model="model" :rules="rules">
-        <NFormItem label="字典名称" path="dictName">
-          <NInput v-model:value="model.dictName" placeholder="请输入字典名称" />
+        <NFormItem :label="$t('page.system.dict.dictName')" path="dictName">
+          <NInput v-model:value="model.dictName" :placeholder="$t('page.system.dict.form.dictName.required')" />
         </NFormItem>
-        <NFormItem label="字典类型" path="dictType">
-          <NInput v-model:value="model.dictType" placeholder="请输入字典类型" />
+        <NFormItem :label="$t('page.system.dict.dictType')" path="dictType">
+          <NInput v-model:value="model.dictType" :placeholder="$t('page.system.dict.form.dictValue.required')" />
         </NFormItem>
-        <NFormItem label="备注" path="remark">
-          <NInput v-model:value="model.remark" :rows="3" type="textarea" placeholder="请输入备注" />
+        <NFormItem :label="$t('page.system.dict.remark')" path="remark">
+          <NInput
+            v-model:value="model.remark"
+            :rows="3"
+            type="textarea"
+            :placeholder="$t('page.system.dict.form.remark.required')"
+          />
         </NFormItem>
       </NForm>
       <template #footer>