# HorizontalProgressBar.vue

**路径**：`src/components/HorizontalProgressBar.vue`

## 功能用途

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

## Props

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

## 使用方式

```vue
<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，切换为纵向进度条