task-6(壳层/路由): 定义后端菜单树到侧边栏节点映射规则并落地
新增 src/layout/menu-mapper.ts:toSidebarEntries 处理分组/顶级路由叶/畸形节点, groupKeysForActive 按当前路由展开激活分组;AdminLayout 菜单区改用映射结果, 删除旧 visibleChildren/canSee 死逻辑;8 用例覆盖空树/单叶/缺 route 过滤等。
This commit is contained in:
@@ -5,7 +5,7 @@ import { ElMessage } from 'element-plus'
|
||||
import { useAdminSessionStore } from '@/stores/admin-session'
|
||||
import { joinAdminPath } from '@/config/app'
|
||||
import { pageTitleOf, topbarUserOf } from '@/layout/topbar-model'
|
||||
import type { AdminMenuNode } from '@/types/admin'
|
||||
import { groupKeysForActive, toSidebarEntries } from '@/layout/menu-mapper'
|
||||
|
||||
const route = useRoute()
|
||||
const router = useRouter()
|
||||
@@ -13,27 +13,12 @@ const session = useAdminSessionStore()
|
||||
const collapsed = ref(false)
|
||||
|
||||
const activePath = computed(() => route.path)
|
||||
const groups = computed(() => session.menuTree.filter((node) => node.children?.length))
|
||||
const menuEntries = computed(() => toSidebarEntries(session.menuTree))
|
||||
const openedKeys = computed(() => groupKeysForActive(menuEntries.value, route.path))
|
||||
const pageTitle = computed(() => pageTitleOf(route.meta.title as string | undefined))
|
||||
const userVm = computed(() => topbarUserOf(session.user))
|
||||
const logoUrl = joinAdminPath('assets', 'logo.jpg')
|
||||
|
||||
function menuPath(node: AdminMenuNode): string {
|
||||
return node.route || '/account/users'
|
||||
}
|
||||
|
||||
function visibleChildren(node: AdminMenuNode) {
|
||||
return (node.children || []).filter((child) => child.route)
|
||||
}
|
||||
|
||||
function canSee(node: AdminMenuNode) {
|
||||
return session.isSuperAdmin.valueOf() || hasMenu(node, String(route.meta.menuKey || '')) || node.route === activePath.value
|
||||
}
|
||||
|
||||
function hasMenu(node: AdminMenuNode, key: string): boolean {
|
||||
return node.key === key || (node.children || []).some((child) => hasMenu(child, key))
|
||||
}
|
||||
|
||||
async function signOut() {
|
||||
try {
|
||||
await session.signOut()
|
||||
@@ -55,23 +40,22 @@ async function signOut() {
|
||||
</div>
|
||||
|
||||
<el-scrollbar class="admin-menu-scroll">
|
||||
<el-menu :default-active="activePath" :collapse="collapsed" router class="admin-menu">
|
||||
<template v-for="group in groups" :key="group.key">
|
||||
<el-sub-menu :index="group.key">
|
||||
<el-menu :default-active="activePath" :default-openeds="openedKeys" :collapse="collapsed" router class="admin-menu">
|
||||
<template v-for="entry in menuEntries" :key="entry.key">
|
||||
<el-sub-menu v-if="entry.kind === 'group'" :index="entry.key">
|
||||
<template #title>
|
||||
<span class="menu-group-title">{{ group.name }}</span>
|
||||
<span class="menu-group-title">{{ entry.name }}</span>
|
||||
</template>
|
||||
<el-menu-item
|
||||
v-for="item in visibleChildren(group)"
|
||||
:key="item.key"
|
||||
:index="menuPath(item)"
|
||||
>
|
||||
<el-menu-item v-for="item in entry.children" :key="item.key" :index="item.route">
|
||||
{{ item.name }}
|
||||
</el-menu-item>
|
||||
</el-sub-menu>
|
||||
<el-menu-item v-else :key="entry.key" :index="entry.route">
|
||||
{{ entry.name }}
|
||||
</el-menu-item>
|
||||
</template>
|
||||
</el-menu>
|
||||
<el-empty v-if="!groups.length && !session.loading" description="暂无可用菜单" :image-size="72" />
|
||||
<el-empty v-if="!menuEntries.length && !session.loading" description="暂无可用菜单" :image-size="72" />
|
||||
</el-scrollbar>
|
||||
|
||||
<button class="sidebar-collapse" type="button" @click="collapsed = !collapsed">
|
||||
@@ -100,5 +84,3 @@ async function signOut() {
|
||||
</section>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
||||
|
||||
@@ -0,0 +1,46 @@
|
||||
import type { AdminMenuNode } from '../types/admin'
|
||||
|
||||
export interface SidebarItem {
|
||||
key: string
|
||||
name: string
|
||||
route: string
|
||||
}
|
||||
|
||||
/** 侧边栏渲染项:分组(含子页面)或单页面项(含顶级路由叶节点)。 */
|
||||
export type SidebarEntry =
|
||||
| { kind: 'group'; key: string; name: string; children: SidebarItem[] }
|
||||
| { kind: 'item'; key: string; name: string; route: string }
|
||||
|
||||
/**
|
||||
* 后端菜单树 -> 侧边栏节点映射规则(任务 6):
|
||||
* - 有可路由子节点的节点渲染为分组,只保留带 route 的子项;
|
||||
* - 无子节点但有 route 的节点渲染为单页面项(不丢顶级叶菜单);
|
||||
* - 既无子节点也无 route 的节点跳过(点不进去的纯占位不展示)。
|
||||
*/
|
||||
export function toSidebarEntries(nodes: AdminMenuNode[] | null | undefined): SidebarEntry[] {
|
||||
const entries: SidebarEntry[] = []
|
||||
for (const node of nodes || []) {
|
||||
const name = node.name || ''
|
||||
const key = node.key || ''
|
||||
const children: SidebarItem[] = (node.children || [])
|
||||
.filter((child): child is AdminMenuNode & { route: string } => Boolean(child.route))
|
||||
.map((child) => ({ key: child.key || '', name: child.name || '', route: child.route }))
|
||||
if (children.length > 0) {
|
||||
entries.push({ kind: 'group', key, name, children })
|
||||
} else if (node.route) {
|
||||
entries.push({ kind: 'item', key, name, route: node.route })
|
||||
}
|
||||
}
|
||||
return entries
|
||||
}
|
||||
|
||||
/** 计算需默认展开的分组 key:分组下含当前激活路由子项时返回该分组 key。 */
|
||||
export function groupKeysForActive(entries: SidebarEntry[], activeRoute: string): string[] {
|
||||
const keys: string[] = []
|
||||
for (const entry of entries) {
|
||||
if (entry.kind === 'group' && entry.children.some((child) => child.route === activeRoute)) {
|
||||
keys.push(entry.key)
|
||||
}
|
||||
}
|
||||
return keys
|
||||
}
|
||||
Reference in New Issue
Block a user