Upload

src/Manager/LeftBar.vue

@@ -1,23 +1,21 @@
 <template>
-    <div>
   <a-menu
-            :default-selected-keys="state.selectedKeys"
+      id="dddddd"
+      v-model:openKeys="openKeys"
+      v-model:selectedKeys="selectedKeys"
       style="width: 256px"
       mode="inline"
-            :open-keys="state.openKeys"
       :items="items"
-            @openChange="onOpenChange"
-            @click="HandleClick"
+      @click="handleClick"
   ></a-menu>
-    </div>
 </template>
-
 <script setup>
-import { h, reactive } from 'vue';
+import { reactive, ref, h } from 'vue';
 import { MailOutlined, AppstoreOutlined, SettingOutlined } from '@ant-design/icons-vue';
-import { useRoute, useRouter } from 'vue-router';
-const router = useRouter();
+import router from "@/router/index.js";
 
+const selectedKeys = ref(['1']);
+const openKeys = ref(['sub1']);
 function getItem(label, key, icon, children, type) {
   return {
     key,
@@ -27,54 +25,35 @@ function getItem(label, key, icon, children, type) {
     type,
   };
 }
-
 const items = reactive([
-    getItem('首页', '0'),
-    getItem('系统管理', 'sub1', () => h(MailOutlined), [
+  getItem('首页', 'sub1'),
+  getItem('系统管理', 'sub2', () => h(MailOutlined), [
     getItem('用户管理', '1'),
     getItem('角色管理', '2'),
     getItem('权限管理', '3'),
     getItem('日志管理', '4'),
     getItem('日报管理', '5'),
     getItem('消息管理', '6'),
-    ], 'submenu'),
-    getItem('首页管理', 'sub2', () => h(AppstoreOutlined), [
+  ]),
+  getItem('首页管理', 'sub3', () => h(AppstoreOutlined), [
     getItem('轮播图管理', '7'),
     getItem('团队简介', '8'),
     getItem('项目推荐', '9'),
     getItem('新闻展示', '10'),
     getItem('用户推荐', '11'),
-    ], 'submenu'),
+  ]),
   getItem('信息管理', 'sub4', () => h(SettingOutlined), [
     getItem('项目信息管理', '12'),
-        getItem('团队信息管理', '13'),
-        getItem('新闻信息管理', '14'),
-    ], 'submenu'),
+    getItem('团队信息', '13'),
+    getItem('新闻信息', '14'),
+  ]),
 ]);
 
-const state = reactive({
-    rootSubmenuKeys: ['sub1', 'sub2', 'sub4'],
-    openKeys: ['sub1'],
-    selectedKeys: [],
-});
-
-const onOpenChange = (openKeys) => {
-    const latestOpenKey = openKeys.find((key) => state.openKeys.indexOf(key) === -1);
-    if (state.rootSubmenuKeys.indexOf(latestOpenKey) === -1) {
-        state.openKeys = openKeys;
-    } else {
-        state.openKeys = latestOpenKey ? [latestOpenKey] : [];
-    }
-};
-
-const HandleClick = (e) => {
-    // console.log("点击成功");
+const handleClick = (e) => {
+  console.log("点击成功");
   const key = e.key;
   console.log(e.key);
   switch (key) {
-        case '0':
-            router.push('/Manager/Main'); // 导航到用户管理界面的路由
-            break;
     case '1':
       router.push('/Manager/User'); // 导航到用户管理界面的路由
       break;
@@ -120,5 +99,5 @@ const HandleClick = (e) => {
     default:
       break;
   }
-};
+}
 </script>

src/Manager/MainSection.vue

@@ -1,9 +1,23 @@
 <template>
-<div  style="display: flex;flex-direction: row" >
+  <div class="container">
     <LeftBar></LeftBar>
+    <div class="content">
       <router-view></router-view>
     </div>
+  </div>
 </template>
+
 <script setup>
 import LeftBar from "@/Manager/LeftBar.vue";
 </script>
+
+<style scoped>
+.container {
+  display: flex;
+  flex-direction: row;
+}
+
+.content {
+  flex: 1; /* 让内容部分占据剩余空间 */
+}
+</style>