@@ -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 表格单元背景,后续若引入更高优先级行态样式需注意冲突。
|
||||
|
||||
Reference in New Issue
Block a user