点击有问题

src/MainPage/Index.vue

@@ -0,0 +1,3 @@
+<template>
+  这是主页
+</template>

src/Manager/Header.vue

@@ -0,0 +1,44 @@
+<template>
+    <div class="header">
+        <a-button class="logo" ghost>LOGO</a-button>
+        <div class="centered-text">内部系统管理界面</div>
+        <div class="avatar-container">
+            <a-avatar :size="64">
+                <a-image :size="64" src="../views/images/img1.jpg"></a-image>
+            </a-avatar>
+        </div>
+    </div>
+</template>
+<style scoped>
+.header {
+    position: relative;
+    background: rgb(68, 112, 131);
+    padding: 8px;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+}
+
+.logo {
+    border: none;
+    font-size: 25px;
+    font-weight: bold;
+    display: flex;
+}
+
+.avatar-container {
+    margin-left: auto; /* 将头像置于最右侧 */
+}
+
+.centered-text {
+    position: absolute;
+    left: 50%;
+    top: 50%;
+    transform: translate(-50%, -50%);
+    font-size:35px;
+    font-weight: normal;
+    color: white;
+}
+</style>
+<script setup>
+</script>

src/Manager/LeftBar.vue

@@ -0,0 +1,85 @@
+<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>
+</template>
+
+<script setup>
+import { h, reactive } from 'vue';
+import { MailOutlined, AppstoreOutlined, SettingOutlined } from '@ant-design/icons-vue';
+import { useRoute, useRouter } from 'vue-router';
+
+function getItem(label, key, icon, children, type) {
+    return {
+        key,
+        icon,
+        children,
+        label,
+        type,
+    };
+}
+
+const items = reactive([
+    getItem('系统管理', 'sub1', () => h(MailOutlined), [
+        getItem('用户管理', '1'),
+        getItem('角色管理', '2'),
+        getItem('权限管理', '3'),
+        getItem('日志管理', '4'),
+        getItem('日报管理', '5'),
+        getItem('消息管理', '6'),
+    ], 'submenu'),
+    getItem('首页管理', 'sub2', () => h(AppstoreOutlined), [
+        getItem('轮播图管理', '5'),
+        getItem('团队简介', '6'),
+        getItem('项目推荐', '7'),
+        getItem('新闻展示', '8'),
+        getItem('用户推荐', '9'),
+    ], 'submenu'),
+    getItem('信息管理', 'sub4', () => h(SettingOutlined), [
+        getItem('项目信息管理', '9'),
+        getItem('团队信息管理', '10'),
+        getItem('新闻信息管理', '11'),
+    ], 'submenu'),
+]);
+
+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 router = useRouter();
+    const key = e.key;
+    console.log(e.key);
+    switch (key) {
+        case '1':
+            router.push('/Manager/User'); // 导航到用户管理界面的路由
+            break;
+        case '2':
+            break;
+        case '3':
+            break;
+        default:
+            break;
+    }
+};
+</script>

src/Manager/MainSection.vue

@@ -0,0 +1,7 @@
+<template style="display: flex;flex-direction: row">
+  <LeftBar></LeftBar>
+  <router-view></router-view>
+</template>
+<script setup>
+import LeftBar from "@/Manager/LeftBar.vue";
+</script>

src/Manager/Manage.vue

