From f7cdff31ba3b631fc73e051a18f778c1f428bcdb Mon Sep 17 00:00:00 2001 From: qiaoxinjiu Date: Mon, 18 May 2026 16:33:35 +0800 Subject: [PATCH] =?UTF-8?q?fix(ui):=20=E4=B8=BB=E9=A2=98=E4=B8=8E=E8=84=91?= =?UTF-8?q?=E5=9B=BE=E6=B5=85=E8=89=B2=E9=80=82=E9=85=8D=E3=80=81=E6=A0=87?= =?UTF-8?q?=E7=AD=BE=E9=85=8D=E8=89=B2=E5=8F=8A=E9=9D=99=E6=80=81=E8=B5=84?= =?UTF-8?q?=E6=BA=90=E7=BC=93=E5=AD=98?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 浅色模式下用例脑图区域改为浅色样式 - 恢复 el-tag 按 success/warning/info 等类型的颜色 - 启动时应用主题，Home 内容区深色样式兜底 - nginx 禁止缓存 index.html，hash 静态资源长期缓存 Co-authored-by: Cursor --- index.html | 27 +++++++-- nginx.conf | 14 ++++- src/App.vue | 52 +++++++++++++++- src/components/Home.vue | 54 +++++++++++++++++ src/components/TestPlatform/Case/CaseList.vue | 60 +++++++++++++++++++ src/main.js | 8 +++ 6 files changed, 208 insertions(+), 7 deletions(-) diff --git a/index.html b/index.html index d70cbf8..b7c1834 100644 --- a/index.html +++ b/index.html @@ -6,18 +6,37 @@ 效能平台 + - +
diff --git a/nginx.conf b/nginx.conf index 02860c4..0ceddba 100644 --- a/nginx.conf +++ b/nginx.conf @@ -1,12 +1,24 @@ +# 发版后避免浏览器长期使用旧 index 引用旧 js/css server { listen 80; server_name localhost; - + client_max_body_size 100m; root /usr/share/nginx/html; index index.html; + location = /index.html { + add_header Cache-Control "no-store, no-cache, must-revalidate, max-age=0" always; + add_header Pragma "no-cache" always; + } + + location ^~ /static/ { + expires 1y; + add_header Cache-Control "public, immutable" always; + access_log off; + } + location /it/api/ { proxy_pass http://172.18.0.1:5010; proxy_set_header Host $host; diff --git a/src/App.vue b/src/App.vue index 8d5ed0c..87566b5 100644 --- a/src/App.vue +++ b/src/App.vue @@ -233,12 +233,36 @@ button, border-color: rgba(56, 189, 248, 0.5); } -.el-tag { +.el-tag:not(.el-tag--success):not(.el-tag--warning):not(.el-tag--danger):not(.el-tag--info) { border-color: rgba(56, 189, 248, 0.28); background: rgba(56, 189, 248, 0.12); color: #bae6fd; } +.el-tag.el-tag--success { + border-color: rgba(103, 194, 58, 0.45); + background: rgba(103, 194, 58, 0.16); + color: #86efac; +} + +.el-tag.el-tag--warning { + border-color: rgba(230, 162, 60, 0.45); + background: rgba(230, 162, 60, 0.16); + color: #fcd34d; +} + +.el-tag.el-tag--danger { + border-color: rgba(245, 108, 108, 0.45); + background: rgba(245, 108, 108, 0.16); + color: #fca5a5; +} + +.el-tag.el-tag--info { + border-color: rgba(148, 163, 184, 0.35); + background: rgba(148, 163, 184, 0.14); + color: #cbd5e1; +} + .el-card__header { background: #162033; border-bottom-color: rgba(148, 163, 184, 0.18); @@ -439,12 +463,36 @@ body.theme-light .el-tabs__nav-wrap::after { background-color: #e2e8f0; } -body.theme-light .el-tag { +body.theme-light .el-tag:not(.el-tag--success):not(.el-tag--warning):not(.el-tag--danger):not(.el-tag--info) { border-color: #bfdbfe; background: #eff6ff; color: #1d4ed8; } +body.theme-light .el-tag.el-tag--success { + border-color: #e1f3d8; + background: #f0f9eb; + color: #67c23a; +} + +body.theme-light .el-tag.el-tag--warning { + border-color: #faecd8; + background: #fdf6ec; + color: #e6a23c; +} + +body.theme-light .el-tag.el-tag--danger { + border-color: #fde2e2; + background: #fef0f0; + color: #f56c6c; +} + +body.theme-light .el-tag.el-tag--info { + border-color: #e9e9eb; + background: #f4f4f5; + color: #909399; +} + body.theme-light .el-tree, body.theme-light .el-tree-node__content { color: #334155; diff --git a/src/components/Home.vue b/src/components/Home.vue index 2749aaa..bd89c9f 100644 --- a/src/components/Home.vue +++ b/src/components/Home.vue @@ -680,4 +680,58 @@ export default { .theme-shell-light .main-form { background: linear-gradient(135deg, #f8fbff 0%, #eef4ff 100%); } + +/* 深色壳下内容区兜底：避免旧缓存 bundle 未加载 App.vue 全局样式时出现白卡片/白分页 */ +.theme-shell-dark >>> .page-section.el-card { + background: #111827; + border-color: rgba(148, 163, 184, 0.2); + color: #e5e7eb; +} + +.theme-shell-dark >>> .page-section .el-card__header { + background: #162033; + border-bottom-color: rgba(148, 163, 184, 0.18); + color: #f8fafc; +} + +.theme-shell-dark >>> .page-section .el-table, +.theme-shell-dark >>> .page-section .el-table__expanded-cell, +.theme-shell-dark >>> .page-section .el-table th, +.theme-shell-dark >>> .page-section .el-table tr, +.theme-shell-dark >>> .page-section .el-table td { + background-color: #111827 !important; + color: #e5e7eb !important; +} + +.theme-shell-dark >>> .page-section .el-table th, +.theme-shell-dark >>> .page-section .el-table thead th { + background: #1f2937 !important; + color: #f8fafc !important; +} + +.theme-shell-dark >>> .page-section .el-form-item__label { + color: #dbeafe; +} + +.theme-shell-dark >>> .page-section .el-input__inner, +.theme-shell-dark >>> .page-section .el-textarea__inner, +.theme-shell-dark >>> .page-section .el-select .el-input__inner { + background-color: #0f172a; + border-color: rgba(148, 163, 184, 0.28); + color: #f8fafc; +} + +.theme-shell-dark >>> .page-section .el-pagination, +.theme-shell-dark >>> .page-section .el-pagination button, +.theme-shell-dark >>> .page-section .el-pagination span:not([class*=suffix]) { + color: #dbeafe; +} + +.theme-shell-dark >>> .page-section .el-pagination .btn-prev, +.theme-shell-dark >>> .page-section .el-pagination .btn-next, +.theme-shell-dark >>> .page-section .el-pager li { + background: #111827; + color: #dbeafe; + border: 1px solid rgba(148, 163, 184, 0.18); +} diff --git a/src/components/TestPlatform/Case/CaseList.vue b/src/components/TestPlatform/Case/CaseList.vue index bf245a9..1d64bb7 100644 --- a/src/components/TestPlatform/Case/CaseList.vue +++ b/src/components/TestPlatform/Case/CaseList.vue @@ -2604,4 +2604,64 @@ body.theme-light .auto-gen-case-title { body.theme-light .ai-gen-params-hint { color: #64748b; } + +body.theme-light .mindmap-wrap { + background: #f8fbff; + border-color: #dbe5f3; +} + +body.theme-light .xmind-tree /deep/ .el-tree-node__children:before { + border-left-color: #cbd5e1; +} + +body.theme-light .xmind-tree /deep/ .el-tree-node__content:before { + border-top-color: #94a3b8; +} + +body.theme-light .mindmap-node { + background: #ffffff; + border-color: #dbe5f3; + box-shadow: 0 1px 6px rgba(37, 99, 235, 0.08); +} + +body.theme-light .mindmap-node-title { + color: #0f172a; +} + +body.theme-light .mindmap-node-project { + border-color: #67c23a; + box-shadow: 0 1px 6px rgba(103, 194, 58, 0.12); +} + +body.theme-light .mindmap-node-module { + border-color: #e6a23c; + box-shadow: 0 1px 6px rgba(230, 162, 60, 0.1); +} + +body.theme-light .mindmap-node-case { + border-color: #93c5fd; +} + +body.theme-light .mindmap-inline-detail-line { + border-top-color: #94a3b8; +} + +body.theme-light .mindmap-inline-detail-card { + background: #ffffff; + border-color: #dbe5f3; + box-shadow: 0 4px 16px rgba(37, 99, 235, 0.08); +} + +body.theme-light .mindmap-inline-detail-title { + color: #0f172a; +} + +body.theme-light .mindmap-inline-detail-item { + color: #475569; +} + +body.theme-light .mindmap-meta-text, +body.theme-light .mindmap-empty { + color: #64748b; +} diff --git a/src/main.js b/src/main.js index 8a95b18..8e646d9 100644 --- a/src/main.js +++ b/src/main.js @@ -8,6 +8,14 @@ import ElementUI from 'element-ui'; import store from '@/vuex/store' import 'element-ui/lib/theme-chalk/index.css'; import axios from 'axios' + +function applyInitialTheme() { + const theme = localStorage.getItem('uiTheme') || 'dark' + document.body.classList.remove('theme-dark', 'theme-light') + document.body.classList.add(theme === 'light' ? 'theme-light' : 'theme-dark') +} +applyInitialTheme() + Vue.use(ElementUI); Vue.prototype.$axios = axios -- 2.49.1