优化布局

src/assets/styles/sidebar.scss

@@ -30,7 +30,7 @@
   // 展开sidebar状态设置svg-icon边距
   .openSidebar {
     .layout-sidebar__container .svg-icon {
-      margin-right: 10px;
+      margin-right: 5px;
     }
   }
 

src/assets/styles/variables.module.scss

@@ -18,10 +18,11 @@ $panGreen: #30b08f;
   --base-text-color-rgba: rgba(0, 0, 0, 0.85);
   --base-sidebar-width: 220px;
   --el-aside-width: 220px;
-  --el-header-height: 50px;
   --base-footer-height: 40px;
   --base-tags-height: 34px;
+  --base-header-height: 50px;
 }
+
 /***默认主题颜色配置***/
 [data-theme='theme-light'] {
   // 菜单背景

src/layout/components/Navbar.vue

@@ -40,7 +40,6 @@
 </template>
 
 <script setup>
-import { ElMessageBox } from 'element-plus'
 import Breadcrumb from '@/components/Breadcrumb'
 import TopNav from '@/components/TopNav'
 import Hamburger from '@/components/Hamburger'
@@ -74,11 +73,12 @@ function handleCommand(command) {
 }
 
 function logout() {
-  ElMessageBox.confirm(proxy.$t('layout.logOutConfirm'), proxy.$t('common.tips'), {
-    confirmButtonText: proxy.$t('common.ok'),
-    cancelButtonText: proxy.$t('common.cancel'),
-    type: 'warning',
-  })
+  proxy
+    .$confirm(proxy.$t('layout.logOutConfirm'), proxy.$t('common.tips'), {
+      confirmButtonText: '确定',
+      cancelButtonText: '取消',
+      type: 'warning',
+    })
     .then(() => {
       store.dispatch('LogOut').then(() => {
         location.href = '/index'
@@ -96,20 +96,21 @@ function setLayout() {
 <style lang="scss" scoped>
 .el-menu {
   // display: inline-table;
-	border-bottom: none;
+  border-bottom: none;
   .el-menu-item {
     vertical-align: center;
   }
 }
 .navbar {
-  // height: 50px;
+  height: var(--base-header-height);
+  line-height: var(--base-header-height);
   overflow: hidden;
   position: relative;
   background: var(--base-topBar-background);
-  box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08);
+  // box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08);
 
   .hamburger-container {
-    line-height: 46px;
+    line-height: var(--base-header-height);
     height: 100%;
     float: left;
     cursor: pointer;
@@ -135,8 +136,6 @@ function setLayout() {
   }
 
   .right-menu {
-    height: 100%;
-    line-height: 60px;
     display: flex;
     justify-content: flex-end;
     align-items: center;

src/layout/components/TagsView/index.vue

@@ -13,8 +13,8 @@
         @contextmenu.prevent="openMenu(tag, $event)">
         <span v-if="tag.meta && tag.meta.titleKey">{{ $t(tag.meta.titleKey) }}</span>
         <span v-else>{{ tag.title }}</span>
-        <span v-if="!isAffix(tag)" @click.prevent.stop="closeSelectedTag(tag)">
-          <close class="el-icon-close" style="width: 1em; height: 1em; vertical-align: middle" />
+        <span v-if="!isAffix(tag)" @click.prevent.stop="closeSelectedTag(tag)" style="width: 10px; height: 10px; display: inline-block">
+          <close class="el-icon-close close" style="width: 1em; height: 1em; vertical-align: middle" />
         </span>
       </router-link>
     </scroll-pane>
@@ -226,7 +226,7 @@ function handleScroll() {
 
 <style lang="scss" scoped>
 .tags-view-container {
-  height: 34px;
+  height: var(--base-tags-height);
   width: 100%;
   background: var(--base-topBar-background);
   // border-bottom: 1px solid #d8dce5;
@@ -244,6 +244,9 @@ function handleScroll() {
       font-size: 12px;
       margin-left: 5px;
       margin-top: 4px;
+      .close {
+        display: none;
+      }
       &:first-of-type {
         margin-left: 15px;
       }
@@ -253,11 +256,17 @@ function handleScroll() {
       &:hover {
         background-color: var(--el-color-primary);
         color: #fff;
+        .close {
+          display: inline-block !important;
+        }
       }
       &.active {
         background-color: var(--el-color-primary);
         border-color: var(--el-color-primary);
         color: #fff;
+        .close {
+          display: inline-block !important;
+        }
         &::before {
           content: '';
           background: #fff;