direv/admin_new
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(F006-W5.x.x): EP 文字色/填充色/边框色/popover 背景等派生色全局跟主题 + 登录卡 dark 背景

Browse Source 
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),修登录卡硬编码浅色 → 暗主题深色半透明
This commit is contained in:
Sisyphus 2026-07-03 19:19:46 +08:00
parent 6a0736d70c
commit 93ed6331e8
2 changed files with 56 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
src/modules/auth/LoginView.vue
View File

@ -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;

51
src/theme/tokens.scss
View File

@ -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);