feat: hide sidebar when active top-level menu has no children
上下/左右(含 MixBar)布局中,当前选中的顶级菜单无子菜单时不渲染左侧菜单; Logo 区宽度与折叠按钮随之自适应。 Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
parent
537dba9847
commit
246a305df5
@ -5,7 +5,7 @@
|
||||
:logo="logo"
|
||||
:show-title="showTitle"
|
||||
:logo-width="logoWidth"
|
||||
:has-sidebar="app.hasSidebar"
|
||||
:has-sidebar="showSidebar"
|
||||
:collapsed="app.sidebarCollapsed"
|
||||
:fixed="app.headerFixed"
|
||||
:show-breadcrumb="app.showBreadcrumb"
|
||||
@ -34,7 +34,7 @@
|
||||
/>
|
||||
|
||||
<ty-sidebar
|
||||
v-if="app.hasSidebar"
|
||||
v-if="showSidebar"
|
||||
:menus="sidebarMenus"
|
||||
:collapsed="app.sidebarCollapsed"
|
||||
:width="app.sidebarWidth"
|
||||
@ -105,6 +105,9 @@ const sidebarMenus = computed<ResourceNode[]>(() => {
|
||||
return app.mixbar ? (activeTop.value?.children ?? []) : menus
|
||||
})
|
||||
|
||||
/** 是否显示左侧菜单:有侧栏且当前顶级下存在子菜单。 */
|
||||
const showSidebar = computed(() => app.hasSidebar && sidebarMenus.value.length > 0)
|
||||
|
||||
/** 面包屑:顶级 + 当前叶子。 */
|
||||
const breadcrumbs = computed<BreadcrumbItem[]>(() => {
|
||||
const top = activeTop.value
|
||||
@ -115,16 +118,19 @@ const breadcrumbs = computed<BreadcrumbItem[]>(() => {
|
||||
return [{ title: top.name }]
|
||||
})
|
||||
|
||||
/** Logo 区宽度:与左侧菜单(或 MixBar+菜单)对齐;top 布局自适应。 */
|
||||
/** Logo 区宽度:与左侧栏(MixBar+菜单)对齐;无左侧栏时自适应。 */
|
||||
const logoWidth = computed<number | null>(() => {
|
||||
if (!app.hasSidebar) return null
|
||||
const mix = app.hasMixbar ? 64 : 0
|
||||
const side = app.sidebarCollapsed ? 64 : app.sidebarWidth
|
||||
return mix + side
|
||||
const side = showSidebar.value ? (app.sidebarCollapsed ? 64 : app.sidebarWidth) : 0
|
||||
const total = mix + side
|
||||
return total > 0 ? total : null
|
||||
})
|
||||
|
||||
/** 侧栏折叠时仅显 Logo,展开时显 Logo + 标题。 */
|
||||
const showTitle = computed(() => !app.hasSidebar || !app.sidebarCollapsed)
|
||||
/** 侧栏折叠/隐藏时仅显 Logo,展开时显 Logo + 标题。 */
|
||||
const showTitle = computed(() => {
|
||||
if (logoWidth.value == null) return true
|
||||
return showSidebar.value && !app.sidebarCollapsed
|
||||
})
|
||||
|
||||
/** 侧边栏 sticky 定位(顶栏固定时往下让出顶栏高度)。 */
|
||||
const cssVars = computed(() => ({
|
||||
|
||||
File diff suppressed because one or more lines are too long
Loading…
x
Reference in New Issue
Block a user