Statistic
突出显示单个指标。中文惯用名：统计数值。
稳定本期新增已接入
元信息
| 字段 | 值 |
|---|---|
| 规范 ID | component.statistic |
| 名称 | Statistic |
| 二级分类 | 数据展示（data-display） |
| 用途 | 突出显示单个指标 |
| 描述 | 中文惯用名：统计数值。 |
预览
静态结构：Statistic 根节点 data-slot="statistic"；有 title 时渲染 data-slot="statistic-title"（text-sm 弱化色），下方 data-slot="statistic-value"（text-2xl font-bold tabular-nums）渲染数值——value 为 number 且显式给 precision 时按 toFixed(precision) 格式化，否则原样输出（string 值不做格式化）；suffix 以 ml-1 的小号弱化文本紧随数值之后。
DSL 结构
{
"type": "Statistic",
"props": {
"title": "本月销售额",
"value": 128640.5,
"precision": 2,
"suffix": "元"
}
}何时用
何时使用
- 突出显示单个指标数值：销售额、活跃用户、转化率、库存量。
- 看板 / 概览页的指标行，多组 Statistic 并列形成指标带。
- 需要固定小数位（precision）与单位后缀（suffix）的统一格式化展示。
何时不用
- 需要「单值 + 变化」的趋势信息（同比 / 环比、迷你趋势图）：使用图表分类的 MetricCard（指标卡）；Statistic 只渲染一个数值。
- 多个对象按行列对比：使用 Table；单对象的字段集：使用 Descriptions。
- 需要用户编辑该数值：使用 NumberInput，Statistic 为纯展示。
变体
| 变体 | 视觉形态 | 适用场景 |
|---|---|---|
| 默认（整数） | 标题 + 大号粗体数值 | 计数型指标（用户数、订单数） |
| precision 小数位 | 数值按 toFixed(precision) 输出 | 金额、比率等固定小数位的指标 |
| suffix 后缀 | 数值后跟随小号弱化单位文本 | 带单位 / 百分号的指标（元、人、%） |
| 无标题 | 仅数值行（title 缺省不渲染） | 标题由外层容器统一提供的紧凑布局 |
| string 值直出 | 字符串原样渲染，不做格式化 | 已是格式化结果的文本（如「1.2 万」） |
API 属性
| 属性 | 类型 | 默认值 | 说明 |
|---|---|---|---|
title | string | — | 指标标题；缺省不渲染标题区 |
value | `number | string` | — |
precision | number | — | 小数精度：仅当 value 为 number 且显式声明时按 toFixed 格式化 |
suffix | string | — | 后缀（如单位），渲染在数值之后的小号弱化文本 |
className / style | string / CSSProperties | — | 通用：根节点 class 合并 / 内联样式 |
使用规范
- 同一指标带内的 Statistic 保持一致的 title 风格、precision 与 suffix 单位口径。
- 只展示数值本身；同比 / 环比、趋势线与涨跌色属于指标卡（MetricCard）的职责。
- precision 只作用于 number 值：需要「1.2 万」这类预格式化文案时改传 string，并把单位写进字符串或 suffix。
- 数值位数可能很长（金额、大数）时注意容器宽度与换行，tabular-nums 已对齐数字宽度。
- title 用名词短语（「本月销售额」），不要写成句子或带句末标点。
正例
- ✓ 概览指标带：三个 Statistic 并列（销售额 precision=2 suffix="元" / 活跃用户 suffix="人"）。
- ✓ 预格式化：value 传 "1.2 万" 字符串，避免精度与单位在组件层二次加工。
- ✓ 卡片内指标：配合 Card 组成指标卡块，title 概括口径与周期。
反例
- ✕ 用 Statistic 表达同比变化与趋势（应使用图表分类的 MetricCard 指标卡）。
- ✕ 给 string 值再传 precision 期待补零（string 值原样输出，不套格式化）。
- ✕ 把可编辑数值放进 Statistic（展示组件不承载录入，应使用 NumberInput）。
Design Token 映射
不适用：组件 tokenRefs 为空：样式 Token 数据尚未接入，三层映射（Primitive → Semantic → Component）待样式 Token 接入后回填。