fix(components): 修复菜单选择标签渲染问题

src/components/custom/menu-tree-select.vue

@@ -1,18 +1,22 @@
 <script setup lang="tsx">
-import { useAttrs } from 'vue';
+import { onMounted, useAttrs } from 'vue';
 import type { TreeOption, TreeSelectProps } from 'naive-ui';
 import { useLoading } from '@sa/hooks';
 import { fetchGetMenuList } from '@/service/api/system';
 import { handleTree } from '@/utils/common';
 import SvgIcon from '@/components/custom/svg-icon.vue';
+import { $t } from '@/locales';
 
 defineOptions({ name: 'MenuTreeSelect' });
 
 interface Props {
+  immediate?: boolean;
   [key: string]: any;
 }
 
-defineProps<Props>();
+const props = withDefaults(defineProps<Props>(), {
+  immediate: true
+});
 
 const value = defineModel<CommonType.IdType | null>('value', { required: false });
 const options = defineModel<Api.System.MenuList>('options', { required: false, default: [] });
@@ -35,7 +39,19 @@ async function getMenuList() {
   endLoading();
 }
 
-getMenuList();
+onMounted(() => {
+  if (props.immediate) {
+    getMenuList();
+  }
+});
+
+function renderLabel({ option }: { option: TreeOption }) {
+  let label = String(option.menuName);
+  if (label?.startsWith('route.') || label?.startsWith('menu.')) {
+    label = $t(label as App.I18n.I18nKey);
+  }
+  return <div>{label}</div>;
+}
 
 function renderPrefix({ option }: { option: TreeOption }) {
   const renderLocalIcon = String(option.icon).startsWith('local-icon-');
@@ -55,6 +71,8 @@ function renderPrefix({ option }: { option: TreeOption }) {
     label-field="menuName"
     :options="options"
     :default-expanded-keys="[0]"
+    :render-tag="renderLabel"
+    :render-label="renderLabel"
     :render-prefix="renderPrefix"
     v-bind="attrs"
   />

src/components/custom/menu-tree.vue

@@ -4,6 +4,7 @@ import type { TreeOption, TreeSelectInst, TreeSelectProps } from 'naive-ui';
 import { useBoolean } from '@sa/hooks';
 import { fetchGetMenuTreeSelect } from '@/service/api/system';
 import SvgIcon from '@/components/custom/svg-icon.vue';
+import { $t } from '@/locales';
 
 defineOptions({ name: 'MenuTree' });
 
@@ -60,6 +61,14 @@ watch([expandAll, options], ([newVal]) => {
   }
 });
 
+function renderLabel({ option }: { option: TreeOption }) {
+  let label = option.label;
+  if (label?.startsWith('route.') || label?.startsWith('menu.')) {
+    label = $t(label as App.I18n.I18nKey);
+  }
+  return <div>{label}</div>;
+}
+
 function renderPrefix({ option }: { option: TreeOption }) {
   const renderLocalIcon = String(option.icon).startsWith('local-icon-');
   let icon = renderLocalIcon ? undefined : String(option.icon ?? 'material-symbols:buttons-alt-outline-rounded');
@@ -163,6 +172,7 @@ defineExpose({
         :loading="loading"
         virtual-scroll
         check-strategy="all"
+        :render-label="renderLabel"
         :render-prefix="renderPrefix"
         v-bind="attrs"
       />

src/typings/components.d.ts

@@ -69,7 +69,6 @@ declare module 'vue' {
     NButton: typeof import('naive-ui')['NButton']
     NCard: typeof import('naive-ui')['NCard']
     NCheckbox: typeof import('naive-ui')['NCheckbox']
-    NCheckboxGroup: typeof import('naive-ui')['NCheckboxGroup']
     NCode: typeof import('naive-ui')['NCode']
     NCollapse: typeof import('naive-ui')['NCollapse']
     NCollapseItem: typeof import('naive-ui')['NCollapseItem']

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

@@ -255,12 +255,10 @@ function onCreate() {
       <NForm ref="formRef" :model="model" :rules="rules">
         <NGrid responsive="screen" item-responsive>
           <NFormItemGi :span="24" :label="$t('page.system.menu.parentId')" path="pid">
-            <NTreeSelect
+            <MenuTreeSelect
               v-model:value="model.parentId"
+              :immediate="false"
               :options="treeData as []"
-              label-field="menuName"
-              key-field="menuId"
-              :default-expanded-keys="[0]"
               :placeholder="$t('page.system.menu.form.parentId.required')"
             />
           </NFormItemGi>