WrBugandClaude Opus 4.7
8ab8ae5205
前端所有金额展示从 "100.00 USDC" 改为 "$100.00" 格式， 后端 Telegram 通知模板和错误提示同步更新。 Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
756 lines
30 KiB
TypeScript
756 lines
30 KiB
TypeScript
import { useEffect, useState } 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, getPolymarketUrl } from '../../utils'
|
|
import { useMediaQuery } from 'react-responsive'
|
|
import { useTranslation } from 'react-i18next'
|
|
import type { BuyOrderInfo, OrderTrackingRequest, OrderTrackingListResponse, MarketGroupedOrdersRequest, MarketGroupedOrdersResponse, MarketOrderGroup } from '../../types'
|
|
|
|
const { Option } = Select
|
|
|
|
import { ReloadOutlined, CopyOutlined, DownOutlined, UpOutlined, AppstoreOutlined, UnorderedListOutlined } from '@ant-design/icons'
|
|
|
|
interface BuyOrdersTabProps {
|
|
copyTradingId: string
|
|
active?: boolean
|
|
}
|
|
|
|
const BuyOrdersTab: React.FC<BuyOrdersTabProps> = ({ copyTradingId, active = false }) => {
|
|
const { t } = useTranslation()
|
|
const isMobile = useMediaQuery({ maxWidth: 768 })
|
|
const [loading, setLoading] = useState(false)
|
|
const [orders, setOrders] = useState<BuyOrderInfo[]>([])
|
|
const [total, setTotal] = useState(0)
|
|
const [page, setPage] = useState(1)
|
|
const [limit, setLimit] = useState(20)
|
|
const [filters, setFilters] = useState<{
|
|
marketId?: string
|
|
marketTitle?: string
|
|
status?: string
|
|
}>({})
|
|
// 从 localStorage 读取用户分组偏好，如果没有则默认为 false
|
|
const [groupByMarket, setGroupByMarket] = useState(() => {
|
|
const savedPreference = localStorage.getItem('copyTradingOrders_groupByMarket')
|
|
return savedPreference === 'true'
|
|
})
|
|
const [expandedMarkets, setExpandedMarkets] = useState<Set<string>>(new Set()) // 展开的市场ID集合
|
|
const [groupedOrders, setGroupedOrders] = useState<MarketOrderGroup[]>([]) // 分组数据（从后端获取）
|
|
const [groupedTotal, setGroupedTotal] = useState(0) // 分组总数（市场数量）
|
|
|
|
const handleMarketTitleChange = (value: string) => {
|
|
setFilters({ ...filters, marketTitle: value || undefined })
|
|
}
|
|
|
|
// 切换分组模式时，保存用户偏好到 localStorage
|
|
const handleToggleGroupByMarket = (checked: boolean) => {
|
|
setGroupByMarket(checked)
|
|
localStorage.setItem('copyTradingOrders_groupByMarket', String(checked))
|
|
}
|
|
|
|
useEffect(() => {
|
|
if (copyTradingId && active) {
|
|
fetchOrders()
|
|
}
|
|
}, [copyTradingId, active, page, limit, filters.marketId, filters.status, groupByMarket])
|
|
|
|
// 防抖搜索 - marketTitle 和 marketId 变化时延迟0.5秒再搜索
|
|
useEffect(() => {
|
|
if (!copyTradingId || !active) return
|
|
|
|
const timer = setTimeout(() => {
|
|
fetchOrders()
|
|
}, 500) // 0.5秒延迟
|
|
|
|
return () => clearTimeout(timer)
|
|
}, [filters.marketTitle])
|
|
|
|
const fetchOrders = async () => {
|
|
if (!copyTradingId) return
|
|
|
|
setLoading(true)
|
|
try {
|
|
if (groupByMarket) {
|
|
// 调用分组接口（支持市场筛选）
|
|
const request: MarketGroupedOrdersRequest = {
|
|
copyTradingId: parseInt(copyTradingId),
|
|
type: 'buy',
|
|
page,
|
|
limit,
|
|
marketId: filters.marketId,
|
|
marketTitle: filters.marketTitle
|
|
}
|
|
|
|
const response = await apiService.orderTracking.listGroupedByMarket(request)
|
|
if (response.data.code === 0 && response.data.data) {
|
|
const data = response.data.data as MarketGroupedOrdersResponse
|
|
setGroupedOrders(data.list || [])
|
|
setGroupedTotal(data.total || 0)
|
|
}
|
|
} else {
|
|
// 调用普通列表接口
|
|
const request: OrderTrackingRequest = {
|
|
copyTradingId: parseInt(copyTradingId),
|
|
type: 'buy',
|
|
page,
|
|
limit,
|
|
...filters
|
|
}
|
|
|
|
const response = await apiService.orderTracking.list(request)
|
|
if (response.data.code === 0 && response.data.data) {
|
|
const data = response.data.data as OrderTrackingListResponse
|
|
setOrders((data.list || []) as BuyOrderInfo[])
|
|
setTotal(data.total || 0)
|
|
}
|
|
}
|
|
} catch (error: any) {
|
|
console.error('获取买入订单列表失败:', error)
|
|
} finally {
|
|
setLoading(false)
|
|
}
|
|
}
|
|
|
|
const getStatusTag = (status: string) => {
|
|
const statusMap: Record<string, { color: string; text: string }> = {
|
|
filled: { color: 'processing', text: t('copyTradingOrders.statusFilled') || '未成交' },
|
|
partially_matched: { color: 'warning', text: t('copyTradingOrders.statusPartiallySold') || '部分成交' },
|
|
fully_matched: { color: 'success', text: t('copyTradingOrders.statusFullySold') || '全部成交' }
|
|
}
|
|
const config = statusMap[status] || { color: 'default', text: status }
|
|
return <Tag color={config.color}>{config.text}</Tag>
|
|
}
|
|
|
|
const handleCopyOrderId = async (orderId: string) => {
|
|
const success = await copyToClipboard(orderId)
|
|
if (success) {
|
|
message.success(t('common.copySuccess') || '已复制到剪贴板')
|
|
} else {
|
|
message.error(t('common.copyFailed') || '复制失败')
|
|
}
|
|
}
|
|
|
|
|
|
// 切换市场展开/折叠
|
|
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',
|
|
dataIndex: 'orderId',
|
|
key: 'orderId',
|
|
width: isMobile ? 120 : 180,
|
|
render: (text: string) => {
|
|
const isAuto = isAutoGeneratedOrderId(text)
|
|
return (
|
|
<div style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
|
|
<span style={{ fontFamily: 'monospace', fontSize: isMobile ? 11 : 12 }}>
|
|
{isMobile
|
|
? `${text.slice(0, 6)}...${text.slice(-4)}`
|
|
: `${text.slice(0, 8)}...${text.slice(-6)}`
|
|
}
|
|
</span>
|
|
{!isAuto && (
|
|
<Button
|
|
type="text"
|
|
size="small"
|
|
icon={<CopyOutlined />}
|
|
onClick={() => handleCopyOrderId(text)}
|
|
style={{ padding: 0, height: 'auto', fontSize: isMobile ? 11 : 12 }}
|
|
title={t('common.copy') || '复制'}
|
|
/>
|
|
)}
|
|
</div>
|
|
)
|
|
}
|
|
},
|
|
{
|
|
title: t('copyTradingOrders.leaderTradeId') || 'Leader 交易ID',
|
|
dataIndex: 'leaderTradeId',
|
|
key: 'leaderTradeId',
|
|
width: isMobile ? 100 : 150,
|
|
render: (text: string) => (
|
|
<span style={{ fontFamily: 'monospace', fontSize: isMobile ? 11 : 12 }}>
|
|
{isMobile
|
|
? `${text.slice(0, 6)}...${text.slice(-4)}`
|
|
: `${text.slice(0, 8)}...${text.slice(-6)}`
|
|
}
|
|
</span>
|
|
)
|
|
},
|
|
{
|
|
title: t('copyTradingOrders.market') || '市场',
|
|
dataIndex: 'marketId',
|
|
key: 'marketId',
|
|
width: isMobile ? 120 : 200,
|
|
render: (text: string, record: BuyOrderInfo) => {
|
|
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.buyQuantity') || '买入数量',
|
|
dataIndex: 'quantity',
|
|
key: 'quantity',
|
|
width: isMobile ? 80 : 100,
|
|
render: (value: string) => (
|
|
<span style={{ fontSize: isMobile ? 12 : 14 }}>{formatUSDC(value)}</span>
|
|
)
|
|
},
|
|
{
|
|
title: t('copyTradingOrders.buyPrice') || '买入价格',
|
|
dataIndex: 'price',
|
|
key: 'price',
|
|
width: isMobile ? 80 : 100,
|
|
render: (value: string) => (
|
|
<span style={{ fontSize: isMobile ? 12 : 14 }}>{formatUSDC(value)}</span>
|
|
)
|
|
},
|
|
{
|
|
title: t('copyTradingOrders.buyAmount') || '买入金额',
|
|
key: 'amount',
|
|
width: isMobile ? 100 : 120,
|
|
render: (_: any, record: BuyOrderInfo) => {
|
|
const amount = (parseFloat(record.quantity) * parseFloat(record.price)).toString()
|
|
return (
|
|
<span style={{ fontSize: isMobile ? 12 : 14 }}>
|
|
{isMobile ? formatUSDC(amount) : `$${formatUSDC(amount)}`}
|
|
</span>
|
|
)
|
|
}
|
|
},
|
|
{
|
|
title: t('copyTradingOrders.matchedQuantity') || '已匹配',
|
|
dataIndex: 'matchedQuantity',
|
|
key: 'matchedQuantity',
|
|
width: isMobile ? 70 : 90,
|
|
render: (value: string) => (
|
|
<span style={{ fontSize: isMobile ? 12 : 14 }}>{formatUSDC(value)}</span>
|
|
)
|
|
},
|
|
{
|
|
title: t('copyTradingOrders.remainingQuantity') || '剩余',
|
|
dataIndex: 'remainingQuantity',
|
|
key: 'remainingQuantity',
|
|
width: isMobile ? 70 : 90,
|
|
render: (value: string) => (
|
|
<span style={{ fontSize: isMobile ? 12 : 14 }}>{formatUSDC(value)}</span>
|
|
)
|
|
},
|
|
{
|
|
title: t('copyTradingOrders.sellStatus') || '卖出状态',
|
|
dataIndex: 'status',
|
|
key: 'status',
|
|
width: isMobile ? 80 : 100,
|
|
render: (status: string) => getStatusTag(status)
|
|
},
|
|
{
|
|
title: t('copyTradingOrders.createdAt') || '创建时间',
|
|
dataIndex: 'createdAt',
|
|
key: 'createdAt',
|
|
width: isMobile ? 120 : 160,
|
|
render: (timestamp: number) => (
|
|
<span style={{ fontSize: isMobile ? 11 : 12 }}>
|
|
{isMobile
|
|
? new Date(timestamp).toLocaleDateString('zh-CN')
|
|
: new Date(timestamp).toLocaleString('zh-CN')
|
|
}
|
|
</span>
|
|
)
|
|
}
|
|
]
|
|
|
|
// 分组默认全部折叠（不自动展开）
|
|
|
|
// 渲染分组视图
|
|
const renderGroupedView = () => {
|
|
if (groupedOrders.length === 0) {
|
|
return (
|
|
<div style={{ textAlign: 'center', padding: '40px', color: '#999' }}>
|
|
{t('copyTradingOrders.noBuyOrders') || '暂无买入订单'}
|
|
</div>
|
|
)
|
|
}
|
|
|
|
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.eventSlug, group.marketCategory, group.marketId)
|
|
const orders = group.orders as BuyOrderInfo[]
|
|
|
|
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.allFullySold') || '全部卖出'}</Tag>
|
|
) : group.stats.fullyMatchedCount === 0 ? (
|
|
<Tag color="default">{t('copyTradingOrders.notSold') || '未卖出'}</Tag>
|
|
) : (
|
|
<Tag color="warning">
|
|
{t('copyTradingOrders.partiallySold') || '部分卖出'} ({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)}</span>
|
|
<span>
|
|
{t('copyTradingOrders.statusBreakdown') || '状态'}:
|
|
{group.stats.fullyMatchedCount > 0 && ` ${t('copyTradingOrders.allFullySold') || '全部卖出'} ${group.stats.fullyMatchedCount}`}
|
|
{group.stats.partiallyMatchedCount > 0 && ` ${t('copyTradingOrders.partiallySold') || '部分卖出'} ${group.stats.partiallyMatchedCount}`}
|
|
{group.stats.filledCount > 0 && ` ${t('copyTradingOrders.notSold') || '未卖出'} ${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' }}>
|
|
{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()
|
|
|
|
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' }}>
|
|
{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)}</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={orders}
|
|
rowKey="orderId"
|
|
pagination={false}
|
|
size="small"
|
|
/>
|
|
)}
|
|
</>
|
|
)}
|
|
</Card>
|
|
)
|
|
})}
|
|
</div>
|
|
)
|
|
}
|
|
|
|
// 渲染列表视图
|
|
const renderListView = () => {
|
|
if (isMobile) {
|
|
return (
|
|
<div>
|
|
{loading ? (
|
|
<div style={{ textAlign: 'center', padding: '40px' }}>
|
|
<Spin size="large" />
|
|
</div>
|
|
) : orders.length === 0 ? (
|
|
<div style={{ textAlign: 'center', padding: '40px', color: '#999' }}>
|
|
{t('copyTradingOrders.noBuyOrders') || '暂无买入订单'}
|
|
</div>
|
|
) : (
|
|
<div style={{ display: 'flex', flexDirection: 'column', gap: '12px' }}>
|
|
{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()
|
|
|
|
return (
|
|
<Card
|
|
key={order.orderId}
|
|
style={{
|
|
borderRadius: '12px',
|
|
boxShadow: '0 2px 8px rgba(0,0,0,0.08)',
|
|
border: '1px solid #e8e8e8'
|
|
}}
|
|
bodyStyle={{ padding: '16px' }}
|
|
>
|
|
<div style={{ marginBottom: '12px' }}>
|
|
<div style={{
|
|
fontSize: '14px',
|
|
fontWeight: 'bold',
|
|
marginBottom: '8px',
|
|
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: '12px' }}
|
|
title={t('common.copy') || '复制'}
|
|
/>
|
|
)}
|
|
</div>
|
|
<div style={{ display: 'flex', flexWrap: 'wrap', gap: '6px', alignItems: 'center' }}>
|
|
{getStatusTag(order.status)}
|
|
</div>
|
|
</div>
|
|
|
|
<Divider style={{ margin: '12px 0' }} />
|
|
|
|
<div style={{ marginBottom: '12px' }}>
|
|
<div style={{ fontSize: '12px', color: '#666', marginBottom: '4px' }}>{t('copyTradingOrders.buyInfo') || '买入信息'}</div>
|
|
<div style={{ fontSize: '14px', fontWeight: '500' }}>
|
|
{t('copyTradingOrders.quantity') || '数量'}: {formatUSDC(order.quantity)} | {t('copyTradingOrders.price') || '价格'}: {formatUSDC(order.price)}
|
|
</div>
|
|
<div style={{ fontSize: '14px', fontWeight: '500', marginTop: '4px' }}>
|
|
{t('copyTradingOrders.amount') || '金额'}: ${formatUSDC(amount)}
|
|
</div>
|
|
</div>
|
|
|
|
<div style={{ marginBottom: '12px' }}>
|
|
<div style={{ fontSize: '12px', color: '#666', marginBottom: '4px' }}>{t('copyTradingOrders.matchInfo') || '匹配信息'}</div>
|
|
<div style={{ fontSize: '13px', color: '#333' }}>
|
|
{t('copyTradingOrders.matched') || '已匹配'}: {formatUSDC(order.matchedQuantity)} | {t('copyTradingOrders.remaining') || '剩余'}: {formatUSDC(order.remainingQuantity)}
|
|
</div>
|
|
</div>
|
|
|
|
<div style={{ marginBottom: '12px' }}>
|
|
<div style={{ fontSize: '12px', color: '#666', marginBottom: '4px' }}>{t('copyTradingOrders.leaderTradeId') || 'Leader 交易ID'}</div>
|
|
<div style={{ fontSize: '12px', color: '#999', fontFamily: 'monospace' }}>
|
|
{order.leaderTradeId.slice(0, 8)}...{order.leaderTradeId.slice(-6)}
|
|
</div>
|
|
</div>
|
|
|
|
<div style={{ marginBottom: '16px' }}>
|
|
<div style={{ fontSize: '12px', color: '#666', marginBottom: '4px' }}>{t('copyTradingOrders.market') || '市场'}</div>
|
|
{order.marketTitle ? (
|
|
(() => {
|
|
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}
|
|
<div style={{ fontSize: '12px', color: '#999', fontFamily: 'monospace' }}>
|
|
{order.marketId.slice(0, 8)}...{order.marketId.slice(-6)}
|
|
</div>
|
|
</div>
|
|
|
|
<div style={{ marginBottom: '16px' }}>
|
|
<div style={{ fontSize: '12px', color: '#999' }}>
|
|
{t('copyTradingOrders.createdAt') || '创建时间'}: {formattedDate}
|
|
</div>
|
|
</div>
|
|
</Card>
|
|
)
|
|
})}
|
|
</div>
|
|
)}
|
|
</div>
|
|
)
|
|
} else {
|
|
return (
|
|
<Table
|
|
columns={columns}
|
|
dataSource={orders}
|
|
rowKey="orderId"
|
|
loading={loading}
|
|
pagination={{
|
|
current: page,
|
|
pageSize: limit,
|
|
total,
|
|
showSizeChanger: true,
|
|
showTotal: (total) => `${t('common.total') || '共'} ${total} ${t('common.items') || '条'}`,
|
|
onChange: (newPage, newLimit) => {
|
|
setPage(newPage)
|
|
setLimit(newLimit)
|
|
}
|
|
}}
|
|
/>
|
|
)
|
|
}
|
|
}
|
|
|
|
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 })}
|
|
/>
|
|
|
|
<Input
|
|
placeholder={t('copyTradingOrders.filterMarketTitle') || '筛选市场标题'}
|
|
allowClear
|
|
style={{ width: isMobile ? '100%' : 200 }}
|
|
value={filters.marketTitle}
|
|
onChange={(e) => handleMarketTitleChange(e.target.value)}
|
|
/>
|
|
|
|
<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.notSold') || '未卖出'}</Option>
|
|
<Option value="partially_matched">{t('copyTradingOrders.partiallySold') || '部分卖出'}</Option>
|
|
<Option value="fully_matched">{t('copyTradingOrders.allFullySold') || '全部卖出'}</Option>
|
|
</Select>
|
|
|
|
<Space>
|
|
<span style={{ fontSize: isMobile ? '12px' : '14px' }}>
|
|
{t('copyTradingOrders.groupByMarket') || '按市场分组'}:
|
|
</span>
|
|
<Switch
|
|
checked={groupByMarket}
|
|
onChange={handleToggleGroupByMarket}
|
|
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>
|
|
)}
|
|
|
|
{groupByMarket && (
|
|
<div style={{ fontSize: isMobile ? '12px' : '14px', color: '#666' }}>
|
|
{t('common.total') || '共'} {groupedTotal} {t('copyTradingOrders.markets') || '个市场'}
|
|
</div>
|
|
)}
|
|
|
|
<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()}
|
|
{groupedOrders.length > 0 && (
|
|
<div style={{ marginTop: 16, textAlign: 'center' }}>
|
|
<Button
|
|
onClick={() => {
|
|
if (page > 1) {
|
|
setPage(page - 1)
|
|
}
|
|
}}
|
|
disabled={page <= 1}
|
|
style={{ marginRight: 8 }}
|
|
>
|
|
{t('common.previous') || '上一页'}
|
|
</Button>
|
|
<span style={{ margin: '0 16px' }}>
|
|
{t('common.pageOf') || '第'} {page} / {Math.ceil(groupedTotal / limit)} {t('common.page') || '页'}
|
|
</span>
|
|
<Button
|
|
onClick={() => {
|
|
if (page < Math.ceil(groupedTotal / limit)) {
|
|
setPage(page + 1)
|
|
}
|
|
}}
|
|
disabled={page >= Math.ceil(groupedTotal / limit)}
|
|
>
|
|
{t('common.next') || '下一页'}
|
|
</Button>
|
|
</div>
|
|
)}
|
|
</>
|
|
) : (
|
|
renderListView()
|
|
)}
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export default BuyOrdersTab
|
|
|