chore: 🔨 前端布局样式调整 (#165)

Co-authored-by: tk <fiyne1a@dingtalk.com>

src/frontend/admin/src/layout/index.vue

@@ -46,7 +46,6 @@
             </div>
             <Side-m v-if="ismobile"></Side-m>
             <div class="aminui-body el-container">
-                <Topbar v-if="!ismobile"></Topbar>
                 <Tags v-if="!ismobile && layoutTags"></Tags>
                 <div class="adminui-main" id="adminui-main">
                     <router-view v-slot="{ Component }">
@@ -94,7 +93,6 @@
             </div>
             <Side-m v-if="ismobile"></Side-m>
             <div class="aminui-body el-container">
-                <Topbar v-if="!ismobile"></Topbar>
                 <Tags v-if="!ismobile && layoutTags"></Tags>
                 <div class="adminui-main" id="adminui-main">
                     <router-view v-slot="{ Component }">
@@ -125,10 +123,9 @@
                     <el-menu
                         :default-active="active"
                         active-text-color="var(--el-color-primary)"
-                        background-color="#424C50"
                         mode="horizontal"
                         router
-                        text-color="#fff">
+                        text-color="var(--el-text-color-primary)">
                         <NavMenu :navMenus="menu"></NavMenu>
                     </el-menu>
                 </div>
@@ -336,6 +333,6 @@ export default {
 .version {
     font-size: var(--el-font-size-small);
     font-weight: var(--el-font-weight-primary);
-    color: var(--el-text-color-disabled);
+    color: var(--el-text-color-secondary);
 }
 </style>

src/frontend/admin/src/style/app.scss

@@ -108,10 +108,10 @@ textarea {
 /* 头部 */
 .adminui-header {
     height: 4rem;
-    background: #424c50;
-    color: #fff;
+    background: #fff;
     display: flex;
     justify-content: space-between;
+    border-bottom: #ebeef5 1px solid;
 }
 
 .adminui-header-left {
@@ -148,7 +148,7 @@ textarea {
     padding: 0 1rem;
     margin: 0 1rem 0 0;
     font-size: 1.1rem;
-    color: rgba(255, 255, 255, 0.6);
+    color: var(--el-menu-text-color);
     list-style: none;
     height: 100%;
     display: flex;
@@ -161,29 +161,29 @@ textarea {
 }
 
 .adminui-header .nav li:hover {
-    color: #fff;
 }
 
 .adminui-header .nav li.active {
-    background: rgba(255, 255, 255, 0.1);
-    color: #fff;
+    color: var(--el-color-primary);
 }
 
 .adminui-header .user-bar .panel-item:hover {
     background: rgba(255, 255, 255, 0.1) !important;
 }
 
-.adminui-header .user-bar .user label {
-    color: #fff;
+.user-bar * {
+    color: var(--el-menu-text-color);
 }
 
 /* 左侧菜单 */
 .aminui-side-split {
     width: 5rem;
     flex-shrink: 0;
-    background: #424c50;
+    background: #fff;
+    color: var(--el-menu-text-color);
     display: flex;
     flex-flow: column;
+    border-right: #ebeef5 1px solid;
 }
 
 .aminui-side-split-top {
@@ -214,7 +214,6 @@ textarea {
     cursor: pointer;
     width: 5rem;
     height: 5rem;
-    color: #fff;
     text-align: center;
     display: flex;
     flex-direction: column;
@@ -236,6 +235,7 @@ textarea {
 
 .aminui-side-split li.active {
     background: #21a675;
+    color: #fff;
 }
 
 .adminui-side-split-scroll::-webkit-scrollbar-thumb {

src/frontend/admin/src/style/dark.scss

@@ -29,6 +29,7 @@ html.dark {
 
     .aminui-side-split {
         background: var(--el-bg-color);
+        border-color: var(--el-bg-color);
     }
 
     .aminui-side-split li {