# 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` 组件 - 交易:`TradeComponent`,传入 `market`、`initialOption` - 移动端:底部栏 + `v-bottom-sheet` 嵌入 `TradeComponent` - Merge/Split:通过 `TradeComponent` 或底部菜单触发 ## 使用方式 - 从首页卡片点击进入,或直接访问 `/trade-detail/123` - 路由参数 `id` 为 Event ID,用于 `findPmEvent` ## 扩展方式 1. **实时数据**:订单簿、分时图接入 WebSocket 2. **Comments**:对接评论接口,替换 placeholder 3. **Top Holders**:对接持仓接口 4. **Activity**:对接交易活动接口,替换 mock 数据