From 8583f605bd2bc76c869e230a51b5f58482a30bd8 Mon Sep 17 00:00:00 2001 From: wangyu <823267011@qq.com> Date: Mon, 29 Jun 2026 10:41:10 +0800 Subject: [PATCH] =?UTF-8?q?style(frontend):=20=E5=85=A8=E5=B1=80=E6=A0=B7?= =?UTF-8?q?=E5=BC=8F=E6=94=B9=E4=B8=BA=20klp-ui=20=E6=B5=85=E8=89=B2?= =?UTF-8?q?=E7=BA=A2=E4=B8=BB=E9=A2=98?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - variables.scss 整盘重配色：浅灰背景/白卡片、#C03639 红主色、element 标准状态色与字体栈 - global.scss element-ui 覆写由深色改为浅色+红主色，卡片加轻投影 - Material/Message 视图内硬编码深色数据面板改为浅色 Co-Authored-By: Claude Opus 4.8 --- frontend/src/assets/styles/global.scss | 86 ++++++++++------------- frontend/src/assets/styles/variables.scss | 59 ++++++++-------- frontend/src/views/Material.vue | 24 +++---- frontend/src/views/Message.vue | 2 +- 4 files changed, 79 insertions(+), 92 deletions(-) diff --git a/frontend/src/assets/styles/global.scss b/frontend/src/assets/styles/global.scss index 6d0a204..c51802b 100644 --- a/frontend/src/assets/styles/global.scss +++ b/frontend/src/assets/styles/global.scss @@ -37,8 +37,9 @@ body { .card { background: $bg-card; border: 1px solid $border; - border-radius: 2px; + border-radius: 4px; overflow: hidden; + box-shadow: 0 1px 4px rgba(0, 0, 0, .04); &-header { display: flex; @@ -99,7 +100,7 @@ body { font-size: 12px; th { - background: $bg-secondary; + background: $bg-panel; color: $text-secondary; font-weight: 700; padding: 6px 10px; @@ -250,60 +251,45 @@ textarea.kv-input { resize: vertical; min-height: 64px; } .mt12 { margin-top: 12px; } .fw { width: 100%; } -// ─── Element UI 暗色覆写 ─── -.el-loading-mask { background: rgba($bg-card, .7) !important; } +// ─── Element UI 浅色 + 红主题覆写 ─── +.el-loading-mask { background: rgba(255, 255, 255, .7) !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 { - background: $bg-card !important; - border: 1px solid $border !important; - border-radius: 2px !important; - - &__header { background: $bg-panel; border-bottom: 1px solid $border; border-left: 3px solid $sms-teal; padding: 10px 14px; } - &__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; } + border-radius: 4px !important; + overflow: hidden; + &__header { border-bottom: 1px solid $border; border-left: 3px solid $sms-teal; padding: 12px 16px; } + &__title { color: $text-primary !important; font-weight: 700; } + &__footer { border-top: 1px solid $border; padding: 10px 16px; } } -.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; - 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__item.selected { color: $sms-teal !important; } -.el-select-dropdown { - background: $bg-panel !important; - border-color: $border !important; - border-radius: 2px !important; - .el-select-dropdown__item { color: $text-secondary; &.selected, &:hover { color: $sms-teal; background: rgba($sms-teal, .08); } } -} +// 分页 / 单选 / 复选 / 开关 主色 +.el-pagination .el-pager li.active, +.el-pagination .el-pager li:hover { color: $sms-teal !important; } +.el-radio__input.is-checked .el-radio__inner, +.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-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; } -} +.el-message-box__btns .el-button--primary { background-color: $sms-blue !important; border-color: $sms-blue !important; } diff --git a/frontend/src/assets/styles/variables.scss b/frontend/src/assets/styles/variables.scss index 203164a..0bd4eb2 100644 --- a/frontend/src/assets/styles/variables.scss +++ b/frontend/src/assets/styles/variables.scss @@ -1,38 +1,39 @@ -// ─── 工业暗色调色板（参考西门子 WinCC 风格）─── -$bg-base: #0b0f16; -$bg-primary: #0f1420; -$bg-secondary: #141a28; -$bg-card: #182030; -$bg-panel: #1c2538; -$bg-hover: #22304a; -$bg-input: #0b0f16; +// ─── 浅色调色板（参考 klp-ui / RuoYi element-ui 风格）─── +// 变量名保持与旧暗色主题一致，仅修改取值，使全部视图自动换肤 +$bg-base: #f0f2f5; // 页面底色 +$bg-primary: #f0f2f5; // 主内容区 / 导航条 +$bg-secondary: #ffffff; // 顶栏 +$bg-card: #ffffff; // 卡片 +$bg-panel: #f5f7fa; // 卡片头 / 面板 +$bg-hover: #ecf5ff; // 悬浮 +$bg-input: #ffffff; // 输入框 -$border: #263044; -$border-light: #2e3d58; -$border-active:#00a3be; +$border: #e4e7ed; +$border-light: #dcdfe6; +$border-active:#c03639; -$text-primary: #c8d6e8; -$text-secondary: #6a82a0; -$text-muted: #3e5070; +$text-primary: #303133; +$text-secondary: #606266; +$text-muted: #909399; -// 西门子主色调 - 石油蓝绿 -$sms-teal: #00a3be; -$sms-teal-dim: #007a8c; -$sms-blue: #0066b3; -$sms-blue-dim: #004d88; +// klp-ui 主色 - 红 +$sms-teal: #c03639; +$sms-teal-dim: #a52d30; +$sms-blue: #c03639; +$sms-blue-dim: #a52d30; -// 状态色 -$status-run: #3db86e; -$status-warn: #d4880a; -$status-fault: #c8322e; -$status-stop: #3e5070; +// 状态色（element-ui 标准） +$status-run: #67c23a; +$status-warn: #e6a23c; +$status-fault: #f56c6c; +$status-stop: #909399; -$accent-green: #3db86e; -$accent-yellow: #d4880a; -$accent-red: #c8322e; -$accent-cyan: #00a3be; +$accent-green: #67c23a; +$accent-yellow: #e6a23c; +$accent-red: #f56c6c; +$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; // 向后兼容 diff --git a/frontend/src/views/Material.vue b/frontend/src/views/Material.vue index 0ec4dc7..3e987e6 100644 --- a/frontend/src/views/Material.vue +++ b/frontend/src/views/Material.vue @@ -705,27 +705,27 @@ export default { } .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-item { display: flex; align-items: center; gap: 6px; font-size: 12px; color: #c8d4e0; padding: 2px 0; } -.dg-item .lbl { color: #8b9aab; flex: 1; min-width: 140px; } +.dg-item { display: flex; align-items: center; gap: 6px; font-size: 12px; color: $text-primary; padding: 2px 0; } +.dg-item .lbl { color: $text-muted; flex: 1; min-width: 140px; } .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; - 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; } -.tracking-table tr.row-active { background: rgba(255, 221, 68, 0.10); } -.tracking-table tr.row-active td { color: #ffdd44 !important; font-weight: 600; } -.tracking-table tr.row-passed td { color: #6b8aaa; } -.tracking-table tr.row-pending td { color: #5a6a78; } +.tracking-table tr.row-active { background: rgba($sms-teal, 0.08); } +.tracking-table tr.row-active td { color: $sms-teal !important; font-weight: 600; } +.tracking-table tr.row-passed td { color: $text-muted; } +.tracking-table tr.row-pending td { color: $text-muted; } .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; } .tracking-table th, .tracking-table td { white-space: nowrap; } diff --git a/frontend/src/views/Message.vue b/frontend/src/views/Message.vue index ab8ba15..7157ce9 100644 --- a/frontend/src/views/Message.vue +++ b/frontend/src/views/Message.vue @@ -153,7 +153,7 @@ export default { @import '@/assets/styles/variables'; .action-link { color: $sms-highlight; cursor: pointer; font-size: 12px; &:hover { text-decoration: underline; } } .raw-box { - background: #0a0f18; color: #d4d4d4; + background: $bg-panel; color: $text-primary; padding: 12px; border-radius: 4px; border: 1px solid $border; font-size: 11px; font-family: $font-mono; max-height: 180px; overflow-y: auto;