指标卡
单值与变化。建议英文标识：MetricCard。
稳定本期新增已接入
元信息
| 字段 | 值 |
|---|---|
| 规范 ID | component.metric-card |
| 名称 | 指标卡 |
| 二级分类 | 图表（charts） |
| 用途 | 单值与变化 |
| 描述 | 建议英文标识：MetricCard。 |
预览
静态结构：<div data-slot="metric-card">（rounded-lg border bg-card p-4）；标题 muted 小字，数值 text-2xl font-semibold tabular-nums；trend ≠ 0 时展示趋势行（data-trend=up/down，上升 text-success + ArrowUpRight，下降 text-destructive + ArrowDownRight）。
DSL 结构
{
"type": "MetricCard",
"props": {
"title": "月收入",
"value": 12800,
"prefix": "¥",
"trend": 12.5,
"trendLabel": "较上月"
}
}何时用
何时使用
- 看板 / 报表顶部的单指标概览（单值 + 变化趋势）。
- 与图表组合成监控页头：MetricCard 给数值结论，图表给过程细节。
何时不用
- 纯数值无趋势诉求且空间紧凑：用更轻量的 Statistic。
- 多指标对比表格：用 Table / Descriptions。
变体
| 变体 | 视觉形态 | 适用场景 |
|---|---|---|
| 纯数值 | 标题 + 大数值 | 无对比诉求的概览数字 |
| 带趋势 | 数值下追加趋势箭头行 | 环比 / 同比变化的指标卡 |
API 属性
| 属性 | 类型 | 默认值 | 说明 |
|---|---|---|---|
title | string | — | 指标标题 |
value | `number | string` | — |
prefix / suffix | string | — | 数值前后缀（¥ / 单位） |
trend | number | — | 趋势百分比：正升负降，0 / 缺省不展示 |
trendLabel | string | — | 趋势对比说明（如"较上月"） |
className / style | string / CSSProperties | — | 通用 props |
使用规范
- 趋势色走语义令牌（升 success / 降 destructive），不自定义色值。
- 同一看板行的 MetricCard 宽高对齐，数值精度一致。
- 趋势值为 0 时不展示趋势行，避免误导性水平箭头。
正例
- ✓ 经营看板：四张 MetricCard（收入/订单/客单/退款）+ 下方 AreaChart 趋势。
反例
- ✕ 把 MetricCard 当按钮或可点击卡片使用（它是纯展示组件）。
Design Token 映射
不适用：组件 tokenRefs 为空：样式 Token 数据尚未接入，三层映射（Primitive → Semantic → Component）待样式 Token 接入后回填。