refactor: refactor admin console page layout

web/src/components/admin/AdminHeader.vue

@@ -1,9 +1,5 @@
 <template>
   <div class="header admin-header">
-    <div class="logo">
-      <el-image :src="logo"/>
-      <span class="text">{{ title }}</span>
-    </div>
     <!-- 折叠按钮 -->
     <div class="collapse-btn" @click="collapseChange">
       <el-icon v-if="sidebar.collapse">
@@ -13,6 +9,12 @@
         <Fold/>
       </el-icon>
     </div>
+
+    <div class="breadcrumb">
+      <el-breadcrumb :separator-icon="ArrowRight">
+        <el-breadcrumb-item v-for="item in breadcrumb">{{ item.title }}</el-breadcrumb-item>
+      </el-breadcrumb>
+    </div>
     <div class="header-right">
       <div class="header-user-con">
         <!-- 消息中心 -->
@@ -26,12 +28,10 @@
           </el-tooltip>
           <span class="btn-bell-badge" v-if="message"></span>
         </div>
-        <!-- 用户头像 -->
-        <el-avatar class="user-avatar" :size="30" :src="avatar"/>
         <!-- 用户名下拉菜单 -->
         <el-dropdown class="user-name" :hide-on-click="true" trigger="click">
 					<span class="el-dropdown-link">
-						{{ username }}
+						<el-avatar class="user-avatar" :size="30" :src="avatar"/>
 						<el-icon class="el-icon--right">
 							<arrow-down/>
 						</el-icon>
@@ -77,28 +77,68 @@
 </template>
 <script setup>
 import {onMounted, ref} from 'vue';
-import {useSidebarStore} from '@/store/sidebar';
+import {getMenuItems, useSidebarStore} from '@/store/sidebar';
 import {useRouter} from 'vue-router';
-import {ArrowDown, Expand, Fold} from "@element-plus/icons-vue";
+import {ArrowDown, ArrowRight, Expand, Fold} from "@element-plus/icons-vue";
 import {httpGet} from "@/utils/http";
 import {ElMessage} from "element-plus";
 
 const message = ref(5);
-const username = ref('极客学长')
 const avatar = ref('/images/user-info.jpg')
 const donateImg = ref('/images/wechat-pay.png')
 const showDialog = ref(false)
 const sidebar = useSidebarStore();
-const title = ref('Chat-Plus 控制台')
-const logo = ref('/images/logo.png')
+const router = useRouter();
+const breadcrumb = ref([])
 
-// 加载系统配置
-httpGet('/api/admin/config/get?key=system').then(res => {
-  title.value = res.data['admin_title'];
-}).catch(e => {
-  ElMessage.error("加载系统配置失败: " + e.message)
+
+router.afterEach((to, from) => {
+  initBreadCrumb(to.path)
+});
+
+onMounted(() => {
+  initBreadCrumb(router.currentRoute.value.path)
 })
 
+// 初始化面包屑导航
+const initBreadCrumb = (path) => {
+  breadcrumb.value = [{title: "首页"}]
+  const items = getMenuItems()
+  if (items) {
+    let bk = false
+    for (let i = 0; i < items.length; i++) {
+      if (items[i].index === path) {
+        breadcrumb.value.push({
+          title: items[i].title,
+          path: items[i].index
+        })
+        break
+      }
+      if (bk) {
+        break
+      }
+
+      if (items[i]['subs']) {
+        const subs = items[i]['subs']
+        for (let j = 0; j < subs.length; j++) {
+          if (subs[j].index === path) {
+            breadcrumb.value.push({
+              title: items[i].title,
+              path: items[i].index
+            })
+            breadcrumb.value.push({
+              title: subs[j].title,
+              path: subs[j].index
+            })
+            bk = true
+            break
+          }
+        }
+      }
+    }
+  }
+}
+
 // 侧边栏折叠
 const collapseChange = () => {
   sidebar.handleCollapse();
@@ -110,7 +150,6 @@ onMounted(() => {
   }
 });
 
-const router = useRouter();
 const logout = function () {
   httpGet("/api/admin/logout").then(() => {
     router.replace('/admin/login')
@@ -123,10 +162,12 @@ const logout = function () {
 .header {
   position: relative;
   box-sizing: border-box;
-  width: 100%;
-  height: 70px;
+  overflow hidden
+  height: 50px;
   font-size: 22px;
-  color: #fff;
+  color: #303133;
+  background-color #ffffff
+  border-bottom 1px solid #eaecef
 
   .collapse-btn {
     display: flex;
@@ -134,19 +175,19 @@ const logout = function () {
     align-items: center;
     height: 100%;
     float: left;
-    padding: 0 21px;
+    padding: 0 10px;
     cursor: pointer;
+
+    &:hover {
+      background-color #eaecef
+    }
   }
 
-  .logo {
-    float: left;
-    padding-left 10px;
+  .breadcrumb {
+    float left
     display flex
-
-    .text {
-      line-height: 66px;
-      margin-left 10px;
-    }
+    align-items center
+    height 50px
   }
 
   .header-right {
@@ -155,7 +196,7 @@ const logout = function () {
 
     .header-user-con {
       display: flex;
-      height: 70px;
+      height: 50px;
       align-items: center;
 
       .btn-bell {
@@ -176,7 +217,7 @@ const logout = function () {
           height: 8px;
           border-radius: 4px;
           background: #f56c6c;
-          color: #fff;
+          color: #303133;
         }
 
         .icon-bell {
@@ -186,10 +227,14 @@ const logout = function () {
 
       .user-name {
         margin-left: 10px;
+
+        .el-icon {
+          color: #303133;
+        }
       }
 
       .user-avatar {
-        margin-left: 20px;
+
       }
     }
   }
@@ -227,15 +272,7 @@ const logout = function () {
 }
 
 .admin-header {
-  .logo {
-    .el-image {
-      padding-top 10px
 
-      .el-image__inner {
-        height 40px
-      }
-    }
-  }
 }
 
 </style>