DeXun/klp-oa
9
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

改为暗色风格主题

Browse Source
This commit is contained in:
砂糖
2025-08-28 15:06:03 +08:00
parent 7ea0de6a67
commit 8634549dd3
13 changed files with 1662 additions and 445 deletions
Download Patch File Download Diff File Expand all files Collapse all files

121
klp-ui/src/assets/styles/sidebar.scss
View File

@@ -1,10 +1,16 @@
#app {
// 文本颜色调整为偏黑色系（直接写死值，确保清晰）
--text-primary: #1a1a1a;
--text-regular: #333333;
--text-secondary: #555555;
--text-placeholder: #777777;
.main-container {
height: 100%;
transition: margin-left .28s;
transition: margin-left .28s, box-shadow .3s ease;
margin-left: $base-sidebar-width;
position: relative;
background: #1E2227; // 金属浅色渐变
}
.sidebarHide {
@@ -12,10 +18,11 @@
}
.sidebar-container {
-webkit-transition: width .28s;
transition: width 0.28s;
-webkit-transition: width .28s, background .3s ease;
transition: width 0.28s, background .3s ease;
width: $base-sidebar-width !important;
background-color: $base-menu-background;
background: #1E2227; // 金属深色渐变
border-right: 1px solid #8d939b;
height: 100%;
position: fixed;
font-size: 0px;
@@ -24,8 +31,7 @@
left: 0;
z-index: 1001;
overflow: hidden;
-webkit-box-shadow: 2px 0 6px rgba(0,21,41,.35);
box-shadow: 2px 0 6px rgba(0,21,41,.35);
box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.15);
// reset element-ui css
.horizontal-collapse-transition {
@@ -38,6 +44,12 @@
.el-scrollbar__bar.is-vertical {
right: 0px;
background: rgba(0, 0, 0, 0.05);
}
.el-scrollbar__thumb {
background: #1E2227;
border-radius: 3px;
}
.el-scrollbar {
@@ -58,52 +70,84 @@
display: inline-block;
width: 100%;
overflow: hidden;
color: var(--text-regular); // 链接文本偏黑
text-decoration: none;
}
.svg-icon {
margin-right: 16px;
color: var(--text-secondary); // 图标颜色稍浅
}
.el-menu {
border: none;
height: 100%;
width: 100% !important;
background: transparent;
}
.el-menu-item, .el-submenu__title {
// 明确默认状态样式（关键修复）
background: transparent !important;
box-shadow: none !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
white-space: nowrap !important;
color: var(--text-regular); // 菜单项文本偏黑
border-radius: 4px;
margin: 0 6px;
transition: all 0.2s ease;
}
// menu hover
// menu hover - 仅在hover时生效
.submenu-title-noDropdown,
.el-submenu__title {
&:hover {
background-color: rgba(0, 0, 0, 0.06) !important;
background: rgba(255, 255, 255, 0.1) !important;
color: var(--text-primary) !important; // hover时文本更深
box-shadow: inset 1px 1px 2px rgba(0, 0, 0, 0.1),
inset -1px -1px 2px rgba(255, 255, 255, 0.05);
}
}
// 深色主题下子菜单选中高亮
& .theme-dark .is-active > .el-submenu__title {
color: $base-menu-color-active !important;
// border-right: 3px solid $base-menu-color-active !important;
color: #fff !important; // 选中时文字纯白
// background-color: rgba(95, 123, 160, 0.25) !important; // 工业蓝浅高亮
// border-left: 3px solid #5F7BA0; // 左边高亮条
}
& .nest-menu .el-submenu>.el-submenu__title,
// & .nest-menu .el-submenu>.el-submenu__title,
& .el-submenu .el-menu-item {
// 子菜单默认样式
background: transparent !important;
box-shadow: none !important;
min-width: $base-sidebar-width !important;
margin: 0 4px;
&:hover {
background-color: rgba(0, 0, 0, 0.06) !important;
background: rgba(255, 255, 255, 0.1) !important;
color: var(--text-primary) !important;
}
}
& .theme-dark .nest-menu .el-submenu>.el-submenu__title,
// & .theme-dark .nest-menu .el-submenu>.el-submenu__title,
& .theme-dark .el-submenu .el-menu-item {
background-color: $base-sub-menu-background !important;
background: transparent !important;
color: var(--text-regular);
&:hover {
background-color: $base-sub-menu-hover !important;
background: rgba(255, 255, 255, 0.1) !important;
color: var(--text-primary) !important;
}
&.is-active {
background: rgba(95, 123, 160, 0.28) !important; // 激活背景
color: #fff !important; // 激活文字白色
font-weight: 600;
border-left: 3px solid #5F7BA0; // 左边高亮条
}
}
}
@@ -139,7 +183,6 @@
.svg-icon {
margin-left: 20px;
}
}
}
@@ -169,8 +212,9 @@
}
.sidebar-container {
transition: transform .28s;
transition: transform .28s, box-shadow .3s ease;
width: $base-sidebar-width !important;
box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.15);
}
&.hideSidebar {
@@ -183,7 +227,6 @@
}
.withoutAnimation {
.main-container,
.sidebar-container {
transition: none;
@@ -196,14 +239,34 @@
&>.el-menu {
.svg-icon {
margin-right: 16px;
color: var(--text-secondary);
}
}
.nest-menu .el-submenu>.el-submenu__title,
.el-menu-item {
.el-menu-item .nest-menu {
// 默认样式重置
background: transparent !important;
box-shadow: none !important;
&:hover {
// you can use $subMenuHover
background-color: rgba(0, 0, 0, 0.06) !important;
background: rgba(255, 255, 255, 0.1) !important;
color: var(--text-primary) !important;
box-shadow: inset 1px 1px 2px rgba(0, 0, 0, 0.1),
inset -1px -1px 2px rgba(255, 255, 255, 0.05);
}
::v-deep &.is-active {
background: rgba(95, 123, 160, 0.28) !important; // 工业蓝背景
color: #ffffff !important; // 激活文字白色
font-weight: 600;
border-left: 3px solid #5F7BA0;
box-shadow: inset 1px 1px 2px rgba(0, 0, 0, 0.15),
inset -1px -1px 2px rgba(255, 255, 255, 0.08);
}
::v-deep .el-menu-item.is-active span,
::v-deep .el-submenu__title.is-active span {
color: #ffffff !important; // 激活文字白色
}
}
@@ -211,9 +274,12 @@
>.el-menu--popup {
max-height: 100vh;
overflow-y: auto;
background: linear-gradient(145deg, #b0b5bb, #999ea6);
border: 1px solid #8d939b;
box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.15);
&::-webkit-scrollbar-track-piece {
background: #d3dce6;
background: rgba(0, 0, 0, 0.05);
}
&::-webkit-scrollbar {
@@ -221,12 +287,13 @@
}
&::-webkit-scrollbar-thumb {
background: #99a9bf;
border-radius: 20px;
background: #8d939b;
border-radius: 3px;
}
}
}
.el-menu-item.is-active {
border-left: 4px solid !important;
#app .sidebar-container .el-menu-item,
#app .sidebar-container .el-submenu__title {
margin: 0;
}