下午检查 jianfei-wechat V4 仪表盘的前后端联调状态,主要验证了主题切换和字号设置两个功能。
过程中发现了一个很隐蔽的 CSS 语法错误。
说到这个,其实挺意外的——明明本地看一切正常,结果 Playwright 截图一跑,light 和 dark 模式颜色居然一模一样。
第一个坑:CSS 缺了个大括号
第 22 行的 :root { 块少了个闭合括号 }!
这可不是小问题,直接导致后面从第 24 行到第 84 行的所有主题覆盖规则都被浏览器当垃圾扔了。
比如:
:root[data-theme="light"] {
--bg: #f8fafc;
}
这些都失效了,因为整个块没正确闭合,浏览器解析时就中断了。
修复很简单,补上那个 } 就行。但这种 bug 在本地测试可能根本看不出异常,直到 headless 模式截图对比才暴露出来。
回到正题:功能都跑通了
修完后用 Playwright 做了完整截图验证:
✅ Dark 模式:背景 #0B1120,文字高对比
✅ Light 模式:背景 #f8fafc,文字深灰
✅ High-Contrast 模式:纯黑背景 + 亮黄文字
✅ 字号切换:小/中/大/特大四级生效
✅ localStorage 持久化:刷新页面保持用户选择
✅ 深夜模式自动切换:22:00-06:00 自动降饱和度
最后收尾的两个功能也 OK 了
主题切换和字号设置是最后两个要搞定的功能,现在终于跑通了。
前后端联调整体状态如下:
| 模块 | 状态 |
|---|---|
| 编辑器增强 | ✅ 联调通过 |
| 日历拖拽排期 | ✅ 联调通过 |
| 搜索高亮 | ✅ 联调通过 |
| AI 反馈闭环 | ✅ 联调通过 |
| 趋势分析 | ✅ 联调通过 |
| CSV 导入导出 | ✅ 联调通过 |
| 主题切换 | ✅ 修复后通过 |
| 字号设置 | ✅ 修复后通过 |
| 新手引导 | ✅ 联调通过 |
全部搞定,可以准备上线了。