Progress 进度条
可视化操作的完成度。
何时使用
- 操作耗时 ≥ 2 秒，需向用户反馈进度。
- 文件上传 / 下载 / 后台任务的实时进度。
- 数据填充率、目标完成率等"百分比"指标。
基本使用
线形进度条，percent 取值 0–100。
不同状态
status 决定进度条颜色与图标：normal / active（带流光动画）/ success / exception。
自定义颜色
stroke-color 改进度条主色，trail-color 改未完成部分的灰底色。
自定义文案
format 接收百分比，返回任意字符串，常用于"已完成 / 总数"展示。
圆形
type="circle" 渲染为圆环；width 控制画布大小。
仪表盘
type="dashboard" 是底部留缺口的圆形，常见于"剩余配额 / 容量占用"。
动态进度
配合 setInterval 模拟一个上传进度。
不同尺寸
size 支持 'small' | 'default' | number | [number, number] 四种形式。
隐藏百分比数字
show-info="false" 关闭右侧 / 中心的数字，常用于「占位条」或紧凑列表。
自定义线宽
stroke-width 改进度条线宽（line：高度 px；circle / dashboard：描边粗细）。
圆形不同尺寸
width 改圆形 / 仪表盘的画布尺寸（px），适合卡片中不同大小的指标圈。
渐变色（line-gradient）
stroke-color 接受 CSS linear-gradient 字符串，实现渐变填充。
步骤式进度（多段）
通过多个 <c-progress> 实现「步骤完成度」展示，每段代表一个步骤。
失败 + 重试
status="exception" 显示失败态，业务侧改 percent 与 status 切回 active 即可重试。
剩余时间提示（format 计算）
format 是普通函数，可结合外部状态计算 ETA。
API
Props
| 参数 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| percent | number | 0 | 百分比 0–100 |
| type | 'line' | 'circle' | 'dashboard' | 'line' | 形态 |
| status | 'normal' | 'active' | 'success' | 'exception' | 'normal' | 状态 |
| showInfo | boolean | true | 显示百分比数字 |
| strokeColor | string | — | 进度条颜色（不传走主色 token） |
| trailColor | string | — | 未完成段颜色 |
| strokeWidth | number | — | 线宽（line: px；circle: 描边粗细） |
| width | number | 120 | 圆形 / 仪表盘的画布尺寸（px） |
| size | 'default' | 'small' | number | [number, number] | 'default' | 尺寸 |
| format | (percent: number) => string | — | 自定义中心 / 后置文案 |