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

🎈 perf: 优化部分样式的展示

Browse Source
This commit is contained in:
砂糖
2025-08-28 16:44:04 +08:00
parent 8634549dd3
commit 96b5c3ee45
15 changed files with 977 additions and 165 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
klp-ui/src/assets/images/avatar.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 46 KiB

467
klp-ui/src/assets/styles/element-ui.scss
View File

@@ -1,9 +1,14 @@
// ====================== 1. 基础颜色变量（Sass直接处理）======================
$primary-base: #5F7BA0; /* 工业蓝灰（主色原始值） */
$success-base: #2ECC71; /* 成功色原始值 */
$warning-base: #E67E22; /* 警告色原始值 */
$danger-base: #E74C3C; /* 危险色原始值 */
$info-base: #AEB6BF; /* 次主色原始值 */
$primary-base: #5F7BA0;
/* 工业蓝灰（主色原始值） */
$success-base: #2ECC71;
/* 成功色原始值 */
$warning-base: #E67E22;
/* 警告色原始值 */
$danger-base: #E74C3C;
/* 危险色原始值 */
$info-base: #AEB6BF;
/* 次主色原始值 */
// 背景色原始值
$background-base: #2B2F36;
@@ -38,26 +43,27 @@ $--border-color: $border-color-base;
--color-warning: #{$warning-base};
--color-danger: #{$danger-base};
--color-info: #{$info-base};
/* 背景层级 */
--color-background: #{$background-base};
--color-background-light: #{$background-light-base};
--color-background-lighter: #{$background-lighter-base};
--panel-bg: #{$panel-bg-base};
--table-bg: #{$table-bg-base};
/* 文本色 */
--color-text-primary: #FFFFFF;
--color-text-regular: #EAEAEA;
--color-text-secondary: #B6BDC5;
--color-text-placeholder: #8A9098;
/* 边框色 */
--border-color-base: #{$border-color-base};
--border-color-light: #{$border-color-light};
--border-color-lighter: #{$border-color-lighter};
--border-color: #{$--border-color}; /* 同步新增的边框色变量 */
--border-color: #{$--border-color};
/* 同步新增的边框色变量 */
/* 间距/尺寸体系 */
--spacing-sm: #{$--spacing-sm};
--spacing-base: #{$--spacing-base};
@@ -65,13 +71,13 @@ $--border-color: $border-color-base;
--spacing-lg: #{$--spacing-lg};
--form-item-margin: #{$--form-item-margin};
--btn-height: #{$--btn-height};
/* 金属质感变量 */
--metal-gradient-light: linear-gradient(145deg, #3E434A, #363B41);
--metal-gradient-dark: linear-gradient(145deg, #363B41, #3E434A);
--metal-highlight: rgba(255,255,255,.14);
--metal-shadow: 5px 5px 12px rgba(0,0,0,.22), -5px -5px 12px rgba(255,255,255,.06);
--metal-shadow-inset: inset 3px 3px 6px rgba(0,0,0,.28), inset -3px -3px 6px rgba(255,255,255,.06);
--metal-highlight: rgba(255, 255, 255, .14);
--metal-shadow: 5px 5px 12px rgba(0, 0, 0, .22), -5px -5px 12px rgba(255, 255, 255, .06);
--metal-shadow-inset: inset 3px 3px 6px rgba(0, 0, 0, .28), inset -3px -3px 6px rgba(255, 255, 255, .06);
}
@@ -97,7 +103,8 @@ $--color-text-placeholder: var(--color-text-placeholder) !default;
$--border-color-base: $border-color-base !default;
$--border-color-light: $border-color-light !default;
$--border-color-lighter: $border-color-lighter !default;
$--border-color: $--border-color !default; /* 关键修复：同步到Element变量 */
$--border-color: $--border-color !default;
/* 关键修复：同步到Element变量 */
// 间距变量
$--spacing-sm: $--spacing-sm !default;
@@ -156,7 +163,7 @@ body {
border: 1px solid $border-color;
box-shadow: $--metal-shadow;
border-radius: 6px;
text-shadow: 0 1px 0 rgba(0,0,0,.16);
text-shadow: 0 1px 0 rgba(0, 0, 0, .16);
transition: all .25s ease;
height: $--btn-height;
padding: 0 var(--spacing-lg);
@@ -167,7 +174,7 @@ body {
color: $text-color;
background: $--metal-gradient-dark;
border-color: $--border-color-base;
box-shadow: 6px 6px 14px rgba(0,0,0,.28), -6px -6px 14px rgba(255,255,255,.08);
box-shadow: 6px 6px 14px rgba(0, 0, 0, .28), -6px -6px 14px rgba(255, 255, 255, .08);
transform: translateY(-1px);
}
@@ -188,30 +195,33 @@ body {
// 主按钮（品牌梯度）
.el-button--primary {
@include button-variant(#fff, darken($--color-primary, 10%));
background: linear-gradient(145deg, lighten($--color-primary,6%), darken($--color-primary,6%));
border-color: darken($--color-primary,10%);
background: linear-gradient(145deg, lighten($--color-primary, 6%), darken($--color-primary, 6%));
border-color: darken($--color-primary, 10%);
&:hover {
background: linear-gradient(145deg, $--color-primary, darken($--color-primary,8%));
background: linear-gradient(145deg, $--color-primary, darken($--color-primary, 8%));
}
}
// 功能按钮（统一风格）
.el-button--success {
@include button-variant(#fff, darken($--color-success, 10%));
background: linear-gradient(145deg, lighten($--color-success,6%), darken($--color-success,6%));
background: linear-gradient(145deg, lighten($--color-success, 6%), darken($--color-success, 6%));
}
.el-button--warning {
@include button-variant(#fff, darken($--color-warning, 10%));
background: linear-gradient(145deg, lighten($--color-warning,6%), darken($--color-warning,6%));
background: linear-gradient(145deg, lighten($--color-warning, 6%), darken($--color-warning, 6%));
}
.el-button--danger {
@include button-variant(#fff, darken($--color-danger, 10%));
background: linear-gradient(145deg, lighten($--color-danger,6%), darken($--color-danger,6%));
background: linear-gradient(145deg, lighten($--color-danger, 6%), darken($--color-danger, 6%));
}
.el-button--info {
@include button-variant(#111, darken($--color-info, 10%));
background: linear-gradient(145deg, lighten($--color-info,6%), darken($--color-info,6%));
background: linear-gradient(145deg, lighten($--color-info, 6%), darken($--color-info, 6%));
}
// 文本按钮（低干扰）
@@ -253,9 +263,11 @@ body {
border-radius: 6px 0 0 6px;
border-left: none;
}
&:last-child {
border-radius: 0 6px 6px 0;
}
&:not(:last-child) {
border-right: none;
}
@@ -287,7 +299,7 @@ body {
// 表头（深灰黑 + 纯白文字）
.el-table__header-wrapper {
th {
th.el-table__cell {
background: #1F2227;
color: $--color-text-primary;
font-weight: 600;
@@ -301,21 +313,25 @@ body {
// 表体（奇偶行交替 + hover高亮）
.el-table__body-wrapper {
.el-table__row {
// 奇数行
&:nth-child(odd) .el-table__cell {
background: #2F3339;
color: #EAEAEA;
}
// 偶数行
&:nth-child(even) .el-table__cell {
background: #353A40;
color: #EAEAEA;
}
// hover
&:hover .el-table__cell {
background: rgba($--color-primary, 0.25);
color: #888888;
}
// 当前行
&.current-row .el-table__cell {
background: rgba($--color-primary, 0.35);
@@ -366,6 +382,257 @@ body {
}
}
.el-table__fixed-right {
// 表头（深灰黑 + 纯白文字）
.el-table__fixed-header-wrapper {
th.el-table__cell {
background: #1F2227;
color: $--color-text-primary;
font-weight: 600;
border-bottom: 1px solid #444A52;
padding: 4px !important; // 紧凑 padding
font-size: 13px;
}
}
// 表体（奇偶行交替 + hover高亮）
.el-table__fixed-body-wrapper {
.el-table__row {
// 奇数行
&:nth-child(odd) .el-table__cell {
background: #2F3339;
color: #EAEAEA;
}
// 偶数行
&:nth-child(even) .el-table__cell {
background: #353A40;
color: #EAEAEA;
}
// 当前行
&.current-row .el-table__cell {
background: rgba($--color-primary, 0.35);
color: $--color-text-primary;
font-weight: 600;
}
}
}
}
// ---------------------- 3.2 日期范围选择器 ----------------------
// 日期范围选择器主题样式
.el-date-editor {
height: $--btn-height;
// 基础样式
&.el-range-editor {
background: $--color-background;
border: 1px solid $--border-color;
border-radius: 4px;
color: $--color-text-regular;
height: $--btn-height;
padding: 0 8px;
box-shadow: none;
transition: all 0.2s ease;
// 悬停状态
&:hover {
border-color: $--color-primary;
box-shadow: 0 0 0 2px rgba($--color-primary, 0.2);
}
// 聚焦状态
&.is-focus {
border-color: $--color-primary;
box-shadow: 0 0 0 2px rgba($--color-primary, 0.2);
outline: none;
}
// 图标样式
.el-input__icon {
color: $--color-text-secondary;
width: 18px;
height: 18px;
line-height: 18px;
&:hover {
color: $--color-primary;
}
}
// 输入框样式
.el-range-input {
background: transparent;
border: none;
color: $--color-text-regular;
padding: 0 4px;
height: 100%;
font-size: 13px;
width: 80px;
&::placeholder {
color: $--color-text-placeholder;
}
&:focus {
outline: none;
}
}
// 分隔符样式
.el-range-separator {
color: $--color-text-secondary;
padding: 0 4px;
font-size: 13px;
}
// 清除图标
.el-range__close-icon {
margin-left: 4px;
&:hover {
color: $--color-danger;
}
}
}
&--medium.el-input__inner {
height: auto;
}
}
.el-range-editor--medium.el-input__inner {
height: $--btn-height !important;
width: auto !important;
.el-range-separator {
padding: 0;
line-height: 16px;
font-size: 13px;
color: $--color-text-secondary;
}
}
// 日期选择面板样式
.el-picker-panel {
background: $--color-background;
border: 1px solid $--border-color;
border-radius: 6px;
box-shadow: $--metal-shadow;
color: $--color-text-regular;
// 头部导航
.el-picker-panel__header {
border-bottom: 1px solid $--border-color-lighter;
padding: 6px 10px;
button {
color: $--color-text-secondary;
&:hover {
color: $--color-primary;
background: rgba($--color-primary, 0.1);
}
}
.el-picker-panel__icon-btn {
width: 24px;
height: 24px;
line-height: 24px;
border-radius: 4px;
}
.el-date-picker__header-label {
color: $--color-text-primary;
font-weight: 500;
}
}
// 日期表格
.el-date-table {
border-collapse: separate;
border-spacing: 2px;
th {
color: $--color-text-secondary;
font-weight: normal;
padding: 4px 0;
font-size: 12px;
}
td {
padding: 0;
.el-date-table__cell {
width: 28px;
height: 28px;
line-height: 28px;
border-radius: 4px;
margin: 1px;
font-size: 13px;
&:hover {
background: rgba($--color-primary, 0.2);
}
&.current {
background: $--color-primary;
color: #fff;
}
&.in-range {
background: rgba($--color-primary, 0.1);
&::before {
background: $--color-primary;
}
}
&.start-date,
&.end-date {
background: $--color-primary;
color: #fff;
}
}
}
}
// 范围选择器底部按钮
.el-range-picker__footer {
border-top: 1px solid $--border-color-lighter;
padding: 6px 10px;
button {
background: $--color-background-light;
border: 1px solid $--border-color;
color: $--color-text-regular;
height: 24px;
line-height: 22px;
padding: 0 12px;
font-size: 12px;
border-radius: 4px;
&:hover {
background: rgba($--color-primary, 0.2);
border-color: $--color-primary;
}
&.el-button--primary {
background: $--color-primary;
border-color: $--color-primary;
color: #fff;
&:hover {
background: lighten($--color-primary, 10%);
border-color: lighten($--color-primary, 10%);
}
}
}
}
}
// 自定义表格工具类（补充紧凑）
.small-padding .cell {
padding-left: calc($--spacing-base / 2);
@@ -382,7 +649,6 @@ body {
// 表单项布局
.el-form-item {
margin-bottom: $--form-item-margin !important;
label-align: right; // 标签右对齐
font-size: 13px;
// 标签样式
@@ -412,7 +678,6 @@ body {
border-radius: 0;
height: $--btn-height;
line-height: $--btn-height;
padding: 0 $--spacing-base;
font-size: 13px;
&::placeholder {
@@ -508,12 +773,15 @@ body {
.el-input-number__increase {
border-radius: 0;
.el-icon-plus {
color: $--color-text-regular;
}
}
.el-input-number__decrease {
border-radius: 0;
.el-icon-minus {
color: $--color-text-regular;
}
@@ -521,6 +789,7 @@ body {
// 迷你尺寸
&.el-input-number--small {
.el-input-number__increase,
.el-input-number__decrease {
width: 24px;
@@ -556,6 +825,7 @@ body {
&:hover {
background-color: rgba($--color-primary, .12);
}
&.selected {
background-color: rgba($--color-primary, .20);
color: #fff;
@@ -580,6 +850,7 @@ body {
.el-slider__bar {
background: $--metal-gradient-dark;
}
.el-slider__button {
background: $--metal-gradient-light;
border-color: $--border-color-light;
@@ -649,6 +920,10 @@ body {
border-bottom: 1px solid $--border-color-lighter;
}
.el-dialog__title {
color: $--color-text-primary;
}
// 对话框主体
.el-dialog__body {
padding: $--spacing-lg;
@@ -699,11 +974,12 @@ body {
&::after {
background: $--metal-gradient-light;
}
border-color: $--border-color-light;
}
}
.el-button-group + .el-popover {
.el-button-group+.el-popover {
margin-left: 5px;
}
@@ -715,8 +991,8 @@ body {
// 标签栏
.el-tabs__header {
margin: 0 0 var(--spacing-lg) 0;
padding: 0 var(--spacing-base);
margin: 0;
padding: 0;
border-bottom: 1px solid $--border-color-light;
background-color: transparent;
@@ -724,7 +1000,7 @@ body {
.el-tabs__nav {
height: 40px;
line-height: 40px;
background-color: $--color-background-light;
// background-color: $--color-background-light;
border-radius: 6px 6px 0 0;
padding: 0 var(--spacing-base);
box-shadow: inset 0 -1px 0 $--border-color-light;
@@ -735,8 +1011,8 @@ body {
color: $--color-text-secondary;
height: 40px;
line-height: 40px;
padding: 0 var(--spacing-lg);
margin: 0 var(--spacing-sm);
// padding: 0 var(--spacing-lg);
// margin: 0 var(--spacing-sm);
font-size: 13px;
transition: all 0.2s ease;
border-bottom: 2px solid transparent;
@@ -744,7 +1020,7 @@ body {
// 悬停状态
&:hover {
color: $--color-primary;
background-color: rgba($--color-primary, 0.08);
// background-color: rgba($--color-primary, 0.08);
border-bottom-color: rgba($--color-primary, 0.3);
}
@@ -753,7 +1029,7 @@ body {
color: $--color-primary;
font-weight: 500;
border-bottom-color: $--color-primary;
background-color: rgba($--color-primary, 0.1);
// background-color: rgba($--color-primary, 0.1);
}
// 禁用状态
@@ -1055,6 +1331,123 @@ body {
}
}
// ====================== 描述列表组件（el-descriptions）- 深色模式 ======================
.el-descriptions {
width: 100%;
background: $--color-background; // 黑色背景
box-shadow: $--metal-shadow;
overflow: hidden;
color: $--color-text-primary; // 白色文字
// 描述列表头部
&__header {
padding: $--spacing-base $--spacing-lg;
border-bottom: 1px solid $--border-color-lighter;
background: $--metal-gradient-dark;
color: $--color-text-primary; // 白色标题
font-weight: 600;
font-size: 14px;
}
// 描述列表主体容器
&__body {
width: 100%;
}
// 描述列表行
&__row {
display: flex;
width: 100%;
border-bottom: 1px solid $--border-color-lighter;
// 最后一行移除底部边框
&:last-child {
border-bottom: none;
}
}
// 描述列表标签项（左侧）
.el-descriptions-item__label {
padding: $--spacing-lg;
background: $--color-background; // 极浅灰背景区分标签
color: $--color-text-secondary; // 浅灰文字
font-weight: 500;
border-right: 1px solid $--border-color-lighter;
box-sizing: border-box;
white-space: nowrap;
font-size: 13px;
}
// 描述列表内容项（右侧）
&-item__content {
padding: $--spacing-lg;
background: $--color-background-light;
color: $--color-text-primary; // 白色文字
flex: 1;
box-sizing: border-box;
font-size: 13px;
word-break: break-word;
}
// 带边框模式适配
&--border {
border: 1px solid $--border-color-light;
border-radius: 8px;
overflow: hidden;
.el-descriptions__label,
.el-descriptions__content {
border-color: $--border-color-lighter;
}
.el-descriptions__header {
border-bottom: 1px solid $--border-color-light;
}
}
// 尺寸适配
&--small {
.el-descriptions__label,
.el-descriptions__content {
padding: calc($--spacing-base / 2) $--spacing-base;
font-size: 12px;
}
.el-descriptions__header {
padding: calc($--spacing-base / 2) $--spacing-base;
font-size: 13px;
}
}
&--large {
.el-descriptions__label,
.el-descriptions__content {
padding: $--spacing-lg calc($--spacing-lg * 1.5);
font-size: 14px;
}
.el-descriptions__header {
padding: $--spacing-base calc($--spacing-lg * 1.5);
font-size: 15px;
}
}
// 响应式适配
@media (max-width: 768px) {
.el-descriptions__row {
flex-direction: column;
}
.el-descriptions__label {
border-right: none;
border-bottom: 1px solid $--border-color-lighter;
width: 100%;
}
}
}
// ---------------------- 3.6 导航类（面包屑/菜单）----------------------
// 面包屑
@@ -1094,7 +1487,7 @@ body {
}
// 折叠菜单
&.el-menu--collapse > div > .el-submenu > .el-submenu__title .el-submenu__icon-arrow {
&.el-menu--collapse>div>.el-submenu>.el-submenu__title .el-submenu__icon-arrow {
display: none;
}
@@ -1216,7 +1609,7 @@ div.pagination-container {
background: rgba($--color-primary, .12);
}
&.is-current > .el-tree-node__content {
&.is-current>.el-tree-node__content {
background: rgba($--color-primary, .2);
color: $--color-primary;
}