# OrderBook.vue

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

## 功能用途

订单簿组件，展示 Asks（卖单）与 Bids（买单）列表，含价格、份额、累计总量，以及横向进度条表示深度。当前使用 mock 数据。

## 核心能力

- Trade Up / Trade Down Tab
- Asks、Bids 列表，带 `HorizontalProgressBar` 深度条
- Last price、Spread 展示

## 使用方式

```vue
<OrderBook />
```

当前为展示组件，无 props。后续可扩展为接收 `marketId` 等，从接口或 WebSocket 获取真实数据。

## 扩展方式

1. **真实数据**：接收 `asks`、`bids` props，或内部根据路由/context 拉取
2. **WebSocket**：订阅订单簿推送，实时更新
3. **点击下单**：点击某行价格时，将价格传入 TradeComponent