fix: 优化匹配关系列表页的显示和交互

- 将'查询'按钮改为'刷新'按钮,文案更准确
- 在表格中新增'市场'列,显示市场标题和ID
- 为移动端和桌面端的市场标题添加跳转到 Polymarket 的链接
- 导入 getPolymarketUrl 工具函数支持市场跳转
- 优化用户体验,便于快速查看市场详情
This commit is contained in:
WrBug
2026-01-20 11:48:14 +08:00
parent 45734c051e
commit 4d72017b97
@@ -1,7 +1,7 @@
import { useEffect, useState } from 'react'
import { Table, Input, Button, Card, Divider, Spin, message } 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 { MatchedOrderInfo, OrderTrackingRequest, OrderTrackingListResponse } from '../../types'
@@ -90,6 +90,47 @@ const MatchedOrdersTab: React.FC<MatchedOrdersTabProps> = ({ copyTradingId, acti
}
const columns = [
{
title: t('copyTradingOrders.market') || '市场',
dataIndex: 'marketId',
key: 'marketId',
width: isMobile ? 120 : 200,
render: (text: string, record: MatchedOrderInfo) => {
const marketUrl = getPolymarketUrl(record.marketSlug, record.eventSlug, 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>
</div>
)
}
},
{
title: t('copyTradingOrders.sellOrderId') || '卖出订单ID',
dataIndex: 'sellOrderId',
@@ -233,7 +274,7 @@ const MatchedOrdersTab: React.FC<MatchedOrdersTabProps> = ({ copyTradingId, acti
onChange={(e) => setFilters({ ...filters, buyOrderId: e.target.value || undefined })}
/>
<Button type="primary" onClick={fetchOrders} icon={<ReloadOutlined />}>{t('common.search') || '查询'}</Button>
<Button type="primary" onClick={fetchOrders} icon={<ReloadOutlined />}>{t('common.refresh') || '刷新'}</Button>
</div>
{isMobile ? (
@@ -273,9 +314,31 @@ const MatchedOrdersTab: React.FC<MatchedOrdersTabProps> = ({ copyTradingId, acti
<div style={{ marginBottom: '12px' }}>
<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.eventSlug, 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}
{order.marketId && (
<div style={{ fontSize: '12px', color: '#999', fontFamily: 'monospace' }}>