Skip to content

v0.1.5 — UI 细节第三轮:全面对齐 CC Switch

Choose a tag to compare

@Visol-456 Visol-456 released this 15 Aug 11:07
· 1 commit to main since this release

修复项(对照验收反馈)

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 内断言全部新规则存在