feat: 订单列表按市场分组并支持跳转到Polymarket

- 后端添加市场slug和分类字段 - 在 BuyOrderInfo、SellOrderInfo、MatchedOrderInfo DTO 中添加 marketSlug 和 marketCategory 字段 - 在 CopyTradingStatisticsService 中填充这些字段（从 Market 实体获取） - 前端实现按市场分组功能 - 添加分组视图切换开关（列表视图/分组视图） - 分组显示：按市场分组，显示市场名称、订单数、总金额、盈亏等统计信息 - 买入订单分组显示是否完全成交状态（全部成交/部分成交） - 卖出订单分组显示总盈亏 - 支持展开/折叠功能（单个和全部） - 桌面端默认全部展开，移动端默认全部折叠 - 市场名称点击跳转功能 - 添加 getPolymarketUrl 工具函数，根据市场分类构建URL - sports 分类市场跳转到 /moneyline 页面（spread 市场） - 其他分类市场跳转到普通市场页面 - 如果没有 slug，使用 marketId 作为后备（跳转到 condition 页面） - 分组视图、列表视图、移动端卡片视图均支持点击跳转 - 多语言支持 - 添加分组相关翻译键：groupByMarket、expandAll、collapseAll、allFullyMatched、partiallyMatched、orderCount、totalAmount、totalPnl、statusBreakdown
2026-01-08 12:39:09 +08:00
parent d376a82ccc
commit 2af2c0e86a
9 changed files with 868 additions and 101 deletions
@@ -1053,6 +1053,15 @@
    "noBuyOrders": "No buy orders",
    "noSellOrders": "No sell orders",
    "noMatchedOrders": "No matched orders",
+    "groupByMarket": "Group by Market",
+    "expandAll": "Expand All",
+    "collapseAll": "Collapse All",
+    "allFullyMatched": "All Fully Matched",
+    "partiallyMatched": "Partially Matched",
+    "orderCount": "Order Count",
+    "totalAmount": "Total Amount",
+    "totalPnl": "Total PnL",
+    "statusBreakdown": "Status",
    "fetchBuyOrdersFailed": "Failed to fetch buy orders",
    "fetchSellOrdersFailed": "Failed to fetch sell orders",
    "fetchMatchedOrdersFailed": "Failed to fetch matched orders",
@@ -1053,6 +1053,15 @@
    "noBuyOrders": "暂无买入订单",
    "noSellOrders": "暂无卖出订单",
    "noMatchedOrders": "暂无匹配关系",
+    "groupByMarket": "按市场分组",
+    "expandAll": "展开全部",
+    "collapseAll": "折叠全部",
+    "allFullyMatched": "全部成交",
+    "partiallyMatched": "部分成交",
+    "orderCount": "订单数",
+    "totalAmount": "总金额",
+    "totalPnl": "总盈亏",
+    "statusBreakdown": "状态",
    "fetchBuyOrdersFailed": "获取买入订单列表失败",
    "fetchSellOrdersFailed": "获取卖出订单列表失败",
    "fetchMatchedOrdersFailed": "获取匹配关系列表失败",
@@ -1053,6 +1053,15 @@
    "noBuyOrders": "暫無買入訂單",
    "noSellOrders": "暫無賣出訂單",
    "noMatchedOrders": "暫無匹配關係",
+    "groupByMarket": "按市場分組",
+    "expandAll": "展開全部",
+    "collapseAll": "折疊全部",
+    "allFullyMatched": "全部成交",
+    "partiallyMatched": "部分成交",
+    "orderCount": "訂單數",
+    "totalAmount": "總金額",
+    "totalPnl": "總盈虧",
+    "statusBreakdown": "狀態",
    "fetchBuyOrdersFailed": "獲取買入訂單列表失敗",
    "fetchSellOrdersFailed": "獲取賣出訂單列表失敗",
    "fetchMatchedOrdersFailed": "獲取匹配關係列表失敗",
@@ -1,14 +1,14 @@
-import { useEffect, useState } from 'react'
-import { Table, Tag, Select, Input, Button, Card, Divider, Spin, message } from 'antd'
+import { useEffect, useState, useMemo } from 'react'
+import { Table, Tag, Select, Input, Button, Card, Divider, Spin, message, Switch, Space } from 'antd'
 import { apiService } from '../../services/api'
-import { formatUSDC, isAutoGeneratedOrderId, copyToClipboard } from '../../utils'
+import { formatUSDC, isAutoGeneratedOrderId, copyToClipboard, getPolymarketUrl } from '../../utils'
 import { useMediaQuery } from 'react-responsive'
 import { useTranslation } from 'react-i18next'
 import type { BuyOrderInfo, OrderTrackingRequest, OrderTrackingListResponse } from '../../types'

 const { Option } = Select

