侧边栏修改

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

@@ -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>