xtraderClient/docs/components/HorizontalProgressBar.md

HorizontalProgressBar.vue

路径：src/components/HorizontalProgressBar.vue

功能用途

横向进度条，用于订单簿深度展示等场景。根据 value/max 计算百分比宽度，支持自定义轨道与填充样式。

Props

属性	类型	默认值	说明
max	number	100	最大值
value	number	0	当前值
className	string	''	自定义类名
trackStyle	object	{}	轨道样式
fillStyle	object	{}	填充样式

使用方式

<HorizontalProgressBar
  :max="maxAsksTotal"
  :value="ask.total"
  :fill-style="{ backgroundColor: '#e89595' }"
  :track-style="{ backgroundColor: 'transparent' }"
/>

扩展方式

1. 动画：增加 transition 或 animation 配置
2. 渐变：fillStyle 支持 background: linear-gradient(...)
3. 垂直模式：增加 vertical prop，切换为纵向进度条