# OrderBook.vue

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

## 功能用途

订单簿组件，展示 Asks（卖单）与 Bids（买单）列表，含价格、份额、累计总量，以及横向进度条表示深度。支持通过 props 接收 CLOB WebSocket 实时数据，无 props 时回退到 mock 数据。

## 核心能力

- Trade Up / Trade Down Tab
- Asks、Bids 列表，带 `HorizontalProgressBar` 深度条
- Last price、Spread 展示
- Live / 连接中 状态展示

## Props

| 属性 | 类型 | 默认值 | 说明 |
|------|------|--------|------|
| asks | `{ price: number; shares: number }[]` | `[]` | 卖单列表（价格单位：¢） |
| bids | `{ price: number; shares: number }[]` | `[]` | 买单列表 |
| lastPrice | `number` | - | 最新成交价（¢） |
| spread | `number` | - | 买卖价差（¢） |
| loading | `boolean` | `false` | 是否连接中 |
| connected | `boolean` | `false` | 是否已连接 WebSocket |

## 使用方式

```vue
<!-- 由父组件传入 CLOB 数据（如 TradeDetail.vue） -->
<OrderBook
  :asks="orderBookAsks"
  :bids="orderBookBids"
  :last-price="clobLastPrice"
  :spread="clobSpread"
  :loading="clobLoading"
  :connected="clobConnected"
/>

<!-- 无 props 时使用 mock 数据 -->
<OrderBook />
```

## 扩展方式

1. **点击下单**：点击某行价格时，将价格传入 TradeComponent
2. **Trade Up/Down**：可按 Yes/No Token 切换展示不同订单簿