侧边栏修改

This commit is contained in:
2025-12-17 15:38:47 +08:00
parent aa8ce553b0
commit d208893b8a
6 changed files with 45 additions and 17 deletions

View File

@@ -197,6 +197,26 @@ $brand-color-hover: #004488;
padding: 0; padding: 0;
} }
// 导航分组容器
.nav-group {
margin-bottom: 4px;
}
// 子菜单容器(二级)
.nav-children {
padding-left: 12px;
}
// 子菜单项包装器
.nav-child-wrapper {
margin-bottom: 2px;
}
// 三级菜单容器
.nav-sub-children {
padding-left: 12px;
}
// 1级导航项分组标题 // 1级导航项分组标题
.nav-item { .nav-item {
position: relative; position: relative;

View File

@@ -24,7 +24,7 @@
<nav class="nav-menu"> <nav class="nav-menu">
<div class="nav-section"> <div class="nav-section">
<!-- 前端分组 admin 路由 --> <!-- 前端分组 admin 路由 -->
<template v-if="frontendMenuItems.length > 0"> <div v-if="frontendMenuItems.length > 0" class="nav-group">
<div <div
class="nav-item nav-group-item" class="nav-item nav-group-item"
:class="{ 'has-children': true }" :class="{ 'has-children': true }"
@@ -40,20 +40,24 @@
</div> </div>
</div> </div>
<!-- 前端子菜单 --> <!-- 前端子菜单 -->
<template v-if="isGroupExpanded('frontend') && !collapsed"> <div v-if="isGroupExpanded('frontend') && !collapsed" class="nav-children">
<template v-for="item in frontendMenuItems" :key="item.key"> <div
v-for="item in frontendMenuItems"
:key="item.key"
class="nav-child-wrapper"
>
<div <div
class="nav-item nav-child-item" class="nav-item nav-child-item"
:class="{ active: isMenuActive(item), 'has-children': item.children }" :class="{ active: isMenuActive(item), 'has-children': item.children }"
@click="item.children ? toggleMenu(item) : handleMenuClick(item)" @click="item.children ? toggleMenu(item) : handleMenuClick(item)"
> >
<component :is="item.icon" /> <component :is="item.icon" :size="16" />
<span>{{ item.label }}</span> <span>{{ item.label }}</span>
<ChevronDown v-if="item.children && item.expanded" :size="14" class="expand-icon" /> <ChevronDown v-if="item.children && item.expanded" :size="14" class="expand-icon" />
<ChevronRight v-if="item.children && !item.expanded" :size="14" class="expand-icon" /> <ChevronRight v-if="item.children && !item.expanded" :size="14" class="expand-icon" />
</div> </div>
<!-- 三级菜单 --> <!-- 三级菜单 -->
<template v-if="item.children && item.expanded"> <div v-if="item.children && item.expanded" class="nav-sub-children">
<div <div
v-for="child in item.children" v-for="child in item.children"
:key="child.key" :key="child.key"
@@ -63,13 +67,13 @@
> >
<span>{{ child.label }}</span> <span>{{ child.label }}</span>
</div> </div>
</template> </div>
</template> </div>
</template> </div>
</template> </div>
<!-- 后端分组admin 路由 --> <!-- 后端分组admin 路由 -->
<template v-if="backendMenuItems.length > 0"> <div v-if="backendMenuItems.length > 0" class="nav-group">
<div <div
class="nav-item nav-group-item" class="nav-item nav-group-item"
:class="{ 'has-children': true }" :class="{ 'has-children': true }"
@@ -85,8 +89,12 @@
</div> </div>
</div> </div>
<!-- 后端子菜单 --> <!-- 后端子菜单 -->
<template v-if="isGroupExpanded('backend') && !collapsed"> <div v-if="isGroupExpanded('backend') && !collapsed" class="nav-children">
<template v-for="item in backendMenuItems" :key="item.key"> <div
v-for="item in backendMenuItems"
:key="item.key"
class="nav-child-wrapper"
>
<div <div
class="nav-item nav-child-item" class="nav-item nav-child-item"
:class="{ active: isMenuActive(item), 'has-children': item.children }" :class="{ active: isMenuActive(item), 'has-children': item.children }"
@@ -98,7 +106,7 @@
<ChevronRight v-if="item.children && !item.expanded" :size="14" class="expand-icon" /> <ChevronRight v-if="item.children && !item.expanded" :size="14" class="expand-icon" />
</div> </div>
<!-- 三级菜单 --> <!-- 三级菜单 -->
<template v-if="item.children && item.expanded"> <div v-if="item.children && item.expanded" class="nav-sub-children">
<div <div
v-for="child in item.children" v-for="child in item.children"
:key="child.key" :key="child.key"
@@ -108,10 +116,10 @@
> >
<span>{{ child.label }}</span> <span>{{ child.label }}</span>
</div> </div>
</template> </div>
</template> </div>
</template> </div>
</template> </div>
</div> </div>
</nav> </nav>
</aside> </aside>