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

style(frontend): 全局样式改为 klp-ui 浅色红主题

Browse Source 
- variables.scss 整盘重配色：浅灰背景/白卡片、#C03639 红主色、element 标准状态色与字体栈
- global.scss element-ui 覆写由深色改为浅色+红主色，卡片加轻投影
- Material/Message 视图内硬编码深色数据面板改为浅色

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
wangyu
2026-06-29 10:41:10 +08:00
parent def3ef24a0
commit 8583f605bd
4 changed files with 79 additions and 92 deletions
Download Patch File Download Diff File Expand all files Collapse all files

86
frontend/src/assets/styles/global.scss
View File

@@ -37,8 +37,9 @@ body {
.card { .card {
background: $bg-card; background: $bg-card;
border: 1px solid $border; border: 1px solid $border;
border-radius: 2px; border-radius: 4px;
overflow: hidden; overflow: hidden;
box-shadow: 0 1px 4px rgba(0, 0, 0, .04);
&-header { &-header {
display: flex; display: flex;
@@ -99,7 +100,7 @@ body {
font-size: 12px; font-size: 12px;
th { th {
background: $bg-secondary; background: $bg-panel;
color: $text-secondary; color: $text-secondary;
font-weight: 700; font-weight: 700;
padding: 6px 10px; padding: 6px 10px;
@@ -250,60 +251,45 @@ textarea.kv-input { resize: vertical; min-height: 64px; }
.mt12 { margin-top: 12px; } .mt12 { margin-top: 12px; }
.fw { width: 100%; } .fw { width: 100%; }
// ─── Element UI 暗色覆写 ─── // ─── Element UI 浅色 + 红主题覆写 ───
.el-loading-mask { background: rgba($bg-card, .7) !important; } .el-loading-mask { background: rgba(255, 255, 255, .7) !important; }
.el-loading-spinner .path { stroke: $sms-teal !important; } .el-loading-spinner .path { stroke: $sms-teal !important; }
.el-loading-spinner .el-loading-text { color: $sms-teal !important; }
// 主按钮 / 主色文字按钮
.el-button--primary {
background-color: $sms-blue !important;
border-color: $sms-blue !important;
&:hover, &:focus { background-color: lighten($sms-blue, 8%) !important; border-color: lighten($sms-blue, 8%) !important; }
}
.el-button--text { color: $sms-teal !important; }
.el-dialog { .el-dialog {
background: $bg-card !important; border-radius: 4px !important;
border: 1px solid $border !important; overflow: hidden;
border-radius: 2px !important; &__header { border-bottom: 1px solid $border; border-left: 3px solid $sms-teal; padding: 12px 16px; }
&__title { color: $text-primary !important; font-weight: 700; }
&__header { background: $bg-panel; border-bottom: 1px solid $border; border-left: 3px solid $sms-teal; padding: 10px 14px; } &__footer { border-top: 1px solid $border; padding: 10px 16px; }
&__title { color: $text-primary !important; font-size: 12px; font-weight: 700; letter-spacing: .4px; text-transform: uppercase; }
&__headerbtn .el-dialog__close { color: $text-secondary !important; }
&__body { background: $bg-card; color: $text-primary; padding: 14px; }
&__footer { background: $bg-panel; border-top: 1px solid $border; padding: 8px 14px; }
} }
.el-form-item__label { color: $text-secondary !important; font-size: 11px; } // 输入框聚焦红色描边
.el-input__inner:focus,
.el-textarea__inner:focus { border-color: $sms-teal !important; }
.el-input__inner, .el-textarea__inner, .el-select .el-input__inner { // 下拉选中项
background: $bg-input !important; .el-select-dropdown__item.selected { color: $sms-teal !important; }
border-color: $border-light !important;
border-radius: 2px !important;
color: $text-primary !important;
font-family: $font-mono;
font-size: 12px;
&:focus { border-color: $sms-teal !important; }
}
.el-select-dropdown { // 分页 / 单选 / 复选 / 开关 主色
background: $bg-panel !important; .el-pagination .el-pager li.active,
border-color: $border !important; .el-pagination .el-pager li:hover { color: $sms-teal !important; }
border-radius: 2px !important; .el-radio__input.is-checked .el-radio__inner,
.el-select-dropdown__item { color: $text-secondary; &.selected, &:hover { color: $sms-teal; background: rgba($sms-teal, .08); } } .el-checkbox__input.is-checked .el-checkbox__inner { background: $sms-blue !important; border-color: $sms-blue !important; }
} .el-radio__input.is-checked + .el-radio__label,
.el-checkbox__input.is-checked + .el-checkbox__label { color: $sms-teal !important; }
.el-switch.is-checked .el-switch__core { border-color: $sms-blue !important; background-color: $sms-blue !important; }
.el-date-editor .el-range-input, // 标签页 / 菜单激活态
.el-date-editor .el-range-separator { background: transparent !important; color: $text-secondary !important; } .el-tabs__item.is-active { color: $sms-teal !important; }
.el-tabs__active-bar { background-color: $sms-blue !important; }
.el-pagination { .el-message-box__btns .el-button--primary { background-color: $sms-blue !important; border-color: $sms-blue !important; }
.el-pager li {
background: $bg-panel; color: $text-secondary; border: 1px solid $border; border-radius: 2px;
&.active { color: $sms-teal; border-color: $sms-teal; }
}
button { background: $bg-panel !important; color: $text-secondary !important; border: 1px solid $border; border-radius: 2px; }
}
.el-radio__label { color: $text-secondary; font-size: 11px; }
.el-radio__inner { background: $bg-input; border-color: $border-light; }
.el-radio__input.is-checked .el-radio__inner { background: $sms-blue; border-color: $sms-blue; }
.el-message-box {
background: $bg-card !important;
border-color: $border !important;
border-radius: 2px !important;
&__title { color: $text-primary !important; font-size: 12px; }
&__content { color: $text-secondary !important; }
}

59
frontend/src/assets/styles/variables.scss
View File

@@ -1,38 +1,39 @@
// ─── 工业暗色调色板（参考西门子 WinCC 风格）─── // ─── 浅色调色板（参考 klp-ui / RuoYi element-ui 风格）───
$bg-base: #0b0f16; // 变量名保持与旧暗色主题一致，仅修改取值，使全部视图自动换肤
$bg-primary: #0f1420; $bg-base: #f0f2f5; // 页面底色
$bg-secondary: #141a28; $bg-primary: #f0f2f5; // 主内容区 / 导航条
$bg-card: #182030; $bg-secondary: #ffffff; // 顶栏
$bg-panel: #1c2538; $bg-card: #ffffff; // 卡片
$bg-hover: #22304a; $bg-panel: #f5f7fa; // 卡片头 / 面板
$bg-input: #0b0f16; $bg-hover: #ecf5ff; // 悬浮
$bg-input: #ffffff; // 输入框
$border: #263044; $border: #e4e7ed;
$border-light: #2e3d58; $border-light: #dcdfe6;
$border-active:#00a3be; $border-active:#c03639;
$text-primary: #c8d6e8; $text-primary: #303133;
$text-secondary: #6a82a0; $text-secondary: #606266;
$text-muted: #3e5070; $text-muted: #909399;
// 西门子主色调 - 石油蓝绿 // klp-ui 主色 - 红
$sms-teal: #00a3be; $sms-teal: #c03639;
$sms-teal-dim: #007a8c; $sms-teal-dim: #a52d30;
$sms-blue: #0066b3; $sms-blue: #c03639;
$sms-blue-dim: #004d88; $sms-blue-dim: #a52d30;
// 状态色 // 状态色（element-ui 标准）
$status-run: #3db86e; $status-run: #67c23a;
$status-warn: #d4880a; $status-warn: #e6a23c;
$status-fault: #c8322e; $status-fault: #f56c6c;
$status-stop: #3e5070; $status-stop: #909399;
$accent-green: #3db86e; $accent-green: #67c23a;
$accent-yellow: #d4880a; $accent-yellow: #e6a23c;
$accent-red: #c8322e; $accent-red: #f56c6c;
$accent-cyan: #00a3be; $accent-cyan: #c03639;
$font-main: 'Segoe UI', 'Microsoft YaHei UI', 'PingFang SC', sans-serif; $font-main: 'Helvetica Neue', Helvetica, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', Arial, sans-serif;
$font-mono: 'Consolas', 'Courier New', monospace; $font-mono: 'Consolas', 'Courier New', monospace;
// 向后兼容 // 向后兼容

24
frontend/src/views/Material.vue
View File

@@ -705,27 +705,27 @@ export default {
} }
.btn-sm { padding: 2px 10px; font-size: 11px; } .btn-sm { padding: 2px 10px; font-size: 11px; }
.hd-cnt { font-size: 11px; color: #6b7c8d; margin-left: 8px; font-weight: 400; } .hd-cnt { font-size: 11px; color: $text-muted; margin-left: 8px; font-weight: 400; }
.sec-body { padding: 10px 14px; background: #161d24; } .sec-body { padding: 10px 14px; background: $bg-card; }
.dg { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 4px 18px; } .dg { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 4px 18px; }
.dg-item { display: flex; align-items: center; gap: 6px; font-size: 12px; color: #c8d4e0; padding: 2px 0; } .dg-item { display: flex; align-items: center; gap: 6px; font-size: 12px; color: $text-primary; padding: 2px 0; }
.dg-item .lbl { color: #8b9aab; flex: 1; min-width: 140px; } .dg-item .lbl { color: $text-muted; flex: 1; min-width: 140px; }
.dg-item .vbox { .dg-item .vbox {
background: #0e1418; border: 1px solid #2a3540; padding: 1px 8px; background: $bg-panel; border: 1px solid $border; padding: 1px 8px;
min-width: 70px; text-align: right; font-family: monospace; min-width: 70px; text-align: right; font-family: monospace;
color: #00c8ff; border-radius: 2px; color: $sms-teal; border-radius: 2px;
} }
.dg-item .unit { color: #6b7c8d; font-size: 11px; min-width: 44px; } .dg-item .unit { color: $text-muted; font-size: 11px; min-width: 44px; }
.data-table.compact th, .data-table.compact td { padding: 5px 8px; font-size: 11.5px; } .data-table.compact th, .data-table.compact td { padding: 5px 8px; font-size: 11.5px; }
.tracking-table tr.row-active { background: rgba(255, 221, 68, 0.10); } .tracking-table tr.row-active { background: rgba($sms-teal, 0.08); }
.tracking-table tr.row-active td { color: #ffdd44 !important; font-weight: 600; } .tracking-table tr.row-active td { color: $sms-teal !important; font-weight: 600; }
.tracking-table tr.row-passed td { color: #6b8aaa; } .tracking-table tr.row-passed td { color: $text-muted; }
.tracking-table tr.row-pending td { color: #5a6a78; } .tracking-table tr.row-pending td { color: $text-muted; }
.sec-tag { display: inline-block; font-size: 10.5px; padding: 1px 6px; .sec-tag { display: inline-block; font-size: 10.5px; padding: 1px 6px;
border: 1px solid; border-radius: 3px; background: rgba(0,0,0,.25); border: 1px solid; border-radius: 3px; background: rgba(0,0,0,.02);
font-weight: 600; letter-spacing: 0.5px; white-space: nowrap; } font-weight: 600; letter-spacing: 0.5px; white-space: nowrap; }
.tracking-table th, .tracking-table td { white-space: nowrap; } .tracking-table th, .tracking-table td { white-space: nowrap; }
</style> </style>

2
frontend/src/views/Message.vue
View File

@@ -153,7 +153,7 @@ export default {
@import '@/assets/styles/variables'; @import '@/assets/styles/variables';
.action-link { color: $sms-highlight; cursor: pointer; font-size: 12px; &:hover { text-decoration: underline; } } .action-link { color: $sms-highlight; cursor: pointer; font-size: 12px; &:hover { text-decoration: underline; } }
.raw-box { .raw-box {
background: #0a0f18; color: #d4d4d4; background: $bg-panel; color: $text-primary;
padding: 12px; border-radius: 4px; border: 1px solid $border; padding: 12px; border-radius: 4px; border: 1px solid $border;
font-size: 11px; font-family: $font-mono; font-size: 11px; font-family: $font-mono;
max-height: 180px; overflow-y: auto; max-height: 180px; overflow-y: auto;