Sisyphus
|
3fc8326aeb
|
fix(F006-W18.8): dark 主题 按钮 + 文字 颜色修复 (CSS 变量级联全部硬编码)
用户反馈: 暗主题下默认 el-button (如导出/重置) 文字几乎看不见
根因 (同类 W18 修复):
- tokens.scss :root 块定义 --el-text-color-regular: var(--ink-2) / --el-border-color: var(--border)
- CSS 变量解析时, [data-theme=dark] 块的 --ink-2 重写还未生效
- 导致 dark 下 --el-text-color-regular 仍是 tech-blue 默认 #334155 (深色字 on 深色背景 = 不可见)
- 按钮 border --el-border-color 仍是 #E2E8F0 (浅色边 on 暗背景 = 刺眼)
修法 (themes.scss [data-theme=dark] 块硬覆盖):
- --el-text-color-primary/regular/secondary/placeholder/disabled → #F8FAFC/#E2E8F0/#CBD5E1/#94A3B8
- --el-border-color/light/lighter/extra-light → #475569 (border)
- --el-border-color-dark/darker → #64748B (border-strong)
- --el-fill-color/light → #0F172A (bg-soft)
- --el-fill-color-lighter/extra-light/dark/darker → #283449 (surface-2)
- --el-fill-color-blank/bg-color/overlay → #1E293B (surface)
- --el-bg-color-page → #0F172A (bg-soft)
- --el-tooltip-bg-color → #1E293B
- --el-disabled-* → 配套浅色
Playwright dark 主题实测 (商品管理页 导出/重置 按钮):
- 改前: bg rgb(30,41,59) 但 color rgb(51,65,85) = #334155 (看不见)
- 改后: color rgb(226,232,240) = #E2E8F0 (清晰), border rgb(71,85,105) = #475569 (协调)
- --el-text-color-regular 改前 #334155 → 改后 #E2E8F0 ✅
- 截图确认: 导出/重置/新增商品/查询 全部按钮在 dark 下清晰可读
|
2026-07-09 17:29:04 +08:00 |
|
Sisyphus
|
ee52bed129
|
fix(F006-W18): 暗主题全面适配 (EP token 补齐 + v1 token 清理 + 业务硬编码色修)
用户反馈: dark 主题下大量页面卡片/表头是白底, 文字看不清, 视觉割裂
根因 (W5.x v2 token 迁移遗漏):
- v1 token (--rr-page-bg / --rr-bg-card / --rr-table-header-bg / --rr-row-hover / --rr-border-color / --rr-text-secondary) 在 themes.scss 完全没定义
- v2 用 --bg-soft / --surface / --surface-2 / --border / --ink-2 / --ink-3, 但大量组件没改 fallback, 永远走 hex fallback (#F1F5F9 / #FFFFFF)
- EP el-table 内部用 getCssVar(color, white) = --el-color-white, 未在 tokens.scss 重定向, dark 下仍是 #FFFFFF
- CSS 变量级联问题: :root 块 var(--surface) 解析时, dark 块的 --surface 重写还没生效
修法 (3 类共 11 文件):
1. EP token 补齐 (themes.scss dark 块 + tokens.scss :root 块):
- --el-color-white / --el-color-black: #1E293B / #F8FAFC
- --el-fill-color-blank / --el-fill-color-light: surface / bg-soft
- --el-table-tr-bg-color / --el-table-bg-color: surface
- --el-table-expanded-cell-bg-color: surface
- --el-table-header-bg-color: surface-2 (表头略亮区分)
- --el-table-row-hover-bg-color: bg-soft
2. v1 token 清理 (4 组件):
- AppLayout.vue: 13 处 --rr-page-bg → --bg-soft
- DataTable.vue: --rr-table-header-bg/--rr-text-secondary/--rr-row-hover/--rr-bg-card/--rr-border-color → v2 token
- SearchBar.vue / ListTabs.vue: 同上
3. 业务页硬编码色 (5 业务页):
- OpenAppListView.vue: 4 状态 badge + 表格头 #F8FAFC → var(--*-soft)
- ApplyApiKeyDialog.vue: header #F8FAFC → var(--surface-2)
- InquiryListView.vue / LogOperationView.vue / LogErrorView.vue: 4 类 badge → var(--amber/brand/green/red-soft)
Playwright 1920 视口 dark 主题实测 (5 个典型页):
- Dashboard: 侧栏 rgb(30,41,59), 主区 rgb(15,23,42), 表格 rgb(30,41,59) ✅
- 用户列表 / 应用列表 / 订单列表 / 询价列表: 全部统一深色 ✅
- 之前: elTableBg rgb(255,255,255) 纯白 → 现在: rgb(30,41,59) 暗 surface
- 文字、badge、按钮、分页器、搜索条全部 dark 适配
不动调色板 (按用户要求 严重问题优先): --border/--ink-2 等保持原值
|
2026-07-09 17:22:12 +08:00 |
|
Sisyphus
|
3744cf7c93
|
fix(F006-W5.x): 4 主题块追加 EP 派生色覆盖(主题色适配全局修复)
每个 [data-theme] 块末尾追加 --el-color-primary-light-3/5/7/8/9 + dark-2,
指向 brand-soft / brand-hover,让 EP 组件 hover / 激活态内层派生色
跟随主题切换(原 :root 里的 EP 派生色在主题块下被 fallback 覆盖,导致
el-tabs / el-pagination / el-switch / el-tag hover 等仍显示科技蓝)
|
2026-07-03 16:24:36 +08:00 |
|