wangys/urbanLifeline
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

侧边栏修改

Browse Source
This commit is contained in:
wangys
2025-12-17 15:38:47 +08:00
parent aa8ce553b0
commit d208893b8a
6 changed files with 45 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files

20
urbanLifelineWeb/packages/shared/src/layouts/SubSidebarLayout/SubSidebarLayout.scss
View File

@@ -197,6 +197,26 @@ $brand-color-hover: #004488;
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级导航项（分组标题）
.nav-item {
position: relative;

42
urbanLifelineWeb/packages/shared/src/layouts/SubSidebarLayout/SubSidebarLayout.vue
View File

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