From 93ed6331e8f8565ac974ad206fcd77d2c3a173d3 Mon Sep 17 00:00:00 2001 From: Sisyphus Date: Fri, 3 Jul 2026 19:19:46 +0800 Subject: [PATCH] =?UTF-8?q?fix(F006-W5.x.x):=20EP=20=E6=96=87=E5=AD=97?= =?UTF-8?q?=E8=89=B2/=E5=A1=AB=E5=85=85=E8=89=B2/=E8=BE=B9=E6=A1=86?= =?UTF-8?q?=E8=89=B2/popover=20=E8=83=8C=E6=99=AF=E7=AD=89=E6=B4=BE?= =?UTF-8?q?=E7=94=9F=E8=89=B2=E5=85=A8=E5=B1=80=E8=B7=9F=E4=B8=BB=E9=A2=98?= =?UTF-8?q?=20+=20=E7=99=BB=E5=BD=95=E5=8D=A1=20dark=20=E8=83=8C=E6=99=AF?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 1. tokens.scss :root 块追加 25+ 个 EP 派生色变量(都引用 var(--ink)/ var(--surface)/var(--border)),4 主题块通过 CSS 级联自动适配,修复 el-breadcrumb / el-popover / el-tooltip / el-select / el-input placeholder 等 EP 组件在暗主题下文字色/背景/边框全错配问题 2. LoginView.vue .rr-login-right 加 [data-theme="dark"] 背景覆盖 rgba(30,41,59,0.85),修登录卡硬编码浅色 → 暗主题深色半透明 --- src/modules/auth/LoginView.vue | 5 ++++ src/theme/tokens.scss | 51 ++++++++++++++++++++++++++++++++++ 2 files changed, 56 insertions(+) diff --git a/src/modules/auth/LoginView.vue b/src/modules/auth/LoginView.vue index 64e2a56..285eb03 100644 --- a/src/modules/auth/LoginView.vue +++ b/src/modules/auth/LoginView.vue @@ -312,6 +312,11 @@ async function onLogin() { .rr-login-right { flex: 1; background: rgba(255, 255, 255, 0.85); + + // W5.x.x 暗主题适配:登录卡深色半透明,让 var(--ink) 系文字清晰可见 + [data-theme="dark"] & { + background: rgba(30, 41, 59, 0.85); + } backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); padding: 48px 40px; diff --git a/src/theme/tokens.scss b/src/theme/tokens.scss index 8378869..57d42a7 100644 --- a/src/theme/tokens.scss +++ b/src/theme/tokens.scss @@ -6,6 +6,9 @@ // + --text-xs ~ --text-3xl 8 级字号 // + --topbar-blur 顶栏毛玻璃 // + --brand-gradient 主按钮渐变 +// W5.x.x 暗主题适配全局修复(2026-07-03): +// + 25+ 个 EP 文字色/填充色/边框色/popover 背景等派生色变量 +// + 4 主题块通过 CSS 级联自动适配(都引用 var(--ink)/var(--surface) 等) :root { // ===== 圆角(沿用 v1.3) ===== @@ -34,6 +37,54 @@ --el-color-primary-light-9: var(--brand-soft); --el-color-primary-dark-2: var(--brand-hover); + // ===== Element Plus 文字色派生(W5.x.x 暗主题适配全局修复) ===== + // 让 el-breadcrumb / el-popover / el-tooltip / el-select / el-input placeholder + // 等所有用 --el-text-color-* 的 EP 组件,文字色都跟主题切换 + --el-text-color-primary: var(--ink); + --el-text-color-regular: var(--ink-2); + --el-text-color-secondary: var(--ink-3); + --el-text-color-placeholder: var(--ink-4); + --el-text-color-disabled: var(--ink-4); + + // ===== Element Plus 边框色派生 ===== + --el-border-color: var(--border); + --el-border-color-light: var(--border); + --el-border-color-lighter: var(--border); + --el-border-color-extra-light: var(--border); + --el-border-color-dark: var(--border-strong); + --el-border-color-darker: var(--border-strong); + + // ===== Element Plus 填充色派生 ===== + --el-fill-color: var(--bg-soft); + --el-fill-color-light: var(--bg-soft); + --el-fill-color-lighter: var(--surface-2); + --el-fill-color-extra-light: var(--surface-2); + --el-fill-color-dark: var(--surface-2); + --el-fill-color-darker: var(--surface-2); + --el-fill-color-blank: var(--surface); + + // ===== Element Plus 背景色派生(popover/tooltip/dropdown/modal 容器) ===== + --el-bg-color: var(--surface); + --el-bg-color-page: var(--bg-soft); + --el-bg-color-overlay: var(--surface); + --el-popover-bg-color: var(--surface); + --el-popover-border-color: var(--border); + --el-tooltip-bg-color: var(--ink); + --el-dropdown-bg-color: var(--surface); + --el-dropdown-border-color: var(--border); + --el-select-dropdown-bg-color: var(--surface); + --el-select-dropdown-border-color: var(--border); + --el-datepicker-bg-color: var(--surface); + --el-dialog-bg-color: var(--surface); + --el-message-bg-color: var(--surface); + --el-notification-bg-color: var(--surface); + + // ===== Element Plus 遮罩 + 禁用 ===== + --el-mask-color: rgba(0, 0, 0, 0.5); + --el-disabled-bg-color: var(--bg-soft); + --el-disabled-text-color: var(--ink-4); + --el-disabled-border-color: var(--border); + // ===== v2 新增:动画曲线 ===== --ease: cubic-bezier(0.4, 0, 0.2, 1); --ease-out: cubic-bezier(0.0, 0, 0.2, 1);