Stat
stat展示一个关键指标的数值、标签和升降趋势
用法
基础用法
传入 label 与 value 即成一张 KPI 指标卡。
注册用户
8,021
tsx
<Stat label="注册用户" value="8,021" />环比趋势
delta>=0 升（text-primary）/ <0 降（text-danger），配 deltaLabel 说明口径。
本月 GMV
¥128,400
+12.5%较上月
退款率
2.3%
-4.1%较上月
tsx
<>
<Stat label="本月 GMV" value="¥128,400" delta={12.5} deltaLabel="较上月" />
<Stat label="退款率" value="2.3%" delta={-4.1} deltaLabel="较上月" />
</>带图标
icon 插槽渲染在右上角，弱化为 muted 色。
本月 GMV
¥128,400
+12.5%较上月
tsx
<Stat
label="本月 GMV"
value="¥128,400"
delta={12.5}
deltaLabel="较上月"
icon={<Activity className="size-4" />}
/>语义色底座
tone 只给 icon 底座上色（浅底 + 语义色文字），value 与趋势的颜色一律不动。一排同构 KPI 卡靠底座颜色分辨类别，不必自己叠一层底座去盖住组件的。默认 neutral 即中性灰；不传 icon 时 tone 没有落点。
订阅用户
8,021
在线设备
1,284
待处理告警
7
故障节点
2
待同步
19
已归档
431
tsx
<div className="grid grid-cols-3 gap-4">
<Stat label="订阅用户" value="8,021" tone="brand" icon={<Users className="size-4" />} />
<Stat label="在线设备" value="1,284" tone="success" icon={<Activity className="size-4" />} />
<Stat label="待处理告警" value="7" tone="warning" icon={<Bell className="size-4" />} />
<Stat label="故障节点" value="2" tone="danger" icon={<AlertTriangle className="size-4" />} />
<Stat label="待同步" value="19" tone="info" icon={<RefreshCw className="size-4" />} />
<Stat label="已归档" value="431" tone="neutral" icon={<Archive className="size-4" />} />
</div>注脚 hint
与趋势无关的一行说明用 hint，独立于 delta 渲染；两者同时存在时趋势行在上、注脚在下。注意 deltaLabel 依附于 delta，不传 delta 时它不会渲染。
题篮题数
12
上限 200 题
参考人数
38
+6.4%较上场
2 人未交卷
tsx
<>
<Stat label="题篮题数" value="12" hint="上限 200 题" />
<Stat label="参考人数" value="38" delta={6.4} deltaLabel="较上场" hint="2 人未交卷" />
</>网格排布
多张指标卡可直接用网格布局拼成看板。
注册用户
8,021
+5.2%较上月
订单数
1,204
-2.1%较上月
tsx
<div className="grid grid-cols-2 gap-4">
<Stat label="注册用户" value="8,021" delta={5.2} deltaLabel="较上月" icon={<Users className="size-4" />} />
<Stat label="订单数" value="1,204" delta={-2.1} deltaLabel="较上月" icon={<ShoppingCart className="size-4" />} />
</div>何时用
仪表盘里展示单个 KPI 指标卡：标签 + 数值 + 环比升降 + 可选图标/sparkline 插槽。要纯文本格式化数值（千分位/前后缀/倒计时）而非整张卡用 Statistic；要画趋势曲线/分布用 Chart；要表达占比量条用 Meter。
导入
ts
import { Stat } from "@hulianui/ui"Props
| 名称 | 类型 | 默认 | 说明 |
|---|---|---|---|
| delta | number | - | 环比百分比，>=0 升(text-primary) / <0 降(text-danger)；不传则不渲染趋势 |
| tone | "neutral" | "brand" | "info" | "success" | "warning" | "danger" | "neutral" | 语气色，只作用于 `icon` 底座（浅底 + 语义色文字），不改 value / delta 的颜色；不传 icon 时无落点 |
| …HTMLAttributes | HTMLAttributes<HTMLDivElement> | - | 透传 div 原生属性（含 className） |
Slots
| 插槽 | 类型 | 说明 |
|---|---|---|
| label* | ReactNode | 指标标签 |
| value* | ReactNode | 指标数值（自行格式化好的字符串/节点） |
| deltaLabel | ReactNode | 趋势旁说明文案（如「较上月」）。依附于 delta，不传 delta 则不渲染 |
| hint | ReactNode | 与趋势无关的一行注脚（如「上限 200 题」），独立于 delta 渲染，位于趋势行下方 |
| icon | ReactNode | 角标图标 |
| chart | ReactNode | 图表插槽（如 KPI 趋势 sparkline），渲染在数值行下方、delta 上方 |
禁忌 / 坑
- `deltaLabel` 依附于 `delta`，单独传会被静默吞掉：不传
delta时整块趋势不渲染，deltaLabel一起消失——TS 能过、控制台干净、页面只是少一行字。要「数值 + 一行与趋势无关的注脚」请用hint（开发态现在也会console.warn点名这种误用）。 - `tone` 只给 `icon` 底座上色，
value与趋势行的颜色不受影响（升=primary / 降=danger 这条口径不变）。因此不传icon时tone一处也落不下去——这种情况开发态会console.warn点名，不要靠反复换 tone 值去试。 - 不要为了让标签更醒目而往 `label` 里塞 `<span className="text-foreground">`：
label默认就是text-foreground（卡片标题），hint与deltaLabel才是text-muted-foreground（注脚与口径）。反过来想让标签更弱也不要改色——那会让它和注脚重新撞成一档。 delta不传则整块趋势不渲染；正负号由数值符号决定颜色，无需自己加箭头。value不做格式化，需自己传格式化后的内容（要自动千分位/前后缀走 Statistic）。- 卡片自带
shadow-sm+border-hairline（亮色无描边只有投影、暗色有 1px 描边），是库内「有阴影的容器」统一档位。要回到无阴影的纯平面，用className="shadow-none border-border"覆盖。 value字号是 30px 且truncate。比早期版本大一档，窄卡（< 200px）里长数值更容易被截断——给卡片留够宽度，或把长数值改走Statistic的紧凑排版。- 卡片不带 hover 抬升，因为 Stat 本身不可点。把它包成链接/按钮时，hover 反馈请加在外层包裹元素上。
- 标题行固定 32px 高（
icon底座的尺寸），有没有 `icon` 都一样——同一排 KPI 卡可以放心混用「有 icon」与「无 icon（右上角留给叠放的 Sparkline）」，数值行起点与卡片高度不会因此错开。
相关
Statistic · Chart · Meter · Timeline · NumberTicker · WorldMap
Playground
本月 GMV
¥128,400
+12%较上月
<Stat label="本月 GMV" value="¥128,400" delta={12} deltaLabel="较上月" />