更新

src/layouts/index.vue

@@ -7,15 +7,21 @@
 				<div class="logo-box">
 					<span class="logo-text">VUE</span>
 				</div>
-				<level1-menu />
+				<ul class="left-nav">
+					<li v-for="(item, index) in menuList" :key="index">
+						<component :is="item.meta?.icon" />
+						<span>{{ item.meta?.title }}</span>
+					</li>
+				</ul>
 			</a-layout-sider>
 
 			<!-- 第二个侧边栏：显示选中的父菜单的子菜单 -->
 			<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 />
+				theme="light" :collapsed="sidebarCollapsed" :collapsible="true" @collapse="handleCollapse" width="200" :collapsed-width="64">
+				<a-menu  v-model:openKeys="openKeys" v-model:selectedKeys="selectedKeys" mode="inline" :items="menuList">
+					<navMenu />
+				</a-menu>
 			</a-layout-sider>
 
 			<a-layout class="main-layout">
@@ -45,7 +51,9 @@
 					<span v-if="!sidebarCollapsed" class="logo-text">VUE ADMIN</span>
 					<span v-else class="logo-text-mini">V</span>
 				</div>
-				<side-menu :collapsed="sidebarCollapsed" />
+				<a-menu  v-model:openKeys="openKeys" v-model:selectedKeys="selectedKeys" mode="inline" :items="menuList">
+					<navMenu />
+				</a-menu>
 			</a-layout-sider>
 			<a-layout class="main-layout">
 				<a-layout-header class="app-header">
@@ -72,7 +80,9 @@
 					<div class="logo-box-top">
 						<span class="logo-text">VUE ADMIN</span>
 					</div>
-					<topMenu />
+					<a-menu v-model:selectedKeys="selectedKeys" mode="horizontal" :items="menuList">
+						<navMenu />
+					</a-menu>
 				</div>
 				<userbar />
 			</a-layout-header>
@@ -102,14 +112,12 @@
 import { computed, defineOptions, ref } from 'vue'
 import { useLayoutStore } from '@/stores/modules/layout'
 import { SettingOutlined } from '@ant-design/icons-vue'
+import { useUserStore } from '@/stores/modules/user'
 
 import userbar from './components/userbar.vue'
+import navMenu from './components/navMenu.vue'
 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'
 import setting from './components/setting.vue'
 
 // 定义组件名称（多词命名）
@@ -142,6 +150,12 @@ const layoutClass = computed(() => {
 	}
 })
 
+const openKeys = ref([])
+const selectedKeys = ref([])
+const menuList = computed(() => {
+	return useUserStore().menu
+})
+
 // 处理折叠
 const handleCollapse = (collapsed) => {
 	layoutStore.sidebarCollapsed = collapsed