# 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`

## 扩展方式

1. **订单簿**：已通过 `sdk/clobSocket.ts` 的 ClobSdk 对接 CLOB WebSocket，使用 **Yes/No token ID** 订阅 `price_size_all`、`price_size_delta`、`trade` 消息
2. **分时图**：可接入 WebSocket 推送的图表数据
3. **Comments**：对接评论接口，替换 placeholder
4. **Top Holders**：对接持仓接口
5. **Activity**：已对接 CLOB `trade` 消息，实时追加成交记录