仅桌面端保证样式
CreditsProgress 用量进度
额度条形进度：栅格细条墙按容器宽度自适应根数，配合刷新周期头与用量/剩余脚注，适合展示席位、Credits、存储、API 调用等配额型资源。超额自动转红，剩余不足 20% 高亮警示。默认无外围边框，干净融入页面；需要卡片质感时外层套 eb-section-card 即可。
基础用法
used / total 必填，细条墙按已用比例从左向右填充。
卡片化包装
默认无边框，套一层 eb-section-card 即获得带标题的卡片形态。
本月 Credits
套餐内 Credits将于 2026-10-01 刷新
刷新周期
refresh-date 显示刷新时间头，refresh-label 自定义资源名（默认「套餐内 Credits」）。
本月 API 调用额度将于 2026-10-01 00:00 刷新
剩余警示与超额状态
剩余低于 20% 时剩余数字高亮警示；used > total 时整条栅格转红（超额）。
套餐内 Credits将于 2026-10-01 刷新
套餐内 Credits将于 2026-10-01 刷新
尺寸与栅格密度
size 控制整体字号档位；bar-width / gap / bar-height 控制细条的宽度、间距与栅格总高（默认按容器宽度自适应根数，max-bars 封顶）。
自定义颜色
filled-color / empty-color 覆盖填充与空置颜色，可做语义化配色（如成功色表示健康用量）。
项目落地：团队配额卡
与 Card / StatCard 组合成团队资源用量面板（完整用法见项目协作示例）。
AI Credits
套餐内 Credits将于 2026-10-01 00:00 刷新
存储空间
API
CreditsProgress Props
| 参数 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| used | 已使用额度 | number | 必填 |
| total | 总额度 | number | 必填 |
| refreshDate | 刷新时间文案，非空时显示头部 | string | 空字符串 |
| refreshLabel | 头部资源名称 | string | 套餐内 Credits |
| maxBars | 细条根数上限 | number | 200 |
| size | 尺寸档位 | string | default |
| gap | 细条间距（px） | number | 1.5 |
| barWidth | 单根细条宽度（px） | number | 3 |
| barHeight | 栅格总高（px），默认随字号 | number | 0 |
| filledColor | 填充颜色 | string | var(--eb-color-primary) |
| emptyColor | 空置颜色 | string | var(--eb-border-color-lighter) |