fix: 优化匹配关系列表页的显示和交互
- 将'查询'按钮改为'刷新'按钮,文案更准确 - 在表格中新增'市场'列,显示市场标题和ID - 为移动端和桌面端的市场标题添加跳转到 Polymarket 的链接 - 导入 getPolymarketUrl 工具函数支持市场跳转 - 优化用户体验,便于快速查看市场详情
This commit is contained in:
@@ -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' }}>
|
||||
|
||||
Reference in New Issue
Block a user