TradeDetail.vue

路径：src/views/TradeDetail.vue
路由：/trade-detail/:id，name: trade-detail

功能用途

交易详情页，展示单个市场的分时图、订单簿、Comments/Top Holders/Activity 标签页，以及右侧交易组件（Buy/Sell、Merge/Split）。支持桌面端与移动端布局，移动端使用底部 Yes/No 栏 + 弹窗。

核心能力

分时图：TradingView Lightweight Charts 渲染，支持 Past、时间粒度切换（1H/6H/1D/1W/1M/ALL）；Yes/No 模式数据来自 GET /pmPriceHistory/getPmPriceHistoryPublic（market 传 clobTokenIds[0]），接口返回 time（Unix 秒）、price（0–1）转成 [timestamp_ms, value_0_100][] 后缓存在 rawChartData，分时为前端按当前选中范围过滤：1H=最近 1 小时、6H=6 小时、1D=1 天、1W=7 天、1M=30 天、ALL=全部，切换时间范围不重复请求；加密货币事件可切换 YES/NO 分时图与加密货币价格走势图（CoinGecko 实时数据），加密货币模式默认显示 30S 分时走势图
订单簿：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 消息
分时图：Yes/NO 折线图仅使用真实接口 getPmPriceHistoryPublic，无模拟数据与定时器；事件详情加载完成后自动请求并展示，无 marketId 或接口无数据时展示空图；加密货币事件已支持 YES/NO 分时与加密货币价格图切换（src/api/cryptoChart.ts）；加密货币实时推送时使用 series.update() 增量更新单点，配合 LastPriceAnimationMode.OnDataUpdate 实现新数据加入的过渡动画；30S 范围在未过滤掉旧点时同样使用 update() 实现平滑动画
Comments：对接评论接口，替换 placeholder
Top Holders：对接持仓接口
Activity：已对接 CLOB trade 消息，实时追加成交记录

4.1 KiB Raw Blame History Unescape Escape