Components

MetricCard 统计卡片

专为云控制台、资源仪表盘与运营监控打造的核心指标卡片，集成数值统计、趋势波动分析、单位标注与加载骨架。

指标网格

组合展示吞吐量、响应延时、错误率和在线实例等典型指标。

API 请求量

2,481,200reqs

+14.2%较上周

平均响应耗时

42ms

-8.4%较上周

系统异常率

0.04%

+0.01%较昨日

活跃服务节点

128nodes

正常运行中

<div class="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-4">
  <MetricCard
    title="API 请求量"
    value="2,481,200"
    unit="reqs"
    delta="+14.2%"
    trend="up"
    delta-description="较上周"
  />
  <MetricCard
    title="平均响应耗时"
    value="42"
    unit="ms"
    delta="-8.4%"
    trend="down"
    delta-description="较上周"
  />
  <MetricCard
    title="系统异常率"
    value="0.04"
    unit="%"
    delta="+0.01%"
    trend="up"
    delta-description="较昨日"
  />
  <MetricCard
    title="活跃服务节点"
    value="128"
    unit="nodes"
    description="正常运行中"
    hoverable
  />
</div>

加载态骨架

开启 loading 属性时展示平滑脉冲骨架屏。

实时网络吞吐

实时 CPU 使用率

<MetricCard
  title="实时网络吞吐"
  value="1.24"
  unit="Gbps"
  loading
/>

API 参考

属性	类型	默认值	说明
`title`	`string`	`''`	指标标题文本或通过 #title 插槽自定义。
`value`	`string \| number`	`''`	核心指标数值，自动应用 tabular numbers。
`unit`	`string`	`''`	指标单位。
`delta`	`string \| number`	`''`	波动变化幅度数值或文本。
`trend`	`'up' \| 'down' \| 'neutral'`	`undefined`	趋势方向，自动适配涨跌箭头与语义色彩。
`deltaDescription`	`string`	`''`	趋势对齐基准（如较上周）。
`description`	`string`	`''`	辅助说明文本。
`loading`	`boolean`	`false`	是否展示加载占位骨架屏。
`hoverable`	`boolean`	`false`	是否支持悬停高亮反馈。