chenshoulin
54c08d6ade
fix(ui): 日期占位遮挡改用普通 CSS 规则，不再依赖 Tailwind 任意变体
上一版用 `[&:not(:focus)::-webkit-datetime-edit]:text-transparent` 遮挡
浏览器自带的格式提示，但实际渲染里出现「选择日期」与「yyyy / mm / 日」
重叠——遮罩没生效。
排查过程：
- 该规则在 dev 与 build 产物里都存在，dev 环境下 Chrome 与 Edge 均正常
- 用不含项目 CSS 的最小页面做隔离测试：Edge 的基线确实显示
「yyyy / mm / 日」（与反馈截图一致），且三种写法在 Edge 下都有效
- 结论：问题不在规则本身，而在这条规则依赖 Tailwind 扫描器从模板
字符串里提取类名，在 HMR / 增量构建时可能漏掉，属于不可靠的写法
修复：改在 style.css 里写普通 CSS，类名 date-field--blank。
- 刻意放在 @layer 之外：utilities 层优先级高于 components 层，
放进层里会被 text-slate-700 这类工具类盖掉
- 同时覆盖输入框自身与各分段伪元素，避免不同 Chromium 版本
着色位置不一致
- 仍保持「只在未聚焦时遮挡」，否则编辑时看不见正在输入的数字
验证：构建产物含全部 6 条规则；用 preview 起生产构建，Chrome 与 Edge
下字段均只显示「选择日期」。单元测试 485 个、E2E 25 个通过。
2026-10-18 18:19:01 +08:00
..
2026-10-18 14:05:06 +08:00
2026-10-18 17:48:55 +08:00
2026-10-18 11:59:49 +08:00
2026-10-18 17:48:55 +08:00
2026-10-18 14:05:06 +08:00
2026-10-18 17:48:55 +08:00
2026-10-18 14:05:06 +08:00
2026-10-18 17:56:30 +08:00
2026-10-18 18:19:01 +08:00
2026-10-18 18:19:01 +08:00
2026-10-18 11:59:49 +08:00
2026-10-18 17:48:55 +08:00
2026-10-18 11:59:49 +08:00
2026-10-18 17:48:55 +08:00
2026-10-18 11:59:49 +08:00
2026-10-18 17:48:55 +08:00
2026-10-18 14:05:06 +08:00
2026-10-18 18:05:05 +08:00
2026-10-18 11:59:49 +08:00
2026-10-18 17:48:55 +08:00
2026-10-18 17:48:55 +08:00
2026-10-18 17:48:55 +08:00
2026-10-18 11:59:49 +08:00
2026-10-18 17:48:55 +08:00
2026-10-18 11:59:49 +08:00
2026-10-18 17:48:55 +08:00