@xilonglab/vue-main 1.5.8 → 1.5.9

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@xilonglab/vue-main",
-  "version": "1.5.8",
+  "version": "1.5.9",
   "description": "xilong vue main",
   "main": "packages/index.js",
   "scripts": {

package/packages/else/XlSideBar.vue

@@ -67,28 +67,34 @@ const triggers = {
 
 
 <style lang="less">
+// ==================== 变量定义 ====================
 @sidebar-background: rgb(0 0 0 / 40%);
 @sidebar-color: #f0f0f0;
 @sidebar-active-background: rgb(0 0 0 / 30%);
 @transition-function: width 0.7s cubic-bezier(0.17, 0.67, 0.84, 0.66);
-@menu-item-blue: #1a3a5c;
-@menu-item-blue-dark: #0f2438;
-@menu-item-blue-light: #2a4d6e;
+@menu-item-blue: rgba(23, 80, 141, 0.7);
+@menu-item-blue-dark: rgba(15, 36, 56, 0.7);
+@menu-item-blue-light: transparent;
 
+// ==================== 主容器 ====================
 .xl-side-bar {
+  height: 100%;
+  width: 150px;
   overflow-y: scroll;
   scrollbar-width: none;
   border-right: 0 !important;
-  height: 100%;
 
+  &::-webkit-scrollbar {
+    display: none;
+  }
+
+  // ==================== 菜单容器 ====================
   .side-bar-menu {
     margin: 5px;
-    background: @sidebar-background;
     height: calc(~"100% - 10px");
+    background: @sidebar-background;
     border-radius: 7px;
     border: 0;
-    overflow: hidden;
-  
     overflow: auto;
     scrollbar-width: none;
     -ms-overflow-style: none;
@@ -102,17 +108,15 @@ const triggers = {
     }
   }
 
+  // ==================== 菜单项基础样式（共同部分）====================
   .el-sub-menu__title,
   .el-menu-item {
-    background: @sidebar-background;
+    background: transparent;
     margin: 4px 8px;
     border-radius: 6px;
     position: relative;
     overflow: hidden;
-    
-    // 深蓝色渐变背景
-    background: linear-gradient(135deg, @menu-item-blue-dark 0%, @menu-item-blue 50%, @menu-item-blue-light 100%);
-    
+
     // 光泽反光效果
     &::before {
       content: '';
@@ -130,22 +134,24 @@ const triggers = {
       pointer-events: none;
       border-radius: 6px 6px 0 0;
     }
-    
+
     // 底部阴影增强立体感
-    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3), 
-                0 1px 0 rgba(255, 255, 255, 0.1) inset;
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3),
+      0 1px 0 rgba(255, 255, 255, 0.1) inset;
   }
 
+  // ==================== 菜单项特定样式 ====================
   .el-menu-item {
     transition: @transition-function;
     -moz-transition: @transition-function;
     -webkit-transition: @transition-function;
     -o-transition: @transition-function;
+    background: transparent;
 
     &:hover {
       color: @sidebar-color !important;
       background: linear-gradient(135deg, @menu-item-blue 0%, @menu-item-blue-light 50%, @menu-item-blue 100%) !important;
-      
+
       &::before {
         background: linear-gradient(
           180deg,
@@ -154,9 +160,9 @@ const triggers = {
           transparent 100%
         );
       }
-      
-      box-shadow: 0 3px 6px rgba(0, 0, 0, 0.4), 
-                  0 1px 0 rgba(255, 255, 255, 0.15) inset;
+
+      box-shadow: 0 3px 6px rgba(0, 0, 0, 0.4),
+        0 1px 0 rgba(255, 255, 255, 0.15) inset;
 
       i {
         color: @sidebar-color !important;
@@ -165,7 +171,7 @@ const triggers = {
 
     &.is-active {
       background: linear-gradient(135deg, @menu-item-blue-light 0%, @menu-item-blue 50%, @menu-item-blue-dark 100%) !important;
-      
+
       &::before {
         background: linear-gradient(
           180deg,
@@ -174,17 +180,18 @@ const triggers = {
           transparent 100%
         );
       }
-      
-      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5), 
-                  0 2px 0 rgba(255, 255, 255, 0.2) inset;
+
+      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5),
+        0 2px 0 rgba(255, 255, 255, 0.2) inset;
     }
   }
-  
+
+  // ==================== 子菜单标题样式 ====================
   .el-sub-menu__title {
     &:hover {
       color: @sidebar-color !important;
       background: linear-gradient(135deg, @menu-item-blue 0%, @menu-item-blue-light 50%, @menu-item-blue 100%) !important;
-      
+
       &::before {
         background: linear-gradient(
           180deg,
@@ -193,18 +200,15 @@ const triggers = {
           transparent 100%
         );
       }
-      
-      box-shadow: 0 3px 6px rgba(0, 0, 0, 0.4), 
-                  0 1px 0 rgba(255, 255, 255, 0.15) inset;
+
+      box-shadow: 0 3px 6px rgba(0, 0, 0, 0.4),
+        0 1px 0 rgba(255, 255, 255, 0.15) inset;
     }
   }
 
+  // ==================== 其他辅助样式 ====================
   .el-menu-item-group__title {
     display: none;
   }
-
-  &::-webkit-scrollbar {
-    display: none;
-  }
 }
 </style>