xtraderClient/docs/components/OrderBook.md

OrderBook.vue

路径：src/components/OrderBook.vue

功能用途

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

核心能力

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

使用方式

<OrderBook />

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

扩展方式

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