metric · 指标块

报表里“一个数”的最小完整单元：一个标签、一个值、一句上下文。 KPI 行、详情页顶部、监控面板，都由它排出来。

一个完整的 metric

四件必须一起做对的事：数字等宽（上下两行数位对齐，竖着扫能比大小）、 单位分离成槽位（拼进字符串就没法单独调样式，也没法让数字右对齐时把单位甩在外面）、 缺数是一等状态（见下）、方向交给 delta（本组件不管颜色）。
结构用 <dl> 是因为“标签—值”在 HTML 里有现成语义： 读屏会念「营业总收入 1,294.06 亿元 +12.40% 同比」。用 <div> 只会念一串没有关系的词（CSS 只认类名，用 div 也能渲染，但不推荐）。

一行四个 KPI

第四块是缺数：值写 —（U+2014），并在脚下说明原因。 它不隐藏、不变灰到看不见、也不填 0 —— 版面塌掉比显示“没有”更糟， 而填 0 是伪造数据：读者会把“未披露”读成“现金流为零”。
网格用 metric-grid，它内部是 minmax(min(100%, 12rem), 1fr) —— 那层 min() 不是冗余： 窄容器下 12rem 会比可用宽度还大，没有它就会横向溢出。

三档字号

三档够了。出现第四档说明 KPI 行的层级没规划好（与 badge / card 同一判断标准）。

迷你走势槽位

metric__spark 只是一个槽位 —— 它不关心里面放什么。 上面放的是 sparkline，也可以什么都不放（前三块就没有）。 槽位存在但为空时不留空白高度，所以同一个网格里有没有走势图都能对齐。

反例：缺数填 0

为什么不能靠“变淡”表达缺数：颜色淡了但字还在，读者仍会读那个数字。 缺数的正确表达是不给出数字，再加一句为什么。
⚠️ 也不要用 opacity 压淡 —— --text-tertiary 的 5.33:1 已经是地板，再乘一次透明度就跌破 4.5。改令牌才是对的做法。

两条边界

① 本组件不做格式化。千分位、小数位、单位换算都由数据侧决定 —— CSS 不知道“1,294.06”和“1294.06”哪个对。库能保证的是 等宽对齐与不换行。
② 不要把 delta 写进 metric__value。值里混进变化量之后， 等宽对齐就失效了（数字位数不同），而且读屏会念成一串。 变化量放 metric__foot。