From 19cb8327f006f12403ea8591a22debd0ea26d43f Mon Sep 17 00:00:00 2001
From: RuoYi <yzz_ivy@163.com>
Date: Thu, 02 Apr 2026 11:36:59 +0800
Subject: [PATCH] 新增树分割组件TreePanel
---
ruoyi-ui/src/assets/styles/sidebar.scss | 156 +++++++++++++++++++++++++++++++++++++++++++--------
1 files changed, 131 insertions(+), 25 deletions(-)
diff --git a/ruoyi-ui/src/assets/styles/sidebar.scss b/ruoyi-ui/src/assets/styles/sidebar.scss
index bd476ab..6c4f47d 100644
--- a/ruoyi-ui/src/assets/styles/sidebar.scss
+++ b/ruoyi-ui/src/assets/styles/sidebar.scss
@@ -1,16 +1,21 @@
#app {
.main-container {
- min-height: 100%;
+ height: 100%;
transition: margin-left .28s;
- margin-left: $sideBarWidth;
+ margin-left: $base-sidebar-width;
position: relative;
}
+ .sidebarHide {
+ margin-left: 0!important;
+ }
+
.sidebar-container {
+ -webkit-transition: width .28s;
transition: width 0.28s;
- width: $sideBarWidth !important;
- background-color: $menuBg;
+ width: $base-sidebar-width !important;
+ background-color: $base-menu-background;
height: 100%;
position: fixed;
font-size: 0px;
@@ -19,6 +24,8 @@
left: 0;
z-index: 1001;
overflow: hidden;
+ -webkit-box-shadow: 2px 0 6px rgba(0,21,41,.35);
+ box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.1);
// reset element-ui css
.horizontal-collapse-transition {
@@ -54,7 +61,7 @@
}
.svg-icon {
- margin-right: 16px;
+ margin-right: 10px !important;
}
.el-menu {
@@ -67,27 +74,127 @@
overflow: hidden !important;
text-overflow: ellipsis !important;
white-space: nowrap !important;
+ height: 44px !important;
+ line-height: 44px !important;
}
// menu hover
.submenu-title-noDropdown,
.el-submenu__title {
&:hover {
- background-color: $menuHover !important;
+ background-color: rgba(0, 0, 0, 0.06) !important;
}
}
- .is-active>.el-submenu__title {
- color: $subMenuActiveText !important;
+ & .theme-dark .is-active > .el-submenu__title {
+ color: $base-menu-color-active !important;
}
& .nest-menu .el-submenu>.el-submenu__title,
& .el-submenu .el-menu-item {
- min-width: $sideBarWidth !important;
- background-color: $subMenuBg !important;
+ min-width: $base-sidebar-width !important;
&:hover {
- background-color: $subMenuHover !important;
+ background-color: rgba(0, 0, 0, 0.06) !important;
+ }
+ }
+
+ & .theme-dark .nest-menu .el-submenu>.el-submenu__title,
+ & .theme-dark .el-submenu .el-menu-item {
+ background-color: $base-sub-menu-background !important;
+
+ &:hover {
+ background-color: $base-sub-menu-hover !important;
+ }
+ }
+
+ // theme-dark 深色主题
+ &.theme-dark {
+ box-shadow: 2px 0 8px rgba(0, 0, 0, 0.4);
+ border-right: none;
+
+ .el-menu-item.is-active {
+ position: relative;
+
+ &::before {
+ content: '';
+ position: absolute;
+ inset: 0;
+ background-color: var(--current-color-dark-bg, rgba(64, 158, 255, 0.2));
+ border-right: 3px solid var(--current-color, #409eff);
+ pointer-events: none;
+ z-index: 1;
+ }
+ }
+
+ .el-submenu.is-active > .el-submenu__title {
+ color: var(--current-color, #409eff) !important;
+ }
+
+ .el-menu-item:not(.is-active),
+ .submenu-title-noDropdown,
+ .el-submenu__title {
+ position: relative;
+
+ &::before {
+ content: '';
+ position: absolute;
+ inset: 0;
+ background-color: transparent;
+ pointer-events: none;
+ z-index: 1;
+ transition: background-color 0.2s;
+ }
+
+ &:hover::before {
+ background-color: var(--current-color-dark-bg, rgba(64, 158, 255, 0.2));
+ }
+ }
+ }
+
+ // theme-light 浅色主题
+ &.theme-light {
+ border-right: 1px solid #e8eaf0;
+ box-shadow: none;
+
+ .el-menu-item,
+ .el-submenu__title {
+ color: rgba(0, 0, 0, 0.65);
+ }
+
+ .el-menu-item.is-active {
+ color: var(--current-color, #409eff) !important;
+ position: relative;
+
+ &::before {
+ content: '';
+ position: absolute;
+ inset: 0;
+ background-color: var(--current-color-light, #ecf5ff);
+ border-right: 3px solid var(--current-color, #409eff);
+ pointer-events: none;
+ z-index: 1;
+ }
+ }
+
+ .el-submenu.is-active > .el-submenu__title {
+ color: var(--current-color, #409eff) !important;
+ }
+
+ .el-menu-item:not(.is-active):hover,
+ .submenu-title-noDropdown:hover,
+ .el-submenu__title:hover {
+ background-color: #f5f7fa !important;
+ color: rgba(0, 0, 0, 0.85) !important;
+ }
+
+ .nest-menu .el-submenu > .el-submenu__title,
+ .el-submenu .el-menu-item {
+ background-color: #fafafa !important;
+
+ &:hover {
+ background-color: #f0f5ff !important;
+ }
}
}
}
@@ -101,15 +208,17 @@
margin-left: 54px;
}
- .submenu-title-noDropdown {
- padding: 0 !important;
- position: relative;
-
- .el-tooltip {
+ .el-menu:not(.el-menu--horizontal) {
+ .submenu-title-noDropdown {
padding: 0 !important;
+ position: relative;
- .svg-icon {
- margin-left: 20px;
+ .el-tooltip {
+ padding: 0 !important;
+
+ .svg-icon {
+ margin-left: 20px;
+ }
}
}
}
@@ -124,9 +233,6 @@
margin-left: 20px;
}
- .el-submenu__icon-arrow {
- display: none;
- }
}
}
@@ -146,7 +252,7 @@
}
.el-menu--collapse .el-menu .el-submenu {
- min-width: $sideBarWidth !important;
+ min-width: $base-sidebar-width !important;
}
// mobile responsive
@@ -157,14 +263,14 @@
.sidebar-container {
transition: transform .28s;
- width: $sideBarWidth !important;
+ width: $base-sidebar-width !important;
}
&.hideSidebar {
.sidebar-container {
pointer-events: none;
transition-duration: 0.3s;
- transform: translate3d(-$sideBarWidth, 0, 0);
+ transform: translate3d(-$base-sidebar-width, 0, 0);
}
}
}
@@ -190,7 +296,7 @@
.el-menu-item {
&:hover {
// you can use $subMenuHover
- background-color: $menuHover !important;
+ background-color: rgba(0, 0, 0, 0.06) !important;
}
}
--
Gitblit v1.9.3