90 lines
3.3 KiB
Markdown
90 lines
3.3 KiB
Markdown
# 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、金额输入、+$1/+$20/+$100/Max 快捷按钮（桌面端、嵌入弹窗、移动端弹窗一致）
|
||
- 余额不足时 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`，父组件监听后可刷新持仓列表
|
||
|
||
## 使用方式
|
||
|
||
```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. **滑点设置**：增加滑点配置
|