侧边栏修改
This commit is contained in:
@@ -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;
|
||||||
|
|||||||
@@ -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>
|
||||||
|
|||||||
Reference in New Issue
Block a user