指标Metric
指标卡:metric 大数字(等宽)+ 小号后缀(meta + muted-foreground),下面一条极简 sparkline。放在 card 里,space-4 内距,四五个横排。
两种 sparkline,按指标类型选:
- 趋势(本月工单、已完成、新沉淀经验):1.5px 细折线
muted-foreground,端点圆点 foreground 3px。无面积、无坐标轴。
- 分布(超期数、平均处理时长):竖刻度
border 一排,当前值处一个三角指针 foreground。它回答「当前值在历史里处在什么位置」,比折线信息量大。
增减:涨用 rise(红),跌用 fall(绿)——红涨绿跌。「+12」这种新增量也是红。
消费者提供:标题、数值、后缀、历史序列。
示例
import { Metric, Sparkline } from "@wutong/ui";
指标行
趋势用折线,分布用竖刻度;「+12」是红色——红涨绿跌
API
| 属性 | 类型 | 默认 | 说明 |
|---|
| label / value | ReactNode | — | 标题与大数字(等宽) |
| suffix | ReactNode | — | 后缀:%、天、正常,小一号灰色 |
| trend | "rise" | "fall" | — | 后缀的涨跌色。红涨绿跌 |
| history | number[] | — | 历史序列,≥2 个点画 sparkline |
| sparkline | "trend" | "scale" | "trend" | 折线 / 竖刻度指针 |