Components

Progress 进度条

任务进度、百分比与完成数量，带标签行与语义色。

数值显示、色彩与尺寸

可单独显示百分比、完成数量，或同时显示两者。

节点同步进度72%

健康检查8/12

存储用量68% (34/50)

异常实例

<div class="space-y-4 max-w-md">
  <Progress :value="72" label="节点同步进度" value-display="percentage" color="primary" />
  <Progress :value="8" :max="12" label="健康检查" value-display="fraction" color="success" size="sm" />
  <Progress :value="34" :max="50" label="存储用量" value-display="both" color="warning" size="sm" />
  <Progress :value="12" label="异常实例" color="error" size="sm" />
</div>

API 参考

属性	类型	默认值	说明
`value / max`	`number`	`0 / 100`	当前值与上限。
`label`	`string`	`—`	左侧标签。
`value-display`	`'percentage' \| 'fraction' \| 'both'`	`—`	右侧显示百分比、当前值/上限，或两者。
`show-value`	`boolean`	`false`	兼容属性，等同 value-display="percentage"。
`color`	`'primary' \| 'success' \| 'warning' \| 'error' \| 'neutral'`	`primary`	进度条色。
`size`	`'sm' \| 'md' \| 'lg'`	`md`	轨道高度。