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>

web/src/components/admin/AdminSidebar.vue

@@ -1,5 +1,10 @@
 <template>
   <div class="sidebar">
+    <div class="logo">
+      <el-image :src="logo"/>
+      <span class="text" v-show="!sidebar.collapse">{{ title }}</span>
+    </div>
+
     <el-menu
         class="sidebar-el-menu"
         :default-active="onRoutes"
@@ -47,15 +52,27 @@
 </template>
 
 <script setup>
-import {computed} from 'vue';
-import {useSidebarStore} from '@/store/sidebar';
+import {computed, ref} from 'vue';
+import {setMenuItems, useSidebarStore} from '@/store/sidebar';
 import {useRoute} from 'vue-router';
+import {httpGet} from "@/utils/http";
+import {ElMessage} from "element-plus";
+
+const title = ref('Chat-Plus-Admin')
+const logo = ref('/images/logo.png')
+
+// 加载系统配置
+httpGet('/api/admin/config/get?key=system').then(res => {
+  title.value = res.data['admin_title'];
+}).catch(e => {
+  ElMessage.error("加载系统配置失败: " + e.message)
+})
 
 const items = [
   {
     icon: 'home',
     index: '/admin/welcome',
-    title: '系统首页',
+    title: '仪表盘',
   },
   {
     icon: 'config',
@@ -120,6 +137,7 @@ const onRoutes = computed(() => {
 });
 
 const sidebar = useSidebarStore();
+setMenuItems(items)
 </script>
 
 <style scoped lang="stylus">
@@ -127,10 +145,35 @@ const sidebar = useSidebarStore();
   display: block;
   position: absolute;
   left: 0;
-  top: 70px;
+  top: 0;
   bottom: 0;
   overflow-y: scroll;
 
+  .logo {
+    display flex
+    width 219px
+    background-color #324157
+    padding 6px 15px;
+
+    .el-image {
+      width 30px;
+      height 30px;
+      padding-top 5px;
+      border-radius 100%
+
+      .el-image__inner {
+        height 40px
+      }
+    }
+
+    .text {
+      color #ffffff
+      font-weight bold
+      padding 12px 0 12px 10px;
+      transition: width 2s ease;
+    }
+  }
+
   ul {
     height: 100%;
 
@@ -140,6 +183,10 @@ const sidebar = useSidebarStore();
         margin-right 5px;
       }
     }
+
+    .el-menu-item.is-active {
+      background-color rgb(40, 52, 70)
+    }
   }
 
   .sidebar-el-menu:not(.el-menu--collapse) {

web/src/components/admin/AdminTags.vue

@@ -15,7 +15,7 @@
     </ul>
     <div class="tags-close-box">
       <el-dropdown @command="handleTags">
-        <el-button size="small" type="primary">
+        <el-button size="small" type="info">
           标签选项
           <el-icon class="el-icon--right">
             <arrow-down/>
@@ -115,7 +115,8 @@ const handleTags = (command) => {
   overflow: hidden;
   background: #fff;
   padding-right: 120px;
-  box-shadow: 0 5px 10px #ddd;
+  -webkit-box-shadow: 0 1px 4px rgba(0, 21, 41, .08);
+  box-shadow: 0 1px 4px rgba(0, 21, 41, .08);
 }
 
 .tags ul {
@@ -168,14 +169,13 @@ const handleTags = (command) => {
 .tags-close-box {
   position: absolute;
   right: 0;
-  top: 0;
+  top: 2px;
   box-sizing: border-box;
   padding-top: 1px;
   text-align: center;
   width: 110px;
   height: 30px;
   background: #fff;
-  box-shadow: -3px 0 15px 3px rgba(0, 0, 0, 0.1);
-  z-index: 10;
+//box-shadow: -3px 0 15px 3px rgba(0, 0, 0, 0.1); z-index: 10;
 }
 </style>