更新

src/layouts/components/level1Menu.vue

@@ -0,0 +1,147 @@
+<template>
+	<a-menu mode="inline" theme="dark" :selected-keys="selectedKeys" @select="handleSelect" class="level1-menu">
+		<a-menu-item v-for="item in menuList" :key="item.path">
+			<template #icon>
+				<component :is="item.meta?.icon || 'AppstoreOutlined'" />
+			</template>
+			{{ item.meta?.title || item.name }}
+		</a-menu-item>
+	</a-menu>
+</template>
+
+<script setup>
+import { ref, computed, watch, onMounted } from 'vue'
+import { useRoute, useRouter } from 'vue-router'
+import { useLayoutStore } from '@/stores/modules/layout'
+import { getUserMenu } from '@/api/menu'
+
+const route = useRoute()
+const router = useRouter()
+const layoutStore = useLayoutStore()
+
+const menuList = ref([])
+const selectedKeys = ref([])
+
+// 获取菜单数据
+const getMenuList = async () => {
+	try {
+		const res = await getUserMenu()
+		if (res.code === 200) {
+			menuList.value = res.data || []
+		}
+	} catch (error) {
+		console.error('获取菜单失败:', error)
+		// 模拟数据
+		menuList.value = [
+			{
+				path: '/home',
+				name: 'Home',
+				meta: { title: '首页', icon: 'HomeOutlined' }
+			},
+			{
+				path: '/system',
+				name: 'System',
+				meta: { title: '系统管理', icon: 'SettingOutlined' },
+				children: [
+					{
+						path: '/system/user',
+						name: 'User',
+						meta: { title: '用户管理', icon: 'UserOutlined' }
+					},
+					{
+						path: '/system/role',
+						name: 'Role',
+						meta: { title: '角色管理', icon: 'TeamOutlined' }
+					},
+					{
+						path: '/system/menu',
+						name: 'Menu',
+						meta: { title: '菜单管理', icon: 'MenuOutlined' }
+					}
+				]
+			}
+		]
+	}
+}
+
+// 更新选中的菜单
+const updateSelectedKeys = () => {
+	// 查找当前路由对应的一级菜单
+	const path = route.path
+	const matched = route.matched
+	if (matched.length > 0) {
+		const topPath = matched[0].path
+		selectedKeys.value = [topPath]
+
+		// 查找对应的菜单项
+		const selectedMenu = menuList.value.find(item => item.path === topPath)
+		if (selectedMenu) {
+			layoutStore.setSelectedParentMenu(selectedMenu)
+		}
+	}
+}
+
+// 处理菜单选择
+const handleSelect = ({ key }) => {
+	const selectedMenu = menuList.value.find(item => item.path === key)
+	if (selectedMenu) {
+		layoutStore.setSelectedParentMenu(selectedMenu)
+
+		// 如果没有子菜单，直接跳转
+		if (!selectedMenu.children || selectedMenu.children.length === 0) {
+			router.push(key)
+		}
+	}
+}
+
+// 监听路由变化
+watch(() => route.path, () => {
+	updateSelectedKeys()
+}, { immediate: true })
+
+onMounted(() => {
+	getMenuList()
+})
+</script>
+
+<style scoped lang="scss">
+.level1-menu {
+	height: calc(100% - 64px);
+	border-right: none;
+	background-color: #001529;
+
+	:deep(.ant-menu-item) {
+		height: 60px;
+		line-height: 60px;
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+		justify-content: center;
+		padding: 0;
+		margin: 0;
+
+		.anticon {
+			font-size: 20px;
+			margin-bottom: 4px;
+		}
+
+		.ant-menu-title-content {
+			font-size: 12px;
+			line-height: 1.2;
+		}
+
+		&:hover {
+			color: #ffffff;
+			background-color: #1890ff;
+		}
+
+		&.ant-menu-item-selected {
+			background-color: #1890ff;
+
+			&::after {
+				display: none;
+			}
+		}
+	}
+}
+</style>

src/layouts/components/level2Menu.vue

