refactor: ♻️ 设置面板调整

src/layout/index.vue

@@ -3,14 +3,14 @@
     <!-- 遮罩层 -->
     <div
       v-if="classObj.mobile && classObj.openSidebar"
-      class="fixed z-1000 bg-black bg-opacity-20"
+      class="fixed z-999 bg-black bg-opacity-30 wh-full top-0"
       @click="handleOutsideClick"
     ></div>
     <Sidebar class="sidebar-container" />
 
     <!-- 混合布局 -->
     <div v-if="layout === 'mix'" class="mix-container">
-      <div class="mix-container__left">
+      <div class="sidebar-container__left">
         <SidebarMenu :menu-list="mixLeftMenus" :base-path="activeTopMenuPath" />
         <div class="sidebar-toggle">
           <hamburger
@@ -113,6 +113,15 @@ function toggleSidebar() {
 </script>
 
 <style lang="scss" scoped>
+.fixed-header {
+  position: fixed;
+  top: 0;
+  right: 0;
+  z-index: 9;
+  width: calc(100% - $sidebar-width);
+  transition: width 0.28s;
+}
+
 .sidebar-container {
   position: fixed;
   top: 0;
@@ -130,15 +139,6 @@ function toggleSidebar() {
   }
 }
 
-.fixed-header {
-  position: fixed;
-  top: 0;
-  right: 0;
-  z-index: 9;
-  width: calc(100% - $sidebar-width);
-  transition: width 0.28s;
-}
-
 .main-container {
   position: relative;
   min-height: 100%;
@@ -204,18 +204,12 @@ function toggleSidebar() {
     }
   }
 
-  &.hideSidebar {
-    .sidebar-container {
-      width: 100% !important;
-    }
-  }
-
   .mix-container {
     display: flex;
     height: 100%;
     padding-top: $navbar-height;
 
-    &__left {
+    .sidebar-container__left {
       position: relative;
       width: $sidebar-width;
       height: 100%;
@@ -259,6 +253,11 @@ function toggleSidebar() {
 }
 
 .hideSidebar {
+  .fixed-header {
+    left: $sidebar-width-collapsed;
+    width: calc(100% - $sidebar-width-collapsed);
+  }
+
   .sidebar-container {
     width: $sidebar-width-collapsed !important;
   }
@@ -267,55 +266,57 @@ function toggleSidebar() {
     margin-left: $sidebar-width-collapsed;
   }
 
-  .mix-container__left {
+  .sidebar-container__left {
     width: $sidebar-width-collapsed;
   }
 
-  .fixed-header {
-    left: $sidebar-width-collapsed;
-    width: calc(100% - $sidebar-width-collapsed);
-  }
-
-  &.mobile {
-    .fixed-header {
-      width: 100%;
-    }
-
-    &.layout-left {
-      .main-container {
-        margin-left: 0;
-      }
-
-      .sidebar-container {
-        pointer-events: none;
-        transition-duration: 0.3s;
-        transform: translate3d(-$sidebar-width, 0, 0);
-      }
-    }
-
-    &.layout-top {
-      .sidebar-container {
-        z-index: 999;
-        display: flex;
-        width: 100% !important;
-        height: $navbar-height;
-
-        :deep(.el-scrollbar) {
-          flex: 1;
-          min-width: 0;
-          height: $navbar-height;
-        }
-      }
-
-      .main-container {
-        padding-top: $navbar-height;
-        margin-left: 0;
-        overflow: hidden;
-      }
-
-      // 顶部模式全局变量修改
-      --el-menu-item-height: $navbar-height;
+  &.layout-mix {
+    .sidebar-container {
+      width: 100% !important;
     }
   }
 }
+
+.mobile {
+  .fixed-header {
+    left: 0;
+    width: 100%;
+  }
+
+  .main-container {
+    margin-left: 0;
+  }
+
+  &.hideSidebar {
+    .sidebar-container {
+      pointer-events: none;
+      transition-duration: 0.3s;
+      transform: translate3d(-210px, 0, 0);
+    }
+  }
+
+  &.layout-top {
+    .sidebar-container {
+      z-index: 999;
+      display: flex;
+      width: 100% !important;
+      height: $navbar-height;
+
+      :deep(.el-scrollbar) {
+        flex: 1;
+        min-width: 0;
+        height: $navbar-height;
+      }
+    }
+
+    .main-container {
+      padding-top: $navbar-height;
+      margin-left: 0;
+      overflow: hidden;
+    }
+
+    // 顶部模式全局变量修改
+    --el-menu-item-height: $navbar-height;
+  }
+}
 </style>