更新

src/layouts/index.vue

@@ -2,19 +2,28 @@
 	<a-layout class="app-wrapper" :class="layoutClass">
 		<!-- 默认布局：左侧双栏布局 -->
 		<template v-if="layoutMode === 'default'">
-			<a-layout-sider theme="dark" width="70" class="logo-sidebar">
+			<!-- 第一个侧边栏：显示一级菜单 -->
+			<a-layout-sider theme="dark" width="70" class="level1-sidebar">
 				<div class="logo-box">
 					<span class="logo-text">VUE</span>
 				</div>
+				<level1-menu />
 			</a-layout-sider>
-			<a-layout-sider theme="light" :collapsed="sidebarCollapsed" :collapsible="true" @collapse="handleCollapse"
-				class="menu-sidebar" width="200" :collapsed-width="64">
-				<side-menu :collapsed="sidebarCollapsed" />
+
+			<!-- 第二个侧边栏：显示选中的父菜单的子菜单 -->
+			<a-layout-sider
+				v-if="selectedParentMenu && selectedParentMenu.children && selectedParentMenu.children.length > 0"
+				theme="light" :collapsed="sidebarCollapsed" :collapsible="true" @collapse="handleCollapse"
+				class="level2-sidebar" width="200" :collapsed-width="64">
+				<level2-menu />
 			</a-layout-sider>
+
 			<a-layout class="main-layout">
 				<a-layout-header class="app-header">
 					<div class="header-left">
-						<a-button type="text" :icon="sidebarCollapsed ? h(MenuUnfoldOutlined) : h(MenuFoldOutlined)"
+						<a-button
+							v-if="selectedParentMenu && selectedParentMenu.children && selectedParentMenu.children.length > 0"
+							type="text" :icon="sidebarCollapsed ? h(MenuUnfoldOutlined) : h(MenuFoldOutlined)"
 							@click="toggleSidebar" class="collapse-btn" />
 						<breadcrumb />
 					</div>
@@ -95,12 +104,15 @@ import breadcrumb from './components/breadcrumb.vue'
 import tags from './components/tags.vue'
 import topMenu from './components/topMenu.vue'
 import sideMenu from './components/sideMenu.vue'
+import level1Menu from './components/level1Menu.vue'
+import level2Menu from './components/level2Menu.vue'
 
 const route = useRoute()
 const layoutStore = useLayoutStore()
 
 const layoutMode = computed(() => layoutStore.layoutMode)
 const sidebarCollapsed = computed(() => layoutStore.sidebarCollapsed)
+const selectedParentMenu = computed(() => layoutStore.selectedParentMenu)
 
 // 缓存的视图列表
 const cachedViews = computed(() => {
@@ -167,13 +179,13 @@ const handleCollapse = (collapsed) => {
 		height: calc(100vh - 106px);
 	}
 
-	/* 默认布局 */
+	/* 默认布局 - 双栏菜单 */
 	&.layout-default {
-		.logo-sidebar {
+		.level1-sidebar {
 			background-color: #001529;
 			display: flex;
-			align-items: center;
-			justify-content: center;
+			flex-direction: column;
+			z-index: 10;
 
 			.logo-box {
 				width: 100%;
@@ -181,6 +193,7 @@ const handleCollapse = (collapsed) => {
 				display: flex;
 				align-items: center;
 				justify-content: center;
+				border-bottom: 1px solid rgba(255, 255, 255, 0.1);
 
 				.logo-text {
 					color: #ffffff;
@@ -191,10 +204,10 @@ const handleCollapse = (collapsed) => {
 			}
 		}
 
-		.menu-sidebar {
+		.level2-sidebar {
 			background-color: #ffffff;
 			box-shadow: 1px 0 6px rgba(0, 0, 0, 0.1);
-			z-index: 10;
+			z-index: 9;
 		}
 
 		.main-layout {