Statistic 统计数值
带标签的关键数字，可以配前后缀。
用法
标签在上、数值在下；数值由使用者格式化后放入，组件不做千分位也不做换算
本月新增用户12,480
组件结构
加粗的是必需部件。
data-scope="statistic"：root · label · value · prefix · suffix · trend
示例
前后缀
prefix 与 suffix 和数值排在同一行、按基线对齐，比数值小一档
账户余额¥3,240.00
转化率68.4%
较上月12.5%
尺寸
size 改变标签、数值与前后缀的字号，不传 size 即默认档
小86.7%
默认86.7%
大86.7%
颜色
tone 决定数值与前后缀使用哪族颜色，标签始终保持弱前景
brand24.8%
neutral24.8%
success24.8%
warning24.8%
danger24.8%
info24.8%
等宽数字
数值使用等宽数字排版，反复更换数值时字宽不变，后面的单位不会左右移动
今日成交额1,111.11元
涨跌
trend 写为 trend 部件的 data-direction，箭头由皮肤绘制；与 tone 正交：下跌也可以是正向语气
本月新增用户12,480人同比 12.4%
订单退货率1.8%同比 0.6%
平均响应时长240ms与上周持平
设计指引
何时使用
- 仪表盘、概览页上的核心指标。
何时不用
特性
- 标签、值、前缀、后缀各占一段。
- 数字使用等宽字形，位数变化时不会左右晃动。
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"] 部件选择器，位于 xihan.components 层。覆盖样式使用 xihan.overrides。
数据属性
由 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 覆盖槽。 |
动效
本组件皮肤不含过渡与关键帧，也没有脚本驱动的动效：状态一变，外观立即到位。
RTL
皮肤用逻辑属性排布（inline-start 一族），dir="rtl" 下自动镜像。