uptada

f/web-kboss/src/layout/components/Sidebar/index.vue

@@ -40,7 +40,7 @@ export default {
   name: "Sidebar",
   components: { SidebarItem, Logo },
   computed: {
-    ...mapGetters(["permission_routes", "sidebar", "userType", "orgType"]), // 新增：映射orgType
+    ...mapGetters(["permission_routes", "sidebar", "userType", "orgType"]),
 
     showLogo() {
       return true;
@@ -54,34 +54,15 @@ export default {
       return !this.sidebar.opened;
     },
 
-    // 修复：确保权限路由正确获取
     permissionRoutes() {
       const routes = this.permission_routes || [];
-      console.log("=== Sidebar 权限路由调试 ===");
-      console.log("当前权限路由:", routes);
-      console.log("用户类型:", this.userType);
-      console.log("组织类型:", this.orgType);
-
-      // 调试：检查是否包含订单管理和资源管理路由
-      const hasOrderManagement = routes.some(route => route.path === '/orderManagement');
-      const hasResourceManagement = routes.some(route => route.path === '/resourceManagement');
-      console.log("是否包含订单管理:", hasOrderManagement);
-      console.log("是否包含资源管理:", hasResourceManagement);
-
-      // 检查用户类型和组织类型是否正确
-      console.log("当前用户类型:", this.userType);
-      console.log("当前组织类型:", this.orgType);
-      console.log("=== Sidebar 调试结束 ===");
-
       return routes;
     },
 
-    // 修复：激活菜单的高亮
     activeMenu() {
       const route = this.$route;
       const { meta, path } = route;
 
-      // 如果设置了activeMenu，就使用它
       if (meta.activeMenu) {
         return meta.activeMenu;
       }
@@ -92,36 +73,6 @@ export default {
 
   mounted() {
     console.log("Sidebar mounted - 权限路由:", this.permissionRoutes);
-    console.log("Sidebar mounted - 用户类型:", this.userType);
-    console.log("Sidebar mounted - 组织类型:", this.orgType);
-    console.log("sessionStorage userType:", sessionStorage.getItem('userType'));
-    console.log("sessionStorage orgType:", sessionStorage.getItem('orgType'));
-  },
-
-  watch: {
-    permission_routes: {
-      handler(newRoutes) {
-        console.log("Sidebar - 权限路由变化:", newRoutes);
-      },
-      deep: true,
-      immediate: true
-    },
-
-    // 新增：监听用户类型变化
-    userType: {
-      handler(newType) {
-        console.log("Sidebar - 用户类型变化:", newType);
-      },
-      immediate: true
-    },
-
-    // 新增：监听组织类型变化
-    orgType: {
-      handler(newType) {
-        console.log("Sidebar - 组织类型变化:", newType);
-      },
-      immediate: true
-    }
   }
 };
 </script>
@@ -157,6 +108,7 @@ export default {
     }
   }
 
+  // 重点修改部分 - 更具体的选择器
   ::v-deep .el-menu-vertical {
     border: none;
     height: 100%;
@@ -170,8 +122,36 @@ export default {
       overflow: hidden;
       text-overflow: ellipsis;
     }
+
+    // 子菜单容器
+    .el-menu--inline {
+      // 子菜单项
+      .el-menu-item {
+        // 激活的子菜单项
+        &.is-active {
+          background-color: #d7dafd !important;
+          color: #296ad9 !important;
+
+          &:before {
+            content: '';
+            position: absolute;
+            left: 0;
+            top: 0;
+            bottom: 0;
+            width: 3px;
+            background-color: #296ad9;
+          }
         }
 
+        // 非激活状态的悬停效果
+        &:not(.is-active):hover {
+          background-color: #f5f7fa !important;
+        }
+      }
+    }
+  }
+
+  // 折叠状态
   ::v-deep .el-menu--collapse {
     width: 64px !important;
     min-width: 64px !important;
@@ -181,6 +161,16 @@ export default {
       text-overflow: clip;
       justify-content: center;
     }
+
+    // 折叠状态下的子菜单激活样式
+    .el-menu--popup {
+      .el-menu-item {
+        &.is-active {
+          background-color: #d7dafd !important;
+          color: #296ad9 !important;
+        }
+      }
+    }
   }
 }
 </style>

f/web-kboss/src/styles/variables.scss

@@ -1,4 +1,5 @@
-// / base color
+// variables.scss
+// base color
 $blue: #324157;
 $light-blue: #3A71A8;
 $red: #C03639;
@@ -9,22 +10,17 @@ $yellow: #FEC171;
 $panGreen: #30B08F;
 
 // sidebar
-$menuText: #000;
+$menuText: #333;
-$menuActiveText: #296ad9; // 当前激活菜单项的文字颜色
+$menuActiveText: #296ad9;
-$subMenuActiveText: #100101; // 当前激活子菜单项的文字颜色
+$subMenuActiveText: #000;
 
-$menuBg: #fff; // 整体背景颜色
+$menuBg: #fff;
-$menuHover: #f0f0f0; // 鼠标悬浮一级菜单背景色 (轻微变化更友好)
+$menuHover: #f5f7fa;
-$subMenuBg: #f7f7f7; // 子菜单背景色
+$subMenuBg: #fff;
-$subMenuHover: #eaeaea; // 鼠标悬浮子菜单背景色 (轻微变化更友好)
+$subMenuHover: #f0f0f0;
 
-$sideBarWidth: 230px; // 侧边栏宽度
+$sideBarWidth: 230px;
 
-// Element UI 默认折叠宽度为 64px
-// $sideBarCollapseWidth: 64px;
-
-// the :export directive is the magic sauce for webpack
-// https://www.bluematador.com/blog/how-to-share-variables-between-js-and-sass
 :export {
   menuText: $menuText;
   menuActiveText: $menuActiveText;
@@ -34,9 +30,4 @@ $sideBarWidth: 230px; // 侧边栏宽度
   subMenuBg: $subMenuBg;
   subMenuHover: $subMenuHover;
   sideBarWidth: $sideBarWidth;
-  // sideBarCollapseWidth: $sideBarCollapseWidth;
 } 
-
-
-
-