xtraderClient/docs/components/OrderBook.md

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

使用方式

<!-- 由父组件传入 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 切换展示不同订单簿