From 833c16a0e9aa61fd3cfd3df7689232c315f24403 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E7=A0=82=E7=B3=96?= Date: Wed, 24 Sep 2025 17:23:06 +0800 Subject: [PATCH] =?UTF-8?q?=E2=9C=A8=20feat:=20=E4=B8=BB=E9=A2=98=E5=8F=98?= =?UTF-8?q?=E6=9B=B4=E4=B8=BA=E7=99=BD=E8=89=B2?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- klp-ui/.env.development | 2 +- klp-ui/.env.production | 2 +- klp-ui/.env.stage | 2 +- klp-ui/src/assets/styles/element-ui.scss | 125 ++++++++--------- klp-ui/src/assets/styles/klp.scss | 130 +++++++++--------- klp-ui/src/assets/styles/sidebar.scss | 27 ++-- klp-ui/src/components/KLPUI/KLPList/index.vue | 6 +- klp-ui/src/components/MarkdownPreview.vue | 4 +- klp-ui/src/components/VditorEditor.vue | 3 +- klp-ui/src/layout/components/Navbar.vue | 8 +- klp-ui/src/layout/components/Sidebar/Logo.vue | 12 +- .../src/layout/components/Sidebar/index.vue | 8 +- .../src/layout/components/TagsView/index.vue | 6 +- klp-ui/src/layout/index.vue | 2 +- .../src/views/components/AllApplications.vue | 14 +- .../src/views/mes/dv/checkplan/machinery.vue | 2 - klp-ui/src/views/mes/dv/checkplan/subject.vue | 3 - .../mes/dv/machinery/components/Checkplan.vue | 2 +- .../src/views/mes/dv/machinerytype/index.vue | 37 +++++ .../src/views/mes/dv/maintenrecord/line.vue | 1 - .../wms/order/components/MaterialAnalysis.vue | 4 +- .../wms/order/components/OrderCompletion.vue | 1 - .../wms/order/components/OrderSummary.vue | 6 +- .../wms/order/components/PerformanceArea.vue | 2 - klp-ui/src/views/wms/rxgood/index.vue | 2 +- klp-ui/src/views/wms/video/index.vue | 6 +- 26 files changed, 221 insertions(+), 196 deletions(-) diff --git a/klp-ui/.env.development b/klp-ui/.env.development index 10929804..770dd999 100644 --- a/klp-ui/.env.development +++ b/klp-ui/.env.development @@ -1,5 +1,5 @@ # 页面标题 -VUE_APP_TITLE = 科伦普综合办公系统 +VUE_APP_TITLE = 科伦普冷轧涂镀数智运营一体化平台 # 开发环境配置 ENV = 'development' diff --git a/klp-ui/.env.production b/klp-ui/.env.production index 63dcd55d..4b768784 100644 --- a/klp-ui/.env.production +++ b/klp-ui/.env.production @@ -1,5 +1,5 @@ # 页面标题 -VUE_APP_TITLE = 科伦普综合办公系统 +VUE_APP_TITLE = 科伦普冷轧涂镀数智运营一体化平台 # 生产环境配置 ENV = 'production' diff --git a/klp-ui/.env.stage b/klp-ui/.env.stage index 429d23cd..8363e259 100644 --- a/klp-ui/.env.stage +++ b/klp-ui/.env.stage @@ -1,5 +1,5 @@ # 页面标题 -VUE_APP_TITLE = 科伦普综合办公系统 +VUE_APP_TITLE = 科伦普冷轧涂镀数智运营一体化平台 # 开发环境配置 ENV = 'development' diff --git a/klp-ui/src/assets/styles/element-ui.scss b/klp-ui/src/assets/styles/element-ui.scss index d73b1a44..01ea83c6 100644 --- a/klp-ui/src/assets/styles/element-ui.scss +++ b/klp-ui/src/assets/styles/element-ui.scss @@ -11,13 +11,27 @@ $info-base: #AEB6BF; /* 次主色原始值 */ // 背景色原始值 -$background-base: #2B2F36; +// 暗色 +// $background-base: #2B2F36; +// $background-light-base: lighten($background-base, 5%); +// $background-lighter-base: lighten($background-base, 10%); +// $panel-bg-base: #3A3F45; +// $table-bg-base: #1E2227; + +// // 暗色边框色原始值 +// $border-color-base: #6E757D; +// $border-color-light: #828991; +// $border-color-lighter: #9AA1A9; + +// 亮色 +$background-base: #F5F5F5; $background-light-base: lighten($background-base, 5%); $background-lighter-base: lighten($background-base, 10%); -$panel-bg-base: #3A3F45; -$table-bg-base: #1E2227; +$--color-text-primary: #1a1a1a; +$panel-bg-base: $--color-text-primary; +$table-bg-base: $--color-text-primary; -// 边框色原始值（新增基础边框色变量） +// 亮色边框色原始值 $border-color-base: #6E757D; $border-color-light: #828991; $border-color-lighter: #9AA1A9; @@ -52,10 +66,10 @@ $--border-color: $border-color-base; --table-bg: #{$table-bg-base}; /* 文本色 */ - --color-text-primary: #FFFFFF; - --color-text-regular: #EAEAEA; - --color-text-secondary: #B6BDC5; - --color-text-placeholder: #8A9098; + --color-text-primary: #{$--color-text-primary}; + --color-text-regular: #333333; + --color-text-secondary: #555555; + --color-text-placeholder: #777777; /* 边框色 */ --border-color-base: #{$border-color-base}; @@ -73,8 +87,10 @@ $--border-color: $border-color-base; --btn-height: #{$--btn-height}; /* 金属质感变量 */ - --metal-gradient-light: linear-gradient(145deg, #3E434A, #363B41); - --metal-gradient-dark: linear-gradient(145deg, #363B41, #3E434A); + // --metal-gradient-light: linear-gradient(145deg, #3E434A, #363B41); + // --metal-gradient-dark: linear-gradient(145deg, #363B41, #3E434A); + --metal-gradient-light: linear-gradient(145deg, $--color-background-light, $--color-background); + --metal-gradient-dark: linear-gradient(145deg, $--color-background, $--color-background-light); --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); @@ -194,7 +210,7 @@ body { // 主按钮（品牌梯度） .el-button--primary { - @include button-variant(#fff, darken($--color-primary, 10%)); + @include button-variant($--color-text-primary, darken($--color-primary, 10%)); background: linear-gradient(145deg, lighten($--color-primary, 6%), darken($--color-primary, 6%)); border-color: darken($--color-primary, 10%); @@ -205,17 +221,17 @@ body { // 功能按钮（统一风格） .el-button--success { - @include button-variant(#fff, darken($--color-success, 10%)); + @include button-variant($--color-text-primary, darken($--color-success, 10%)); background: linear-gradient(145deg, lighten($--color-success, 6%), darken($--color-success, 6%)); } .el-button--warning { - @include button-variant(#fff, darken($--color-warning, 10%)); + @include button-variant($--color-text-primary, darken($--color-warning, 10%)); background: linear-gradient(145deg, lighten($--color-warning, 6%), darken($--color-warning, 6%)); } .el-button--danger { - @include button-variant(#fff, darken($--color-danger, 10%)); + @include button-variant($--color-text-primary, darken($--color-danger, 10%)); background: linear-gradient(145deg, lighten($--color-danger, 6%), darken($--color-danger, 6%)); } @@ -300,7 +316,7 @@ body { // ---------------------- 3.2 表格（深色交替 + 金属边框）---------------------- .el-table { background: $--table-bg; - border: 1px solid $--border-color-light; + // border: 1px solid $--border-color-light; border-radius: 8px; box-shadow: $--metal-shadow; color: $--color-text-regular; @@ -315,10 +331,10 @@ body { // 表头（深灰黑 + 纯白文字） .el-table__header-wrapper { th.el-table__cell { - background: #1F2227; + background: $--color-background; color: $--color-text-primary; font-weight: 600; - border-bottom: 1px solid #444A52; + border-bottom: 1px solid $--border-color-lighter; padding: 4px !important; // 紧凑 padding height: auto; font-size: 13px; @@ -331,14 +347,14 @@ body { // 奇数行 &:nth-child(odd) .el-table__cell { - background: #2F3339; - color: #EAEAEA; + background: $--color-background-light; + color: $--color-text-regular; } // 偶数行 &:nth-child(even) .el-table__cell { - background: #353A40; - color: #EAEAEA; + background: $--color-background-light; + color: $--color-text-regular; } // hover @@ -357,8 +373,8 @@ body { // 单元格（统一边框 + 紧凑 padding） .el-table__cell { - border-bottom: 1px solid #444A52; - color: #EAEAEA; + border-bottom: 1px solid $--border-color-lighter; + color: $--color-text-regular; padding: 2px 4px !important; // 超紧凑 font-size: 13px; } @@ -391,7 +407,7 @@ body { } &__empty-block { - background: #1e2227; + background: $--color-background; } // 适配尺寸类（统一紧凑） @@ -405,10 +421,10 @@ body { // 表头（深灰黑 + 纯白文字） .el-table__fixed-header-wrapper { th.el-table__cell { - background: #1F2227; + background: $--color-background; color: $--color-text-primary; font-weight: 600; - border-bottom: 1px solid #444A52; + border-bottom: 1px solid $--border-color-lighter; padding: 4px !important; // 紧凑 padding font-size: 13px; } @@ -420,14 +436,14 @@ body { // 奇数行 &:nth-child(odd) .el-table__cell { - background: #2F3339; - color: #EAEAEA; + background: $--color-background-light; + color: $--color-text-regular; } // 偶数行 &:nth-child(even) .el-table__cell { - background: #353A40; - color: #EAEAEA; + background: $--color-background-light; + color: $--color-text-regular; } // 当前行 @@ -598,7 +614,7 @@ body { &.current { background: $--color-primary; - color: #fff; + color: $--color-text-primary; } &.in-range { @@ -612,13 +628,13 @@ body { &.start-date, &.end-date { background: $--color-primary; - color: #fff; + color: $--color-text-primary; } } } .available.in-range div { - background-color: #111; + background-color: $--color-background; } } @@ -645,7 +661,7 @@ body { &.el-button--primary { background: $--color-primary; border-color: $--color-primary; - color: #fff; + color: $--color-text-primary; &:hover { background: lighten($--color-primary, 10%); @@ -697,7 +713,7 @@ body { background: $--metal-gradient-light; border-color: $--border-color-light; color: $--color-text-regular; - box-shadow: $--metal-shadow-inset; + // box-shadow: $--metal-shadow-inset; border-radius: 0; height: $--btn-height; line-height: $--btn-height; @@ -709,7 +725,7 @@ body { &:focus { border-color: $--color-primary; - box-shadow: $--metal-shadow-inset, 0 0 0 2px rgba($--color-primary, .22); + box-shadow: $--metal-shadow-inset; } } @@ -738,7 +754,7 @@ body { border-left: 1px solid $--border-color-light; background: $--metal-gradient-light; color: $--color-text-regular; - box-shadow: $--metal-shadow-inset; + // box-shadow: $--metal-shadow-inset; font-size: 13px; } } @@ -748,7 +764,7 @@ body { background: $--metal-gradient-light; border-color: $--border-color-light; color: $--color-text-regular; - box-shadow: $--metal-shadow-inset; + // box-shadow: $--metal-shadow-inset; border-radius: 0; padding: $--spacing-base; font-size: 13px; @@ -851,7 +867,7 @@ body { &.selected { background-color: rgba($--color-primary, .20); - color: #fff; + color: $--color-text-primary; } } } @@ -930,12 +946,12 @@ body { left: 0; position: relative; margin: 10vh auto 0; - background: $--metal-gradient-light !important; + // background: $--metal-gradient-light !important; + background-color: white !important; border: 1px solid $--border-color-light; box-shadow: $--metal-shadow; border-radius: 8px; color: $--color-text-regular; - width: 60% !important; // 自适应宽度 // 对话框头部 .el-dialog__header { @@ -1299,7 +1315,7 @@ body { &.current, &.selected { background: $--color-primary; - color: #fff; + color: $--color-text-primary; &:hover { background: darken($--color-primary, 5%); @@ -1336,7 +1352,7 @@ body { &.is-selected { background: $--color-primary; - color: #fff; + color: $--color-text-primary; &:hover { background: darken($--color-primary, 5%); @@ -1581,7 +1597,7 @@ body { &.active { background: $--color-primary; - color: #fff; + color: $--color-text-primary; border-color: $--color-primary; } } @@ -1637,28 +1653,13 @@ div.pagination-container { color: $--color-text-regular; .el-tree-node { - &:hover { - background: rgba($--color-primary, .12); - } + // &:hover { + // background: rgba($--color-primary, .12); + // } &.is-current>.el-tree-node__content { background: rgba($--color-primary, .2); color: $--color-primary; } } -} - - -// ---------------------- 3.8 自定义工具类 ---------------------- -// 固定按钮宽度 -// .fixed-width { -// .el-button--mini { -// padding: 7px 10px; -// width: 60px; -// } -// } - -// 居中单元格（深色表头） -.is-center.is-leaf.el-table__cell { - background-color: #1F2227; } \ No newline at end of file diff --git a/klp-ui/src/assets/styles/klp.scss b/klp-ui/src/assets/styles/klp.scss index 0b665aeb..8c706236 100644 --- a/klp-ui/src/assets/styles/klp.scss +++ b/klp-ui/src/assets/styles/klp.scss @@ -88,83 +88,83 @@ padding: 10px 20px 0; } -.el-table { - .el-table__header-wrapper, .el-table__fixed-header-wrapper { - th { - word-break: break-word; - background-color: #f8f8f9; - color: #515a6e; - height: 40px; - font-size: 13px; - } - } +// .el-table { +// .el-table__header-wrapper, .el-table__fixed-header-wrapper { +// th { +// word-break: break-word; +// background-color: #f8f8f9; +// color: #515a6e; +// height: 40px; +// font-size: 13px; +// } +// } - .el-table__body-wrapper { - .el-button [class*="el-icon-"] + span { - margin-left: 1px; - } - } -} +// .el-table__body-wrapper { +// .el-button [class*="el-icon-"] + span { +// margin-left: 1px; +// } +// } +// } /** 表单布局 **/ -.form-header { - font-size: 15px; - color: #6379bb; - border-bottom: 1px solid #ddd; - margin: 8px 10px 25px 10px; - padding-bottom: 5px -} +// .form-header { +// font-size: 15px; +// color: #6379bb; +// border-bottom: 1px solid #ddd; +// margin: 8px 10px 25px 10px; +// padding-bottom: 5px +// } -/** 表格布局 **/ -.pagination-container { - position: relative; - height: 25px; - margin-bottom: 10px; - margin-top: 15px; - padding: 10px 20px !important; -} +// /** 表格布局 **/ +// .pagination-container { +// position: relative; +// height: 25px; +// margin-bottom: 10px; +// margin-top: 15px; +// padding: 10px 20px !important; +// } /* tree border */ -.tree-border { - margin-top: 5px; - border: 1px solid #e5e6e7; - background: #FFFFFF none; - border-radius: 4px; -} +// .tree-border { +// margin-top: 5px; +// border: 1px solid #e5e6e7; +// background: #FFFFFF none; +// border-radius: 4px; +// } -.pagination-container .el-pagination { - right: 0; - position: absolute; -} +// .pagination-container .el-pagination { +// right: 0; +// position: absolute; +// } -@media (max-width: 768px) { - .pagination-container .el-pagination > .el-pagination__jump { - display: none !important; - } - .pagination-container .el-pagination > .el-pagination__sizes { - display: none !important; - } -} +// @media (max-width: 768px) { +// .pagination-container .el-pagination > .el-pagination__jump { +// display: none !important; +// } +// .pagination-container .el-pagination > .el-pagination__sizes { +// display: none !important; +// } +// } -.el-table .fixed-width .el-button--mini { - padding-left: 0; - padding-right: 0; - width: inherit; -} +// .el-table .fixed-width .el-button--mini { +// padding-left: 0; +// padding-right: 0; +// width: inherit; +// } -/** 表格更多操作下拉样式 */ -.el-table .el-dropdown-link,.el-table .el-dropdown-selfdefine { - cursor: pointer; - margin-left: 5px; -} +// /** 表格更多操作下拉样式 */ +// .el-table .el-dropdown-link,.el-table .el-dropdown-selfdefine { +// cursor: pointer; +// margin-left: 5px; +// } -.el-table .el-dropdown, .el-icon-arrow-down { - font-size: 12px; -} +// .el-table .el-dropdown, .el-icon-arrow-down { +// font-size: 12px; +// } -.el-tree-node__content > .el-checkbox { - margin-right: 8px; -} +// .el-tree-node__content > .el-checkbox { +// margin-right: 8px; +// } .list-group-striped > .list-group-item { border-left: 0; diff --git a/klp-ui/src/assets/styles/sidebar.scss b/klp-ui/src/assets/styles/sidebar.scss index c08bd169..21704bd1 100644 --- a/klp-ui/src/assets/styles/sidebar.scss +++ b/klp-ui/src/assets/styles/sidebar.scss @@ -4,13 +4,14 @@ --text-regular: #333333; --text-secondary: #555555; --text-placeholder: #777777; + --background-color: #fff; .main-container { height: 100%; transition: margin-left .28s, box-shadow .3s ease; margin-left: $base-sidebar-width; position: relative; - background: #1E2227; // 金属浅色渐变 + // background: #1E2227; // 金属浅色渐变 } .sidebarHide { @@ -21,7 +22,7 @@ -webkit-transition: width .28s, background .3s ease; transition: width 0.28s, background .3s ease; width: $base-sidebar-width !important; - background: #1E2227; // 金属深色渐变 + background: var(--background-color); // 金属深色渐变 border-right: 1px solid #8d939b; height: 100%; position: fixed; @@ -44,11 +45,12 @@ .el-scrollbar__bar.is-vertical { right: 0px; - background: rgba(0, 0, 0, 0.05); + background: #2Bf; + width: 0; } .el-scrollbar__thumb { - background: #1E2227; + background: var(--background-color); border-radius: 3px; } @@ -112,13 +114,6 @@ } } - // 深色主题下子菜单选中高亮 - & .theme-dark .is-active>.el-submenu__title { - color: #fff !important; // 选中时文字纯白 - // background-color: rgba(95, 123, 160, 0.25) !important; // 工业蓝浅高亮 - // border-left: 3px solid #5F7BA0; // 左边高亮条 - } - // & .nest-menu .el-submenu>.el-submenu__title, & .el-submenu .el-menu-item { // 子菜单默认样式 @@ -146,7 +141,7 @@ &.is-active { background: rgba(95, 123, 160, 0.28) !important; // 激活背景 - color: #fff !important; // 激活文字白色 + color: #000 !important; // 激活文字白色 font-weight: 600; border-left: 3px solid #5F7BA0; // 左边高亮条 } @@ -154,10 +149,10 @@ } .el-menu-item.is-active.submenu-title-noDropdown { - background: rgba(95, 123, 160, 0.28) !important; // 激活背景 - color: #fff !important; // 激活文字白色 + background: #657b96; // 激活背景 + color: #fff; // 激活文字白色 font-weight: 600; - border-left: 3px solid #5F7BA0; // 左边高亮条 + border-left: 3px solid #657b96; // 左边高亮条 } .hideSidebar { @@ -247,7 +242,7 @@ } } -// when menu collapsed +// 收起状态下的菜单 .el-menu--vertical { &>.el-menu { .svg-icon { diff --git a/klp-ui/src/components/KLPUI/KLPList/index.vue b/klp-ui/src/components/KLPUI/KLPList/index.vue index d7dba9ea..50dcaa09 100644 --- a/klp-ui/src/components/KLPUI/KLPList/index.vue +++ b/klp-ui/src/components/KLPUI/KLPList/index.vue @@ -270,7 +270,7 @@ export default { /* 列表项选中状态（左侧高亮边框+背景色） */ .klp-list-item.active { border-left: 3px solid #2bf; - background-color: #222; + /* background-color: #fff; */ } /* 列表标题区域（占满中间空间，让操作按钮靠右） */ @@ -284,7 +284,7 @@ export default { /* 标题前置标签样式 */ .klp-list-title .title-label { - color: #ddd; + color: #111; margin-right: 6px; font-size: 13px; white-space: nowrap; /* 标签不换行 */ @@ -293,7 +293,7 @@ export default { /* 标题内容样式（溢出省略） */ .klp-list-title .title-value { - color: #ddd; + color: #111; font-weight: 500; font-size: 14px; white-space: nowrap; /* 禁止换行 */ diff --git a/klp-ui/src/components/MarkdownPreview.vue b/klp-ui/src/components/MarkdownPreview.vue index 51c73846..f6e91178 100644 --- a/klp-ui/src/components/MarkdownPreview.vue +++ b/klp-ui/src/components/MarkdownPreview.vue @@ -48,7 +48,7 @@ export default { .markdown-preview { border-radius: 4px; padding: 8px; - background: #393d46; - color: white; + background: var(--color-background); + color: var(--color-text-primary); } diff --git a/klp-ui/src/components/VditorEditor.vue b/klp-ui/src/components/VditorEditor.vue index 49dc80b6..af31309b 100644 --- a/klp-ui/src/components/VditorEditor.vue +++ b/klp-ui/src/components/VditorEditor.vue @@ -72,7 +72,8 @@ export default { diff --git a/klp-ui/src/layout/components/Navbar.vue b/klp-ui/src/layout/components/Navbar.vue index 2ede0d0c..65c9bc08 100644 --- a/klp-ui/src/layout/components/Navbar.vue +++ b/klp-ui/src/layout/components/Navbar.vue @@ -107,10 +107,10 @@ export default { overflow: hidden; position: relative; // 金属质感渐变背景 - background: #454c51; - border-bottom: 1px solid #8d939b; - box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1), - 0 1px 1px rgba(255, 255, 255, 0.08) inset; + // background: #454c51; + // border-bottom: 1px solid #8d939b; + // box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1), + // 0 1px 1px rgba(255, 255, 255, 0.08) inset; .hamburger-container { line-height: 46px; diff --git a/klp-ui/src/layout/components/Sidebar/Logo.vue b/klp-ui/src/layout/components/Sidebar/Logo.vue index 9843efb4..b9b4aa78 100644 --- a/klp-ui/src/layout/components/Sidebar/Logo.vue +++ b/klp-ui/src/layout/components/Sidebar/Logo.vue @@ -1,13 +1,13 @@