style: 调整后台管理框架样式

web/src/components/admin/AdminHeader.vue

@@ -1,5 +1,9 @@
 <template>
-  <div class="header">
+  <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">
@@ -9,8 +13,6 @@
         <Fold/>
       </el-icon>
     </div>
-
-    <div class="logo">后台管理系统</div>
     <div class="header-right">
       <div class="header-user-con">
         <!-- 消息中心 -->
@@ -87,6 +89,21 @@ 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')
+
+// 获取会话信息
+httpGet("/api/admin/session").then(() => {
+  // 加载系统配置
+  httpGet('/api/admin/config/get?key=system').then(res => {
+    title.value = res.data['admin_title'];
+  }).catch(e => {
+    ElMessage.error("加载系统配置失败: " + e.message)
+  })
+}).catch(() => {
+  router.replace('/admin/login')
+})
+
 // 侧边栏折叠
 const collapseChange = () => {
   sidebar.handleCollapse();
@@ -101,7 +118,7 @@ onMounted(() => {
 const router = useRouter();
 const logout = function () {
   httpGet("/api/admin/logout").then(() => {
-    router.push('/admin/login')
+    router.replace('/admin/login')
   }).catch((e) => {
     ElMessage.error("注销失败: " + e.message);
   })
@@ -128,13 +145,18 @@ const logout = function () {
 
   .logo {
     float: left;
-    width: 250px;
-    line-height: 70px;
+    padding-left 10px;
+    display flex
+
+    .text {
+      line-height: 66px;
+      margin-left 10px;
+    }
   }
 
   .header-right {
     float: right;
-    padding-right: 50px;
+    padding-right: 20px;
 
     .header-user-con {
       display: flex;
@@ -208,4 +230,17 @@ const logout = function () {
     }
   }
 }
+
+.admin-header {
+  .logo {
+    .el-image {
+      padding-top 10px
+
+      .el-image__inner {
+        height 40px
+      }
+    }
+  }
+}
+
 </style>

web/src/components/admin/AdminSidebar.vue

@@ -14,7 +14,7 @@
         <template v-if="item.subs">
           <el-sub-menu :index="item.index" :key="item.index">
             <template #title>
-              <i :class="'iconfont '+item.icon"></i>
+              <i :class="'iconfont icon-'+item.icon"></i>
               <span>{{ item.title }}</span>
             </template>
             <template v-for="subItem in item.subs">
@@ -29,6 +29,7 @@
                 </el-menu-item>
               </el-sub-menu>
               <el-menu-item v-else :index="subItem.index">
+                <i v-if="subItem.icon" :class="'iconfont icon-'+subItem.icon"></i>
                 {{ subItem.title }}
               </el-menu-item>
             </template>
@@ -62,13 +63,33 @@ const items = [
     title: '系统设置',
   },
 
+  {
+    icon: 'user-fill',
+    index: '/admin/user',
+    title: '用户管理',
+  },
+
+  {
+    icon: 'role',
+    index: '/admin/role',
+    title: '角色管理',
+  },
+  {
+    icon: 'api-key',
+    index: '/admin/apikey',
+    title: 'API-KEY 管理',
+  },
+  {
+    icon: 'log',
+    index: '/admin/loginLog',
+    title: '用户登录日志',
+  },
   {
     icon: 'menu',
     index: '1',
     title: '常用模板页面',
     subs: [
       {
-        icon: 'menu',
         index: '/admin/demo/form',
         title: '表单页面',
       },
@@ -108,16 +129,12 @@ const sidebar = useSidebarStore();
   ul {
     height: 100%;
 
-    .el-menu-item {
+    .el-menu-item, .el-sub-menu {
       .iconfont {
         font-size 16px;
         margin-right 5px;
       }
     }
-
-    .el-menu-item.is-active {
-      background-color #242f42
-    }
   }
 
   .sidebar-el-menu:not(.el-menu--collapse) {

web/src/components/admin/AdminTags.vue

@@ -52,7 +52,7 @@ const closeTags = (index) => {
   if (item) {
     delItem.path === route.fullPath && router.push(item.path);
   } else {
-    router.push('/');
+    router.push('/admin');
   }
 };
 
@@ -78,7 +78,7 @@ onBeforeRouteUpdate(to => {
 // 关闭全部标签
 const closeAll = () => {
   tags.clearTags();
-  router.push('/');
+  router.push('/admin');
 };
 // 关闭其他标签
 const closeOther = () => {