🎈 perf: 优化部分样式的展示
This commit is contained in:
砂糖
BIN
klp-ui/src/assets/images/avatar.png
Normal file
BIN
klp-ui/src/assets/images/avatar.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 46 KiB |
@@ -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;
|
||||
}
|
||||
|
||||
@@ -13,6 +13,12 @@ export default {
|
||||
default: ''
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
vditor: null,
|
||||
loading: false
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.renderMarkdown();
|
||||
},
|
||||
@@ -22,13 +28,17 @@ export default {
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
renderMarkdown() {
|
||||
Vditor.preview(this.$refs.preview, this.value || '', {
|
||||
async renderMarkdown() {
|
||||
this.loading = true;
|
||||
await Vditor.preview(this.$refs.preview, this.value || '', {
|
||||
anchor: 1,
|
||||
hl: true,
|
||||
theme: 'dark',
|
||||
math: { inlineDigit: true },
|
||||
mermaid: true,
|
||||
});
|
||||
this.loading = false;
|
||||
console.log(this.$refs.preview, p);
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -36,9 +46,9 @@ export default {
|
||||
|
||||
<style scoped>
|
||||
.markdown-preview {
|
||||
border: 1px solid #e4e7ed;
|
||||
border-radius: 4px;
|
||||
padding: 8px;
|
||||
background: #fff;
|
||||
background: #393d46;
|
||||
color: white;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -51,7 +51,7 @@ const user = {
|
||||
return new Promise((resolve, reject) => {
|
||||
getInfo().then(res => {
|
||||
const user = res.data.user
|
||||
const avatar = (user.avatar == "" || user.avatar == null) ? require("@/assets/images/profile.jpg") : user.avatar;
|
||||
const avatar = (user.avatar == "" || user.avatar == null) ? require("@/assets/images/avatar.png") : user.avatar;
|
||||
if (res.data.roles && res.data.roles.length > 0) { // 验证返回的roles是否是一个非空数组
|
||||
commit('SET_ROLES', res.data.roles)
|
||||
commit('SET_PERMISSIONS', res.data.permissions)
|
||||
|
||||
@@ -207,7 +207,6 @@ export default {
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.all-applications-container {
|
||||
background-color: #fff;
|
||||
padding: 16px; /* 调整间距，更贴近飞书紧凑感 */
|
||||
border-radius: 12px; /* 飞书常用较大圆角 */
|
||||
margin-top: 24px;
|
||||
@@ -217,7 +216,7 @@ export default {
|
||||
.frequently-used-section {
|
||||
margin-bottom: 32px; /* 增大间距 */
|
||||
padding-bottom: 20px;
|
||||
border-bottom: 1px solid #ebeef5; /* 飞书浅灰边框色 */
|
||||
border-bottom: 1px solid #111; /* 飞书浅灰边框色 */
|
||||
}
|
||||
|
||||
.frequently-used-header {
|
||||
@@ -230,7 +229,7 @@ export default {
|
||||
.frequently-title {
|
||||
font-size: 16px; /* 稍小字体，飞书风格更简洁 */
|
||||
font-weight: 500; /* 调整 FontWeight */
|
||||
color: #1f2329; /* 深一点的标题色 */
|
||||
color: #ddd; /* 深一点的标题色 */
|
||||
}
|
||||
|
||||
.edit-btn {
|
||||
@@ -254,10 +253,10 @@ export default {
|
||||
border-radius: 12px; /* 大圆角 */
|
||||
transition: all 0.3s ease;
|
||||
position: relative;
|
||||
background-color: #f7f8fa; /* 飞书卡片常用浅灰底色 */
|
||||
background-color: #222; /* 飞书卡片常用浅灰底色 */
|
||||
|
||||
&:hover {
|
||||
background-color: #eaeef7; /* hover 时的浅灰 */
|
||||
background-color: #444; /* hover 时的浅灰 */
|
||||
}
|
||||
}
|
||||
|
||||
@@ -266,7 +265,7 @@ export default {
|
||||
font-size: 16px;
|
||||
font-weight: 500;
|
||||
margin-bottom: 20px;
|
||||
color: #1f2329;
|
||||
color: #ddd;
|
||||
}
|
||||
|
||||
// 应用网格布局
|
||||
@@ -286,10 +285,10 @@ export default {
|
||||
border-radius: 12px;
|
||||
transition: background-color 0.3s ease;
|
||||
position: relative;
|
||||
background-color: #f7f8fa;
|
||||
background-color: #222;
|
||||
|
||||
&:hover {
|
||||
background-color: #eaeef7;
|
||||
background-color: #444;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -302,7 +301,7 @@ export default {
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-bottom: 12px;
|
||||
background-color: #e6f0ff; /* 飞书风格的浅蓝底色 */
|
||||
background-color: #222; /* 飞书风格的浅蓝底色 */
|
||||
position: relative;
|
||||
}
|
||||
|
||||
@@ -314,7 +313,7 @@ export default {
|
||||
// 应用名称样式
|
||||
.app-name {
|
||||
font-size: 14px;
|
||||
color: #515767; /* 飞书常用的文本色 */
|
||||
color: #2bf; /* 飞书常用的文本色 */
|
||||
text-align: center;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
<template>
|
||||
<div class="order-analysis-dashboard" v-loading="loading">
|
||||
<!-- 业绩区 -->
|
||||
<el-tabs v-model="activeTab" type="card">
|
||||
<el-tabs v-model="activeTab">
|
||||
<el-tab-pane label="我的流程" name="my">
|
||||
<KLPTable v-loading="loading" :data="ownProcessList">
|
||||
<el-table-column label="流程编号" align="center" prop="procInsId" :show-overflow-tooltip="true" />
|
||||
@@ -94,7 +94,6 @@ export default {
|
||||
<style scoped>
|
||||
.order-analysis-dashboard {
|
||||
padding: 24px;
|
||||
background-color: #f7f8fa;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
|
||||
@@ -4,7 +4,7 @@
|
||||
v-loading="loading"
|
||||
>
|
||||
<!-- 业绩区 -->
|
||||
<el-tabs v-model="activeTab" type="card">
|
||||
<el-tabs v-model="activeTab">
|
||||
<el-tab-pane label="业绩总览" name="performance">
|
||||
<PerformanceArea mode="mini" :performance-area="dashboardData.performanceArea" />
|
||||
</el-tab-pane>
|
||||
@@ -131,7 +131,6 @@ export default {
|
||||
<style scoped>
|
||||
.order-analysis-dashboard {
|
||||
padding: 24px;
|
||||
background-color: #f7f8fa;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
|
||||
@@ -1,7 +1,8 @@
|
||||
<template>
|
||||
<!-- 模板部分无需修改，仅调整样式 -->
|
||||
<div class="finance-voucher-component">
|
||||
<div
|
||||
v-for="(voucher, index) in voucherData"
|
||||
v-for="(voucher, index) in internalVoucherData"
|
||||
:key="index"
|
||||
class="voucher-item"
|
||||
>
|
||||
@@ -19,7 +20,7 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 凭证明细表格 -->
|
||||
<!-- 凭证明细表格（复用全局深色表格样式） -->
|
||||
<KLPTable :data="voucher.detailList || []" border style="width: 100%;">
|
||||
<el-table-column label="摘要" prop="voucherNo" />
|
||||
<el-table-column label="科目" prop="accountId" />
|
||||
@@ -38,6 +39,7 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
// JS部分仅修正voucherData绑定（原代码使用internalVoucherData但循环voucherData，避免选中状态失效）
|
||||
export default {
|
||||
name: "FinanceVoucherComponent",
|
||||
props: {
|
||||
@@ -48,7 +50,6 @@ export default {
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
// 用于存储选中状态，若父组件需控制，可改为 prop 或 sync 修饰符
|
||||
internalVoucherData: [],
|
||||
};
|
||||
},
|
||||
@@ -57,7 +58,7 @@ export default {
|
||||
handler(val) {
|
||||
this.internalVoucherData = val.map((v) => ({
|
||||
...v,
|
||||
checked: false,
|
||||
checked: false, // 初始化未选中状态
|
||||
}));
|
||||
},
|
||||
immediate: true,
|
||||
@@ -85,40 +86,127 @@ export default {
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
<style lang="scss" scoped>
|
||||
$--spacing-base: 8px;
|
||||
$--spacing-lg: 16px;
|
||||
$--spacing-sm: 4px;
|
||||
$--color-background: #222;
|
||||
$--color-background-light: #333;
|
||||
$--color-text-primary: #ddd;
|
||||
$--color-text-secondary: #bbb;
|
||||
$--border-color: #111;
|
||||
$--border-color-light: #222;
|
||||
$--border-color-lighter: #333;
|
||||
$--metal-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
|
||||
$--metal-shadow-inset: inset 0 1px 2px rgba(0, 0, 0, 0.1);
|
||||
$--metal-gradient-light: linear-gradient(to bottom, #222, #333);
|
||||
$--metal-gradient-dark: linear-gradient(to bottom, #111, #222);
|
||||
$--table-bg: #1E2227;
|
||||
$--color-text-regular: #EAEAEA;
|
||||
$--color-primary: #5F7BA0;
|
||||
|
||||
/* 外层容器：继承全局深色背景，统一内边距 */
|
||||
.finance-voucher-component {
|
||||
padding: 16px;
|
||||
padding: $--spacing-lg; /* 复用全局间距变量（16px） */
|
||||
background: $--color-background; /* 全局深色背景（#2B2F36） */
|
||||
}
|
||||
|
||||
/* 单据项容器：深色边框+金属质感阴影，与表格风格统一 */
|
||||
.voucher-item {
|
||||
border: 1px solid #e6e6e6;
|
||||
border-radius: 4px;
|
||||
margin-bottom: 16px;
|
||||
border: 1px solid $--border-color; /* 全局边框色（#6E757D） */
|
||||
border-radius: 8px; /* 与表格统一圆角 */
|
||||
margin-bottom: $--spacing-lg; /* 单据间间距 */
|
||||
overflow: hidden; /* 避免内部元素溢出圆角 */
|
||||
box-shadow: $--metal-shadow; /* 全局金属质感阴影 */
|
||||
}
|
||||
|
||||
/* 单据头部：深灰背景+紧凑布局，区分内容区域 */
|
||||
.voucher-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
background-color: #f5f5f5;
|
||||
padding: 8px 16px;
|
||||
background: $--table-bg; /* 复用表格背景色（#1E2227） */
|
||||
padding: $--spacing-base $--spacing-lg; /* 内边距：8px 16px */
|
||||
border-bottom: 1px solid $--border-color-lighter; /* 浅色边框分隔头部与表格 */
|
||||
}
|
||||
|
||||
/* 头部单元格：统一文本样式+溢出处理 */
|
||||
.header-cell {
|
||||
flex: 1;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
color: $--color-text-regular; /* 常规文本色（#EAEAEA） */
|
||||
font-size: 13px; /* 与表格文字大小统一 */
|
||||
padding: 0 4px; /* 单元格内间距，避免内容拥挤 */
|
||||
}
|
||||
|
||||
/* 操作按钮组：横向间距+按钮样式优化 */
|
||||
.operation-group {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
gap: $--spacing-base; /* 按钮间距（8px） */
|
||||
justify-content: flex-end; /* 按钮右对齐 */
|
||||
}
|
||||
|
||||
/* 重写Element文本按钮样式：适配深色主题 */
|
||||
.operation-group .el-button--text {
|
||||
color: $--color-text-secondary !important; /* 次要文本色（#B6BDC5） */
|
||||
padding: 2px 8px !important; /* 紧凑 padding */
|
||||
font-size: 12px !important; /* 小号字体，避免占用过多空间 */
|
||||
|
||||
&:hover {
|
||||
color: $--color-primary !important; /* hover时显示主色（#5F7BA0） */
|
||||
background: rgba($--color-primary, 0.15) !important; /* 浅色背景反馈 */
|
||||
}
|
||||
}
|
||||
|
||||
/* 重写Element复选框样式：适配深色背景 */
|
||||
.voucher-header .el-checkbox__inner {
|
||||
background: $--color-background-light; /* 复选框背景（#2F3339） */
|
||||
border-color: $--border-color-light; /* 复选框边框（#828991） */
|
||||
|
||||
&:checked {
|
||||
background: $--color-primary; /* 选中时主色背景 */
|
||||
border-color: $--color-primary; /* 选中时主色边框 */
|
||||
}
|
||||
|
||||
&:hover {
|
||||
border-color: $--color-primary; /* hover时边框变色 */
|
||||
}
|
||||
}
|
||||
|
||||
/* 总计行：主色高亮背景+加粗文本，突出汇总信息 */
|
||||
.total-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
background-color: #f0f9ff;
|
||||
padding: 8px 16px;
|
||||
font-weight: bold;
|
||||
background: rgba($--color-primary, 0.15); /* 主色透明背景（#5F7BA0 15%） */
|
||||
padding: $--spacing-base $--spacing-lg; /* 与头部内边距统一 */
|
||||
font-weight: 600; /* 加粗文本，强调总计 */
|
||||
border-top: 1px solid $--border-color-lighter; /* 边框分隔表格与总计 */
|
||||
}
|
||||
|
||||
/* 总计单元格：统一文本样式+对齐方式 */
|
||||
.total-cell {
|
||||
flex: 1;
|
||||
text-align: left;
|
||||
color: $--color-text-primary; /* 高亮文本色（#FFFFFF） */
|
||||
font-size: 13px; /* 与表格文字大小统一 */
|
||||
padding: 0 4px; /* 单元格内间距 */
|
||||
}
|
||||
|
||||
/* 适配小屏幕：头部内容换行，避免挤压 */
|
||||
@media (max-width: 768px) {
|
||||
.voucher-header {
|
||||
flex-wrap: wrap; /* 允许换行 */
|
||||
gap: $--spacing-sm; /* 换行后元素间距（4px） */
|
||||
}
|
||||
|
||||
.header-cell {
|
||||
flex: 1 1 45%; /* 小屏幕下每行显示2个单元格 */
|
||||
margin: 2px 0; /* 上下间距，区分行 */
|
||||
}
|
||||
|
||||
.operation-group {
|
||||
flex: 1 1 100%; /* 操作组独占一行 */
|
||||
margin-top: $--spacing-sm; /* 与上方内容间距 */
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -46,26 +46,6 @@
|
||||
@click="handleAdd"
|
||||
>新增</el-button>
|
||||
</el-col>
|
||||
<el-col :span="1.5">
|
||||
<el-button
|
||||
type="success"
|
||||
plain
|
||||
icon="el-icon-edit"
|
||||
size="mini"
|
||||
:disabled="single"
|
||||
@click="handleUpdate"
|
||||
>修改</el-button>
|
||||
</el-col>
|
||||
<el-col :span="1.5">
|
||||
<el-button
|
||||
type="danger"
|
||||
plain
|
||||
icon="el-icon-delete"
|
||||
size="mini"
|
||||
:disabled="multiple"
|
||||
@click="handleDelete"
|
||||
>删除</el-button>
|
||||
</el-col>
|
||||
<el-col :span="1.5">
|
||||
<el-button
|
||||
type="warning"
|
||||
|
||||
@@ -73,7 +73,6 @@ export default {
|
||||
<style scoped>
|
||||
.dashboard-root {
|
||||
min-height: 100vh;
|
||||
background: linear-gradient(135deg, #f9fafb 0%, #f3f4f6 100%);
|
||||
padding: 32px;
|
||||
}
|
||||
|
||||
@@ -88,7 +87,6 @@ export default {
|
||||
padding: 24px;
|
||||
border-radius: 16px;
|
||||
backdrop-filter: blur(4px);
|
||||
background: rgba(255, 255, 255, 0.8);
|
||||
box-shadow: 0 4px 24px 0 rgba(0, 0, 0, 0.06);
|
||||
border: 1px solid rgba(255, 255, 255, 0.2);
|
||||
transition: transform 0.2s;
|
||||
@@ -158,7 +156,6 @@ export default {
|
||||
align-items: center;
|
||||
padding: 16px;
|
||||
border-radius: 12px;
|
||||
background: #fff;
|
||||
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.05);
|
||||
transition: all 0.2s;
|
||||
cursor: pointer;
|
||||
@@ -182,7 +179,6 @@ export default {
|
||||
|
||||
.business-module-icon i {
|
||||
font-size: 20px;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.bg-blue {
|
||||
@@ -229,7 +225,6 @@ export default {
|
||||
.monitor-records {
|
||||
padding: 24px;
|
||||
border-radius: 16px;
|
||||
background: #fff;
|
||||
box-shadow: 0 4px 24px 0 rgba(0, 0, 0, 0.06);
|
||||
}
|
||||
|
||||
@@ -279,7 +274,6 @@ export default {
|
||||
|
||||
.monitor-record-icon-inner {
|
||||
font-size: 14px;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.monitor-record-action {
|
||||
@@ -305,7 +299,6 @@ export default {
|
||||
border-radius: 50%;
|
||||
object-fit: cover;
|
||||
border: 2px solid #e0e0e0;
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
.greeting-text {
|
||||
|
||||
@@ -153,10 +153,18 @@ export default {
|
||||
</script>
|
||||
|
||||
<style rel="stylesheet/scss" lang="scss">
|
||||
// 引入全局主题变量，假设你有全局的variables.scss定义了以下变量
|
||||
$--color-background: #2b2f36;
|
||||
$--color-text-primary: #ffffff;
|
||||
$--color-text-secondary: #b6bdc5;
|
||||
$--border-color-light: #4c5057;
|
||||
$--color-primary: #5F7BA0;
|
||||
$--metal-gradient-light: linear-gradient(145deg, #3e434a, #363b41);
|
||||
|
||||
.login-page {
|
||||
display: flex;
|
||||
height: 100vh;
|
||||
background: #f7f8fa;
|
||||
background: $--color-background; // 改用全局深色背景变量
|
||||
}
|
||||
|
||||
.login-logo {
|
||||
@@ -175,6 +183,7 @@ export default {
|
||||
|
||||
.login-title {
|
||||
font-size: 22px;
|
||||
color: $--color-text-primary; // 白色文字
|
||||
}
|
||||
}
|
||||
|
||||
@@ -183,32 +192,38 @@ export default {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
background: #fff;
|
||||
background: $--metal-gradient-light; // 金属渐变背景
|
||||
position: relative;
|
||||
box-shadow: 0 0 20px rgba(0, 0, 0, 0.3); // 增加阴影增强质感
|
||||
}
|
||||
|
||||
.login-box {
|
||||
width: 500px;
|
||||
padding: 40px 32px 32px 32px;
|
||||
border-radius: 12px;
|
||||
box-shadow: 0 4px 32px 0 rgba(0, 0, 0, 0.08);
|
||||
background: #fff;
|
||||
box-shadow: 0 4px 32px 0 rgba(0, 0, 0, 0.2);
|
||||
background: $--color-background; // 深色背景
|
||||
border: 1px solid $--border-color-light; // 浅色边框
|
||||
}
|
||||
|
||||
.login-title-welcome {
|
||||
font-size: 22px;
|
||||
font-weight: 600;
|
||||
color: #222;
|
||||
color: $--color-text-primary; // 白色文字
|
||||
text-align: left;
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
|
||||
.login-form {
|
||||
.el-input {
|
||||
height: 40px;
|
||||
|
||||
input {
|
||||
height: 40px;
|
||||
color: $--color-text-primary; // 白色文字
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
&:focus-within {
|
||||
border-color: $--color-primary; // 聚焦时显示主题色边框
|
||||
}
|
||||
}
|
||||
|
||||
@@ -216,6 +231,7 @@ export default {
|
||||
height: 40px;
|
||||
width: 16px;
|
||||
margin-left: 2px;
|
||||
color: $--color-text-secondary; // 浅灰色图标
|
||||
}
|
||||
}
|
||||
|
||||
@@ -232,6 +248,22 @@ export default {
|
||||
.login-code-img {
|
||||
width: 100%;
|
||||
height: 40px;
|
||||
opacity: 0.8;
|
||||
&:hover {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.el-checkbox {
|
||||
color: $--color-text-primary; // 白色文字
|
||||
}
|
||||
|
||||
.el-button--primary {
|
||||
background: $--color-primary; // 主题色按钮
|
||||
border: none;
|
||||
&:hover {
|
||||
opacity: 0.9;
|
||||
}
|
||||
}
|
||||
|
||||
.login-right {
|
||||
@@ -239,7 +271,7 @@ export default {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
background: linear-gradient(120deg, #e3eafc 0%, #f7f8fa 100%);
|
||||
background: $--metal-gradient-light; // 金属渐变背景
|
||||
}
|
||||
|
||||
.login-illustration {
|
||||
@@ -249,19 +281,20 @@ export default {
|
||||
.illustration-img {
|
||||
width: 320px;
|
||||
margin-bottom: 32px;
|
||||
opacity: 0.9;
|
||||
}
|
||||
|
||||
.login-slogan {
|
||||
.slogan-title {
|
||||
font-size: 20px;
|
||||
font-weight: 600;
|
||||
color: #222;
|
||||
color: $--color-text-primary; // 白色文字
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.slogan-desc {
|
||||
font-size: 15px;
|
||||
color: #888;
|
||||
color: $--color-text-secondary; // 浅灰色文字
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</style>
|
||||
@@ -1,44 +1,84 @@
|
||||
<template>
|
||||
<div style="display: flex; height: calc(100vh - 84px);">
|
||||
<div class="file-preview-container">
|
||||
<!-- 左侧文件列表 -->
|
||||
<div style="width: 250px; border-right: 1px solid #eee; overflow-y: auto;">
|
||||
<div style="padding: 8px 16px; border-bottom: 1px solid #eee; display: flex; gap: 8px; align-items: center;">
|
||||
<button @click="handleClearAll" style="background: #f56c6c; color: #fff; border: none; border-radius: 3px; padding: 4px 10px; cursor: pointer;">清空全部</button>
|
||||
<div class="file-list-sidebar">
|
||||
<!-- 顶部操作栏 -->
|
||||
<div class="file-list-header">
|
||||
<button class="clear-all-btn" @click="handleClearAll">
|
||||
清空全部
|
||||
</button>
|
||||
</div>
|
||||
<div v-if="loadingList" style="padding: 24px; color: #888; text-align: center;">文件列表加载中...</div>
|
||||
<ul v-else style="list-style: none; padding: 0; margin: 0;">
|
||||
|
||||
<!-- 加载状态 -->
|
||||
<div class="list-loading" v-if="loadingList">
|
||||
文件列表加载中...
|
||||
</div>
|
||||
|
||||
<!-- 文件列表 -->
|
||||
<ul class="file-group-list" v-else>
|
||||
<template v-for="(group, groupName) in groupedFiles">
|
||||
<li style="background:#f5f5f5; color:#888; font-weight:bold; padding:8px 16px; display: flex; align-items: center; justify-content: space-between;">
|
||||
<span>{{ groupName }}</span>
|
||||
<button @click.stop="handleClearGroup(groupName)" style="background: #e6a23c; color: #fff; border: none; border-radius: 3px; padding: 2px 8px; font-size: 12px; cursor: pointer;">清空分组</button>
|
||||
<!-- 分组标题 -->
|
||||
<li class="group-header">
|
||||
<span class="group-name">{{ groupName }}</span>
|
||||
<button class="clear-group-btn" @click.stop="handleClearGroup(groupName)">
|
||||
清空分组
|
||||
</button>
|
||||
</li>
|
||||
<li v-for="file in group" :key="file.fileName"
|
||||
:style="{padding: '12px 16px', cursor: 'pointer', background: file.fileName === selectedFileName ? '#f0f0f0' : ''}"
|
||||
@click="selectFile(file)">
|
||||
{{ file.fileName }}
|
||||
<span style="float: right; color: #f56c6c; cursor: pointer;" @click.stop="handleDeleteFile(file)">删除</span>
|
||||
|
||||
<!-- 分组文件项 -->
|
||||
<li
|
||||
class="file-item"
|
||||
v-for="file in group"
|
||||
:key="file.fileName"
|
||||
:class="{ 'file-item--active': file.fileName === selectedFileName }"
|
||||
@click="selectFile(file)"
|
||||
>
|
||||
<div class="file-item__content">
|
||||
<span class="file-name">{{ file.fileName }}</span>
|
||||
<span class="delete-file-btn" @click.stop="handleDeleteFile(file)">
|
||||
删除
|
||||
</span>
|
||||
</div>
|
||||
</li>
|
||||
</template>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<!-- 右侧文件预览 -->
|
||||
<div style="flex: 1; padding: 24px; overflow-y: auto;">
|
||||
<div v-if="loadingContent" style="color: #888;">内容加载中...</div>
|
||||
<div v-else-if="selectedFile">
|
||||
<h3>{{ selectedFile.fileName }}</h3>
|
||||
<div class="file-preview-main">
|
||||
<!-- 加载状态 -->
|
||||
<div class="content-loading" v-if="loadingContent">
|
||||
内容加载中...
|
||||
</div>
|
||||
|
||||
<!-- 选中文件预览 -->
|
||||
<div class="preview-card" v-else-if="selectedFile">
|
||||
<h3 class="preview-title">{{ selectedFile.fileName }}</h3>
|
||||
|
||||
<!-- 文本文件预览 -->
|
||||
<template v-if="selectedFile.fileType === 'text'">
|
||||
<pre style="background: #fafafa; padding: 16px; border-radius: 4px; min-height: 300px;">{{ selectedFile.fileContent }}</pre>
|
||||
<pre class="text-preview">{{ selectedFile.fileContent }}</pre>
|
||||
</template>
|
||||
|
||||
<!-- 图片文件预览（保留注释，需时启用） -->
|
||||
<!-- <template v-else-if="selectedFile.fileType === 'image'">
|
||||
<div style="padding: 16px; background: #fafafa; border-radius: 4px; min-height: 300px; display: flex; align-items: center; justify-content: center;">
|
||||
<img :src="selectedFile.fileContent" alt="图片预览" style="max-width: 100%; max-height: 600px;" />
|
||||
<div class="image-preview-container">
|
||||
<img :src="selectedFile.fileContent" alt="图片预览" class="image-preview" />
|
||||
</div>
|
||||
</template> -->
|
||||
|
||||
<!-- 其他文件类型 -->
|
||||
<template v-else>
|
||||
<div style="background: #fafafa; padding: 16px; border-radius: 4px; min-height: 300px; color: #f56c6c;">{{ selectedFile.fileContent }}</div>
|
||||
<div class="unsupported-type">
|
||||
{{ selectedFile.fileContent }}
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
<div v-else style="color: #888;">请选择左侧文件进行预览</div>
|
||||
|
||||
<!-- 未选中文件 -->
|
||||
<div class="no-selection" v-else>
|
||||
请选择左侧文件进行预览
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
@@ -58,7 +98,7 @@ export default {
|
||||
},
|
||||
created() {
|
||||
this.fetchFileList();
|
||||
getFileStats()
|
||||
getFileStats(); // 补充括号，修复语法问题
|
||||
},
|
||||
computed: {
|
||||
groupedFiles() {
|
||||
@@ -79,6 +119,7 @@ export default {
|
||||
weekAgo.setDate(today.getDate() - 6);
|
||||
const monthStart = new Date(now.getFullYear(), now.getMonth(), 1);
|
||||
const threeMonthsAgo = new Date(now.getFullYear(), now.getMonth() - 2, 1);
|
||||
|
||||
(this.files || []).forEach(file => {
|
||||
const d = file.lastModified ? new Date(file.lastModified) : null;
|
||||
if (!d) {
|
||||
@@ -99,6 +140,7 @@ export default {
|
||||
groups['更久'].push(file);
|
||||
}
|
||||
});
|
||||
|
||||
// 只返回有文件的分组
|
||||
return Object.fromEntries(Object.entries(groups).filter(([k, v]) => v.length));
|
||||
}
|
||||
@@ -111,10 +153,12 @@ export default {
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning',
|
||||
confirmButtonClass: 'el-button--warning',
|
||||
cancelButtonClass: 'el-button--text'
|
||||
}).then(async () => {
|
||||
const names = this.files.map(f => f.fileName);
|
||||
await this.batchDelete(names);
|
||||
}).catch(() => {});
|
||||
}).catch(() => { });
|
||||
},
|
||||
|
||||
// 清空某个分组
|
||||
@@ -125,10 +169,12 @@ export default {
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning',
|
||||
confirmButtonClass: 'el-button--warning',
|
||||
cancelButtonClass: 'el-button--text'
|
||||
}).then(async () => {
|
||||
const names = group.map(f => f.fileName);
|
||||
await this.batchDelete(names);
|
||||
}).catch(() => {});
|
||||
}).catch(() => { });
|
||||
},
|
||||
|
||||
// 批量删除
|
||||
@@ -154,6 +200,8 @@ export default {
|
||||
this.loadingList = false;
|
||||
}
|
||||
},
|
||||
|
||||
// 获取文件列表
|
||||
async fetchFileList() {
|
||||
this.loadingList = true;
|
||||
this.files = [];
|
||||
@@ -168,6 +216,7 @@ export default {
|
||||
}
|
||||
},
|
||||
|
||||
// 选择文件预览
|
||||
async selectFile(file) {
|
||||
this.selectedFileName = file.fileName;
|
||||
this.selectedFile = null;
|
||||
@@ -175,26 +224,25 @@ export default {
|
||||
try {
|
||||
const isText = /\.(txt|md|json|js|ts|log|csv|xml|html|css)$/i.test(file.fileName);
|
||||
const isImage = /\.(png|jpe?g|gif|bmp|webp|svg)$/i.test(file.fileName);
|
||||
|
||||
if (isText) {
|
||||
const textResult = await getFileContent(file.fileName)
|
||||
this.selectedFile = {...textResult.data, fileType: 'text'};
|
||||
}
|
||||
const textResult = await getFileContent(file.fileName);
|
||||
this.selectedFile = { ...textResult.data, fileType: 'text' };
|
||||
}
|
||||
// 图片预览逻辑（保留，需时启用）
|
||||
// else if (isImage) {
|
||||
// // 图片文件
|
||||
// let blob = null;
|
||||
// if (typeof this.$options.components?.getFileContent === 'function') {
|
||||
// blob = await this.$options.components.getFileContent(file.fileName);
|
||||
// } else if (typeof window.getFileContent === 'function') {
|
||||
// blob = await window.getFileContent(file.fileName);
|
||||
// }
|
||||
// // blob 可能是base64字符串或Blob对象，需适配
|
||||
// let imgUrl = '';
|
||||
// if (blob instanceof Blob) {
|
||||
// imgUrl = URL.createObjectURL(blob);
|
||||
// } else if (typeof blob === 'string' && blob.startsWith('data:image')) {
|
||||
// imgUrl = blob;
|
||||
// } else if (typeof blob === 'string') {
|
||||
// // 假设后端返回base64
|
||||
// imgUrl = 'data:image/*;base64,' + blob;
|
||||
// }
|
||||
// this.selectedFile = { fileName: file.fileName, fileContent: imgUrl, fileType: 'image' };
|
||||
@@ -206,11 +254,13 @@ export default {
|
||||
this.loadingContent = false;
|
||||
}
|
||||
},
|
||||
|
||||
// 单个文件删除
|
||||
handleDeleteFile(file) {
|
||||
deleteFile(file.fileName)
|
||||
.then(() => {
|
||||
this.$message.success('文件删除成功');
|
||||
this.fetchFileList(); // 重新加载文件列表
|
||||
this.fetchFileList();
|
||||
})
|
||||
.catch(err => {
|
||||
this.$message.error('删除文件失败: ' + (err.message || '未知错误'));
|
||||
@@ -221,5 +271,291 @@ export default {
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
/* 可根据需要自定义样式 */
|
||||
</style>
|
||||
/* 全局容器 */
|
||||
.file-preview-container {
|
||||
display: flex;
|
||||
height: calc(100vh - 84px);
|
||||
background: var(--color-background);
|
||||
color: var(--color-text-regular);
|
||||
}
|
||||
|
||||
/* 左侧文件列表侧边栏 */
|
||||
.file-list-sidebar {
|
||||
width: 250px;
|
||||
border-right: 1px solid var(--border-color-light);
|
||||
overflow-y: auto;
|
||||
background: var(--color-background-light);
|
||||
}
|
||||
|
||||
/* 列表顶部操作栏 */
|
||||
.file-list-header {
|
||||
padding: var(--spacing-base) var(--spacing-lg);
|
||||
border-bottom: 1px solid var(--border-color-light);
|
||||
display: flex;
|
||||
gap: var(--spacing-base);
|
||||
align-items: center;
|
||||
background: var(--metal-gradient-light);
|
||||
}
|
||||
|
||||
/* 清空全部按钮 */
|
||||
.clear-all-btn {
|
||||
background: linear-gradient(145deg, #e53e3e, #c53030);
|
||||
color: #fff;
|
||||
border: 1px solid #9b2c2c;
|
||||
border-radius: 4px;
|
||||
padding: 4px 10px;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s;
|
||||
box-shadow: var(--metal-shadow-inset);
|
||||
}
|
||||
|
||||
.clear-all-btn:hover {
|
||||
box-shadow: var(--metal-shadow);
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
|
||||
.clear-all-btn:active {
|
||||
box-shadow: var(--metal-shadow-inset);
|
||||
transform: translateY(0);
|
||||
}
|
||||
|
||||
/* 列表加载状态 */
|
||||
.list-loading {
|
||||
padding: 24px;
|
||||
color: var(--color-text-secondary);
|
||||
text-align: center;
|
||||
background: var(--metal-gradient-light);
|
||||
}
|
||||
|
||||
/* 文件分组列表 */
|
||||
.file-group-list {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
/* 分组标题栏 */
|
||||
.group-header {
|
||||
background: var(--metal-gradient-dark);
|
||||
color: var(--color-text-primary);
|
||||
font-weight: 600;
|
||||
padding: var(--spacing-base) var(--spacing-lg);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
border-bottom: 1px solid var(--border-color-lighter);
|
||||
}
|
||||
|
||||
/* 清空分组按钮 */
|
||||
.clear-group-btn {
|
||||
background: linear-gradient(145deg, #e6a23c, #d48822);
|
||||
color: #fff;
|
||||
border: 1px solid #b87319;
|
||||
border-radius: 3px;
|
||||
padding: 2px 8px;
|
||||
font-size: 12px;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s;
|
||||
box-shadow: var(--metal-shadow-inset);
|
||||
}
|
||||
|
||||
.clear-group-btn:hover {
|
||||
box-shadow: var(--metal-shadow);
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
|
||||
.clear-group-btn:active {
|
||||
box-shadow: var(--metal-shadow-inset);
|
||||
transform: translateY(0);
|
||||
}
|
||||
|
||||
/* 文件项基础样式 */
|
||||
.file-item {
|
||||
padding: 12px var(--spacing-lg);
|
||||
cursor: pointer;
|
||||
transition: all 0.2s;
|
||||
background: var(--color-background-light);
|
||||
border-left: 3px solid transparent;
|
||||
}
|
||||
|
||||
.file-item:hover {
|
||||
background: var(--metal-gradient-light);
|
||||
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
/* 文件项选中状态 */
|
||||
.file-item--active {
|
||||
background: rgba(var(--color-primary-rgb), 0.2);
|
||||
border-left: 3px solid var(--color-primary);
|
||||
}
|
||||
|
||||
/* 文件项内容容器 */
|
||||
.file-item__content {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
/* 文件名 */
|
||||
.file-name {
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
max-width: 180px;
|
||||
}
|
||||
|
||||
/* 删除文件按钮 */
|
||||
.delete-file-btn {
|
||||
color: var(--color-danger);
|
||||
cursor: pointer;
|
||||
padding: 2px 4px;
|
||||
border-radius: 3px;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
|
||||
.delete-file-btn:hover {
|
||||
background: rgba(var(--color-danger-rgb), 0.15);
|
||||
}
|
||||
|
||||
/* 右侧预览主区域 */
|
||||
.file-preview-main {
|
||||
flex: 1;
|
||||
padding: var(--spacing-lg);
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
/* 内容加载状态 */
|
||||
.content-loading {
|
||||
color: var(--color-text-secondary);
|
||||
padding: 24px;
|
||||
background: var(--metal-gradient-light);
|
||||
border-radius: 6px;
|
||||
border: 1px solid var(--border-color-light);
|
||||
}
|
||||
|
||||
/* 预览卡片容器 */
|
||||
.preview-card {
|
||||
background: var(--metal-gradient-light);
|
||||
border-radius: 6px;
|
||||
border: 1px solid var(--border-color-light);
|
||||
padding: var(--spacing-lg);
|
||||
box-shadow: var(--metal-shadow);
|
||||
}
|
||||
|
||||
/* 预览标题 */
|
||||
.preview-title {
|
||||
color: var(--color-text-primary);
|
||||
margin-top: 0;
|
||||
padding-bottom: var(--spacing-base);
|
||||
border-bottom: 1px solid var(--border-color-lighter);
|
||||
}
|
||||
|
||||
/* 文本预览样式 */
|
||||
.text-preview {
|
||||
background: var(--table-bg);
|
||||
color: var(--color-text-regular);
|
||||
padding: var(--spacing-lg);
|
||||
border-radius: 4px;
|
||||
min-height: 300px;
|
||||
border: 1px solid var(--border-color-lighter);
|
||||
overflow-x: auto;
|
||||
font-size: 13px;
|
||||
line-height: 1.5;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
/* 图片预览容器（保留，需时启用） */
|
||||
/* .image-preview-container {
|
||||
padding: var(--spacing-lg);
|
||||
background: var(--table-bg);
|
||||
border-radius: 4px;
|
||||
min-height: 300px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border: 1px solid var(--border-color-lighter);
|
||||
}
|
||||
|
||||
.image-preview {
|
||||
max-width: 100%;
|
||||
max-height: 600px;
|
||||
border-radius: 4px;
|
||||
box-shadow: var(--metal-shadow);
|
||||
} */
|
||||
|
||||
/* 不支持的文件类型样式 */
|
||||
.unsupported-type {
|
||||
background: var(--table-bg);
|
||||
padding: var(--spacing-lg);
|
||||
border-radius: 4px;
|
||||
min-height: 300px;
|
||||
color: var(--color-warning);
|
||||
border: 1px solid var(--border-color-lighter);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
/* 未选择文件状态 */
|
||||
.no-selection {
|
||||
color: var(--color-text-secondary);
|
||||
padding: 24px;
|
||||
background: var(--metal-gradient-light);
|
||||
border-radius: 6px;
|
||||
border: 1px solid var(--border-color-light);
|
||||
}
|
||||
|
||||
/* 滚动条样式优化 */
|
||||
::-webkit-scrollbar {
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-track {
|
||||
background: var(--color-background-light);
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb {
|
||||
background: var(--border-color-light);
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb:hover {
|
||||
background: var(--border-color-base);
|
||||
}
|
||||
|
||||
/* 修复Element消息提示框样式（适配深色） */
|
||||
::v-deep .el-message {
|
||||
background: var(--metal-gradient-light);
|
||||
border-color: var(--border-color-light);
|
||||
color: var(--color-text-regular);
|
||||
}
|
||||
|
||||
::v-deep .el-message__icon--success {
|
||||
color: var(--color-success);
|
||||
}
|
||||
|
||||
::v-deep .el-message__icon--error {
|
||||
color: var(--color-danger);
|
||||
}
|
||||
|
||||
::v-deep .el-message__icon--info {
|
||||
color: var(--color-info);
|
||||
}
|
||||
|
||||
/* 修复确认对话框样式 */
|
||||
::v-deep .el-dialog {
|
||||
background: var(--metal-gradient-light) !important;
|
||||
border-color: var(--border-color-light) !important;
|
||||
}
|
||||
|
||||
::v-deep .el-dialog__title {
|
||||
color: var(--color-text-primary) !important;
|
||||
}
|
||||
|
||||
::v-deep .el-dialog__body {
|
||||
color: var(--color-text-regular) !important;
|
||||
}
|
||||
</style>
|
||||
@@ -148,22 +148,6 @@
|
||||
</el-card>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
<!-- 操作按钮 -->
|
||||
<div class="action-buttons">
|
||||
<el-button type="primary" @click="refreshData" :loading="loading">
|
||||
<i class="el-icon-refresh"></i>
|
||||
刷新数据
|
||||
</el-button>
|
||||
<!-- <el-button @click="exportData">
|
||||
<i class="el-icon-download"></i>
|
||||
导出排行榜
|
||||
</el-button>
|
||||
<el-button @click="openSettings">
|
||||
<i class="el-icon-setting"></i>
|
||||
设置
|
||||
</el-button> -->
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@@ -394,7 +378,6 @@ export default {
|
||||
<style scoped>
|
||||
.hot-product-page {
|
||||
padding: 20px;
|
||||
background: #f5f7fa;
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
|
||||
@@ -328,9 +328,9 @@ export default {
|
||||
.stat-item {
|
||||
text-align: center;
|
||||
padding: 15px;
|
||||
background: #f8f9fa;
|
||||
background: #222;
|
||||
border-radius: 8px;
|
||||
border: 1px solid #e9ecef;
|
||||
border: 1px solid #111;
|
||||
}
|
||||
|
||||
.stat-number {
|
||||
|
||||
@@ -179,7 +179,6 @@ export default {
|
||||
<style scoped>
|
||||
.order-analysis-dashboard {
|
||||
padding: 24px;
|
||||
background-color: #f7f8fa;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user