添加管理端Tab栏

my-project-frontend/src/router/index.js

@@ -59,7 +59,19 @@ const router = createRouter({
             name: 'admin',
             component: () => import('@/views/AdminView.vue'),
             children: [
-
+                {
+                    path: '',
+                    name: 'admin-welcome',
+                    component: () => import('@/views/admin/WelcomeAdmin.vue')
+                }, {
+                    path: 'user',
+                    name: 'admin-user',
+                    component: () => import('@/views/admin/UserAdmin.vue')
+                }, {
+                    path: 'forum',
+                    name: 'forum-setting',
+                    component: () => import('@/views/admin/ForumAdmin.vue')
+                }
             ]
         }
     ]

my-project-frontend/src/views/AdminView.vue

@@ -11,13 +11,15 @@ import {
     User
 } from "@element-plus/icons-vue";
 import UserInfo from "@/components/UserInfo.vue";
-import {inject} from "vue";
+import {inject, onMounted, ref} from "vue";
+import {useRoute} from "vue-router";
+import router from "@/router";
 
 const adminMenu = [
     {
         title: '校园论坛管理', icon: Location, sub: [
-            {title: '用户管理', icon: User},
-            {title: '帖子广场管理', icon: ChatDotSquare},
+            {title: '用户管理', icon: User, index: '/admin/user' },
+            {title: '帖子广场管理', icon: ChatDotSquare, index: '/admin/forum' },
             {title: '失物招领管理', icon: Bell},
             {title: '校园活动管理', icon: Notification},
             {title: '表白墙管理', icon: Umbrella},
@@ -34,7 +36,47 @@ const adminMenu = [
     }
 ]
 
+const route = useRoute()
 const loading = inject('userLoading')
+
+const pageTabs = ref([])
+
+function handleTabsClick({ props }) {
+    router.push(props.name)
+}
+
+function handleTabRemove(name) {
+    const index = pageTabs.value.findIndex(tab => tab.name === name)
+    const isCurrent = name === route.fullPath
+    pageTabs.value.splice(index, 1)
+    if(pageTabs.value.length > 0) {
+        //若标签列表中仍有未删除的，且关闭的是当前正在浏览的页面，则自动调整到前一个，没有就后一个
+        if(isCurrent) {
+            router.push(pageTabs.value[Math.max(0, index - 1)].name)  //优化后算法
+        }
+    } else {   //一个都没有了那就回到欢迎页
+        router.push('/admin')
+    }
+}
+
+function openAdminTab(menu) {
+    if(!menu.index) return
+    if(pageTabs.value.findIndex(tab => tab.name === menu.index) < 0) {
+        pageTabs.value.push({
+            title: menu.title,
+            name: menu.index
+        })
+    }
+}
+
+onMounted(() => {
+    const initPage = adminMenu
+        .flatMap(menu => menu.sub)
+        .find(sub => sub.index === route.fullPath)
+    if(initPage) {
+        handleTabsClick(initPage)
+    }
+})
 </script>
 
 <template>
@@ -58,7 +100,9 @@ const loading = inject('userLoading')
                                 </el-icon>
                                 <span><b>{{ menu.title }}</b></span>
                             </template>
-                            <el-menu-item :index="subMenu.title" v-for="subMenu in menu.sub">
+                            <el-menu-item :index="subMenu.index"
+                                          @click="openAdminTab(subMenu)"
+                                          v-for="subMenu in menu.sub">
                                 <template #title>
                                     <el-icon>
                                         <component :is="subMenu.icon"/>
@@ -76,10 +120,30 @@ const loading = inject('userLoading')
             </el-aside>
             <el-container>
                 <el-header class="admin-content-header">
-                    <div style="flex: 1"></div>
+                    <div style="flex: 1">
+                        <el-tabs :model-value="route.fullPath"
+                                 type="card"
+                                 closable
+                                 @tab-remove="handleTabRemove"
+                                 @tab-click="handleTabsClick">
+                            <el-tab-pane
+                                v-for="item in pageTabs"
+                                :key="item.name"
+                                :label="item.title"
+                                :name="item.name">
+                                {{ item.content }}
+                            </el-tab-pane>
+                        </el-tabs>
+                    </div>
                     <user-info admin/>
                 </el-header>
-                <el-main>Main</el-main>
+                <el-main>
+                    <router-view v-slot="{ Component }">
+                        <keep-alive>
+                            <component :is="Component" />
+                        </keep-alive>
+                    </router-view>
+                </el-main>
             </el-container>
         </el-container>
     </div>
@@ -105,5 +169,23 @@ const loading = inject('userLoading')
     display: flex;
     align-items: center;
     box-sizing: border-box;
+
+    :deep(.el-tabs__header) {
+        height: 32px;
+        margin-bottom: 0;
+        border-bottom: none;
+    }
+
+    :deep(.el-tabs__nav) {
+        gap: 10px;
+        border: none;
+    }
+
+    :deep(.el-tabs__item) {
+        height: 32px;
+        padding: 0 15px !important;
+        border-radius: 6px;
+        border: solid 1px var(--el-border-color) !important;
+    }
 }
 </style>

my-project-frontend/src/views/admin/ForumAdmin.vue

@@ -0,0 +1,13 @@
+<script setup>
+
+</script>
+
+<template>
+    <div>
+        我是帖子管理
+    </div>
+</template>
+
+<style scoped>
+
+</style>

my-project-frontend/src/views/admin/UserAdmin.vue

@@ -0,0 +1,13 @@
+<script setup>
+
+</script>
+
+<template>
+    <div>
+        我是用户管理页面
+    </div>
+</template>
+
+<style scoped>
+
+</style>

my-project-frontend/src/views/admin/WelcomeAdmin.vue

@@ -0,0 +1,13 @@
+<script setup>
+
+</script>
+
+<template>
+    <div>
+        我是管理端欢迎页
+    </div>
+</template>
+
+<style scoped>
+
+</style>