!3 perf: menu add i18n

Merge pull request !3 from small monkey/menu-i18n

src/views/system/menu/index.vue

@@ -46,7 +46,7 @@ const getMeunTree = async () => {
   treeData.value = [
     {
       menuId: 0,
-      menuName: '根目录',
+      menuName: $t('page.system.menu.rootName'),
       icon: 'material-symbols:home-outline-rounded',
       children: handleTree(data, { idField: 'menuId', filterFn: item => item.menuType !== 'F' })
     }
@@ -112,7 +112,7 @@ function renderSuffix({ option }: { option: TreeOption }) {
         text
         class="h-18px"
         icon="ic-round-plus"
-        tooltip-content="新增子菜单"
+        tooltip-content={$t('page.system.menu.addChildMenu')}
         onClick={(event: Event) => {
           event.stopPropagation();
           handleAddMenu(option.menuId as CommonType.IdType);
@@ -203,18 +203,18 @@ const btnColumns: DataTableColumns<Api.System.Menu> = [
     }
   },
   {
-    title: '权限名称',
+    title: $t('page.system.menu.menuName'),
     key: 'menuName',
     minWidth: 120
   },
   {
-    title: '权限标识',
+    title: $t('page.system.menu.perms'),
     key: 'perms',
     align: 'center',
     minWidth: 120
   },
   {
-    title: '状态',
+    title: $t('page.system.menu.status'),
     key: 'status',
     minWidth: 80,
     align: 'center',
@@ -223,13 +223,13 @@ const btnColumns: DataTableColumns<Api.System.Menu> = [
     }
   },
   {
-    title: '创建时间',
+    title: $t('page.system.menu.createTime'),
     key: 'createTime',
     align: 'center',
     minWidth: 150
   },
   {
-    title: '操作',
+    title: $t('common.action'),
     key: 'actions',
     width: 80,
     align: 'center',
@@ -286,27 +286,27 @@ const btnColumns: DataTableColumns<Api.System.Menu> = [
 
 <template>
   <TableSiderLayout default-expanded>
-    <template #header>菜单列表</template>
+    <template #header>{{ $t('page.system.menu.title') }}</template>
     <template #header-extra>
       <ButtonIcon
         v-if="hasAuth('system:menu:add')"
         size="small"
         icon="material-symbols:add-rounded"
         class="h-28px text-icon"
-        tooltip-content="新增菜单"
+        :tooltip-content="$t('page.system.menu.addMenu')"
         @click.stop="handleAddMenu(0)"
       />
       <ButtonIcon
         size="small"
         icon="material-symbols:refresh-rounded"
         class="h-28px text-icon"
-        tooltip-content="刷新"
+        :tooltip-content="$t('common.refresh')"
         @click.stop="reset"
       />
     </template>
     <template #sider>
       <div class="flex gap-6px">
-        <NInput v-model:value="name" size="small" placeholder="请输入菜单名称" />
+        <NInput v-model:value="name" size="small" :placeholder="$t('page.system.menu.form.menuName.required')" />
       </div>
       <NSpin :show="loading" class="infinite-scroll">
         <NTree
@@ -330,7 +330,7 @@ const btnColumns: DataTableColumns<Api.System.Menu> = [
           @update:selected-keys="(_: Array<string & number>, option: Array<TreeOption | null>) => handleClickTree(option)"
         >
           <template #empty>
-            <NEmpty description="暂无菜单" class="h-full min-h-200px justify-center" />
+            <NEmpty :description="$t('page.system.menu.emptyMenu')" class="h-full min-h-200px justify-center" />
           </template>
         </NTree>
       </NSpin>
@@ -338,7 +338,7 @@ const btnColumns: DataTableColumns<Api.System.Menu> = [
     <div class="h-full flex-col-stretch gap-16px">
       <template v-if="currentMenu">
         <NCard
-          title="菜单详情"
+          :title="$t('page.system.menu.menuDetail')"
           :bordered="false"
           size="small"
           class="max-h-50% card-wrapper"
@@ -356,13 +356,13 @@ const btnColumns: DataTableColumns<Api.System.Menu> = [
                 <template #icon>
                   <icon-material-symbols-add-rounded />
                 </template>
-                新增子菜单
+                {{ $t('page.system.menu.addChildMenu') }}
               </NButton>
               <NButton v-if="hasAuth('system:menu:edit')" size="small" ghost type="primary" @click="handleUpdateMenu">
                 <template #icon>
                   <icon-material-symbols-drive-file-rename-outline-outline />
                 </template>
-                编辑
+                {{ $t('common.edit') }}
               </NButton>
               <NPopconfirm @positive-click="() => handleDeleteMenu()">
                 <template #trigger>
@@ -391,46 +391,50 @@ const btnColumns: DataTableColumns<Api.System.Menu> = [
             label-class="w-20% min-w-88px"
             content-class="w-100px"
           >
-            <NDescriptionsItem label="菜单类型">
+            <NDescriptionsItem :label="$t('page.system.menu.menuName')">
               <NTag class="m-1" size="small" type="primary">{{ menuTypeRecord[currentMenu.menuType!] }}</NTag>
             </NDescriptionsItem>
-            <NDescriptionsItem label="菜单状态">
+            <NDescriptionsItem :label="$t('page.system.menu.status')">
               <DictTag size="small" :value="currentMenu.status" dict-code="sys_normal_disable" />
             </NDescriptionsItem>
-            <NDescriptionsItem label="菜单名称">{{ currentMenu.menuName }}</NDescriptionsItem>
-            <NDescriptionsItem v-if="currentMenu.menuType === 'C'" label="组件路径">
+            <NDescriptionsItem :label="$t('page.system.menu.addChildMenu')">
+              {{ currentMenu.menuName }}
+            </NDescriptionsItem>
+            <NDescriptionsItem v-if="currentMenu.menuType === 'C'" :label="$t('page.system.menu.component')">
               {{ currentMenu.component }}
             </NDescriptionsItem>
-            <NDescriptionsItem :label="currentMenu.isFrame !== '0' ? '路由地址' : '外链地址'">
+            <NDescriptionsItem
+              :label="currentMenu.isFrame !== '0' ? $t('page.system.menu.path') : $t('page.system.menu.externalPath')"
+            >
               {{ currentMenu.path }}
             </NDescriptionsItem>
             <NDescriptionsItem
               v-if="currentMenu.menuType === 'C'"
-              :label="currentMenu.isFrame !== '2' ? '路由参数' : 'iframe 地址'"
+              :label="currentMenu.isFrame !== '2' ? $t('page.system.menu.query') : $t('page.system.menu.iframeQuery')"
             >
               {{ currentMenu.queryParam }}
             </NDescriptionsItem>
-            <NDescriptionsItem v-if="currentMenu.menuType !== 'M'" label="权限标识">
+            <NDescriptionsItem v-if="currentMenu.menuType !== 'M'" :label="$t('page.system.menu.perms')">
               {{ currentMenu.perms }}
             </NDescriptionsItem>
-            <NDescriptionsItem label="是否外链">
+            <NDescriptionsItem :label="$t('page.system.menu.isFrame')">
               <NTag v-if="currentMenu.isFrame" class="m-1" size="small" :type="tagMap[currentMenu.isFrame]">
                 {{ menuIsFrameRecord[currentMenu.isFrame] }}
               </NTag>
             </NDescriptionsItem>
-            <NDescriptionsItem label="显示状态">
+            <NDescriptionsItem :label="$t('page.system.menu.visible')">
               <DictTag size="small" :value="currentMenu.visible" dict-code="sys_show_hide" />
             </NDescriptionsItem>
-            <NDescriptionsItem v-if="currentMenu.menuType === 'C'" label="是否缓存">
+            <NDescriptionsItem v-if="currentMenu.menuType === 'C'" :label="$t('page.system.menu.isCache')">
               <NTag v-if="currentMenu.isCache" class="m-1" size="small" :type="tagMap[currentMenu.isCache]">
-                {{ currentMenu.isCache === '0' ? '缓存' : '不缓存' }}
+                {{ currentMenu.isCache === '0' ? $t('page.system.menu.cache') : $t('page.system.menu.noCache') }}
               </NTag>
             </NDescriptionsItem>
           </NDescriptions>
         </NCard>
 
         <NCard
-          title="按钮权限列表"
+          :title="$t('page.system.menu.buttonPermissionList')"
           :bordered="false"
           size="small"
           class="h-full overflow-auto card-wrapper"
@@ -441,7 +445,7 @@ const btnColumns: DataTableColumns<Api.System.Menu> = [
               size="small"
               icon="ic-round-refresh"
               class="h-28px text-icon"
-              tooltip-content="刷新"
+              :tooltip-content="$t('common.refresh')"
               @click.stop="getBtnMenuList"
             />
           </template>

src/views/system/menu/modules/menu-operate-drawer.vue

@@ -45,8 +45,8 @@ const queryList = ref<{ key: string; value: string }[]>([]);
 
 const drawerTitle = computed(() => {
   const titles: Record<NaiveUI.TableOperateType, string> = {
-    add: '新增菜单',
-    edit: '编辑菜单'
+    add: $t('page.system.menu.addMenu'),
+    edit: $t('page.system.menu.editMenu')
   };
   return titles[props.operateType];
 });
@@ -69,7 +69,7 @@ function createDefaultModel(): Model {
     visible: '0',
     status: '0',
     perms: '',
-    icon: '',
+    icon: undefined,
     remark: ''
   };
 }
@@ -77,10 +77,10 @@ function createDefaultModel(): Model {
 type RuleKey = Extract<keyof Model, 'menuName' | 'orderNum' | 'path' | 'component'>;
 
 const rules: Record<RuleKey, App.Global.FormRule> = {
-  menuName: createRequiredRule('菜单名称不能为空'),
-  orderNum: createNumberRequiredRule('菜单排序不能为空'),
-  path: createRequiredRule('路由地址不能为空'),
-  component: createRequiredRule('组件路径不能为空')
+  menuName: createRequiredRule($t('page.system.menu.form.menuName.invalid')),
+  orderNum: createNumberRequiredRule($t('page.system.menu.form.orderNum.invalid')),
+  path: createRequiredRule($t('page.system.menu.form.path.invalid')),
+  component: createRequiredRule($t('page.system.menu.form.component.invalid'))
 };
 
 const isBtn = computed(() => model.menuType === 'F');
@@ -228,17 +228,22 @@ function onCreate() {
     <NDrawerContent :title="drawerTitle" :native-scrollbar="false" closable>
       <NForm ref="formRef" :model="model" :rules="rules">
         <NGrid responsive="screen" item-responsive>
-          <NFormItemGi :span="24" label="上级菜单" path="pid">
+          <NFormItemGi :span="24" :label="$t('page.system.menu.parentId')" path="pid">
             <NTreeSelect
               v-model:value="model.parentId"
               :options="treeData as []"
               label-field="menuName"
               key-field="menuId"
               :default-expanded-keys="[0]"
-              placeholder="请选择上级菜单"
+              :placeholder="$t('page.system.menu.form.parentId.required')"
             />
           </NFormItemGi>
-          <NFormItemGi v-if="model.menuType !== 'F'" :span="24" label="菜单类型" path="menuType">
+          <NFormItemGi
+            v-if="model.menuType !== 'F'"
+            :span="24"
+            :label="$t('page.system.menu.menuType')"
+            path="menuType"
+          >
             <NRadioGroup v-model:value="model.menuType">
               <NRadioButton
                 v-for="item in menuTypeOptions.filter(item => item.value !== 'F')"
@@ -248,10 +253,10 @@ function onCreate() {
               />
             </NRadioGroup>
           </NFormItemGi>
-          <NFormItemGi :span="24" label="菜单名称" path="menuName">
-            <NInput v-model:value="model.menuName" placeholder="请输入菜单名称" />
+          <NFormItemGi :span="24" :label="$t('page.system.menu.menuName')" path="menuName">
+            <NInput v-model:value="model.menuName" :placeholder="$t('page.system.menu.form.menuName.required')" />
           </NFormItemGi>
-          <NFormItemGi v-if="!isBtn" span="24" label="图标类型">
+          <NFormItemGi v-if="!isBtn" span="24" :label="$t('page.system.menu.iconType')">
             <NRadioGroup v-model:value="iconType">
               <NRadio v-for="item in menuIconTypeOptions" :key="item.value" :value="item.value" :label="item.label" />
             </NRadioGroup>
@@ -259,40 +264,51 @@ function onCreate() {
           <NFormItemGi v-if="!isBtn" span="24" path="icon">
             <template #label>
               <div class="flex-center">
-                <FormTip content="iconify 地址：`https://icones.js.org`" />
-                <span class="pl-3px">菜单图标</span>
+                <FormTip :content="$t('page.system.menu.iconifyTip')" />
+                <span class="pl-3px">{{ $t('page.system.menu.icon') }}</span>
               </div>
             </template>
             <template v-if="iconType === '1'">
-              <NInput v-model:value="model.icon" placeholder="请输入图标" class="flex-1">
+              <NInput
+                v-model:value="model.icon"
+                :placeholder="$t('page.system.menu.placeholder.iconifyIconPlaceholder')"
+                class="flex-1"
+              >
                 <template #suffix>
                   <SvgIcon v-if="model.icon" :icon="model.icon" class="text-icon" />
                 </template>
               </NInput>
             </template>
             <template v-if="iconType === '2'">
-              <NSelect v-model:value="model.icon" placeholder="请选择本地图标" filterable :options="localIconOptions" />
+              <NSelect
+                v-model:value="model.icon"
+                :placeholder="$t('page.system.menu.placeholder.localIconPlaceholder')"
+                filterable
+                :options="localIconOptions"
+              />
             </template>
           </NFormItemGi>
           <NFormItemGi v-if="!isBtn" :span="24" path="path">
             <template #label>
               <div class="flex-center">
-                <FormTip content="访问的路由地址，如：`user`，如外网地址需内链访问则以 `http(s)://` 开头" />
-                <span>{{ model.isFrame !== '0' ? '路由地址' : '外链地址' }}</span>
+                <FormTip :content="$t('page.system.menu.pathTip')" />
+                <span>
+                  {{ model.isFrame !== '0' ? $t('page.system.menu.path') : $t('page.system.menu.externalPath') }}
+                </span>
               </div>
             </template>
-            <NInput v-model:value="model.path" placeholder="请输入路由地址" />
+            <NInput v-model:value="model.path" :placeholder="$t('page.system.menu.form.path.required')" />
           </NFormItemGi>
           <NFormItemGi v-if="isMenu && model.isFrame === '1'" :span="24" path="component">
             <template #label>
               <div class="flex-center">
-                <FormTip content="访问的组件路径，如：`system/user/index`，默认在`views`目录下" />
-                <span>组件路径</span>
+                <FormTip :content="$t('page.system.menu.componentTip')" />
+                <span>{{ $t('page.system.menu.component') }}</span>
               </div>
             </template>
             <NInputGroup>
               <NInputGroupLabel>views/</NInputGroupLabel>
-              <NInput v-model:value="model.component" placeholder="请输入组件地址" />
+              <NInput v-model:value="model.component" :placeholder="$t('page.system.menu.form.path.required')" />
               <NInputGroupLabel>/index.vue</NInputGroupLabel>
             </NInputGroup>
           </NFormItemGi>
@@ -300,7 +316,7 @@ function onCreate() {
             v-if="isMenu && model.isFrame !== '0'"
             span="24"
             :show-feedback="!queryList.length"
-            :label="model.isFrame !== '2' ? '路由参数' : 'iframe 地址'"
+            :label="model.isFrame !== '2' ? $t('page.system.menu.query') : $t('page.system.menu.iframeQuery')"
           >
             <NDynamicInput
               v-if="model.isFrame !== '2'"
@@ -315,7 +331,10 @@ function onCreate() {
                     ignore-path-change
                     :show-label="false"
                     :path="`query[${index}].key`"
-                    :rule="{ ...createRequiredRule('请输入 Key'), validator: value => isNotNull(value) }"
+                    :rule="{
+                      ...createRequiredRule($t('page.system.menu.placeholder.queryKey')),
+                      validator: value => isNotNull(value)
+                    }"
                   >
                     <NInput v-model:value="queryList[index].key" placeholder="Key" @keydown.enter.prevent />
                   </NFormItem>
@@ -325,29 +344,36 @@ function onCreate() {
                     ignore-path-change
                     :show-label="false"
                     :path="`query[${index}].value`"
-                    :rule="{ ...createRequiredRule('请输入 Value'), validator: value => isNotNull(value) }"
+                    :rule="{
+                      ...createRequiredRule($t('page.system.menu.placeholder.queryValue')),
+                      validator: value => isNotNull(value)
+                    }"
                   >
                     <NInput v-model:value="queryList[index].value" placeholder="Value" @keydown.enter.prevent />
                   </NFormItem>
                 </div>
               </template>
             </NDynamicInput>
-            <NInput v-else v-model:value="model.queryParam" placeholder="请输入 iframe 地址" />
+            <NInput
+              v-else
+              v-model:value="model.queryParam"
+              :placeholder="$t('page.system.menu.placeholder.queryIframe')"
+            />
           </NFormItemGi>
           <NFormItemGi :span="24" path="perms">
             <template #label>
               <div class="flex-center">
-                <FormTip content="控制器中定义的权限字符，如：@SaCheckPermission('system:user:list')" />
-                <span>权限字符</span>
+                <FormTip :content="$t('page.system.menu.permsTip')" />
+                <span>{{ $t('page.system.menu.perms') }}</span>
               </div>
             </template>
-            <NInput v-model:value="model.perms" placeholder="请输入菜单名称" />
+            <NInput v-model:value="model.perms" :placeholder="$t('page.system.menu.form.perms.required')" />
           </NFormItemGi>
           <NFormItemGi v-if="!isBtn" :span="12" path="isFrame">
             <template #label>
               <div class="flex-center">
-                <FormTip content="选择是外链则路由地址需要以`http(s)://`开头" />
-                <span>是否外链</span>
+                <FormTip :content="$t('page.system.menu.isFrameTip')" />
+                <span>{{ $t('page.system.menu.isFrame') }}</span>
               </div>
             </template>
             <NRadioGroup v-model:value="model.isFrame">
@@ -364,8 +390,8 @@ function onCreate() {
           <NFormItemGi v-if="isMenu" :span="12" path="isCache">
             <template #label>
               <div class="flex-center">
-                <FormTip content="选择是则会被`keep-alive`缓存，需要匹配组件的`name`和地址保持一致" />
-                <span>是否缓存</span>
+                <FormTip :content="$t('page.system.menu.isCacheTip')" />
+                <span>{{ $t('page.system.menu.isCache') }}</span>
               </div>
             </template>
             <NRadioGroup v-model:value="model.isCache">
@@ -375,11 +401,11 @@ function onCreate() {
               </NSpace>
             </NRadioGroup>
           </NFormItemGi>
-          <NFormItemGi v-if="!isBtn" :span="12" label="显示状态" path="visible">
+          <NFormItemGi v-if="!isBtn" :span="12" :label="$t('page.system.menu.visible')" path="visible">
             <template #label>
               <div class="flex-center">
-                <FormTip content="选择隐藏则路由将不会出现在侧边栏，但仍然可以访问" />
-                <span>显示状态</span>
+                <FormTip :content="$t('page.system.menu.visibleTip')" />
+                <span>{{ $t('page.system.menu.visible') }}</span>
               </div>
             </template>
             <DictRadio v-model:value="model.visible" dict-code="sys_show_hide" />
@@ -387,14 +413,14 @@ function onCreate() {
           <NFormItemGi :span="12" path="status">
             <template #label>
               <div class="flex-center">
-                <FormTip content="选择停用则路由将不会出现在侧边栏，也不能被访问" />
-                <span>菜单状态</span>
+                <FormTip :content="$t('page.system.menu.statusTip')" />
+                <span>{{ $t('page.system.menu.status') }}</span>
               </div>
             </template>
             <DictRadio v-model:value="model.status" dict-code="sys_normal_disable" />
           </NFormItemGi>
-          <NFormItemGi :span="12" label="显示排序" path="orderNum">
-            <NInputNumber v-model:value="model.orderNum" placeholder="请输入排序" />
+          <NFormItemGi :span="12" :label="$t('page.system.menu.orderNum')" path="orderNum">
+            <NInputNumber v-model:value="model.orderNum" :placeholder="$t('page.system.menu.form.orderNum.required')" />
           </NFormItemGi>
         </NGrid>
       </NForm>