v0.1.5 — UI 细节第三轮:全面对齐 CC Switch
修复项(对照验收反馈)
1. 表格数值列与表头严格对齐(真正的根因)
- 此前数值列"对不齐"是 CSS 特异性问题:
.table th(0,1,1)压过.num的右对齐(0,1,0),表头始终左对齐而数据单元格右对齐。新增.table th.num { text-align: right }后表头与数据严格对齐(三个表格同时修复)。
2. 表格列布局(参考 CC Switch RequestLogTable)
- 去掉 fixed 布局,改为 CC Switch 式内容自适应列宽(表头天然不可能重叠)+ min-width 700px + 横向滚动;
- 时间列改为 CC Switch 式紧凑格式
MM/DD HH:mm(完整时间悬浮可见),为其他列腾出空间; - Model 列上限 220px、超长省略 + hover title 显示全名(CC Switch 同款做法),不再无意义截断。
3. tooltip 跟随鼠标(丝滑)
- tooltip 位置随 mousemove 实时更新(数值仍吸附最近数据点,与 recharts 一致),靠近右/上边界时自动翻转到另一侧,不再固定吸附。
4. 布局取中间
- 页面最大宽度 860px → 1000px:不拉满窗口、也不缩成窄条,留白适中。
5. 其他细节对齐
- 图表网格改为虚线(recharts
strokeDasharray 3 3同款); - 右轴增加费用刻度(CC Switch 双轴都渲染刻度)。
致谢:使用统计页面 UI 全面参考 CC Switch(farion1231,MIT 协议)的 Usage Statistics 页面——布局、配色、图表样式与交互密度均以其为蓝本,README(中/英)已新增致谢段落,GitHub 仓库 description 已同步更新(中英双语)。
测试
- 全部 59 个测试通过(7 个文件);构建通过,bundle 内断言全部新规则存在