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 / 连接中状态展示（均通过 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（实时状态）

扩展方式

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

1.8 KiB Raw Blame History Unescape Escape

OrderBook.vue

功能用途

核心能力

Props

使用方式

国际化

扩展方式

1.8 KiB

Raw Blame History