From 6e6cc4d91feccafb00a4021949e3cd0bac7014f9 Mon Sep 17 00:00:00 2001
From: xlsea <m@xlsea.cn>
Date: Wed, 18 Jun 2025 23:48:49 +0800
Subject: [PATCH] =?UTF-8?q?fix(components):=20=E4=BF=AE=E5=A4=8D=E8=8F=9C?=
 =?UTF-8?q?=E5=8D=95=E9=80=89=E6=8B=A9=E6=A0=87=E7=AD=BE=E6=B8=B2=E6=9F=93?=
 =?UTF-8?q?=E9=97=AE=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/custom/menu-tree-select.vue    | 24 ++++++++++++++++---
 src/components/custom/menu-tree.vue           | 10 ++++++++
 src/typings/components.d.ts                   |  1 -
 .../menu/modules/menu-operate-drawer.vue      |  6 ++---
 4 files changed, 33 insertions(+), 8 deletions(-)

diff --git a/src/components/custom/menu-tree-select.vue b/src/components/custom/menu-tree-select.vue
index b2545131..4046bed6 100644
--- a/src/components/custom/menu-tree-select.vue
+++ b/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"
   />
diff --git a/src/components/custom/menu-tree.vue b/src/components/custom/menu-tree.vue
index 4e5da0c1..ace8efee 100644
--- a/src/components/custom/menu-tree.vue
+++ b/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"
       />
diff --git a/src/typings/components.d.ts b/src/typings/components.d.ts
index ca6460e8..9ba89538 100644
--- a/src/typings/components.d.ts
+++ b/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']
diff --git a/src/views/system/menu/modules/menu-operate-drawer.vue b/src/views/system/menu/modules/menu-operate-drawer.vue
index 807bf7e9..648fec16 100644
--- a/src/views/system/menu/modules/menu-operate-drawer.vue
+++ b/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>