StatCard 指标卡片
用于展示一个数字/指标与对应描述。
StatCard 指标卡片
用于展示一个数字/指标与对应描述。
基础用法
默认样式
基础卡片布局，不包含趋势和进度增强。
交互预览已暂停。
趋势样式
通过 insight 展示变化趋势和对比信息。
交互预览已暂停。
进度样式
使用 progress 切换为进度卡片，并支持 Shuffle 动态刷新。
交互预览已暂停。
API
Props
| 属性名 | 类型 | 默认值 | 说明 |
|---|---|---|---|
value | number | string | - | 显示值 |
label | string | - | 描述文本 |
iconClass | string | '' | 图标 class（UnoCSS icones） |
clickable | boolean | false | 鼠标悬浮/点击态 |
insight | StatCardInsight | - | 指标变化对象（启用后标题上移） |
variant | StatCardVariant | 'default' | 变体（default | progress） |
progress | number | - | 进度百分比（0-100），传入即启用进度变体 |
meta | string | - | 进度变体底部说明文本 |
StatCardInsight
| 字段 | 类型 | 默认值 | 说明 |
|---|---|---|---|
from | number | - | 基准值 |
to | number | - | 当前值 |
type | 'percent' | 'delta' | 'percent' | 百分比变化或绝对增量 |
color | 'success' | 'danger' | 'warning' | 'info' | string | - | 自定义颜色 |
iconClass | string | - | 指标图标 |
suffix | string | - | 自定义后缀（默认 percent 为 %） |
precision | number | - | 小数精度 |
Slots
| 插槽 | 说明 |
|---|---|
value | 自定义数值区域 |
label | 自定义标题区域 |
meta | 进度变体底部说明 |
Components