29 lines
1.0 KiB
Markdown
29 lines
1.0 KiB
Markdown
# 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 数据
|