Stat / KPI 关键指标
数字 + 标签 + 趋势的指标卡片，适合 dashboard 顶部的指标摘要。
基础用法
label + value 是最低配置。
今日访问
12384
<CfStat label="今日访问" :value="12384" variant="outlined" /><CfStat label="今日访问" value={12384} variant="outlined" />趋势 / 前后缀
trend —— { delta, direction?, label? }，方向不传时按数值符号自动推断（正数绿、负数红、0 灰）。prefix / suffix 给数字加前后小字（货币 / 百分号）。
今日访问
12384
+12.4%环比昨日
转化率
3.2%
-0.4%环比昨日
收入
¥84520
0与昨日持平
<CfStat label="今日访问" :value="12384" :trend="{ delta: '+12.4%', label: '环比昨日' }" variant="outlined" />
<CfStat label="转化率" value="3.2" suffix="%" :trend="{ delta: '-0.4%', label: '环比昨日' }" variant="outlined" />
<CfStat label="收入" :value="84520" prefix="¥" :trend="{ delta: 0, label: '与昨日持平' }" variant="outlined" /><CfStat label="今日访问" value={12384} trend={{ delta: '+12.4%', label: '环比昨日' }} variant="outlined" />
<CfStat label="转化率" value="3.2" suffix="%" trend={{ delta: '-0.4%', label: '环比昨日' }} variant="outlined" />
<CfStat label="收入" value={84520} prefix="¥" trend={{ delta: 0, label: '与昨日持平' }} variant="outlined" />三种 variant
variant 控制背景与边框：default（透明）/ outlined（描边）/ soft（浅灰底）。
default
42
无边框，透明背景
outlined
42
带描边，常用做卡片
soft
42
灰色软背景
<CfStat label="default" :value="42" />
<CfStat label="outlined" :value="42" variant="outlined" />
<CfStat label="soft" :value="42" variant="soft" /><CfStat label="default" value={42} />
<CfStat label="outlined" value={42} variant="outlined" />
<CfStat label="soft" value={42} variant="soft" />三档尺寸
size 改变主数字字号 — sm 紧凑 / md 默认 / lg 落地页强调。
size = sm
42
size = md
42
size = lg
42
<CfStat label="size = sm" :value="42" size="sm" variant="outlined" />
<CfStat label="size = md" :value="42" size="md" variant="outlined" />
<CfStat label="size = lg" :value="42" size="lg" variant="outlined" /><CfStat label="size = sm" value={42} size="sm" variant="outlined" />
<CfStat label="size = md" value={42} size="md" variant="outlined" />
<CfStat label="size = lg" value={42} size="lg" variant="outlined" />加载态
loading 时数字位显示 —，避免数据未到时闪现 0。
数据加载中
0
正常状态
123
<CfStat label="数据加载中" :value="0" loading variant="outlined" />
<CfStat label="正常状态" :value="123" variant="outlined" /><CfStat label="数据加载中" value={0} loading variant="outlined" />
<CfStat label="正常状态" value={123} variant="outlined" />API
| 属性 | 类型 | 默认值 | 说明 |
|---|---|---|---|
label | string | ReactNode | — | 顶部小字标签 |
value | string | number | ReactNode | — | 主数字 |
prefix / suffix | string | ReactNode | — | 数字前后小字 |
hint | string | ReactNode | — | 底部辅助说明 |
trend | StatTrend | — | { delta, direction?, label? }，方向不传时按数值符号自动推断 |
variant | 'default' | 'outlined' | 'soft' | 'default' | 视觉模式 |
size | 'sm' | 'md' | 'lg' | 'md' | 数字字号 |
loading | boolean | false | 加载态，数字位显示 — |
Slot（Vue）/ prop（React）：leading / trailing（label 行两端）、footer（底部追加）。
反馈与讨论
Stat / KPI 关键指标 的讨论