fix: 优化匹配关系列表页的显示和交互
- 将'查询'按钮改为'刷新'按钮,文案更准确 - 在表格中新增'市场'列,显示市场标题和ID - 为移动端和桌面端的市场标题添加跳转到 Polymarket 的链接 - 导入 getPolymarketUrl 工具函数支持市场跳转 - 优化用户体验,便于快速查看市场详情
This commit is contained in:
@@ -1,7 +1,7 @@
|
|||||||
import { useEffect, useState } from 'react'
|
import { useEffect, useState } from 'react'
|
||||||
import { Table, Input, Button, Card, Divider, Spin, message } from 'antd'
|
import { Table, Input, Button, Card, Divider, Spin, message } from 'antd'
|
||||||
import { apiService } from '../../services/api'
|
import { apiService } from '../../services/api'
|
||||||
import { formatUSDC, isAutoGeneratedOrderId, copyToClipboard } from '../../utils'
|
import { formatUSDC, isAutoGeneratedOrderId, copyToClipboard, getPolymarketUrl } from '../../utils'
|
||||||
import { useMediaQuery } from 'react-responsive'
|
import { useMediaQuery } from 'react-responsive'
|
||||||
import { useTranslation } from 'react-i18next'
|
import { useTranslation } from 'react-i18next'
|
||||||
import type { MatchedOrderInfo, OrderTrackingRequest, OrderTrackingListResponse } from '../../types'
|
import type { MatchedOrderInfo, OrderTrackingRequest, OrderTrackingListResponse } from '../../types'
|
||||||
@@ -90,6 +90,47 @@ const MatchedOrdersTab: React.FC<MatchedOrdersTabProps> = ({ copyTradingId, acti
|
|||||||
}
|
}
|
||||||
|
|
||||||
const columns = [
|
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',
|
title: t('copyTradingOrders.sellOrderId') || '卖出订单ID',
|
||||||
dataIndex: 'sellOrderId',
|
dataIndex: 'sellOrderId',
|
||||||
@@ -233,7 +274,7 @@ const MatchedOrdersTab: React.FC<MatchedOrdersTabProps> = ({ copyTradingId, acti
|
|||||||
onChange={(e) => setFilters({ ...filters, buyOrderId: e.target.value || undefined })}
|
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>
|
</div>
|
||||||
|
|
||||||
{isMobile ? (
|
{isMobile ? (
|
||||||
@@ -273,9 +314,31 @@ const MatchedOrdersTab: React.FC<MatchedOrdersTabProps> = ({ copyTradingId, acti
|
|||||||
<div style={{ marginBottom: '12px' }}>
|
<div style={{ marginBottom: '12px' }}>
|
||||||
<div style={{ fontSize: '12px', color: '#666', marginBottom: '4px' }}>{t('copyTradingOrders.market') || '市场'}</div>
|
<div style={{ fontSize: '12px', color: '#666', marginBottom: '4px' }}>{t('copyTradingOrders.market') || '市场'}</div>
|
||||||
{order.marketTitle ? (
|
{order.marketTitle ? (
|
||||||
<div style={{ fontSize: '13px', fontWeight: '500', marginBottom: '4px' }}>
|
(() => {
|
||||||
{order.marketTitle}
|
const marketUrl = getPolymarketUrl(order.marketSlug, order.eventSlug, order.marketCategory, order.marketId)
|
||||||
</div>
|
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}
|
) : null}
|
||||||
{order.marketId && (
|
{order.marketId && (
|
||||||
<div style={{ fontSize: '12px', color: '#999', fontFamily: 'monospace' }}>
|
<div style={{ fontSize: '12px', color: '#999', fontFamily: 'monospace' }}>
|
||||||
|
|||||||
Reference in New Issue
Block a user