TradeComponent.vue

路径：src/components/TradeComponent.vue

功能用途

交易核心组件，支持 Buy/Sell、Market/Limit、Merge/Split。根据 market 与 initialOption 展示 Yes/No 或 Up/Down 价格，计算 Total、To win、You'll receive 等，并调用 pmOrderPlace、pmMarketSplit、pmMarketMerge。

Props

属性	类型	说明
market	object	市场信息，含 marketId、clobTokenIds、outcomes、outcomePrices 等
initialOption	'yes' \| 'no'	初始选中的选项
embeddedInSheet	boolean	是否嵌入底部弹窗（移动端）
positions	TradePositionItem[]	当前市场持仓列表，用于计算可合并份额（Merge 功能）

TradePositionItem

interface TradePositionItem {
  id: string
  outcomeWord: 'Yes' | 'No'  // 持仓方向
  shares: string             // 份额展示文本，如 "5 shares"
  sharesNum?: number         // 份数数值（可选，优先使用）
}

可合并份额计算逻辑：取 Yes 和 No 持仓份数的最小值（成对数量）。例如：Yes 持仓 10 份，No 持仓 8 份，则可合并份额为 8。

核心能力

Buy/Sell Tab 切换
Market/Limit 类型、Merge/Split 菜单
Buy 模式 Amount 区：无论余额是否充足，均显示 Amount 标签、Balance、可编辑金额输入框（v-text-field，带 $ 前缀，variant="outlined"）、+$1/+$20/+$100/Max 快捷按钮（桌面端、嵌入弹窗、移动端弹窗一致）
- 输入框支持直接输入金额（>= 0，支持小数）
- 事件处理：onAmountInput、onAmountKeydown、onAmountPaste
余额不足时 Buy 显示 Deposit 按钮
25%/50%/Max 快捷份额
Sell 模式 UI 优化：
- Shares 标签与 Max shares 提示同行显示（max-shares-inline）
- 输入框独占一行（shares-input-wrapper）
- 25%/50%/Max 按钮独立一行（sell-shares-buttons）
- 整体布局更清晰：Shares Max: 2 → [输入框] → [25%][50%][Max]
调用 market API 下单、Split、Merge
合并/拆分成功后触发事件：mergeSuccess、splitSuccess，父组件监听后可刷新持仓列表
401 权限错误提示：通过 useAuthError().formatAuthError 统一处理，未登录显示「请先登录」，已登录显示「权限不足」

使用方式

<TradeComponent
  :market="tradeMarketPayload"
  :initial-option="tradeInitialOption"
  :positions="marketPositions"
  embedded-in-sheet
/>

positions 示例：

const marketPositions = [
  { id: '1', outcomeWord: 'Yes', shares: '10 shares', sharesNum: 10 },
  { id: '2', outcomeWord: 'No', shares: '8 shares', sharesNum: 8 }
]
// 可合并份额 = min(10, 8) = 8

Events

事件名	说明
`optionChange`	选项切换（yes/no）
`orderSuccess`	下单成功
`mergeSuccess`	合并份额成功，父组件应监听并刷新持仓
`splitSuccess`	拆分份额成功，父组件应监听并刷新持仓
`submit`	提交订单前的回调，携带订单 payload

国际化

Merge/Split 弹窗文案均通过 trade.* 键国际化：

Merge 弹窗：mergeDialogTitle、mergeDialogDesc、mergeAvailableShares、mergeNoMarket、mergeSubmitBtn；复用 trade.amount、trade.max
Split 弹窗：splitDialogTitle、splitDialogDesc、splitAmountLabel、splitNoMarket、splitSubmitBtn

mergeDialogDesc、splitDialogDesc、mergeNoMarket、splitNoMarket 支持 {yesLabel}、{noLabel} 插值。

扩展方式

Limit 单：完善 Limit 模式下的价格输入与下单逻辑
订单确认：增加确认弹窗
滑点设置：增加滑点配置

3.7 KiB Raw Blame History Unescape Escape