xtraderClient/docs/views/TradeDetail.md
2026-02-14 18:59:36 +08:00

1.0 KiB
Raw Blame History

TradeDetail.vue

路径src/views/TradeDetail.vue
路由/trade-detail/:idname: trade-detail

功能用途

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

核心能力

  • 分时图ECharts 渲染,支持 Past、时间粒度切换
  • 订单簿:OrderBook 组件
  • 交易:TradeComponent,传入 marketinitialOption
  • 移动端:底部栏 + 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 数据