Stat 统计
Stat 用于在一个块中展示数字与数据。组件保持 Rue 当前的 daisyUI 视觉语气，同时提供数值格式化、前后缀、loading 与 timer 能力。
功能概览
- 支持 children 组合写法、items 数据驱动、图标头像、居中/纵向/响应式示例。
- 支持 `Stat.Item` 语义化属性写法，常见场景不必再手写 `Stat.Title / Stat.Value / Stat.Desc`。
- 支持数字格式化能力：`precision`、`groupSeparator`、`decimalSeparator`、`formatter`、`valueRender`。
- 支持 `prefix`、`suffix`、`loading` 与 `Stat.Timer / Stat.Countdown`。
# 基础用法
展示基础复合组件写法，适合完全自定义结构。
Total Page Views
89,400
21% more than last month
# 数据驱动
基础 items 数组能力保持，并自动支持新的 value/prefix/loading 等增强属性。
Downloads
31K
Jan 1st - Feb 1st
Users
4,200
↗︎ 40 (2%)
Account balance
$89,400
# 数值格式化
通过 `value` + `precision` + `prefix/suffix` 直接得到接近业务组件的统计展示。
GMV
112,893.00
格式化后的数值由 Value 自动处理
Success Rate
99.86
支持 0、精度和分组符
# Formatter 与 ValueRender
`formatter` 负责值的映射，`valueRender` 负责值节点的包装。
Requests
1280 req/s
formatter 适合把基础值映射成业务文案
Storage
24,576
valueRender 可以包裹高亮节点
# Loading 与零值
loading 在 value 区域展示 skeleton；`0` 不会再被当成空值吞掉。
Sync Revenue
数据回填前展示 skeleton 占位
Open Orders
0
0 会正常渲染，不会被误判为空
# Timer / Countdown
`Stat.Timer` 提供常见统计组件里的核心计时能力，`Stat.Countdown` 作为倒计时别名保持。
Campaign Countdown
24:00:29
默认按 HH:mm:ss 渲染
Uptime
3h 0m 12s
type='countup' 适合累计时长
# 带图标或头像
整合基础示例，用于展示 figure 区的图标与头像承载能力。
Total Likes
25.6K
21% more than last month
Page Views
2.6M
21% more than last month
86%
Tasks done
31 tasks remaining
# 组合统计卡
展示基础多列指标卡示例，适合运营面板和概览页。
Downloads
31K
Jan 1st - Feb 1st
New Users
4,200
↗︎ 400 (22%)
New Registers
1,200
↘︎ 90 (14%)
# 居中布局
展示 `center` 演示，适合居中对齐的仪表盘摘要。
Downloads
31K
From January 1st to February 1st
Users
4,200
↗︎ 40 (2%)
New Registers
1,200
↘︎ 90 (14%)
# 纵向布局
展示 `direction='vertical'`，用于窄容器中的信息堆叠。
Downloads
31K
Jan 1st - Feb 1st
New Users
4,200
↗︎ 400 (22%)
New Registers
1,200
↘︎ 90 (14%)
# 响应式布局
展示基础 responsive 示例，小屏纵向，大屏横向。
Downloads
31K
Jan 1st - Feb 1st
New Users
4,200
↗︎ 400 (22%)
New Registers
1,200
↘︎ 90 (14%)
# 带操作按钮
展示基础按钮操作区示例，说明 Actions 仍可承载任意交互节点。
Account balance
$89,400
Current balance
$89,400
API
Stat
| 属性 | 说明 | 类型 | 默认值 |
|---|---|---|---|
direction | 统计容器排列方向 | 'horizontal' | 'vertical' | 'horizontal' |
items | 通过数据项快速渲染多个统计块 | StatDataItem[] | - |
className | 补充容器类名，常配合 shadow / border / 响应式类使用 | string | - |
Stat.Item
| 属性 | 说明 | 类型 | 默认值 |
|---|---|---|---|
title / value / desc | 直接声明常用统计内容，无需手写子节点结构 | any | - |
prefix / suffix | 为数值区域追加前缀和后缀 | any | - |
formatter | 自定义数值展示文案 | (value) => any | - |
precision | 数字精度，不传则展示基础小数 | number | - |
loading | 在 value 区域展示 skeleton 占位 | boolean | false |
center | 启用居中布局 | boolean | false |
Stat.Value
| 属性 | 说明 | 类型 | 默认值 |
|---|---|---|---|
value | 支持 number、string 或任意展示节点 | any | - |
groupSeparator | 千分位分隔符 | string | ',' |
decimalSeparator | 小数点分隔符 | string | '.' |
valueRender | 包装格式化后的值节点，适合高亮或插入 tag | (node) => any | - |
Stat.Timer / Stat.Countdown
| 属性 | 说明 | 类型 | 默认值 |
|---|---|---|---|
type | 计时类型，支持倒计时和累计计时 | 'countdown' | 'countup' | 'countdown' |
value | 目标时间，支持时间戳、Date、可解析字符串 | number | string | Date | - |
format | 时间格式，支持 D/H/m/s/S 和 [literal] 文本 | string | 'HH:mm:ss' |
interval | 主动指定刷新间隔 | number | 自动推断 |
onChange / onFinish | 监听剩余或累计时长变化，以及倒计时结束 | function | - |