feat:初步动态菜单完成

src/api/menu.ts

@@ -7,6 +7,7 @@ export interface RawMenu {
   label: string;
   icon: string;
   menuCode: string;
+  menuName:string;
   adaptability: string;
   component: string;
   sort: number;
@@ -21,6 +22,7 @@ export type MenuTree = {
   label: string;
   icon: string;
   menuCode: string;
+  menuName:string;
   adaptability: string;
   component: string;
   sort: number;
@@ -36,6 +38,7 @@ export type MenuNode = {
   label: string;
   icon: string;
   menuCode: string;
+  menuName:string;
   adaptability: string;
   component: string;
   sort: number;

src/router/index.ts

@@ -37,36 +37,9 @@ const routes: Array<RouteRecordRaw> = [
     children: [
       {
         path: "", // 匹配 /layout
-        name: "home",
+        name: "HOME",
         component: Home,
-      },
+      }
-      {
-        path: "role",
-        name: "Role",
-        component: RouterView,
-        children: [
-          {
-            path: "auth", // 匹配 /layout/role
-            name: "roleAuth",
-            component: Auth,
-          },
-        ],
-      },
-      {
-        path: "menu",
-        name: "menu",
-        component: Menu,
-      },
-      {
-        path: "dict",
-        name: "dict",
-        component: Dict,
-      },
-      {
-        path: "globalSys",
-        name: "globalSys",
-        component: GlobalSys,
-      },
     ],
   },
 ];

src/store/app.ts

@@ -1,14 +1,25 @@
+import type { MenuNode } from "@/api/menu";
 import { defineStore } from "pinia";
 
-export const useAppStore = defineStore('App', () => {
+export const useAppStore = defineStore(
-  
+  "App",
-  //左侧菜单相关
+  () => {
-  const menuApp = reactive({
+    //左侧菜单相关
-    isExpaned:true,  //折叠控制
+    const menuApp = reactive({
-  });
+      isExpaned: true, //折叠控制
-  return {
+      menuList: [],
-    menuApp
+    });
-  }
+    // 设置菜单列表
-},
+    const setMenuList = (menu: MenuNode[]) => {
+      menuApp.menuList.length = 0;
+      menu.forEach(item => {
+        menuApp.menuList.push(item);
+      })
+    };
+    return {
+      menuApp,
+      setMenuList
+    };
+  },
   { persist: true }
-)
+);

src/utils/permission.ts

@@ -1,4 +1,4 @@
-import { RouteMeta, RouteRecordRaw, RouterView } from "vue-router";
+import {  RouteRecordRaw, RouterView } from "vue-router";
 import NotFound from "@/views/404/index.vue"
 interface MenuItem {
   uuid: string;
@@ -24,7 +24,7 @@ function getComponent(componentPath: string) {
   return () => {
     try {
       // 尝试动态导入组件
-      const componentPromise = import(`@/views/${componentPath}`)
+      const componentPromise = import(`../views/${componentPath}`)
       
       // 成功加载则返回组件
       return componentPromise.catch(() => {

src/views/404/index.vue

@@ -0,0 +1,138 @@
+<template>
+  <div class="not-found-container">
+    <n-space vertical justify="center" align="center" class="content">
+      <!-- 动画图标 -->
+      <n-icon
+        size="120"
+        color="#4e88e5"
+        :component="Warning"
+        class="shake-animation"
+      />
+      
+      <!-- 标题 -->
+      <n-gradient-text type="error" :size="48" class="title">
+        404
+      </n-gradient-text>
+      
+      <!-- 副标题 -->
+      <n-text depth="3" class="subtitle">
+        哎呀，页面迷路了...
+      </n-text>
+      
+      <!-- 描述 -->
+      <n-text depth="3" class="description">
+        您访问的页面不存在或已被移除<br>
+        请检查URL或返回首页
+      </n-text>
+      
+      <!-- 返回按钮 -->
+      <n-button
+        type="primary"
+        size="large"
+        round
+        @click="goHome"
+        class="home-button"
+      >
+        <template #icon>
+          <n-icon :component="Home" />
+        </template>
+        返回首页
+      </n-button>
+    </n-space>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { Warning } from '@vicons/ionicons5'
+import { Home } from '@vicons/ionicons5'
+import { useRouter } from 'vue-router'
+
+const router = useRouter()
+
+const goHome = () => {
+  router.push('/layout')
+}
+</script>
+
+<style lang="scss" scoped>
+.not-found-container {
+  height: 100%;
+  width: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  background: linear-gradient(135deg, #f5f7fa 0%, #e4e8eb 100%);
+  
+  .content {
+    text-align: center;
+    padding: 20px;
+    max-width: 600px;
+    
+    .title {
+      font-weight: 800;
+      margin: 20px 0;
+      letter-spacing: 2px;
+    }
+    
+    .subtitle {
+      font-size: 24px;
+      margin-bottom: 16px;
+    }
+    
+    .description {
+      font-size: 16px;
+      line-height: 1.8;
+      margin-bottom: 32px;
+    }
+    
+    .home-button {
+      padding: 0 32px;
+      height: 48px;
+      font-size: 16px;
+      box-shadow: 0 4px 12px rgba(78, 136, 229, 0.3);
+      transition: all 0.3s ease;
+      
+      &:hover {
+        transform: translateY(-2px);
+        box-shadow: 0 6px 16px rgba(78, 136, 229, 0.4);
+      }
+    }
+  }
+}
+
+// 摇晃动画
+.shake-animation {
+  animation: shake 1.5s ease infinite;
+}
+
+@keyframes shake {
+  0%, 100% {
+    transform: translateX(0);
+  }
+  10%, 30%, 50%, 70%, 90% {
+    transform: translateX(-5px);
+  }
+  20%, 40%, 60%, 80% {
+    transform: translateX(5px);
+  }
+}
+
+// 响应式设计
+@media (max-width: 768px) {
+  .not-found-container {
+    .content {
+      .title {
+        font-size: 36px;
+      }
+      
+      .subtitle {
+        font-size: 20px;
+      }
+      
+      .description {
+        font-size: 14px;
+      }
+    }
+  }
+}
+</style>

src/views/layout/components/LayoutNav.vue

@@ -20,11 +20,13 @@ import { MenuOption, NIcon } from 'naive-ui';
 import { useAppStore } from '@/store/app';
 import { storeToRefs } from 'pinia';
 import { RouterLink } from 'vue-router';
+import SvgIcon from '@/components/SvgIcon.vue';
+import type { MenuNode } from '@/api/menu';
+
 const appStore = useAppStore();
-const activeKey = ref('default');
+const activeKey = ref('Home');
 const router = useRouter();
 const { menuApp } = storeToRefs(appStore);
-import SvgIcon from '@/components/SvgIcon.vue';
 const expandIcon = () => {
     return h(NIcon, null, { default: () => h(CaretDownOutline) })
 }
@@ -32,12 +34,36 @@ const expandIcon = () => {
 function renderIcon(iconClass: string) {
     return () => h(SvgIcon, { iconClass, width: '16', height: '16' })
 };
-watch(() => router.currentRoute.value, (newName) => {
+function renderLabel(item: MenuNode) {
-    if (newName) {
+    return () => h(
-        activeKey.value = newName.fullPath as string;
+        RouterLink,
+        {
+            to: {
+                name: item.path.toUpperCase()
+            }
+        },
+        { default: () => item.label }
+    )
+}
+watch(() => router.currentRoute.value, (path) => {
+    if (path) {
+        activeKey.value = path.name as string;
     }
-},{ immediate: true });
+}, { immediate: true });
-// 后面改成动态的
+const generatorMenuList = (menu: MenuNode | MenuNode[]): MenuOption[] => {
+    // Handle both array and single object input
+    const menuItems = Array.isArray(menu) ? menu : [menu];
+
+    return menuItems.map(item => {
+        const menuItem: MenuOption = {
+            label: item.component === 'view-router' ? item.label : renderLabel(item),
+            key: item.path.toUpperCase(),
+            icon: renderIcon(item.icon),
+            children: item.children && item.children.length > 0 ? generatorMenuList(item.children) : undefined
+        };
+        return menuItem;
+    });
+}
 const menuOptions: MenuOption[] = [
     {
         label: () =>
@@ -45,80 +71,15 @@ const menuOptions: MenuOption[] = [
                 RouterLink,
                 {
                     to: {
-                        name: 'home'
+                        name: 'HOME'
                     }
                 },
                 { default: () => '概览' }
             ),
-        key: '/layout',
+        key: 'HOME',
         icon: renderIcon('mainproject')
     },
-    {
+    ...generatorMenuList(menuApp.value.menuList)
-        label: '角色管理',
-        key: '/role',
-        icon: renderIcon('mainproject'),
-        children: [
-            {
-                label: () => h(
-                    RouterLink,
-                    {
-                        to: {
-                            name: 'roleAuth'
-                        }
-                    },
-                    { default: () => '权限分配' }
-                ),
-                key: '/layout/role',
-                icon: renderIcon('mainproject')
-            }
-        ]
-    },
-    {
-        label: '系统配置',
-        key: '/system',
-        icon: renderIcon('mainproject'),
-        children: [
-            {
-                label: () => h(
-                    RouterLink,
-                    {
-                        to: {
-                            name: 'menu'
-                        }
-                    },
-                    { default: () => '菜单管理' }
-                ),
-                key: '/layout/menu',
-                icon: renderIcon('mainproject')
-            },
-            {
-                label: () => h(
-                    RouterLink,
-                    {
-                        to: {
-                            name: 'dict'
-                        }
-                    },
-                    { default: () => '字典配置' }
-                ),
-                key: '/layout/dict',
-                icon: renderIcon('mainproject')
-            },
-            {
-                label: () => h(
-                    RouterLink,
-                    {
-                        to: {
-                            name: 'globalSys'
-                        }
-                    },
-                    { default: () => '全局参数' }
-                ),
-                key: '/layout/globalSys',
-                icon: renderIcon('mainproject')
-            }
-        ]
-    },
 ];
 </script>
 <style scoped lang='scss'>

src/views/login/OauthCallBack.vue

@@ -9,9 +9,13 @@ import { removeToken, setToken } from '@/utils/auth';
 import { useMessage } from 'naive-ui';
 import { getUserInfo } from '@/api/userApi';
 import { useUserStore } from '@/store/user';
+import { useAppStore } from '@/store/app';
+import { getAllMenu } from '@/api/menu';
+import { generateRoutes } from '@/utils/permission'
 const router = useRouter();
 const message = useMessage();
 const userStore = useUserStore();
+const appStore = useAppStore();
 const init = async () => {
   try {
     const route = useRoute();
@@ -19,6 +23,12 @@ const init = async () => {
     setToken(token)
     const result = await getUserInfo();
     userStore.setUserInfo(result);
+    const menu = await getAllMenu();
+    appStore.setMenuList(menu);
+    const dynamicRoutes = generateRoutes(menu);
+    dynamicRoutes.forEach(route => {
+      router.addRoute('Layout', route)
+    })
     message.success('登录成功！');
     router.push('/layout');
   } catch (error) {

src/views/system/menu/index.vue

@@ -14,8 +14,11 @@
 
     <n-layout-content class="menu-management__content">
       <n-spin :show="loading">
-        <n-tree :data="menuTree" key-field="uuid" label-field="label" children-field="children"
+        <n-tree block-line :data="menuTree" :renderLabel="renderTreeLabel" :selectable="false">
-          :expanded-keys="expandedKeys" :render-label="renderTreeLabel" :render-switcher-icon="renderSwitcherIcon" />
+          <template #empty>
+            <ls-empty type="no-data" description="Not Found 404" title="无数据"></ls-empty>
+          </template>
+        </n-tree>
       </n-spin>
     </n-layout-content>
 
@@ -27,13 +30,24 @@
           <n-form-item label="菜单名称" path="label">
             <n-input v-model:value="parentForm.label" placeholder="请输入菜单名称" />
           </n-form-item>
-          <n-form-item label="菜单路径" path="path">
+          <n-form-item path="path">
+            <template #label>
+              菜单路径
+              <n-tooltip trigger="hover">
+                <template #trigger>
+                  <n-icon size="16">
+                    <HelpCircle />
+                  </n-icon>
+                </template>
+                前缀不要加 “/”，代码已经统一处理，请勿加“/”
+              </n-tooltip>
+            </template>
             <n-input v-model:value="parentForm.path" placeholder="请输入菜单路径" />
           </n-form-item>
           <n-form-item label="菜单编码" path="menuCode">
             <n-input v-model:value="parentForm.menuCode" placeholder="请输入菜单编码" />
           </n-form-item>
-          <n-form-item label="图标" path="icon">
+          <n-form-item label="菜单图标" path="icon">
             <n-select v-model:value="parentForm.icon" :options="iconOptions" filterable clearable placeholder="请选择图标名称"
               :render-label="renderLabel" />
           </n-form-item>
@@ -97,13 +111,24 @@
           <n-form-item label="菜单名称" path="label">
             <n-input v-model:value="childForm.label" placeholder="请输入菜单名称" />
           </n-form-item>
-          <n-form-item label="菜单路径" path="path">
+          <n-form-item path="path">
+            <template #label>
+              菜单路径
+              <n-tooltip trigger="hover">
+                <template #trigger>
+                  <n-icon size="16">
+                    <HelpCircle />
+                  </n-icon>
+                </template>
+                前缀不要加 “/”，代码已经统一处理，请勿加“/”
+              </n-tooltip>
+            </template>
             <n-input v-model:value="childForm.path" placeholder="请输入菜单路径" />
           </n-form-item>
           <n-form-item label="菜单编码" path="menuCode">
             <n-input v-model:value="childForm.menuCode" placeholder="请输入菜单编码" />
           </n-form-item>
-          <n-form-item label="图标" path="icon">
+          <n-form-item label="菜单图标" path="icon">
             <n-select v-model:value="childForm.icon" :options="iconOptions" filterable clearable placeholder="请选择图标名称"
               :render-label="renderLabel" />
           </n-form-item>
@@ -156,7 +181,7 @@
 </template>
 
 <script setup lang="ts">
-import { Add, Create, Trash, Document, FolderOpen, Folder, HelpCircle } from '@vicons/ionicons5'
+import { Add, Create, Trash, HelpCircle } from '@vicons/ionicons5'
 import {
   addParentMenu,
   editParentMenu,
@@ -164,17 +189,15 @@ import {
   eidtChildMenu,
   getAllMenu,
   deleteMenu,
-  type MenuTree,
   type MenuNode,
   type RawMenu
 } from '@/api/menu'
-import { FormInst, FormRules, NButton, NIcon, NSpace, SelectOption, TreeOption, useMessage } from 'naive-ui'
+import { FormInst, FormRules, NButton, NIcon, NSpace, NTag, SelectOption, TreeOption, useDialog, useMessage } from 'naive-ui'
 import SvgIcon from '@/components/SvgIcon.vue'
 
 // 状态管理
 const loading = ref(false)
-const menuTree = ref<MenuTree[]>([])
+const menuTree = ref<TreeOption[]>([])
-const expandedKeys = ref<string[]>([])
 
 // 父级菜单表单相关
 const showParentModal = ref(false);
@@ -185,6 +208,7 @@ const parentForm = ref<Omit<RawMenu, 'uuid' | 'parentId'>>({
   label: '',
   icon: '',
   menuCode: '',
+  menuName: '',
   adaptability: 'pc',
   component: '',
   sort: 0,
@@ -195,11 +219,12 @@ const parentRules: FormRules = {
   label: { required: true, message: '请输入菜单名称', trigger: 'blur' },
   path: { required: true, message: '请输入菜单路径', trigger: 'blur' },
   component: { required: true, message: '请输入组件路径', trigger: 'blur' },
+  icon: { required: true, message: '请选择菜单图标', trigger: 'blur' }
 }
 const isEditParent = ref(false)
 const currentParentId = ref('')
 const message = useMessage();
-// 生成ICON
+const dialog = useDialog();
 // 定义图标选项类型
 interface IconOption extends SelectOption {
   value: string
@@ -252,6 +277,7 @@ const childForm = ref<Omit<RawMenu, 'uuid'>>({
   label: '',
   icon: '',
   menuCode: '',
+  menuName: '',
   adaptability: 'pc',
   component: '',
   sort: 0,
@@ -263,6 +289,7 @@ const childRules: FormRules = {
   label: { required: true, message: '请输入菜单名称', trigger: 'blur' },
   path: { required: true, message: '请输入菜单路径', trigger: 'blur' },
   component: { required: true, message: '请输入组件路径', trigger: 'blur' },
+  icon: { required: true, message: '请选择菜单图标', trigger: 'blur' }
 }
 const isEditChild = ref(false)
 const currentChildId = ref('')
@@ -280,9 +307,10 @@ const childModalTitle = computed(() => (isEditChild.value ? '编辑子级菜单'
 
 // 父级菜单选项
 const parentMenuOptions = computed<SelectOption[]>(() => {
+  console.log(menuTree.value, 'menuTree.value');
   return menuTree.value.map(menu => ({
     label: menu.label,
-    value: menu.uuid
+    value: menu.key
   }))
 })
 
@@ -305,15 +333,121 @@ onBeforeUnmount(() => {
   stop();
 })
 
-const transformMenuData = (menuData: MenuTree[]): TreeOption[] => {
+const renderTreeLabel = ({ option }) => {
-  return menuData.map(item => ({
+  console.log(option,'option');
-    key: item.uuid,
+  return h('div', {
-    label: item.label,
+    style: {
-    icon: item.icon,
+      display: 'flex',
-    children: item.children ? transformMenuData(item.children) : undefined,
+      alignItems: 'center',
-    isLeaf: !item.children || item.children.length === 0,
+      // justifyContent: 'space-between',
-    rawData: item // 保留原始数据
+      width: '100%'
-  }))
+    }
+  }, [
+    h('span', {
+      style: {
+        fontSize: '14px',
+        color: '#808080',
+        fontWeight: 'bold',
+        marginRight: '12px'
+      }
+    }, option.label),
+    h(NTag, {
+      type: option?.rawData.status === 'enable' ? 'success' : 'error',
+      size: 'small'
+    }, option?.rawData.status === 'enable' ? 'Enabled' : 'Disabled')
+  ])
+}
+/**
+ * 将菜单数据转换为树形组件所需的数据结构
+ * @param data 原始菜单数据
+ * @returns 转换后的树形数据
+ */
+const transformTreeData = (data: MenuNode[]): TreeOption[] => {
+  return data.map((item) => {
+    const treeNode: TreeOption = {
+      label: item.label,
+      key: item.uuid, // 使用 uuid 作为唯一标识
+      icon: item.icon, // 保留图标信息
+      isLeaf: item.component !== 'view-router',
+      // 保留原始数据，方便后续操作
+      rawData: {
+        ...item,
+        parentId: item.parentId
+      },
+      // 添加自定义前缀（图标）
+      prefix: () =>
+        item.icon
+          ? h(SvgIcon, {
+            'icon-class': item.icon,
+            width: '16',
+            height: '16',
+            color: '#4090EF',
+            style: 'margin-right:6px'
+          })
+          : null,
+      // 添加自定义后缀（操作按钮）
+      suffix: () =>
+        h(
+          NSpace,
+          { justify: 'end', style: 'margin-left: 12px' },
+          {
+            default: () => [
+              // 添加子菜单按钮（非叶子节点显示）
+              !treeNode.isLeaf
+                ? h(
+                  NButton,
+                  {
+                    size: 'large',
+                    text: true,
+                    onClick: (e: MouseEvent) => {
+                      e.stopPropagation()
+                      handleAddChild(item.uuid)
+                    }
+                  },
+                  { icon: () => h(NIcon, { color: 'green' }, { default: () => h(Add) }) }
+                )
+                : null,
+              // 编辑按钮
+              h(
+                NButton,
+                {
+                  size: 'large',
+                  text: true,
+                  onClick: (e: MouseEvent) => {
+                    e.stopPropagation()
+                    item.parentId === null
+                      ? handleEditParent(item)
+                      : handleEditChild(item)
+                  }
+                },
+                { icon: () => h(NIcon, { color: '#4090EF' }, { default: () => h(Create) }) }
+              ),
+              // 删除按钮
+              h(
+                NButton,
+                {
+                  size: 'large',
+                  text: true,
+                  type: 'error',
+                  onClick: (e: MouseEvent) => {
+                    e.stopPropagation()
+                    handleDelete(item.uuid)
+                  }
+                },
+                { icon: () => h(NIcon, null, { default: () => h(Trash) }) }
+              )
+            ]
+          }
+        )
+    }
+
+    // 递归处理子节点
+    if (item.children && item.children.length > 0) {
+      treeNode.children = transformTreeData(item.children)
+    }
+
+    return treeNode
+  })
 }
 
 // 获取数据后
@@ -321,26 +455,15 @@ const fetchMenuData = async () => {
   try {
     loading.value = true
     const res = await getAllMenu()
-    menuTree.value = transformMenuData(res)  // 转换数据
+    if (!Array.isArray(res) || !res) throw new Error('菜单数据格式错误！');
-    expandedKeys.value = getAllKeys(res)
+    menuTree.value = transformTreeData(res)
   } catch (error) {
-    console.error('获取菜单数据失败:', error)
+    message.error(error.message || '获取菜单数据失败！');
   } finally {
-    loading.value = false
+    loading.value = false;
   }
 }
 
-const getAllKeys = (tree: MenuTree[]): string[] => {
-  let keys: string[] = []
-  tree.forEach(node => {
-    keys.push(node.uuid)
-    if (node.children && node.children.length > 0) {
-      keys = keys.concat(getAllKeys(node.children as MenuTree[]))
-    }
-  })
-  return keys
-}
-
 const handleAddParent = () => {
   isEditParent.value = false
   parentForm.value = {
@@ -348,6 +471,7 @@ const handleAddParent = () => {
     label: '',
     icon: '',
     menuCode: '',
+    menuName: '',
     adaptability: 'pc',
     component: '',
     sort: 0,
@@ -358,7 +482,7 @@ const handleAddParent = () => {
   showParentModal.value = true;
 }
 
-const handleEditParent = (menu: MenuTree) => {
+const handleEditParent = (menu: MenuNode) => {
   isEditParent.value = true
   currentParentId.value = menu.uuid
   parentForm.value = {
@@ -366,6 +490,7 @@ const handleEditParent = (menu: MenuTree) => {
     label: menu.label,
     icon: menu.icon,
     menuCode: menu.menuCode,
+    menuName: menu.menuName,
     adaptability: menu.adaptability,
     component: menu.component,
     sort: menu.sort,
@@ -388,7 +513,8 @@ const handleSubmitParent = () => {
         } else {
           await addParentMenu(parentForm.value)
         }
-        showParentModal.value = false
+        showParentModal.value = false;
+        message.success('操作成功！');
         await fetchMenuData()
       } catch (error) {
         message.error(error.message || '操作失败！');
@@ -405,6 +531,7 @@ const handleAddChild = (parentId: string) => {
     label: '',
     icon: '',
     menuCode: '',
+    menuName: '',
     adaptability: 'pc',
     component: '',
     sort: 0,
@@ -424,6 +551,7 @@ const handleEditChild = (menu: MenuNode) => {
     label: menu.label,
     icon: menu.icon,
     menuCode: menu.menuCode,
+    menuName: menu.menuName,
     adaptability: menu.adaptability,
     component: menu.component,
     sort: menu.sort,
@@ -446,81 +574,36 @@ const handleSubmitChild = () => {
         } else {
           await addChildMenu(childForm.value)
         }
-        showChildModal.value = false
+        showChildModal.value = false;
+        message.success('操作成功！');
         await fetchMenuData()
       } catch (error) {
-        console.error('操作失败:', error)
+        message.error(error.message || '删除失败!');
       }
     }
   })
 }
 
-const handleDelete = async (uuid: string) => {
+const handleDelete = (uuid: string) => {
-  try {
+  dialog.warning({
-    await deleteMenu(uuid)
+    title: '警告',
-    await fetchMenuData()
+    content: '你确定删除此菜单及下面的子菜单吗？',
-  } catch (error) {
+    positiveText: '确定',
-    console.error('删除失败:', error)
+    negativeText: '不确定',
-  }
+    draggable: true,
-}
+    onPositiveClick: async () => {
+      try {
+        await deleteMenu(uuid)
+        await fetchMenuData()
+      } catch (error) {
+        message.error(error.message || '删除失败!');
+      }
+    },
+    onNegativeClick: () => {
+      message.info('取消操作')
+    }
+  })
 
-const renderTreeLabel = ({ option }: { option: TreeOption }) => {
-  const menu =  option.rawData as MenuNode | MenuTree
-  return h('div', { class: 'menu-management__tree-node' }, [
-    h('span', { class: 'menu-management__tree-label' }, menu.label),
-    h(NSpace, { class: 'menu-management__tree-actions' }, {
-      default: () => [
-        !option.isLeaf
-          ? h(NButton, {
-            size: 'tiny',
-            tertiary: true,
-            onClick: (e: MouseEvent) => {
-              e.stopPropagation()
-              handleAddChild(menu.uuid)
-            }
-          }, {
-            icon: () => h(NIcon, { size: 14 }, () => h(Add))
-          })
-          : null,
-        h(NButton, {
-          size: 'tiny',
-          tertiary: true,
-          onClick: (e: MouseEvent) => {
-            e.stopPropagation()
-            if (menu.parentId === null) {
-              handleEditParent(menu as MenuTree)
-            } else {
-              handleEditChild(menu as MenuNode)
-            }
-          }
-        }, {
-          icon: () => h(NIcon, { size: 14 }, () => h(Create))
-        }),
-        h(NButton, {
-          size: 'tiny',
-          tertiary: true,
-          type: 'error',
-          onClick: (e: MouseEvent) => {
-            e.stopPropagation()
-            handleDelete(menu.uuid)
-          }
-        }, {
-          icon: () => h(NIcon, { size: 14 }, () => h(Trash))
-        })
-      ]
-    })
-  ])
-}
-
-// 自定义切换图标渲染
-const renderSwitcherIcon = ({ expanded, option }: { expanded: boolean; option: TreeOption }) => {
-  return h(NIcon, { size: 16 }, () =>
-    option.isLeaf
-      ? h(Document)
-      : expanded
-        ? h(FolderOpen)
-        : h(Folder)
-  )
 }
 </script>