components.d.ts

@@ -60,7 +60,6 @@ declare module 'vue' {
     TyFooter: typeof import('./src/components/ty-footer.vue')['default']
     TyForm: typeof import('./src/components/ty-form.vue')['default']
     TyHeader: typeof import('./src/components/ty-header.vue')['default']
-    TyMenuNode: typeof import('./src/components/ty-menu-node.vue')['default']
     TyMixbar: typeof import('./src/components/ty-mixbar.vue')['default']
     TyNotice: typeof import('./src/components/ty-notice.vue')['default']
     TySearchForm: typeof import('./src/components/ty-search-form.vue')['default']
@@ -126,7 +125,6 @@ declare global {
   const TyFooter: typeof import('./src/components/ty-footer.vue')['default']
   const TyForm: typeof import('./src/components/ty-form.vue')['default']
   const TyHeader: typeof import('./src/components/ty-header.vue')['default']
-  const TyMenuNode: typeof import('./src/components/ty-menu-node.vue')['default']
   const TyMixbar: typeof import('./src/components/ty-mixbar.vue')['default']
   const TyNotice: typeof import('./src/components/ty-notice.vue')['default']
   const TySearchForm: typeof import('./src/components/ty-search-form.vue')['default']

src/components/ty-header.vue

@@ -20,9 +20,17 @@
         @select="onNavSelect"
       >
         <template v-for="item in menus" :key="item.code">
-          <ty-menu-node v-if="layout === 'top'" :node="item" />
+          <el-sub-menu v-if="layout === 'top' && item.children?.length" :index="item.code">
+            <template #title>
+              <icon type="iconify" :icon="item.icon ?? 'mdi:menu'" class="menu-icon" />
+              <span>{{ item.name }}</span>
+            </template>
+            <el-menu-item v-for="child in item.children" :key="child.code" :index="child.path ?? child.code">
+              {{ child.name }}
+            </el-menu-item>
+          </el-sub-menu>
           <el-menu-item v-else :index="item.code">
-            <icon type="iconify" :icon="item.icon ?? 'mdi:menu'" />
+            <icon type="iconify" :icon="item.icon ?? 'mdi:menu'" class="menu-icon" />
             <span>{{ item.name }}</span>
           </el-menu-item>
         </template>
@@ -211,7 +219,7 @@ function onUserCommand(command: string): void {
       color: var(--el-color-primary);
     }
 
-    :deep(.icon) {
+    :deep(.menu-icon) {
       @apply mr-1 text-base;
     }
   }

src/components/ty-menu-node.vue

@@ -1,21 +0,0 @@
-<template>
-  <el-sub-menu v-if="node.children?.length" :index="node.code">
-    <template #title>
-      <icon type="iconify" :icon="node.icon ?? 'mdi:menu'" />
-      <span>{{ node.name }}</span>
-    </template>
-    <TyMenuNode v-for="child in node.children" :key="child.code" :node="child" />
-  </el-sub-menu>
-  <el-menu-item v-else :index="node.path ?? node.code">
-    <icon type="iconify" :icon="node.icon ?? 'mdi:menu'" />
-    <span>{{ node.name }}</span>
-  </el-menu-item>
-</template>
-
-<script setup lang="ts">
-import type { ResourceNode } from '@/types/resource'
-
-defineOptions({ name: 'TyMenuNode' })
-
-defineProps<{ node: ResourceNode }>()
-</script>

src/components/ty-sidebar.vue

@@ -9,7 +9,22 @@
         popper-class="ty-menu-popper"
         @select="onSelect"
       >
-        <ty-menu-node v-for="item in menus" :key="item.code" :node="item" />
+        <template v-for="item in menus" :key="item.code">
+          <el-sub-menu v-if="item.children?.length" :index="item.code">
+            <template #title>
+              <icon type="iconify" :icon="item.icon ?? 'mdi:menu'" />
+              <span>{{ item.name }}</span>
+            </template>
+            <el-menu-item v-for="child in item.children" :key="child.code" :index="child.path ?? child.code">
+              <icon v-if="child.icon" type="iconify" :icon="child.icon" />
+              <span>{{ child.name }}</span>
+            </el-menu-item>
+          </el-sub-menu>
+          <el-menu-item v-else :index="item.path ?? item.code">
+            <icon type="iconify" :icon="item.icon ?? 'mdi:menu'" />
+            <span>{{ item.name }}</span>
+          </el-menu-item>
+        </template>
       </el-menu>
     </el-scrollbar>
   </aside>