28 lines
793 B
Markdown
28 lines
793 B
Markdown
# 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
|