# 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

```typescript
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
- **submitOrder size 统一乘 1_000_000**：无论 Market Buy（amount）、Market Sell、Limit Buy、Limit Sell（shares），传入 `pmOrderPlace` 的 `size` 均先取原始值再 `Math.round(rawSize * 1_000_000)`
- **合并/拆分成功后触发事件**：`mergeSuccess`、`splitSuccess`，父组件监听后可刷新持仓列表
- **401 权限错误提示**：通过 `useAuthError().formatAuthError` 统一处理，未登录显示「请先登录」，已登录显示「权限不足」

## 使用方式

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

**positions 示例**：
```typescript
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}` 插值。

## 扩展方式

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