3.2 KiB
3.2 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、时间粒度切换；加密货币事件可切换 YES/NO 分时图与加密货币价格走势图（CoinGecko 实时数据）
- 订单簿：
OrderBook组件，通过 ClobSdk 对接 CLOB WebSocket 实时数据（全量快照、增量更新、成交推送）；份额接口按 6 位小数传（1_000_000 = 1 share），priceSizeToRows与mergeDelta会将 raw 值除以ORDER_BOOK_SIZE_SCALE转为展示值 - 交易：
TradeComponent，传入market、initialOption、positions（持仓数据） - 持仓列表：通过
getPositionList获取当前市场持仓，传递给TradeComponent用于计算可合并份额 - 限价订单：通过
getOrderList获取当前市场未成交限价单，支持撤单 - 移动端：底部栏 +
v-bottom-sheet嵌入TradeComponent - Merge/Split：通过
TradeComponent或底部菜单触发，成功后监听mergeSuccess/splitSuccess事件刷新持仓 - 401 权限错误：加载详情失败时，通过
useAuthError().formatAuthError统一提示「请先登录」或「权限不足」 - Sell 弹窗 emitsOptions 竞态：
sellDialogRenderContent延迟 350ms 卸载 TradeComponent，等 v-dialog transition 完成，避免 Vue patch 时组件实例为 null 的emitsOptions错误 - 底部栏 slot 竞态：
tradeSheetRenderContent延迟 50ms 挂载、350ms 卸载 TradeComponent，避免 v-bottom-sheet transition 期间 VTextField 触发「Slot default invoked outside of the render function」警告
使用方式
- 从首页卡片点击进入，或直接访问
/trade-detail/123 - 路由参数
id为 Event ID，用于findPmEvent
持仓刷新机制
- 下单成功：
TradeComponent触发orderSuccess→onOrderSuccess()刷新持仓和未成交订单 - 合并成功：
TradeComponent触发mergeSuccess→onMergeSuccess()刷新持仓，显示 toast 提示 - 拆分成功：
TradeComponent触发splitSuccess→onSplitSuccess()刷新持仓
持仓刷新调用 loadMarketPositions()，通过 /clob/position/getPositionList 接口获取最新持仓数据。持仓类型用 API 返回的 outcome 字段匹配（如 "Up"/"Down"、"Yes"/"No"），与当前市场的 outcomes[0]、outcomes[1] 对应，用于 Sell 选项与 TradeComponent 的 positions 映射。
扩展方式
- 订单簿：已通过
sdk/clobSocket.ts的 ClobSdk 对接 CLOB WebSocket，使用 Yes/No token ID 订阅price_size_all、price_size_delta、trade消息 - 分时图：可接入 WebSocket 推送的图表数据；加密货币事件已支持 YES/NO 分时与加密货币价格图切换（
src/api/cryptoChart.ts） - Comments：对接评论接口，替换 placeholder
- Top Holders：对接持仓接口
- Activity：已对接 CLOB
trade消息，实时追加成交记录