@@ -0,0 +1,100 @@
+<template>
+  <div class="header">
+    <a-button class="logo" ghost>LOGO</a-button>
+    <div class="centered-text">内部系统管理界面</div>
+    <div class="avatar-container">
+      <a-avatar :size="64">
+        <a-image :size="64" src="../views/images/img1.jpg"></a-image>
+      </a-avatar>
+    </div>
+  </div>
+  <div>
+    <a-menu
+        v-model:selectedKeys="state.selectedKeys"
+        style="width: 256px"
+        mode="inline"
+        :open-keys="state.openKeys"
+        :items="items"
+        @openChange="onOpenChange"
+    ></a-menu>
+  </div>
+</template>
+<script setup>
+import { h, reactive } from 'vue';
+import { MailOutlined, AppstoreOutlined, SettingOutlined } from '@ant-design/icons-vue';
+function getItem(label, key, icon, children, type) {
+  return {
+    key,
+    icon,
+    children,
+    label,
+    type,
+  };
+}
+const items = reactive([
+  getItem('系统管理', 'sub1', () => h(MailOutlined), [
+    getItem('用户管理', '1'),
+    getItem('角色管理', '2'),
+    getItem('权限管理', '3'),
+    getItem('日志管理', '4'),
+    getItem('日报管理', '5'),
+    getItem('消息管理', '6'),
+  ]),
+  getItem('首页管理', 'sub2', () => h(AppstoreOutlined), [
+    getItem('轮播图管理', '5'),
+    getItem('团队简介', '6'),
+    getItem('项目推荐', '7'),
+    getItem('新闻展示', '8'),
+    getItem('用户推荐', '9'),
+  ]),
+  getItem('信息管理', 'sub4', () => h(SettingOutlined), [
+    getItem('项目信息管理', '9'),
+    getItem('团队信息管理', '10'),
+    getItem('新闻信息管理', '11'),
+  ]),
+]);
+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] : [];
+  }
+};
+</script>
+<style scoped>
+.header {
+  position: relative;
+  background: rgb(68, 112, 131);
+  padding: 8px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.logo {
+  border: none;
+  font-size: 25px;
+  font-weight: bold;
+  display: flex;
+}
+
+.avatar-container {
+  margin-left: auto; /* 将头像置于最右侧 */
+}
+
+.centered-text {
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  transform: translate(-50%, -50%);
+  font-size:35px;
+  font-weight: normal;
+  color: white;
+}
+</style>

src/router/index.js

@@ -9,72 +9,14 @@ const router = createRouter({
       component:()=>import('../App.vue')
     },
     {
-      path:'/manage',
+      path:'/Manager',
-      name:'manage',
+      name:'Manager',
-      component:()=>import('../manager/manage.vue'),
+      component:()=>import('../Manager/Manage.vue'),
-      children:[
+      children:[{
-        {
+        path:'/Manager/User',
-          path:'/manage/authority',
+        component:() =>import('../Manager/components/User.vue')
-          component:()=>import('../manager/components/Authority.vue'),
+      }]
-        },
+    }
-        {
-          path:'/manage/carousel',
-          component:()=>import('../manager/components/Carousel.vue'),
-        },
-        {
-          path:'/manage/daily',
-          component:()=>import('../manager/components/Daily.vue'),
-        },
-        {
-          path:'/manage/log',
-          component:()=>import('../manager/components/Log.vue'),
-        },
-        {
-          path:'/manage/main',
-          component:()=>import('../manager/components/Main.vue'),
-        },
-        {
-          path:'/manage/message',
-          component:()=>import('../manager/components/Message.vue'),
-        },
-        {
-          path:'/manage/newsdisplay',
-          component:()=>import('../manager/components/NewsDisplay.vue'),
-        },
-        {
-          path:'/manage/newsinformation',
-          component:()=>import('../manager/components/NewsInformation.vue'),
-        },
-        {
-          path:'/manage/projectinformation',
-          component:()=>import('../manager/components/ProjectInformation.vue'),
-        },
-        {
-          path:'/manage/projectrecommend',
-          component:()=>import('../manager/components/ProjectRecommend.vue'),
-        },
-        {
-          path:'/manage/role',
-          component:()=>import('../manager/components/Role.vue'),
-        },
-        {
-          path:'/manage/teaminformation',
-          component:()=>import('../manager/components/TeamInformation.vue'),
-        },
-        {
-          path:'/manage/teamprofile',
-          component:()=>import('../manager/components/TeamProfile.vue'),
-        },
-        {
-          path:'/manage/user',
-          component:()=>import('../manager/components/User.vue'),
-        },
-        {
-          path:'/manage/userrecommend',
-          component:()=>import('../manager/components/UserRecommend.vue'),
-        },
-      ]
-    },
   ]
 })