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:
parent
4874a23a61
commit
06e5ba4515
@ -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;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user