完善菜单动态匹配

client/src/App.vue

@@ -1,7 +1,35 @@
 <script setup>
-import {ref} from "vue";
+import {ref, watch} from "vue";
+import {useRoute} from "vue-router";
+
+const route = useRoute();
+const menus = ref([
+  {
+    key: 'home',
+    path: '/home',
+    name: '首页'
+  },
+  {
+    key: 'management',
+    path: '/management',
+    name: '管理台'
+  },
+])
+const headerNavSelected = ref(['home']);
+
+// 根据路由路径设置选中的菜单项
+const updateSelectedMenu = () => {
+  const path = route.path;
+  // 去除路径中的'/'，获取路由名称
+  const routeName = path.split('/')[1] || 'home';
+  headerNavSelected.value = [routeName];
+};
+
+// 监听路由变化
+watch(() => route.path, () => {
+  updateSelectedMenu();
+}, {immediate: true}); // immediate: true 确保组件加载时立即执行一次
 
-const headerNavSelected = ref(['home'])
 </script>
 
 <template>
@@ -16,15 +44,11 @@ const headerNavSelected = ref(['home'])
           theme="dark"
           mode="horizontal"
       >
-        <a-menu-item key="home">
-          <router-link to="/home">首页</router-link>
-        </a-menu-item>
-        <a-menu-item key="management">
-          <router-link to="/management">管理台</router-link>
+        <a-menu-item v-for="menu in menus" :key="menu.key">
+          <router-link :to="menu.path">{{ menu.name }}</router-link>
         </a-menu-item>
       </a-menu>
       <div class="float-right">
-
       </div>
     </a-layout-header>
     <router-view/>

client/src/views/management/Index.vue

@@ -1,7 +1,59 @@
 <script setup>
-import {ref} from 'vue'
+import {ref, watch} from 'vue'
+import {useRoute} from 'vue-router'
 
-const sideNav = ref(['overview'])
+const route = useRoute();
+const menus = [
+  {
+    key: 'overview',
+    path: '/management/overview',
+    name: '概览',
+  },
+  {
+    key: 'system',
+    name: '系统管理',
+    children: [
+      {
+        key: 'setting',
+        path: '/management/setting',
+        name: '设置',
+      }
+    ]
+  }
+]
+const sideNavSelected = ref(['overview'])
+const openKeys = ref([]) // 控制展开的子菜单
+
+// 菜单项与其父菜单的映射关系
+const menuItemToParent = ref({})
+
+for (let index in menus) {
+  let menu = menus[index]
+  if (menu?.children) {
+    for (let subIndex in menu.children) {
+      let submenu = menu.children[subIndex]
+      menuItemToParent.value[submenu.key] = menu.key
+    }
+  }
+}
+
+// 更新侧边栏选中状态
+const updateSideMenu = () => {
+  const pathSegments = route.path.split('/');
+  // 获取最后一个路径段作为当前页面的标识
+  const currentPage = pathSegments[pathSegments.length - 1];
+  sideNavSelected.value = [currentPage];
+
+  // 如果当前选中的菜单项在子菜单中，则自动展开父菜单
+  if (menuItemToParent.value[currentPage]) {
+    openKeys.value = [menuItemToParent.value[currentPage]];
+  }
+};
+
+// 监听路由变化
+watch(() => route.path, () => {
+  updateSideMenu();
+}, {immediate: true});
 </script>
 
 <template>
@@ -9,7 +61,8 @@ const sideNav = ref(['overview'])
     <a-layout-sider>
       <a-menu
           class="h-full"
-          v-model:selectedKeys="sideNav"
+          v-model:selectedKeys="sideNavSelected"
+          v-model:openKeys="openKeys"
           mode="inline"
       >
         <a-menu-item key="overview">