56 lines
1.9 KiB
Markdown
56 lines
1.9 KiB
Markdown
# OrderBook.vue
|
||
|
||
**路径**：`src/components/OrderBook.vue`
|
||
|
||
## 功能用途
|
||
|
||
订单簿组件，展示 Asks（卖单）与 Bids（买单）列表，含价格、份额、累计总量，以及横向进度条表示深度。支持通过 props 接收 CLOB WebSocket 实时数据，无 props 时回退到 mock 数据。
|
||
|
||
## 核心能力
|
||
|
||
- Trade Up / Trade Down Tab
|
||
- Asks、Bids 列表，带 `HorizontalProgressBar` 深度条（买卖两边共用同一最大值 `maxOrderBookTotal`，取两边累计总量中的最大值，便于对比深度）
|
||
- Last price、Spread 展示
|
||
- Live / 连接中 状态展示（均通过 i18n 国际化）
|
||
|
||
## 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 />
|
||
```
|
||
|
||
## 国际化
|
||
|
||
组件内所有展示文案均使用 `trade.*` 与 `activity.live` 键：
|
||
|
||
- `trade.orderBook`、`trade.orderBookConnecting`、`trade.orderBookPrice`、`trade.orderBookShares`、`trade.orderBookTotal`
|
||
- `trade.orderBookAsks`、`trade.orderBookBids`、`trade.orderBookLast`、`trade.orderBookSpread`
|
||
- `activity.live`（实时状态）
|
||
|
||
## 扩展方式
|
||
|
||
1. **点击下单**：点击某行价格时，将价格传入 TradeComponent
|
||
2. **Trade Up/Down**：可按 Yes/No Token 切换展示不同订单簿
|