From 420fc0298a73c3c1f13b31ddcd302a9ea1900e24 Mon Sep 17 00:00:00 2001
From: GUjiYN <2946459904@qq.com>
Date: Sat, 27 Jan 2024 14:53:32 +0800
Subject: [PATCH] Upload

---
 src/Manager/LeftBar.vue     | 205 ++++++++++++++++--------------------
 src/Manager/MainSection.vue |  22 +++-
 2 files changed, 110 insertions(+), 117 deletions(-)

diff --git a/src/Manager/LeftBar.vue b/src/Manager/LeftBar.vue
index 5e9371f..dcff99c 100644
--- a/src/Manager/LeftBar.vue
+++ b/src/Manager/LeftBar.vue
@@ -1,124 +1,103 @@
 <template>
-    <div>
-        <a-menu
-            :default-selected-keys="state.selectedKeys"
-            style="width: 256px"
-            mode="inline"
-            :open-keys="state.openKeys"
-            :items="items"
-            @openChange="onOpenChange"
-            @click="HandleClick"
-        ></a-menu>
-    </div>
+  <a-menu
+      id="dddddd"
+      v-model:openKeys="openKeys"
+      v-model:selectedKeys="selectedKeys"
+      style="width: 256px"
+      mode="inline"
+      :items="items"
+      @click="handleClick"
+  ></a-menu>
 </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,
-        icon,
-        children,
-        label,
-        type,
-    };
+  return {
+    key,
+    icon,
+    children,
+    label,
+    type,
+  };
 }
-
 const items = reactive([
-    getItem('首页', '0'),
-    getItem('系统管理', 'sub1', () => h(MailOutlined), [
-        getItem('用户管理', '1'),
-        getItem('角色管理', '2'),
-        getItem('权限管理', '3'),
-        getItem('日志管理', '4'),
-        getItem('日报管理', '5'),
-        getItem('消息管理', '6'),
-    ], 'submenu'),
-    getItem('首页管理', 'sub2', () => 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('首页', 'sub1'),
+  getItem('系统管理', 'sub2', () => h(MailOutlined), [
+    getItem('用户管理', '1'),
+    getItem('角色管理', '2'),
+    getItem('权限管理', '3'),
+    getItem('日志管理', '4'),
+    getItem('日报管理', '5'),
+    getItem('消息管理', '6'),
+  ]),
+  getItem('首页管理', 'sub3', () => h(AppstoreOutlined), [
+    getItem('轮播图管理', '7'),
+    getItem('团队简介', '8'),
+    getItem('项目推荐', '9'),
+    getItem('新闻展示', '10'),
+    getItem('用户推荐', '11'),
+  ]),
+  getItem('信息管理', 'sub4', () => h(SettingOutlined), [
+    getItem('项目信息管理', '12'),
+    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 key = e.key;
-    console.log(e.key);
-    switch (key) {
-        case '0':
-            router.push('/Manager/Main'); // 导航到用户管理界面的路由
-            break;
-        case '1':
-            router.push('/Manager/User'); // 导航到用户管理界面的路由
-            break;
-        case '2':
-            router.push('/Manager/Role');
-            break;
-        case '3':
-            router.push('/Manager/Authority');
-            break;
-        case '4':
-            router.push('/Manager/Log');
-            break;
-        case '5':
-            router.push('/Manager/Daily');
-            break;
-        case '6':
-            router.push('/Manager/Message');
-            break;
-        case '7':
-            router.push('/Manager/Carousel');
-            break;
-        case '8':
-            router.push('/Manager/TeamProfile');
-            break;
-        case '9':
-            router.push('/Manager/ProjectRecommend');
-            break;
-        case '10':
-            router.push('/Manager/NewsDisplay');
-            break;
-        case '11':
-            router.push('/Manager/UserRecommend');
-            break;
-        case '12':
-            router.push('/Manager/ProjectInformation');
-            break;
-        case '13':
-            router.push('/Manager/TeamInformation');
-            break;
-        case '14':
-            router.push('/Manager/NewsInformation');
-            break;
-        default:
-            break;
-    }
-};
+const handleClick = (e) => {
+  console.log("点击成功");
+  const key = e.key;
+  console.log(e.key);
+  switch (key) {
+    case '1':
+      router.push('/Manager/User'); // 导航到用户管理界面的路由
+      break;
+    case '2':
+      router.push('/Manager/Role');
+      break;
+    case '3':
+      router.push('/Manager/Authority');
+      break;
+    case '4':
+      router.push('/Manager/Log');
+      break;
+    case '5':
+      router.push('/Manager/Daily');
+      break;
+    case '6':
+      router.push('/Manager/Message');
+      break;
+    case '7':
+      router.push('/Manager/Carousel');
+      break;
+    case '8':
+      router.push('/Manager/TeamProfile');
+      break;
+    case '9':
+      router.push('/Manager/ProjectRecommend');
+      break;
+    case '10':
+      router.push('/Manager/NewsDisplay');
+      break;
+    case '11':
+      router.push('/Manager/UserRecommend');
+      break;
+    case '12':
+      router.push('/Manager/ProjectInformation');
+      break;
+    case '13':
+      router.push('/Manager/TeamInformation');
+      break;
+    case '14':
+      router.push('/Manager/NewsInformation');
+      break;
+    default:
+      break;
+  }
+}
 </script>
\ No newline at end of file
diff --git a/src/Manager/MainSection.vue b/src/Manager/MainSection.vue
index 33d1e25..8bd2580 100644
--- a/src/Manager/MainSection.vue
+++ b/src/Manager/MainSection.vue
@@ -1,9 +1,23 @@
 <template>
-<div  style="display: flex;flex-direction: row" >
+  <div class="container">
     <LeftBar></LeftBar>
-    <router-view></router-view>
-</div>
+    <div class="content">
+      <router-view></router-view>
+    </div>
+  </div>
 </template>
+
 <script setup>
 import LeftBar from "@/Manager/LeftBar.vue";
-</script>
\ No newline at end of file
+</script>
+
+<style scoped>
+.container {
+  display: flex;
+  flex-direction: row;
+}
+
+.content {
+  flex: 1; /* 让内容部分占据剩余空间 */
+}
+</style>