45 lines
4.5 KiB
Markdown
45 lines
4.5 KiB
Markdown
# TradeDetail.vue
|
||
|
||
**路径**：`src/views/TradeDetail.vue`
|
||
**路由**：`/trade-detail/:id`，name: `trade-detail`
|
||
|
||
## 功能用途
|
||
|
||
交易详情页，展示单个市场的分时图、订单簿、Rules 内容以及右侧交易组件（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=全部，切换时间范围不重复请求；为避免“最新数据提前被截断”，不同时间范围会使用更大的 `pageSize` 拉取更多点；**加密货币事件**可切换 YES/NO 分时图与加密货币价格走势图（CoinGecko 实时数据），**加密货币模式默认显示 30S 分时走势图**；图表交互已禁用拖动和滚轮缩放（`handleScroll/handleScale=false`）
|
||
- Rules 内容容器（`.rules-pane`）：内边距从 `4px` 提升到 `16px`，改善文本留白与可读性
|
||
- 订单簿：`OrderBook` 组件，通过 **ClobSdk** 对接 CLOB WebSocket 实时数据（全量快照、增量更新、成交推送）；份额接口按 6 位小数传（1_000_000 = 1 share），`priceSizeToRows` 与 `mergeDelta` 会将 raw 值除以 `ORDER_BOOK_SIZE_SCALE` 转为展示值
|
||
- 订单簿外层容器（`order-book-card`）已去除重复外边框，仅保留 `OrderBook` 组件单层描边，避免视觉上出现双层边线
|
||
- 交易：`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 映射。
|
||
|
||
## 扩展方式
|
||
|
||
1. **订单簿**：已通过 `sdk/clobSocket.ts` 的 ClobSdk 对接 CLOB WebSocket，使用 **Yes/No token ID** 订阅 `price_size_all`、`price_size_delta`、`trade` 消息
|
||
2. **分时图**：Yes/NO 折线图仅使用真实接口 `getPmPriceHistoryPublic`，无模拟数据与定时器；事件详情加载完成后自动请求并展示，无 marketId 或接口无数据时展示空图；加密货币事件已支持 YES/NO 分时与加密货币价格图切换（`src/api/cryptoChart.ts`）；加密货币实时推送时使用 `series.update()` 增量更新单点，配合 `LastPriceAnimationMode.OnDataUpdate` 实现新数据加入的过渡动画；30S 范围在未过滤掉旧点时同样使用 `update()` 实现平滑动画
|
||
3. **Comments**：对接评论接口，替换 placeholder
|
||
4. **Top Holders**：当前页面已移除显示（仅保留 Rules）
|
||
5. **Activity**：当前页面已移除显示（仅保留 Rules）
|