梧桐设计语言v0.4.1

指标Metric

指标卡:metric 大数字(等宽)+ 小号后缀(meta + muted-foreground),下面一条极简 sparkline。放在 card 里,space-4 内距,四五个横排。


两种 sparkline,按指标类型选:

  • 趋势(本月工单、已完成、新沉淀经验):1.5px 细折线 muted-foreground,端点圆点 foreground 3px。无面积、无坐标轴。
  • 分布(超期数、平均处理时长):竖刻度 border 一排,当前值处一个三角指针 foreground。它回答「当前值在历史里处在什么位置」,比折线信息量大。

增减:涨用 rise(红),跌用 fall(绿)——红涨绿跌。「+12」这种新增量也是红。

消费者提供:标题、数值、后缀、历史序列。

示例

import
import { Metric, Sparkline } from "@wutong/ui";

指标行

趋势用折线,分布用竖刻度;「+12」是红色——红涨绿跌

本月工单
156
已完成
13285%
超期未处理
8需关注
新沉淀经验
47+12

API

属性类型默认说明
label / valueReactNode标题与大数字(等宽)
suffixReactNode后缀:%、天、正常,小一号灰色
trend"rise" | "fall"后缀的涨跌色。红涨绿跌
historynumber[]历史序列,≥2 个点画 sparkline
sparkline"trend" | "scale""trend"折线 / 竖刻度指针