Statistic 统计数值
带标签的关键数字，可以配前后缀。
用法
标签在上、数值在下；数值由使用者格式化后放入，组件不做千分位也不做换算
组件结构
加粗的是必需部件。
data-scope="statistic"：root · label · value · prefix · suffix · trend
示例
前后缀
prefix 与 suffix 和数值排在同一行、按基线对齐，比数值小一档
尺寸
size 改变标签、数值与前后缀的字号，不传 size 即默认档
颜色
tone 决定数值与前后缀使用哪族颜色，标签始终保持弱前景
等宽数字
数值使用等宽数字排版，反复更换数值时字宽不变，后面的单位不会左右移动
涨跌
trend 写为 trend 部件的 data-direction，箭头由皮肤绘制；与 tone 正交：下跌也可以是正向语气
设计指引
何时使用
- 仪表盘、概览页上的核心指标。
何时不用
特性
- 标签、值、前缀、后缀各占一段。
- 数字使用等宽字形，位数变化时不会左右晃动。
trend给出涨跌方向，箭头由皮肤绘制；它与tone正交，下跌也可以是正向语气。
组合
最佳实践
- 单位写进后缀而不是混入数字，数字才能对齐。
- 给出对比基准（同比、环比），单独一个数字无法判断好坏。
反模式
- 一屏内十几个同等大小的指标，没有重点。
- 显示精确到分的金额却不提供货币符号。
API 参考
产物
| 层 | 值 |
|---|---|
| 自定义元素 | <xh-statistic> |
| Vue 组件 | XhStatisticLabel XhStatisticPrefix XhStatisticRoot XhStatisticSuffix XhStatisticTrend XhStatisticValue |
| 状态机 | 无，connect 直接由 props 算属性 |
| 皮肤 | @xihan-ui/styles/statistic.css |
Props
| 属性 | 类型 | 必填 | 说明 |
|---|---|---|---|
size | Size | 尺寸：sm / md / lg，只写为 root 的 data-size。 | |
tone | Tone | 语气：brand / neutral / success / warning / danger / info，只写为 root 的 data-tone。 | |
trend | StatisticTrend | 涨跌：up / down / flat，写为 trend 部件的 data-direction，皮肤据此绘制兜底箭头。 与 tone 正交，方向与颜色互不联动：下跌也可以是正面信息（差错率、退货率）。 |
connect API
getXxxProps() 返回对应部件的宿主属性。
| 成员 | 类型 | 说明 |
|---|---|---|
trend | StatisticTrend | 当前涨跌方向；未提供时为 undefined。 |
getRootProps | () => T['element'] | |
getLabelProps | () => T['element'] | |
getValueProps | () => T['element'] | |
getPrefixProps | () => T['element'] | |
getSuffixProps | () => T['element'] | |
getTrendProps | () => T['element'] |
无障碍
键盘
规格出处：W3C APG
无键盘交互（不接收焦点，或焦点行为完全由原生元素提供）。
样式参考
皮肤
@xihan-ui/styles/statistic.css 按 [data-scope="statistic"][data-part="root"] 部件选择器书写，发布产物以挂载类 .xh-scope-statistic 代替其中的 data-scope（特异性相同），位于 xihan.components 层。覆盖样式使用 xihan.overrides，部件选择器照常可用。
forced-colors: active 下另有一套规则：颜色交给系统，边框与状态标记改用系统色关键字。
数据属性
由 connect 生成；条件不成立时不输出无值属性。
| 部件 | 属性 | 值 |
|---|---|---|
root | data-size | props.size |
root | data-tone | props.tone |
trend | data-direction | props.trend |
CSS 变量
本组件公开覆盖槽由独立皮肤的实际消费位生成；默认来源、作用部件和状态均与 CSS 同源。
| 变量 | 部件 | CSS 属性 | 状态 | 默认来源 | 说明 |
|---|---|---|---|---|---|
--xh-statistic-affix-fg | prefixsuffix | color | default | --xh-_tone-fg | statistic 的 prefix、suffix 部件 color 覆盖槽。 |
--xh-statistic-affix-font-size | prefixsuffix | font-size | default | --xh-_statistic-affix-size | statistic 的 prefix、suffix 部件 font-size 覆盖槽。 |
--xh-statistic-fg | root | color | default | --xh-fg-default | statistic 的 root 部件 color 覆盖槽。 |
--xh-statistic-gap | root | column-gap | default | --xh-space-0 | statistic 的 root 部件 column-gap 覆盖槽。 |
--xh-statistic-icon-size | root | --xh-icon-size | default | --xh-_statistic-icon-size | statistic 的 root 部件 --xh-icon-size 覆盖槽。 |
--xh-statistic-label-fg | label | color | default | --xh-fg-muted | statistic 的 label 部件 color 覆盖槽。 |
--xh-statistic-label-font-size | label | font-size | default | --xh-_statistic-label-size | statistic 的 label 部件 font-size 覆盖槽。 |
--xh-statistic-row-gap | root | row-gap | default | --xh-_statistic-row-gap | statistic 的 root 部件 row-gap 覆盖槽。 |
--xh-statistic-trend-fg | trend | color | default | --xh-_tone-fg | statistic 的 trend 部件 color 覆盖槽。 |
--xh-statistic-trend-font-size | trend | font-size | default | --xh-_statistic-affix-size | statistic 的 trend 部件 font-size 覆盖槽。 |
--xh-statistic-trend-gap | trend | gap | default | --xh-space-0_5 | statistic 的 trend 部件 gap 覆盖槽。 |
--xh-statistic-trend-offset | trend | margin-inline-start | default | --xh-space-2 | statistic 的 trend 部件 margin-inline-start 覆盖槽。 |
--xh-statistic-value-fg | value | color | default | --xh-_tone-fg | statistic 的 value 部件 color 覆盖槽。 |
--xh-statistic-value-font-size | value | font-size | default | --xh-_statistic-value-size | statistic 的 value 部件 font-size 覆盖槽。 |
动效
动效角色：状态（见动效规范）。
color 走 transition 过渡。时长与缓动读动效令牌，改令牌即改全局节奏。
系统开启减弱动效时由令牌层统一收敛，皮肤不另作判断。
RTL
皮肤用逻辑属性排布（inline-start 一族），dir="rtl" 下自动镜像。