1.3 KiB
1.3 KiB
TradeDetail.vue
路径：src/views/TradeDetail.vue
路由：/trade-detail/:id，name: trade-detail
功能用途
交易详情页，展示单个市场的分时图、订单簿、Comments/Top Holders/Activity 标签页，以及右侧交易组件（Buy/Sell、Merge/Split）。支持桌面端与移动端布局，移动端使用底部 Yes/No 栏 + 弹窗。
核心能力
- 分时图：ECharts 渲染，支持 Past、时间粒度切换
- 订单簿：
OrderBook组件，通过 ClobSdk 对接 CLOB WebSocket 实时数据（全量快照、增量更新、成交推送） - 交易：
TradeComponent，传入market、initialOption - 移动端：底部栏 +
v-bottom-sheet嵌入TradeComponent - Merge/Split：通过
TradeComponent或底部菜单触发
使用方式
- 从首页卡片点击进入，或直接访问
/trade-detail/123 - 路由参数
id为 Event ID，用于findPmEvent
扩展方式
- 订单簿：已通过
sdk/clobSocket.ts的 ClobSdk 对接 CLOB WebSocket，使用 Yes/No token ID 订阅price_size_all、price_size_delta、trade消息 - 分时图：可接入 WebSocket 推送的图表数据
- Comments：对接评论接口，替换 placeholder
- Top Holders：对接持仓接口
- Activity：已对接 CLOB
trade消息，实时追加成交记录