-import { ReloadOutlined, CopyOutlined } from '@ant-design/icons'
+import { ReloadOutlined, CopyOutlined, DownOutlined, UpOutlined, AppstoreOutlined, UnorderedListOutlined } from '@ant-design/icons'

 interface BuyOrdersTabProps {
  copyTradingId: string
@@ -28,6 +28,8 @@ const BuyOrdersTab: React.FC<BuyOrdersTabProps> = ({ copyTradingId, active = fal
    side?: string
    status?: string
  }>({})
+  const [groupByMarket, setGroupByMarket] = useState(false)  // 是否按市场分组
+  const [expandedMarkets, setExpandedMarkets] = useState<Set<string>>(new Set())  // 展开的市场ID集合

  useEffect(() => {
    if (copyTradingId && active) {
@@ -80,6 +82,90 @@ const BuyOrdersTab: React.FC<BuyOrdersTabProps> = ({ copyTradingId, active = fal
    }
  }

+  // 分组数据结构
+  interface GroupedOrders {
+    marketId: string
+    marketTitle?: string
+    marketSlug?: string
+    marketCategory?: string
+    orders: BuyOrderInfo[]
+    stats: {
+      count: number
+      totalAmount: string
+      fullyMatched: boolean  // 是否全部成交
+      fullyMatchedCount: number  // 完全成交的订单数
+      partiallyMatchedCount: number  // 部分成交的订单数
+      filledCount: number  // 未成交的订单数
+    }
+  }
+
+  // 按市场分组订单
+  const groupedOrders = useMemo<GroupedOrders[]>(() => {
+    if (!groupByMarket) return []
+
+    const groups = new Map<string, BuyOrderInfo[]>()
+    
+    // 按市场ID分组
+    orders.forEach(order => {
+      const key = order.marketId
+      if (!groups.has(key)) {
+        groups.set(key, [])
+      }
+      groups.get(key)!.push(order)
+    })
+
+    // 转换为分组数据并计算统计信息
+    return Array.from(groups.entries()).map(([marketId, marketOrders]) => {
+      // 计算总金额
+      const totalAmount = marketOrders.reduce((sum, order) => {
+        const amount = parseFloat(order.quantity) * parseFloat(order.price)
+        return sum + amount
+      }, 0)
+
+      // 统计订单状态
+      const fullyMatchedCount = marketOrders.filter(o => o.status === 'fully_matched').length
+      const partiallyMatchedCount = marketOrders.filter(o => o.status === 'partially_matched').length
+      const filledCount = marketOrders.filter(o => o.status === 'filled').length
+      const fullyMatched = fullyMatchedCount === marketOrders.length
+
+      return {
+        marketId,
+        marketTitle: marketOrders[0]?.marketTitle,
+        marketSlug: marketOrders[0]?.marketSlug,
+        marketCategory: marketOrders[0]?.marketCategory,
+        orders: marketOrders,
+        stats: {
+          count: marketOrders.length,
+          totalAmount: totalAmount.toString(),
+          fullyMatched,
+          fullyMatchedCount,
+          partiallyMatchedCount,
+          filledCount
+        }
+      }
+    }).sort((a, b) => b.stats.count - a.stats.count)  // 按订单数量降序排序
+  }, [orders, groupByMarket])
+
+  // 切换市场展开/折叠
+  const toggleMarket = (marketId: string) => {
+    const newExpanded = new Set(expandedMarkets)
+    if (newExpanded.has(marketId)) {
+      newExpanded.delete(marketId)
+    } else {
+      newExpanded.add(marketId)
+    }
+    setExpandedMarkets(newExpanded)
+  }
+
+  // 展开/折叠全部
+  const toggleAllMarkets = () => {
+    if (expandedMarkets.size === groupedOrders.length) {
+      setExpandedMarkets(new Set())
+    } else {
+      setExpandedMarkets(new Set(groupedOrders.map(g => g.marketId)))
+    }
+  }
+
  const columns = [
    {
      title: t('copyTradingOrders.orderId') || '订单ID',
@@ -129,21 +215,41 @@ const BuyOrdersTab: React.FC<BuyOrdersTabProps> = ({ copyTradingId, active = fal
      dataIndex: 'marketId',
      key: 'marketId',
      width: isMobile ? 120 : 200,
-      render: (text: string, record: BuyOrderInfo) => (
-        <div style={{ display: 'flex', flexDirection: 'column', gap: '2px' }}>
-          {record.marketTitle ? (
-            <span style={{ fontSize: isMobile ? 11 : 12, fontWeight: 500 }}>
-              {record.marketTitle}
+      render: (text: string, record: BuyOrderInfo) => {
+        const marketUrl = getPolymarketUrl(record.marketSlug, record.marketCategory, record.marketId)
+        return (
+          <div style={{ display: 'flex', flexDirection: 'column', gap: '2px' }}>
+            {record.marketTitle ? (
+              marketUrl ? (
+                <a
+                  href={marketUrl}
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  style={{
+                    fontSize: isMobile ? 11 : 12,
+                    fontWeight: 500,
+                    color: '#1890ff',
+                    textDecoration: 'none',
+                    cursor: 'pointer'
+                  }}
+                >
+                  {record.marketTitle}
+                </a>
+              ) : (
+                <span style={{ fontSize: isMobile ? 11 : 12, fontWeight: 500 }}>
+                  {record.marketTitle}
+                </span>
+              )
+            ) : null}
+            <span style={{ fontFamily: 'monospace', fontSize: isMobile ? 10 : 11, color: '#999' }}>
+              {isMobile
+                ? `${text.slice(0, 6)}...${text.slice(-4)}`
+                : `${text.slice(0, 8)}...${text.slice(-6)}`
+              }
            </span>
-          ) : null}
-          <span style={{ fontFamily: 'monospace', fontSize: isMobile ? 10 : 11, color: '#999' }}>
-            {isMobile
-              ? `${text.slice(0, 6)}...${text.slice(-4)}`
-              : `${text.slice(0, 8)}...${text.slice(-6)}`
-            }
-          </span>
-        </div>
-      )
+          </div>
+        )
+      }
    },
    {
      title: t('copyTradingOrders.side') || '方向',
@@ -227,44 +333,193 @@ const BuyOrdersTab: React.FC<BuyOrdersTabProps> = ({ copyTradingId, active = fal
    }
  ]

-  return (
-    <div>
-      <div style={{ marginBottom: 16, display: 'flex', gap: 16, flexWrap: 'wrap' }}>
-        <Input
-          placeholder={t('copyTradingOrders.filterMarketId') || '筛选市场ID'}
-          allowClear
-          style={{ width: isMobile ? '100%' : 200 }}
-          value={filters.marketId}
-          onChange={(e) => setFilters({ ...filters, marketId: e.target.value || undefined })}
-        />
+  // 初始化展开状态（桌面端默认全部展开）
+  useEffect(() => {
+    if (groupByMarket && groupedOrders.length > 0 && expandedMarkets.size === 0 && !isMobile) {
+      setExpandedMarkets(new Set(groupedOrders.map(g => g.marketId)))
+    }
+  }, [groupByMarket, groupedOrders.length, isMobile])

-        <Select
-          placeholder={t('copyTradingOrders.filterSide') || '筛选方向'}
-          allowClear
-          style={{ width: isMobile ? '100%' : 150 }}
-          value={filters.side}
-          onChange={(value) => setFilters({ ...filters, side: value || undefined })}
-        >
-          <Option value="0">YES</Option>
-          <Option value="1">NO</Option>
-        </Select>
+  // 渲染分组视图
+  const renderGroupedView = () => {
+    if (groupedOrders.length === 0) {
+      return (
+        <div style={{ textAlign: 'center', padding: '40px', color: '#999' }}>
+          {t('copyTradingOrders.noBuyOrders') || '暂无买入订单'}
+        </div>
+      )
+    }

-        <Select
-          placeholder={t('copyTradingOrders.filterStatus') || '筛选状态'}
-          allowClear
-          style={{ width: isMobile ? '100%' : 150 }}
-          value={filters.status}
-          onChange={(value) => setFilters({ ...filters, status: value || undefined })}
-        >
-          <Option value="filled">{t('copyTradingOrders.statusFilled') || '未成交'}</Option>
-          <Option value="partially_matched">{t('copyTradingOrders.statusPartiallySold') || '部分成交'}</Option>
-          <Option value="fully_matched">{t('copyTradingOrders.statusFullySold') || '全部成交'}</Option>
-        </Select>
+    return (
+      <div style={{ display: 'flex', flexDirection: 'column', gap: '16px' }}>
+        {groupedOrders.map((group) => {
+          const isExpanded = expandedMarkets.has(group.marketId)
+          const marketDisplayName = group.marketTitle || group.marketId.slice(0, 8) + '...' + group.marketId.slice(-6)
+          const marketUrl = getPolymarketUrl(group.marketSlug, group.marketCategory, group.marketId)

-        <Button type="primary" onClick={fetchOrders} icon={<ReloadOutlined />}>{t('common.refresh') || '刷新'}</Button>
+          return (
+            <Card
+              key={group.marketId}
+              style={{
+                borderRadius: '12px',
+                boxShadow: '0 2px 8px rgba(0,0,0,0.08)',
+                border: '1px solid #e8e8e8'
+              }}
+              bodyStyle={{ padding: '16px' }}
+            >
+              {/* 分组头部 */}
+              <div
+                style={{
+                  display: 'flex',
+                  justifyContent: 'space-between',
+                  alignItems: 'center',
+                  cursor: 'pointer',
+                  padding: '8px 0',
+                  marginBottom: isExpanded ? '12px' : 0
+                }}
+                onClick={() => toggleMarket(group.marketId)}
+              >
+                <div style={{ flex: 1 }}>
+                  <div style={{ display: 'flex', alignItems: 'center', gap: '8px', marginBottom: '8px' }}>
+                    {marketUrl ? (
+                      <a
+                        href={marketUrl}
+                        target="_blank"
+                        rel="noopener noreferrer"
+                        onClick={(e) => e.stopPropagation()}
+                        style={{
+                          fontSize: isMobile ? '14px' : '16px',
+                          fontWeight: 'bold',
+                          color: '#1890ff',
+                          textDecoration: 'none',
+                          cursor: 'pointer'
+                        }}
+                      >
+                        {marketDisplayName}
+                      </a>
+                    ) : (
+                      <span style={{ fontSize: isMobile ? '14px' : '16px', fontWeight: 'bold' }}>
+                        {marketDisplayName}
+                      </span>
+                    )}
+                    {group.stats.fullyMatched ? (
+                      <Tag color="success">{t('copyTradingOrders.allFullyMatched') || '全部成交'}</Tag>
+                    ) : (
+                      <Tag color="warning">
+                        {t('copyTradingOrders.partiallyMatched') || '部分成交'} ({group.stats.fullyMatchedCount}/{group.stats.count})
+                      </Tag>
+                    )}
+                  </div>
+                  <div style={{ display: 'flex', gap: '16px', flexWrap: 'wrap', fontSize: isMobile ? '12px' : '13px', color: '#666' }}>
+                    <span>{t('copyTradingOrders.orderCount') || '订单数'}: {group.stats.count}</span>
+                    <span>{t('copyTradingOrders.totalAmount') || '总金额'}: {formatUSDC(group.stats.totalAmount)} USDC</span>
+                    <span>
+                      {t('copyTradingOrders.statusBreakdown') || '状态'}: 
+                      {group.stats.fullyMatchedCount > 0 && ` ${t('copyTradingOrders.statusFullySold') || '全部成交'} ${group.stats.fullyMatchedCount}`}
+                      {group.stats.partiallyMatchedCount > 0 && ` ${t('copyTradingOrders.statusPartiallySold') || '部分成交'} ${group.stats.partiallyMatchedCount}`}
+                      {group.stats.filledCount > 0 && ` ${t('copyTradingOrders.statusFilled') || '未成交'} ${group.stats.filledCount}`}
+                    </span>
+                  </div>
+                </div>
+                <Button
+                  type="text"
+                  icon={isExpanded ? <UpOutlined /> : <DownOutlined />}
+                  onClick={(e) => {
+                    e.stopPropagation()
+                    toggleMarket(group.marketId)
+                  }}
+                />
+              </div>
+
+              {/* 订单列表 */}
+              {isExpanded && (
+                <>
+                  <Divider style={{ margin: '12px 0' }} />
+                  {isMobile ? (
+                    <div style={{ display: 'flex', flexDirection: 'column', gap: '12px' }}>
+                      {group.orders.map((order) => {
+                        const date = new Date(order.createdAt)
+                        const formattedDate = date.toLocaleString('zh-CN', {
+                          year: 'numeric',
+                          month: '2-digit',
+                          day: '2-digit',
+                          hour: '2-digit',
+                          minute: '2-digit'
+                        })
+                        const amount = (parseFloat(order.quantity) * parseFloat(order.price)).toString()
+                        const displaySide = order.side === '0' ? 'YES' : order.side === '1' ? 'NO' : order.side
+
+                        return (
+                          <Card
+                            key={order.orderId}
+                            size="small"
+                            style={{
+                              borderRadius: '8px',
+                              border: '1px solid #f0f0f0',
+                              backgroundColor: '#fafafa'
+                            }}
+                            bodyStyle={{ padding: '12px' }}
+                          >
+                            <div style={{ marginBottom: '8px' }}>
+                              <div style={{
+                                fontSize: '13px',
+                                fontWeight: 'bold',
+                                marginBottom: '6px',
+                                fontFamily: 'monospace',
+                                display: 'flex',
+                                alignItems: 'center',
+                                gap: '8px'
+                              }}>
+                                <span>{order.orderId.slice(0, 8)}...{order.orderId.slice(-6)}</span>
+                                {!isAutoGeneratedOrderId(order.orderId) && (
+                                  <Button
+                                    type="text"
+                                    size="small"
+                                    icon={<CopyOutlined />}
+                                    onClick={() => handleCopyOrderId(order.orderId)}
+                                    style={{ padding: 0, height: 'auto', fontSize: '11px' }}
+                                    title={t('common.copy') || '复制'}
+                                  />
+                                )}
+                              </div>
+                              <div style={{ display: 'flex', flexWrap: 'wrap', gap: '6px', alignItems: 'center' }}>
+                                <Tag style={{ fontSize: '11px' }}>{displaySide}</Tag>
+                                {getStatusTag(order.status)}
+                              </div>
+                            </div>
+
+                            <div style={{ fontSize: '12px', color: '#666' }}>
+                              <div>{t('copyTradingOrders.quantity') || '数量'}: {formatUSDC(order.quantity)} | {t('copyTradingOrders.price') || '价格'}: {formatUSDC(order.price)}</div>
+                              <div>{t('copyTradingOrders.amount') || '金额'}: {formatUSDC(amount)} USDC</div>
+                              <div>{t('copyTradingOrders.matched') || '已匹配'}: {formatUSDC(order.matchedQuantity)} | {t('copyTradingOrders.remaining') || '剩余'}: {formatUSDC(order.remainingQuantity)}</div>
+                              <div style={{ color: '#999', marginTop: '4px' }}>{formattedDate}</div>
+                            </div>
+                          </Card>
+                        )
+                      })}
+                    </div>
+                  ) : (
+                    <Table
+                      columns={columns}
+                      dataSource={group.orders}
+                      rowKey="orderId"
+                      pagination={false}
+                      size="small"
+                    />
+                  )}
+                </>
+              )}
+            </Card>
+          )
+        })}
      </div>
+    )
+  }

-      {isMobile ? (
+  // 渲染列表视图
+  const renderListView = () => {
+    if (isMobile) {
+      return (
        <div>
          {loading ? (
            <div style={{ textAlign: 'center', padding: '40px' }}>
@@ -355,9 +610,31 @@ const BuyOrdersTab: React.FC<BuyOrdersTabProps> = ({ copyTradingId, active = fal
                    <div style={{ marginBottom: '16px' }}>
                      <div style={{ fontSize: '12px', color: '#666', marginBottom: '4px' }}>{t('copyTradingOrders.market') || '市场'}</div>
                      {order.marketTitle ? (
-                        <div style={{ fontSize: '13px', fontWeight: '500', marginBottom: '4px' }}>
-                          {order.marketTitle}
-                        </div>
+                        (() => {
+                          const marketUrl = getPolymarketUrl(order.marketSlug, order.marketCategory, order.marketId)
+                          return marketUrl ? (
+                            <a
+                              href={marketUrl}
+                              target="_blank"
+                              rel="noopener noreferrer"
+                              style={{
+                                fontSize: '13px',
+                                fontWeight: '500',
+                                marginBottom: '4px',
+                                color: '#1890ff',
+                                textDecoration: 'none',
+                                cursor: 'pointer',
+                                display: 'block'
+                              }}
+                            >
+                              {order.marketTitle}
+                            </a>
+                          ) : (
+                            <div style={{ fontSize: '13px', fontWeight: '500', marginBottom: '4px' }}>
+                              {order.marketTitle}
+                            </div>
+                          )
+                        })()
                      ) : null}
                      <div style={{ fontSize: '12px', color: '#999', fontFamily: 'monospace' }}>
                        {order.marketId.slice(0, 8)}...{order.marketId.slice(-6)}
@@ -375,7 +652,9 @@ const BuyOrdersTab: React.FC<BuyOrdersTabProps> = ({ copyTradingId, active = fal
            </div>
          )}
        </div>
-      ) : (
+      )
+    } else {
+      return (
        <Table
          columns={columns}
          dataSource={orders}
@@ -393,6 +672,79 @@ const BuyOrdersTab: React.FC<BuyOrdersTabProps> = ({ copyTradingId, active = fal
            }
          }}
        />
+      )
+    }
+  }
+
+  return (
+    <div>
+      <div style={{ marginBottom: 16, display: 'flex', gap: 16, flexWrap: 'wrap', alignItems: 'center' }}>
+        <Input
+          placeholder={t('copyTradingOrders.filterMarketId') || '筛选市场ID'}
+          allowClear
+          style={{ width: isMobile ? '100%' : 200 }}
+          value={filters.marketId}
+          onChange={(e) => setFilters({ ...filters, marketId: e.target.value || undefined })}
+        />
+
+        <Select
+          placeholder={t('copyTradingOrders.filterSide') || '筛选方向'}
+          allowClear
+          style={{ width: isMobile ? '100%' : 150 }}
+          value={filters.side}
+          onChange={(value) => setFilters({ ...filters, side: value || undefined })}
+        >
+          <Option value="0">YES</Option>
+          <Option value="1">NO</Option>
+        </Select>
+
+        <Select
+          placeholder={t('copyTradingOrders.filterStatus') || '筛选状态'}
+          allowClear
+          style={{ width: isMobile ? '100%' : 150 }}
+          value={filters.status}
+          onChange={(value) => setFilters({ ...filters, status: value || undefined })}
+        >
+          <Option value="filled">{t('copyTradingOrders.statusFilled') || '未成交'}</Option>
+          <Option value="partially_matched">{t('copyTradingOrders.statusPartiallySold') || '部分成交'}</Option>
+          <Option value="fully_matched">{t('copyTradingOrders.statusFullySold') || '全部成交'}</Option>
+        </Select>
+
+        <Space>
+          <span style={{ fontSize: isMobile ? '12px' : '14px' }}>
+            {t('copyTradingOrders.groupByMarket') || '按市场分组'}:
+          </span>
+          <Switch
+            checked={groupByMarket}
+            onChange={setGroupByMarket}
+            checkedChildren={<AppstoreOutlined />}
+            unCheckedChildren={<UnorderedListOutlined />}
+          />
+        </Space>
+
+        {groupByMarket && groupedOrders.length > 0 && (
+          <Button
+            type="link"
+            onClick={toggleAllMarkets}
+            size="small"
+          >
+            {expandedMarkets.size === groupedOrders.length
+              ? (t('copyTradingOrders.collapseAll') || '折叠全部')
+              : (t('copyTradingOrders.expandAll') || '展开全部')}
+          </Button>
+        )}
+
+        <Button type="primary" onClick={fetchOrders} icon={<ReloadOutlined />}>{t('common.refresh') || '刷新'}</Button>
+      </div>
+
+      {loading ? (
+        <div style={{ textAlign: 'center', padding: '40px' }}>
+          <Spin size="large" />
+        </div>
+      ) : groupByMarket ? (
+        renderGroupedView()
+      ) : (
+        renderListView()
      )}
    </div>
  )
@@ -1,14 +1,14 @@
-import { useEffect, useState } from 'react'
-import { Table, Tag, Select, Input, Button, Card, Divider, Spin, message } from 'antd'
+import { useEffect, useState, useMemo } from 'react'
+import { Table, Tag, Select, Input, Button, Card, Divider, Spin, message, Switch, Space } from 'antd'
 import { apiService } from '../../services/api'
-import { formatUSDC, isAutoGeneratedOrderId, copyToClipboard } from '../../utils'
+import { formatUSDC, isAutoGeneratedOrderId, copyToClipboard, getPolymarketUrl } from '../../utils'
 import { useMediaQuery } from 'react-responsive'
 import { useTranslation } from 'react-i18next'
 import type { SellOrderInfo, OrderTrackingRequest, OrderTrackingListResponse } from '../../types'

 const { Option } = Select

-import { ReloadOutlined, CopyOutlined } from '@ant-design/icons'
+import { ReloadOutlined, CopyOutlined, DownOutlined, UpOutlined, AppstoreOutlined, UnorderedListOutlined } from '@ant-design/icons'

 interface SellOrdersTabProps {
  copyTradingId: string
@@ -27,6 +27,8 @@ const SellOrdersTab: React.FC<SellOrdersTabProps> = ({ copyTradingId, active = f
    marketId?: string
    side?: string
  }>({})
+  const [groupByMarket, setGroupByMarket] = useState(false)  // 是否按市场分组
+  const [expandedMarkets, setExpandedMarkets] = useState<Set<string>>(new Set())  // 展开的市场ID集合

  useEffect(() => {
    if (copyTradingId && active) {
@@ -75,6 +77,91 @@ const SellOrdersTab: React.FC<SellOrdersTabProps> = ({ copyTradingId, active = f
    }
  }

+  // 分组数据结构
+  interface GroupedOrders {
+    marketId: string
+    marketTitle?: string
+    marketSlug?: string
+    marketCategory?: string
+    orders: SellOrderInfo[]
+    stats: {
+      count: number
+      totalAmount: string
+      totalPnl: string  // 总盈亏
+      fullyMatched: boolean  // 卖出订单都是已成交的，这里始终为 true
+    }
+  }
+
+  // 按市场分组订单
+  const groupedOrders = useMemo<GroupedOrders[]>(() => {
+    if (!groupByMarket) return []
+
+    const groups = new Map<string, SellOrderInfo[]>()
+    
+    // 按市场ID分组
+    orders.forEach(order => {
+      const key = order.marketId
+      if (!groups.has(key)) {
+        groups.set(key, [])
+      }
+      groups.get(key)!.push(order)
+    })
+
+    // 转换为分组数据并计算统计信息
+    return Array.from(groups.entries()).map(([marketId, marketOrders]) => {
+      // 计算总金额和总盈亏
+      const totalAmount = marketOrders.reduce((sum, order) => {
+        const amount = parseFloat(order.quantity) * parseFloat(order.price)
+        return sum + amount
+      }, 0)
+
+      const totalPnl = marketOrders.reduce((sum, order) => {
+        return sum + parseFloat(order.realizedPnl)
+      }, 0)
+
+      return {
+        marketId,
+        marketTitle: marketOrders[0]?.marketTitle,
+        marketSlug: marketOrders[0]?.marketSlug,
+        marketCategory: marketOrders[0]?.marketCategory,
+        orders: marketOrders,
+        stats: {
+          count: marketOrders.length,
+          totalAmount: totalAmount.toString(),
+          totalPnl: totalPnl.toString(),
+          fullyMatched: true  // 卖出订单都是已成交的
+        }
+      }
+    }).sort((a, b) => b.stats.count - a.stats.count)  // 按订单数量降序排序
+  }, [orders, groupByMarket])
+
+  // 切换市场展开/折叠
+  const toggleMarket = (marketId: string) => {
+    const newExpanded = new Set(expandedMarkets)
+    if (newExpanded.has(marketId)) {
+      newExpanded.delete(marketId)
+    } else {
+      newExpanded.add(marketId)
+    }
+    setExpandedMarkets(newExpanded)
+  }
+
+  // 展开/折叠全部
+  const toggleAllMarkets = () => {
+    if (expandedMarkets.size === groupedOrders.length) {
+      setExpandedMarkets(new Set())
+    } else {
+      setExpandedMarkets(new Set(groupedOrders.map(g => g.marketId)))
+    }
+  }
+
+  // 初始化展开状态（桌面端默认全部展开）
+  useEffect(() => {
+    if (groupByMarket && groupedOrders.length > 0 && expandedMarkets.size === 0 && !isMobile) {
+      setExpandedMarkets(new Set(groupedOrders.map(g => g.marketId)))
+    }
+  }, [groupByMarket, groupedOrders.length, isMobile])
+
  const columns = [
    {
      title: t('copyTradingOrders.orderId') || '订单ID',
@@ -124,21 +211,41 @@ const SellOrdersTab: React.FC<SellOrdersTabProps> = ({ copyTradingId, active = f
      dataIndex: 'marketId',
      key: 'marketId',
      width: isMobile ? 120 : 200,
-      render: (text: string, record: SellOrderInfo) => (
-        <div style={{ display: 'flex', flexDirection: 'column', gap: '2px' }}>
-          {record.marketTitle ? (
-            <span style={{ fontSize: isMobile ? 11 : 12, fontWeight: 500 }}>
-              {record.marketTitle}
+      render: (text: string, record: SellOrderInfo) => {
+        const marketUrl = getPolymarketUrl(record.marketSlug, record.marketCategory, record.marketId)
+        return (
+          <div style={{ display: 'flex', flexDirection: 'column', gap: '2px' }}>
+            {record.marketTitle ? (
+              marketUrl ? (
+                <a
+                  href={marketUrl}
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  style={{
+                    fontSize: isMobile ? 11 : 12,
+                    fontWeight: 500,
+                    color: '#1890ff',
+                    textDecoration: 'none',
+                    cursor: 'pointer'
+                  }}
+                >
+                  {record.marketTitle}
+                </a>
+              ) : (
+                <span style={{ fontSize: isMobile ? 11 : 12, fontWeight: 500 }}>
+                  {record.marketTitle}
+                </span>
+              )
+            ) : null}
+            <span style={{ fontFamily: 'monospace', fontSize: isMobile ? 10 : 11, color: '#999' }}>
+              {isMobile
+                ? `${text.slice(0, 6)}...${text.slice(-4)}`
+                : `${text.slice(0, 8)}...${text.slice(-6)}`
+              }
            </span>
-          ) : null}
-          <span style={{ fontFamily: 'monospace', fontSize: isMobile ? 10 : 11, color: '#999' }}>
-            {isMobile
-              ? `${text.slice(0, 6)}...${text.slice(-4)}`
-              : `${text.slice(0, 8)}...${text.slice(-6)}`
-            }
-          </span>
-        </div>
-      )
+          </div>
+        )
+      }
    },
    {
      title: t('copyTradingOrders.side') || '方向',
@@ -212,34 +319,179 @@ const SellOrdersTab: React.FC<SellOrdersTabProps> = ({ copyTradingId, active = f
    }
  ]

-  return (
-    <div>
-      <div style={{ marginBottom: 16, display: 'flex', gap: 16, flexWrap: 'wrap' }}>
-        <Input
-          placeholder={t('copyTradingOrders.filterMarketId') || '筛选市场ID'}
-          allowClear
-          style={{ width: isMobile ? '100%' : 200 }}
-          value={filters.marketId}
-          onChange={(e) => setFilters({ ...filters, marketId: e.target.value || undefined })}
-        />
+  // 渲染分组视图
+  const renderGroupedView = () => {
+    if (groupedOrders.length === 0) {
+      return (
+        <div style={{ textAlign: 'center', padding: '40px', color: '#999' }}>
+          {t('copyTradingOrders.noSellOrders') || '暂无卖出订单'}
+        </div>
+      )
+    }

-        <Select
-          placeholder={t('copyTradingOrders.filterSide') || '筛选方向'}
-          allowClear
-          style={{ width: isMobile ? '100%' : 150 }}
-          value={filters.side}
-          onChange={(value) => setFilters({ ...filters, side: value || undefined })}
-        >
-          <Option value="0">YES</Option>
-          <Option value="1">NO</Option>
-          <Option value="YES">YES</Option>
-          <Option value="NO">NO</Option>
-        </Select>
+    return (
+      <div style={{ display: 'flex', flexDirection: 'column', gap: '16px' }}>
+        {groupedOrders.map((group) => {
+          const isExpanded = expandedMarkets.has(group.marketId)
+          const marketDisplayName = group.marketTitle || group.marketId.slice(0, 8) + '...' + group.marketId.slice(-6)
+          const marketUrl = getPolymarketUrl(group.marketSlug, group.marketCategory, group.marketId)
+          const pnlColor = getPnlColor(group.stats.totalPnl)

-        <Button type="primary" onClick={fetchOrders} icon={<ReloadOutlined />}>{t('common.refresh') || '刷新'}</Button>
+          return (
+            <Card
+              key={group.marketId}
+              style={{
+                borderRadius: '12px',
+                boxShadow: '0 2px 8px rgba(0,0,0,0.08)',
+                border: '1px solid #e8e8e8'
+              }}
+              bodyStyle={{ padding: '16px' }}
+            >
+              {/* 分组头部 */}
+              <div
+                style={{
+                  display: 'flex',
+                  justifyContent: 'space-between',
+                  alignItems: 'center',
+                  cursor: 'pointer',
+                  padding: '8px 0',
+                  marginBottom: isExpanded ? '12px' : 0
+                }}
+                onClick={() => toggleMarket(group.marketId)}
+              >
+                <div style={{ flex: 1 }}>
+                  <div style={{ display: 'flex', alignItems: 'center', gap: '8px', marginBottom: '8px' }}>
+                    {marketUrl ? (
+                      <a
+                        href={marketUrl}
+                        target="_blank"
+                        rel="noopener noreferrer"
+                        onClick={(e) => e.stopPropagation()}
+                        style={{
+                          fontSize: isMobile ? '14px' : '16px',
+                          fontWeight: 'bold',
+                          color: '#1890ff',
+                          textDecoration: 'none',
+                          cursor: 'pointer'
+                        }}
+                      >
+                        {marketDisplayName}
+                      </a>
+                    ) : (
+                      <span style={{ fontSize: isMobile ? '14px' : '16px', fontWeight: 'bold' }}>
+                        {marketDisplayName}
+                      </span>
+                    )}
+                    <Tag color="success">{t('copyTradingOrders.allFullyMatched') || '全部成交'}</Tag>
+                  </div>
+                  <div style={{ display: 'flex', gap: '16px', flexWrap: 'wrap', fontSize: isMobile ? '12px' : '13px', color: '#666' }}>
+                    <span>{t('copyTradingOrders.orderCount') || '订单数'}: {group.stats.count}</span>
+                    <span>{t('copyTradingOrders.totalAmount') || '总金额'}: {formatUSDC(group.stats.totalAmount)} USDC</span>
+                    <span style={{ color: pnlColor, fontWeight: 500 }}>
+                      {t('copyTradingOrders.totalPnl') || '总盈亏'}: {formatUSDC(group.stats.totalPnl)} USDC
+                    </span>
+                  </div>
+                </div>
+                <Button
+                  type="text"
+                  icon={isExpanded ? <UpOutlined /> : <DownOutlined />}
+                  onClick={(e) => {
+                    e.stopPropagation()
+                    toggleMarket(group.marketId)
+                  }}
+                />
+              </div>
+
+              {/* 订单列表 */}
+              {isExpanded && (
+                <>
+                  <Divider style={{ margin: '12px 0' }} />
+                  {isMobile ? (
+                    <div style={{ display: 'flex', flexDirection: 'column', gap: '12px' }}>
+                      {group.orders.map((order) => {
+                        const date = new Date(order.createdAt)
+                        const formattedDate = date.toLocaleString('zh-CN', {
+                          year: 'numeric',
+                          month: '2-digit',
+                          day: '2-digit',
+                          hour: '2-digit',
+                          minute: '2-digit'
+                        })
+                        const amount = (parseFloat(order.quantity) * parseFloat(order.price)).toString()
+                        const displaySide = order.side === '0' ? 'YES' : order.side === '1' ? 'NO' : order.side
+
+                        return (
+                          <Card
+                            key={order.orderId}
+                            size="small"
+                            style={{
+                              borderRadius: '8px',
+                              border: '1px solid #f0f0f0',
+                              backgroundColor: '#fafafa'
+                            }}
+                            bodyStyle={{ padding: '12px' }}
+                          >
+                            <div style={{ marginBottom: '8px' }}>
+                              <div style={{
+                                fontSize: '13px',
+                                fontWeight: 'bold',
+                                marginBottom: '6px',
+                                fontFamily: 'monospace',
+                                display: 'flex',
+                                alignItems: 'center',
+                                gap: '8px'
+                              }}>
+                                <span>{order.orderId.slice(0, 8)}...{order.orderId.slice(-6)}</span>
+                                {!isAutoGeneratedOrderId(order.orderId) && (
+                                  <Button
+                                    type="text"
+                                    size="small"
+                                    icon={<CopyOutlined />}
+                                    onClick={() => handleCopyOrderId(order.orderId)}
+                                    style={{ padding: 0, height: 'auto', fontSize: '11px' }}
+                                    title={t('common.copy') || '复制'}
+                                  />
+                                )}
+                              </div>
+                              <div style={{ display: 'flex', flexWrap: 'wrap', gap: '6px', alignItems: 'center' }}>
+                                <Tag style={{ fontSize: '11px' }}>{displaySide}</Tag>
+                              </div>
+                            </div>
+
+                            <div style={{ fontSize: '12px', color: '#666' }}>
+                              <div>{t('copyTradingOrders.quantity') || '数量'}: {formatUSDC(order.quantity)} | {t('copyTradingOrders.price') || '价格'}: {formatUSDC(order.price)}</div>
+                              <div>{t('copyTradingOrders.amount') || '金额'}: {formatUSDC(amount)} USDC</div>
+                              <div style={{ color: getPnlColor(order.realizedPnl), fontWeight: 500 }}>
+                                {t('copyTradingOrders.realizedPnl') || '已实现盈亏'}: {formatUSDC(order.realizedPnl)} USDC
+                              </div>
+                              <div style={{ color: '#999', marginTop: '4px' }}>{formattedDate}</div>
+                            </div>
+                          </Card>
+                        )
+                      })}
+                    </div>
+                  ) : (
+                    <Table
+                      columns={columns}
+                      dataSource={group.orders}
+                      rowKey="orderId"
+                      pagination={false}
+                      size="small"
+                    />
+                  )}
+                </>
+              )}
+            </Card>
+          )
+        })}
      </div>
+    )
+  }

-      {isMobile ? (
+  // 渲染列表视图
+  const renderListView = () => {
+    if (isMobile) {
+      return (
        <div>
          {loading ? (
            <div style={{ textAlign: 'center', padding: '40px' }}>
@@ -333,9 +585,31 @@ const SellOrdersTab: React.FC<SellOrdersTabProps> = ({ copyTradingId, active = f
                    <div style={{ marginBottom: '16px' }}>
                      <div style={{ fontSize: '12px', color: '#666', marginBottom: '4px' }}>{t('copyTradingOrders.market') || '市场'}</div>
                      {order.marketTitle ? (
-                        <div style={{ fontSize: '13px', fontWeight: '500', marginBottom: '4px' }}>
-                          {order.marketTitle}
-                        </div>
+                        (() => {
+                          const marketUrl = getPolymarketUrl(order.marketSlug, order.marketCategory, order.marketId)
+                          return marketUrl ? (
+                            <a
+                              href={marketUrl}
+                              target="_blank"
+                              rel="noopener noreferrer"
+                              style={{
+                                fontSize: '13px',
+                                fontWeight: '500',
+                                marginBottom: '4px',
+                                color: '#1890ff',
+                                textDecoration: 'none',
+                                cursor: 'pointer',
+                                display: 'block'
+                              }}
+                            >
+                              {order.marketTitle}
+                            </a>
+                          ) : (
+                            <div style={{ fontSize: '13px', fontWeight: '500', marginBottom: '4px' }}>
+                              {order.marketTitle}
+                            </div>
+                          )
+                        })()
                      ) : null}
                      <div style={{ fontSize: '12px', color: '#999', fontFamily: 'monospace' }}>
                        {order.marketId.slice(0, 8)}...{order.marketId.slice(-6)}
@@ -353,7 +627,9 @@ const SellOrdersTab: React.FC<SellOrdersTabProps> = ({ copyTradingId, active = f
            </div>
          )}
        </div>
-      ) : (
+      )
+    } else {
+      return (
        <Table
          columns={columns}
          dataSource={orders}
@@ -371,6 +647,69 @@ const SellOrdersTab: React.FC<SellOrdersTabProps> = ({ copyTradingId, active = f
            }
          }}
        />
+      )
+    }
+  }
+
+  return (
+    <div>
+      <div style={{ marginBottom: 16, display: 'flex', gap: 16, flexWrap: 'wrap', alignItems: 'center' }}>
+        <Input
+          placeholder={t('copyTradingOrders.filterMarketId') || '筛选市场ID'}
+          allowClear
+          style={{ width: isMobile ? '100%' : 200 }}
+          value={filters.marketId}
+          onChange={(e) => setFilters({ ...filters, marketId: e.target.value || undefined })}
+        />
+
+        <Select
+          placeholder={t('copyTradingOrders.filterSide') || '筛选方向'}
+          allowClear
+          style={{ width: isMobile ? '100%' : 150 }}
+          value={filters.side}
+          onChange={(value) => setFilters({ ...filters, side: value || undefined })}
+        >
+          <Option value="0">YES</Option>
+          <Option value="1">NO</Option>
+          <Option value="YES">YES</Option>
+          <Option value="NO">NO</Option>
+        </Select>
+
+        <Space>
+          <span style={{ fontSize: isMobile ? '12px' : '14px' }}>
+            {t('copyTradingOrders.groupByMarket') || '按市场分组'}:
+          </span>
+          <Switch
+            checked={groupByMarket}
+            onChange={setGroupByMarket}
+            checkedChildren={<AppstoreOutlined />}
+            unCheckedChildren={<UnorderedListOutlined />}
+          />
+        </Space>
+
+        {groupByMarket && groupedOrders.length > 0 && (
+          <Button
+            type="link"
+            onClick={toggleAllMarkets}
+            size="small"
+          >
+            {expandedMarkets.size === groupedOrders.length
+              ? (t('copyTradingOrders.collapseAll') || '折叠全部')
+              : (t('copyTradingOrders.expandAll') || '展开全部')}
+          </Button>
+        )}
+
+        <Button type="primary" onClick={fetchOrders} icon={<ReloadOutlined />}>{t('common.refresh') || '刷新'}</Button>
+      </div>
+
+      {loading ? (
+        <div style={{ textAlign: 'center', padding: '40px' }}>
+          <Spin size="large" />
+        </div>
+      ) : groupByMarket ? (
+        renderGroupedView()
+      ) : (
+        renderListView()
      )}
    </div>
  )
@@ -628,6 +628,8 @@ export interface BuyOrderInfo {
  leaderTradeId: string
  marketId: string
  marketTitle?: string  // 市场名称
+  marketSlug?: string  // 市场 slug（用于构建 URL）
+  marketCategory?: string  // 市场分类（sports, crypto 等）
  side: string
  quantity: string
  price: string
@@ -646,6 +648,8 @@ export interface SellOrderInfo {
  leaderTradeId: string
  marketId: string
  marketTitle?: string  // 市场名称
+  marketSlug?: string  // 市场 slug（用于构建 URL）
+  marketCategory?: string  // 市场分类（sports, crypto 等）
  side: string
  quantity: string
  price: string
@@ -662,6 +666,8 @@ export interface MatchedOrderInfo {
  buyOrderId: string
  marketId?: string  // 市场ID
  marketTitle?: string  // 市场名称
+  marketSlug?: string  // 市场 slug（用于构建 URL）
+  marketCategory?: string  // 市场分类（sports, crypto 等）
  matchedQuantity: string
  buyPrice: string
  sellPrice: string
@@ -94,6 +94,37 @@ export const isAutoGeneratedOrderId = (orderId: string | undefined | null): bool
  return orderId.startsWith('AUTO_') || orderId.startsWith('AUTO_FIFO_')
 }

+/**
+ * 构建 Polymarket 市场 URL
+ * 对于 spread 市场（sports 分类），跳转到 moneyline 页面
+ * @param marketSlug - 市场 slug
+ * @param marketCategory - 市场分类（sports, crypto 等）
+ * @param marketId - 市场ID（作为后备）
+ * @returns Polymarket URL，如果无法构建则返回 null
+ */
+export const getPolymarketUrl = (
+  marketSlug?: string | null,
+  marketCategory?: string | null,
+  marketId?: string | null
+): string | null => {
+  // 优先使用 slug
+  if (marketSlug) {
+    // 如果是 sports 分类，跳转到 moneyline 页面（spread 市场）
+    if (marketCategory?.toLowerCase() === 'sports') {
+      return `https://polymarket.com/event/${marketSlug}/moneyline`
+    }
+    // 其他分类跳转到普通市场页面
+    return `https://polymarket.com/event/${marketSlug}`
+  }
+  
+  // 如果没有 slug，使用 marketId（作为后备）
+  if (marketId && marketId.startsWith('0x')) {
+    return `https://polymarket.com/condition/${marketId}`
+  }
+  
+  return null
+}
+
 /**
 * 复制文本到剪贴板
 * @param text - 要复制的文本