@@ -0,0 +1,127 @@
+<template>
+	<div v-if="parentMenu && parentMenu.children && parentMenu.children.length > 0" class="level2-menu-wrapper">
+		<div class="menu-header">
+			<span class="menu-title">{{ parentMenu.meta?.title || parentMenu.name }}</span>
+		</div>
+		<a-menu mode="inline" :theme="theme" :selected-keys="selectedKeys" :open-keys="openKeys" @select="handleSelect"
+			@open-change="handleOpenChange" class="level2-menu">
+			<template v-for="item in parentMenu.children">
+				<!-- 有子菜单 -->
+				<a-sub-menu v-if="item.children && item.children.length > 0" :key="item.path + '-sub'">
+					<template #icon>
+						<component :is="item.meta?.icon || 'MenuOutlined'" />
+					</template>
+					<template #title>{{ item.meta?.title || item.name }}</template>
+					<a-menu-item v-for="child in item.children" :key="child.path">
+						<template #icon>
+							<component :is="child.meta?.icon || 'FileOutlined'" />
+						</template>
+						{{ child.meta?.title || child.name }}
+					</a-menu-item>
+				</a-sub-menu>
+				<!-- 无子菜单 -->
+				<a-menu-item v-else :key="item.path + '-item'">
+					<template #icon>
+						<component :is="item.meta?.icon || 'FileOutlined'" />
+					</template>
+					{{ item.meta?.title || item.name }}
+				</a-menu-item>
+			</template>
+		</a-menu>
+	</div>
+</template>
+
+<script setup>
+import { ref, computed, watch } from 'vue'
+import { useRoute, useRouter } from 'vue-router'
+import { useLayoutStore } from '@/stores/modules/layout'
+
+const props = defineProps({
+	theme: {
+		type: String,
+		default: 'light'
+	}
+})
+
+const route = useRoute()
+const router = useRouter()
+const layoutStore = useLayoutStore()
+
+const parentMenu = computed(() => layoutStore.selectedParentMenu)
+const selectedKeys = ref([])
+const openKeys = ref([])
+
+// 更新选中的菜单
+const updateSelectedKeys = () => {
+	selectedKeys.value = [route.path]
+
+	// 获取父级菜单路径
+	const matched = route.matched
+		.filter(item => item.path !== '/' && item.path !== route.path)
+		.map(item => item.path)
+
+	openKeys.value = matched
+}
+
+// 处理菜单选择
+const handleSelect = ({ key }) => {
+	router.push(key)
+}
+
+// 处理菜单展开/收起
+const handleOpenChange = (keys) => {
+	openKeys.value = keys
+}
+
+// 监听路由变化
+watch(() => route.path, () => {
+	updateSelectedKeys()
+}, { immediate: true })
+
+// 监听父菜单变化
+watch(() => parentMenu.value, () => {
+	updateSelectedKeys()
+})
+</script>
+
+<style scoped lang="scss">
+.level2-menu-wrapper {
+	height: 100%;
+	display: flex;
+	flex-direction: column;
+
+	.menu-header {
+		height: 60px;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		border-bottom: 1px solid #f0f0f0;
+
+		.menu-title {
+			font-size: 16px;
+			font-weight: 500;
+			color: #333;
+		}
+	}
+
+	.level2-menu {
+		flex: 1;
+		overflow-y: auto;
+		border-right: none;
+
+		&::-webkit-scrollbar {
+			width: 6px;
+			height: 6px;
+		}
+
+		&::-webkit-scrollbar-thumb {
+			background: rgba(0, 0, 0, 0.2);
+			border-radius: 3px;
+		}
+
+		&::-webkit-scrollbar-track {
+			background: transparent;
+		}
+	}
+}
+</style>

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;
+			flex-direction: column;
-			justify-content: center;
+			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 {

src/stores/modules/layout.js

@@ -11,6 +11,9 @@ export const useLayoutStore = defineStore(
 		// 侧边栏折叠状态
 		const sidebarCollapsed = ref(false)
 
+		// 当前选中的父菜单（用于双栏布局）
+		const selectedParentMenu = ref(null)
+
 		// 视图标签页（用于记录页面滚动位置）
 		const viewTags = ref([])
 
@@ -19,6 +22,11 @@ export const useLayoutStore = defineStore(
 			sidebarCollapsed.value = !sidebarCollapsed.value
 		}
 
+		// 设置选中的父菜单
+		const setSelectedParentMenu = (menu) => {
+			selectedParentMenu.value = menu
+		}
+
 		// 设置布局模式
 		const setLayoutMode = (mode) => {
 			layoutMode.value = mode
@@ -50,9 +58,11 @@ export const useLayoutStore = defineStore(
 		return {
 			layoutMode,
 			sidebarCollapsed,
+			selectedParentMenu,
 			viewTags,
 			toggleSidebar,
 			setLayoutMode,
+			setSelectedParentMenu,
 			updateViewTags,
 			removeViewTags,
 			clearViewTags,