修复系统写死颜色并接入主题变量切换

Co-authored-by: multica-agent <github@multica.ai>
This commit is contained in:
2026-05-01 20:08:30 +08:00
parent cf53787bb2
commit f130d33d42
8 changed files with 120 additions and 34 deletions
+34
View File
@@ -545,3 +545,37 @@
- 风险与影响:
- 影响范围仅前端用户管理页面展示层,不涉及后端接口与权限模型。
## Work Log - 修复系统写死颜色并支持主题变量切换(2026-05-01)
- 背景:
- Issue `FL-146` 要求修正系统中写死颜色,支持主题色切换,统一通过变量驱动。
- 现状存在多处硬编码:`error/global-error` 内联 hex,后台列表选中态 `bg-blue-50`,以及主题菜单徽标固定蓝色。
- 本次改动(最小闭环):
- 文件:`web/src/app/globals.css`
- 新增主题语义变量桥接:`--fquiz-theme-*`(布局背景、容器背景、文本、边框、主色、阴影、选中态等)。
- 新增暗色模式变量覆盖:`:root[data-fquiz-theme="dark"]`
- 新增统一行选中样式:`.fquiz-row-selected > td { background: var(--fquiz-theme-bg-active) !important; }`
- 文件:`web/src/components/ui-antd.tsx`
- 保留主题算法逻辑,新增 `buildThemeVisualTokens(isDark)` 收敛布局/壳层/表头色常量来源,避免散落硬编码。
-`ThemeCssVarsScope` 补充 `--ant-color-primary-bg` / `--ant-color-primary-bg-hover` / `--ant-color-primary-hover` 变量导出。
- 在主题切换时同步写入 `document.documentElement.dataset.fquizTheme``dark|light`),驱动 CSS 变量切换。
- 文件:`web/src/app/error.tsx`
- 将所有硬编码颜色替换为 `var(--fquiz-theme-*)` / `var(--ant-*)` 变量。
- 文件:`web/src/app/global-error.tsx`
- 同步替换硬编码颜色为主题变量。
- 文件:`web/src/app/admin/lightning-currents/page.tsx`
- 表格选中行样式由 `bg-blue-50` 改为 `fquiz-row-selected`
- 文件:`web/src/app/admin/power-lines/atp-viewer/page.tsx`
- 表格选中行样式由 `bg-blue-50` 改为 `fquiz-row-selected`
- 文件:`web/src/app/admin/layout.tsx`
- 主题菜单徽标颜色由固定 `blue` 改为 `var(--fquiz-theme-primary, var(--ant-color-primary))`
- 验证(按任务约束未执行编译/安装依赖):
- `rg` 检查确认目标文件内 `#155eef/#101828/#f5f7fb/bg-blue-50` 已清理。
- `git diff` 检查改动范围仅涉及本次主题变量改造文件。
- 风险与影响:
- 影响范围为前端主题层与错误页展示层,不涉及后端接口行为。
- `fquiz-row-selected` 使用 `!important` 以覆盖 AntD 表格单元背景,后续若引入更高优先级行态样式需注意冲突。