# MarketCard.vue

**路径**：`src/components/MarketCard.vue`

## 功能用途

首页事件卡片组件，展示市场标题、概率、Yes/No 或 Up/Down 按钮。支持单一（single）与多选项（multi）两种展示类型：

- single：展示一组 Yes/No（或 Up/Down）按钮
- multi：在固定高度区域内以**上下滚动列表**展示多个 outcome，每行右侧提供 Yes/No 快捷下单按钮

点击卡片本体会跳转详情页；点击按钮会触发下单事件（不会触发卡片跳转）。

## Props

| 属性 | 类型 | 说明 |
|------|------|------|
| id | string | 事件 ID |
| marketTitle | string | 市场标题 |
| chanceValue | number | 概率值（0–100） |
| marketInfo | string | 如 "$1.2k Vol." |
| imageUrl | string | 图片 URL |
| category | string | 分类 |
| expiresAt | string | 到期日 |
| displayType | 'single' \| 'multi' | 展示类型 |
| outcomes | EventCardOutcome[] | 多选项时每项数据 |
| yesLabel / noLabel | string | 按钮文案 |
| isNew | boolean | 是否显示 NEW 角标 |
| marketId | string | 市场 ID |
| clobTokenIds | string[] | 下单用 token ID |

## 事件

- `openTrade(side, market?)`：点击 Yes/No 发起交易，携带 market 信息（single 时为当前 market；multi 时为当前 outcome）

## 使用方式

```vue
<MarketCard
  :id="item.id"
  :market-title="item.marketTitle"
  :chance-value="item.chanceValue"
  :market-info="item.marketInfo"
  :image-url="item.imageUrl"
  :category="item.category"
  :expires-at="item.expiresAt"
  :display-type="item.displayType"
  :outcomes="item.outcomes"
  :yes-label="item.yesLabel"
  :no-label="item.noLabel"
  :is-new="item.isNew"
  :market-id="item.marketId"
  :clob-token-ids="item.clobTokenIds"
  @openTrade="openTrade"
/>
```

## 扩展方式

1. **新展示类型**：扩展 `displayType`，如 `compact`、`featured`
2. **收藏/分享**：增加图标按钮与对应事件
3. **骨架屏**：增加 loading 态 props