feat(layout): 顶部导航 top 布局菜单也支持无限级

- top 布局横向菜单改用 ty-menu-node 递归渲染
- 统一 icon 间距样式(:deep(.icon) 替代 .menu-icon)

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
liuyun 2026-10-14 13:59:13 +08:00
parent 4874a23a61
commit 06e5ba4515

View File

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