refactor(layout): 侧边栏宽度使用 CSS 变量

- 将侧边栏宽度从 SASS 变量改为 CSS 变量
- 更新相关样式文件，使用新的 CSS 变量
- 在 Sidebar 组件中动态设置侧边栏宽度
- 删除了不再使用的 $sideBarWidth SASS变量

src/assets/sass/renderSass/theme.scss

@@ -78,6 +78,7 @@ $--message-info-border: #cecece; // 信息消息框的边框色
   --color-primary-label: #70778d; // 主题色的标签颜色
   --color-primary-desc-text-drank: #999; // 主题色的深色描述文本颜色
   --ep-color-bg: #fff !important; // 全局背景色
+  --sidebar-width: 270px;
 }
 
 // 描述文本样式

src/assets/sass/sidebar.scss

@@ -2,7 +2,8 @@
   .main-container {
     min-height: 100%;
     transition: margin-left 0.28s;
-    margin-left: $sideBarWidth;
+    margin-left: var(--sidebar-width);
+    //$sideBarWidth
     position: relative;
   }
 
@@ -79,7 +80,7 @@
 
     & .nest-menu .el-submenu > .el-submenu__title,
     & .el-submenu .el-menu-item {
-      min-width: $sideBarWidth !important;
+      min-width: var(--sidebar-width) !important;
       background-color: $subMenuBg !important;
 
       &:hover {
@@ -142,7 +143,7 @@
   }
 
   .el-menu--collapse .el-menu .el-submenu {
-    min-width: $sideBarWidth !important;
+    min-width: var(--sidebar-width) !important;
   }
 
   // mobile responsive
@@ -153,14 +154,14 @@
 
     .sidebar-container {
       transition: transform 0.28s;
-      width: $sideBarWidth !important;
+      width: var(--sidebar-width) !important;
     }
 
     &.hideSidebar {
       .sidebar-container {
         pointer-events: none;
         transition-duration: 0.3s;
-        transform: translate3d(-$sideBarWidth, 0, 0);
+        transform: translate3d(var(--sidebar-width), 0, 0);
       }
     }
   }

src/assets/sass/variables.scss

@@ -14,11 +14,14 @@ $gray: #b1b1b1 !default;
 $black: #000 !default;
 
 // 宽度列表
-$width-list: 5 8 10 20 30 40 50 60 65 70 80 86 100 110 120 140 150 155 160 180 192 200 220 260 280 299 300 315 325 350 400 440 445 450 550 700 1340;
+$width-list: 5 8 10 20 30 40 50 60 65 70 80 86 100 110 120 140 150 155 160 180
+  192 200 220 260 280 299 300 315 325 350 400 440 445 450 550 700 1340;
 
 // 内外边距列表
-$distance-list: 0 1 2 5 6 8 9 10 12 15 20 25 30 35 40 45 50 60 80 86 90 100 120 140;
+$distance-list: 0 1 2 5 6 8 9 10 12 15 20 25 30 35 40 45 50 60 80 86 90 100 120
-$distance-class-list: m, mv, mh, mt, ml, mr, mb, p, pv, ph, pt, pl, pr, pb, top, left, right, bottom;
+  140;
+$distance-class-list: m, mv, mh, mt, ml, mr, mb, p, pv, ph, pt, pl, pr, pb, top,
+  left, right, bottom;
 
 //圆角弧度
 $radius: 1 2 3 4 5 6 7 8 9 10 12 13 14 15 18 20 50 100;
@@ -37,8 +40,6 @@ $menuHover: #263445;
 $subMenuBg: #1f2d3d;
 $subMenuHover: #001528;
 
-$sideBarWidth: 270px;
-
 // the :export directive is the magic sauce for webpack
 // https://www.bluematador.com/blog/how-to-share-variables-between-js-and-sass
 :export {
@@ -49,5 +50,4 @@ $sideBarWidth: 270px;
   menuHover: $menuHover;
   subMenuBg: $subMenuBg;
   subMenuHover: $subMenuHover;
-  sideBarWidth: $sideBarWidth;
 }

src/views/app/layout/components/Sidebar/Sidebar.vue

@@ -36,7 +36,7 @@
         </div>
       </div>
       <!-- Right side - Submenu -->
-      <div class="submenu-container" v-if="currentSubmenu.length">
+      <div class="submenu-container" v-if="currentSubmenu.length > 1">
         <!--        <div class="submenu-header">-->
         <!--          <span>{{ currentParentTitle }}</span>-->
         <!--        </div>-->
@@ -156,9 +156,20 @@ export default {
       this.activeParent = route.url
       // this.$store.dispatch('app/toggleSideBar')
       // If this parent has children, don't navigate
+      if (route.children && route.children.length > 1) {
+        document.documentElement.style.setProperty(
+          '--sidebar-width',
+          270 + 'px'
+        )
+      } else {
+        document.documentElement.style.setProperty(
+          '--sidebar-width',
+          110 + 'px'
+        )
+      }
       if (route.children && route.children.length > 0) {
         // Optionally navigate to the first child
-        // this.navigateTo(route.children[0].url)
+        this.navigateTo(route.children[0].url)
       } else {
         // If no children, navigate to the parent route
         this.navigateTo(route.url)

src/views/app/layout/index.vue

@@ -1,6 +1,10 @@
 <template>
   <div :class="classObj" class="app-wrapper">
-    <div v-if="device === 'mobile' && sidebar.opened" class="drawer-bg" @click="handleClickOutside" />
+    <div
+      v-if="device === 'mobile' && sidebar.opened"
+      class="drawer-bg"
+      @click="handleClickOutside"
+    />
     <sidebar class="sidebar-container" />
     <div class="main-container">
       <div :class="{ 'fixed-header': fixedHeader }">
@@ -85,7 +89,8 @@ export default {
   top: 0;
   right: 0;
   z-index: 9;
-  width: calc(100% - #{$sideBarWidth});
+  //width: calc(100% - #{$sideBarWidth});
+  width: calc(100% - var(--sidebar-width));
   transition: width 0.28s;
 }
 

src/views/app/layout/layout.vue

@@ -89,7 +89,8 @@ export default {
   top: 0;
   right: 0;
   z-index: 9;
-  width: calc(100% - #{$sideBarWidth});
+  //width: calc(100% - #{$sideBarWidth});
+  width: calc(100% - var(--sidebar-width));
   transition: width 0.28s;
 }