v1.9.3 · 账户表的「类型」列不再竖着排(行高 71px → 55px)
账户表的「类型」列不再竖着排
维护者报的 prod 问题:报表页账户表的「类型」列竖着排,「现金」两行、「贵金属」三行,行高被顶到 71px(仪表盘同类表是 55px)。
根因不是「pill 太窄」
是 table-layout: auto 的列宽分配规则:这张表最多 17 列、自然宽 ~1790px,远超容器 ~1071px。这种情况下浏览器会把能折行的内容压到 min-content(中文可以 1 字/行)再把宽度让给不能折的列。
所以凡是「没声明不折行」的内容都会被压竖。「类目」那列有 whitespace-nowrap 所以一直好的,「类型」漏了。
顺着根因查,同一挤压打中四处
| 位置 | 现象 | 行高 |
|---|---|---|
| 类型 pill | 「现金」2 行、「贵金属」3 行 | 71px |
| 收益率 / 本位币年化的「累」上标 | 宽值行(930.85%)折两行、窄值行(0.44%)不折 | 67px |
| 预实的上标(仪表盘) | 个别行折行 | 73px |
| vs 基准「跑输 -87.10pp」 | 107px 装不下 | 67px |
后三处比单纯变高更难看 —— 同一列有的一行有的两行。
修法:属性级规则,不是逐个格补
最初是逐个格补 whitespace-nowrap 的(补了 4 处),然后换成一条规则:两张账户表的 td.num 整类 white-space: nowrap。
理由:逐点补的话,下次加一个 data-mcol 指标列又会漏。能按属性网住整类就不要逐点 —— 和币种不变性那次一样的教训。类型 pill 另加 min-width:3.4em 居中,与仪表盘账户表对齐(v1.6.31 给手机卡片做过同样处理,当时漏了 PC 宽表)。
结果:报表表 71px → 55px,与仪表盘一致;仪表盘那几个 73px 行也归到 55px。两张表现在没有任何超过 60px 的行(逐行量过,不是目测)。手机端卡片布局无回归。
顺手修掉一个裸 code
周期下钻弹窗里类型写的是 ${row.accountType} —— 那是 AccountType 枚举本身,渲染出来是 CASH / STOCK,而其余表一律 .label。给非技术家人看的表格里冒出 CASH 是缺陷。
附带发现:该片段没有任何页面引用,GET /reports/period/{id} 是只能手敲 URL 到的孤立端点 —— 难怪一直没被发现。
升级注意
- 无 DB 迁移,回滚只回 jar
- 纯 CSS / 模板改动,对现有数据零影响
477 单元测试 · 553 黑盒回归(新增 v193-TABLE-NUM-NOWRAP / v193-TYPE-LABEL)· 74 条 e2e 断言
设计文档:prd/v1.9.md 附录