WrBugandClaude Opus 4.7
8ab8ae5205
前端所有金额展示从 "100.00 USDC" 改为 "$100.00" 格式， 后端 Telegram 通知模板和错误提示同步更新。 Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
715 lines
29 KiB
TypeScript
715 lines
29 KiB
TypeScript
import { useEffect, useState } from 'react'
|
|
import { useSearchParams } from 'react-router-dom'
|
|
import { Card, Table, Button, Space, Tag, Popconfirm, Switch, message, Select, Dropdown, Spin, List, Empty, Tooltip } from 'antd'
|
|
import { PlusOutlined, DeleteOutlined, BarChartOutlined, UnorderedListOutlined, ArrowUpOutlined, ArrowDownOutlined, EditOutlined, WalletOutlined, UserOutlined } from '@ant-design/icons'
|
|
import { useTranslation } from 'react-i18next'
|
|
import type { MenuProps } from 'antd'
|
|
import { apiService } from '../services/api'
|
|
import { useAccountStore } from '../store/accountStore'
|
|
import type { CopyTrading, Leader, CopyTradingStatistics } from '../types'
|
|
import { useMediaQuery } from 'react-responsive'
|
|
import { formatUSDC } from '../utils'
|
|
import CopyTradingOrdersModal from './CopyTradingOrders/index'
|
|
import StatisticsModal from './CopyTradingOrders/StatisticsModal'
|
|
import FilteredOrdersModal from './CopyTradingOrders/FilteredOrdersModal'
|
|
import EditModal from './CopyTradingOrders/EditModal'
|
|
import AddModal from './CopyTradingOrders/AddModal'
|
|
import LeaderSelect from '../components/LeaderSelect'
|
|
|
|
const { Option } = Select
|
|
|
|
const CopyTradingList: React.FC = () => {
|
|
const { t } = useTranslation()
|
|
const [searchParams] = useSearchParams()
|
|
const isMobile = useMediaQuery({ maxWidth: 768 })
|
|
const { accounts, fetchAccounts } = useAccountStore()
|
|
const [copyTradings, setCopyTradings] = useState<CopyTrading[]>([])
|
|
const [leaders, setLeaders] = useState<Leader[]>([])
|
|
const [loading, setLoading] = useState(false)
|
|
const [statisticsMap, setStatisticsMap] = useState<Record<number, CopyTradingStatistics>>({})
|
|
const [loadingStatistics, setLoadingStatistics] = useState<Set<number>>(new Set())
|
|
const [filters, setFilters] = useState<{
|
|
accountId?: number
|
|
leaderId?: number
|
|
enabled?: boolean
|
|
}>(() => {
|
|
const leaderIdParam = searchParams.get('leaderId')
|
|
if (leaderIdParam) {
|
|
const leaderId = parseInt(leaderIdParam, 10)
|
|
if (!isNaN(leaderId)) return { leaderId }
|
|
}
|
|
return {}
|
|
})
|
|
|
|
// Modal 状态
|
|
const [ordersModalOpen, setOrdersModalOpen] = useState(false)
|
|
const [ordersModalCopyTradingId, setOrdersModalCopyTradingId] = useState<string>('')
|
|
const [ordersModalTab, setOrdersModalTab] = useState<'buy' | 'sell' | 'matched'>('buy')
|
|
const [statisticsModalOpen, setStatisticsModalOpen] = useState(false)
|
|
const [statisticsModalCopyTradingId, setStatisticsModalCopyTradingId] = useState<string>('')
|
|
const [filteredOrdersModalOpen, setFilteredOrdersModalOpen] = useState(false)
|
|
const [filteredOrdersModalCopyTradingId, setFilteredOrdersModalCopyTradingId] = useState<string>('')
|
|
const [editModalOpen, setEditModalOpen] = useState(false)
|
|
const [editModalCopyTradingId, setEditModalCopyTradingId] = useState<string>('')
|
|
const [addModalOpen, setAddModalOpen] = useState(false)
|
|
|
|
// 从 URL 读取 leaderId 并应用筛选（如从 Leader 管理页跳转过来）
|
|
useEffect(() => {
|
|
const leaderIdParam = searchParams.get('leaderId')
|
|
if (leaderIdParam) {
|
|
const leaderId = parseInt(leaderIdParam, 10)
|
|
if (!isNaN(leaderId)) {
|
|
setFilters(prev => ({ ...prev, leaderId }))
|
|
}
|
|
}
|
|
}, [searchParams])
|
|
|
|
useEffect(() => {
|
|
fetchAccounts()
|
|
fetchLeaders()
|
|
fetchCopyTradings()
|
|
}, [])
|
|
|
|
useEffect(() => {
|
|
fetchCopyTradings()
|
|
}, [filters])
|
|
|
|
const fetchLeaders = async () => {
|
|
try {
|
|
const response = await apiService.leaders.list({})
|
|
if (response.data.code === 0 && response.data.data) {
|
|
setLeaders(response.data.data.list || [])
|
|
}
|
|
} catch (error: any) {
|
|
console.error('获取 Leader 列表失败:', error)
|
|
}
|
|
}
|
|
|
|
const fetchCopyTradings = async () => {
|
|
setLoading(true)
|
|
try {
|
|
const response = await apiService.copyTrading.list(filters)
|
|
if (response.data.code === 0 && response.data.data) {
|
|
const list = response.data.data.list || []
|
|
setCopyTradings(list)
|
|
// 为每个跟单关系获取统计信息
|
|
list.forEach((ct: CopyTrading) => {
|
|
fetchStatistics(ct.id)
|
|
})
|
|
} else {
|
|
message.error(response.data.msg || t('copyTradingList.fetchFailed') || '获取跟单列表失败')
|
|
}
|
|
} catch (error: any) {
|
|
message.error(error.message || t('copyTradingList.fetchFailed') || '获取跟单列表失败')
|
|
} finally {
|
|
setLoading(false)
|
|
}
|
|
}
|
|
|
|
const fetchStatistics = async (copyTradingId: number) => {
|
|
// 如果正在加载或已有数据，跳过
|
|
if (loadingStatistics.has(copyTradingId) || statisticsMap[copyTradingId]) {
|
|
return
|
|
}
|
|
|
|
setLoadingStatistics(prev => new Set(prev).add(copyTradingId))
|
|
try {
|
|
const response = await apiService.statistics.detail({ copyTradingId })
|
|
if (response.data.code === 0 && response.data.data) {
|
|
setStatisticsMap(prev => ({
|
|
...prev,
|
|
[copyTradingId]: response.data.data
|
|
}))
|
|
}
|
|
} catch (error: any) {
|
|
console.error(`获取跟单统计失败: copyTradingId=${copyTradingId}`, error)
|
|
} finally {
|
|
setLoadingStatistics(prev => {
|
|
const next = new Set(prev)
|
|
next.delete(copyTradingId)
|
|
return next
|
|
})
|
|
}
|
|
}
|
|
|
|
const getPnlColor = (value: string): string => {
|
|
const num = parseFloat(value)
|
|
if (isNaN(num)) return '#666'
|
|
return num >= 0 ? '#3f8600' : '#cf1322'
|
|
}
|
|
|
|
const getPnlIcon = (value: string) => {
|
|
const num = parseFloat(value)
|
|
if (isNaN(num)) return null
|
|
return num >= 0 ? <ArrowUpOutlined /> : <ArrowDownOutlined />
|
|
}
|
|
|
|
const formatPercent = (value: string): string => {
|
|
const num = parseFloat(value)
|
|
if (isNaN(num)) return '-'
|
|
return `${num >= 0 ? '+' : ''}${num.toFixed(2)}%`
|
|
}
|
|
|
|
const handleToggleStatus = async (copyTrading: CopyTrading) => {
|
|
try {
|
|
const response = await apiService.copyTrading.updateStatus({
|
|
copyTradingId: copyTrading.id,
|
|
enabled: !copyTrading.enabled
|
|
})
|
|
if (response.data.code === 0) {
|
|
message.success(copyTrading.enabled ? (t('copyTradingList.stopSuccess') || '停止跟单成功') : (t('copyTradingList.startSuccess') || '开启跟单成功'))
|
|
fetchCopyTradings()
|
|
} else {
|
|
message.error(response.data.msg || t('copyTradingList.updateStatusFailed') || '更新跟单状态失败')
|
|
}
|
|
} catch (error: any) {
|
|
message.error(error.message || t('copyTradingList.updateStatusFailed') || '更新跟单状态失败')
|
|
}
|
|
}
|
|
|
|
const handleDelete = async (copyTradingId: number) => {
|
|
try {
|
|
const response = await apiService.copyTrading.delete({ copyTradingId })
|
|
if (response.data.code === 0) {
|
|
message.success(t('copyTradingList.deleteSuccess') || '删除跟单成功')
|
|
fetchCopyTradings()
|
|
} else {
|
|
message.error(response.data.msg || t('copyTradingList.deleteFailed') || '删除跟单失败')
|
|
}
|
|
} catch (error: any) {
|
|
message.error(error.message || t('copyTradingList.deleteFailed') || '删除跟单失败')
|
|
}
|
|
}
|
|
|
|
const columns = [
|
|
{
|
|
title: t('copyTradingList.configName') || '配置名',
|
|
key: 'configName',
|
|
width: isMobile ? 100 : 150,
|
|
render: (_: any, record: CopyTrading) => (
|
|
<div style={{ fontSize: isMobile ? 13 : 14, fontWeight: 500 }}>
|
|
{record.configName || t('copyTradingList.configNameNotProvided') || '未提供'}
|
|
</div>
|
|
)
|
|
},
|
|
{
|
|
title: t('copyTradingList.wallet') || '钱包',
|
|
key: 'account',
|
|
width: isMobile ? 100 : 150,
|
|
render: (_: any, record: CopyTrading) => (
|
|
<div>
|
|
<div style={{ fontSize: isMobile ? 13 : 14, fontWeight: 500 }}>
|
|
{record.accountName || `${t('copyTradingList.account') || '账户'} ${record.accountId}`}
|
|
</div>
|
|
<div style={{ fontSize: isMobile ? 11 : 12, color: '#999', marginTop: 2 }}>
|
|
{isMobile
|
|
? `${record.walletAddress.slice(0, 4)}...${record.walletAddress.slice(-3)}`
|
|
: `${record.walletAddress.slice(0, 6)}...${record.walletAddress.slice(-4)}`
|
|
}
|
|
</div>
|
|
</div>
|
|
)
|
|
},
|
|
{
|
|
title: t('copyTradingList.copyMode') || '跟单模式',
|
|
key: 'copyMode',
|
|
width: isMobile ? 100 : 120,
|
|
render: (_: any, record: CopyTrading) => (
|
|
<Tag color={record.copyMode === 'RATIO' ? 'blue' : 'green'}>
|
|
{record.copyMode === 'RATIO'
|
|
? `${t('copyTradingList.ratioMode') || '比例'} ${(parseFloat(record.copyRatio || '0') * 100).toFixed(2).replace(/\.0+$/, '')}%`
|
|
: `${t('copyTradingList.fixedAmountMode') || '固定'} ${formatUSDC(record.fixedAmount || '0')}`
|
|
}
|
|
</Tag>
|
|
)
|
|
},
|
|
{
|
|
title: t('copyTradingList.leader') || 'Leader',
|
|
key: 'leader',
|
|
width: isMobile ? 100 : 150,
|
|
render: (_: any, record: CopyTrading) => (
|
|
<div>
|
|
<div style={{ fontSize: isMobile ? 13 : 14, fontWeight: 500 }}>
|
|
{record.leaderName || `Leader ${record.leaderId}`}
|
|
</div>
|
|
<div style={{ fontSize: isMobile ? 11 : 12, color: '#999', marginTop: 2 }}>
|
|
{isMobile
|
|
? `${record.leaderAddress.slice(0, 4)}...${record.leaderAddress.slice(-3)}`
|
|
: `${record.leaderAddress.slice(0, 6)}...${record.leaderAddress.slice(-4)}`
|
|
}
|
|
</div>
|
|
</div>
|
|
)
|
|
},
|
|
{
|
|
title: t('common.status') || '状态',
|
|
dataIndex: 'enabled',
|
|
key: 'enabled',
|
|
width: isMobile ? 80 : 100,
|
|
render: (enabled: boolean, record: CopyTrading) => (
|
|
<Switch
|
|
checked={enabled}
|
|
onChange={() => handleToggleStatus(record)}
|
|
checkedChildren={t('copyTradingList.enabled') || '开启'}
|
|
unCheckedChildren={t('copyTradingList.disabled') || '停止'}
|
|
/>
|
|
)
|
|
},
|
|
{
|
|
title: t('copyTradingList.totalPnl') || '总盈亏',
|
|
key: 'totalPnl',
|
|
width: isMobile ? 100 : 150,
|
|
render: (_: any, record: CopyTrading) => {
|
|
const stats = statisticsMap[record.id]
|
|
if (!stats) {
|
|
return loadingStatistics.has(record.id) ? (
|
|
<span style={{ fontSize: isMobile ? 11 : 12 }}>{t('common.loading') || '加载中...'}</span>
|
|
) : (
|
|
<span style={{ fontSize: isMobile ? 11 : 12 }}>-</span>
|
|
)
|
|
}
|
|
return (
|
|
<div>
|
|
<div style={{
|
|
color: getPnlColor(stats.totalPnl),
|
|
fontWeight: 500,
|
|
display: 'flex',
|
|
alignItems: 'center',
|
|
gap: 4,
|
|
fontSize: isMobile ? 12 : 14
|
|
}}>
|
|
{getPnlIcon(stats.totalPnl)}
|
|
{isMobile ? formatUSDC(stats.totalPnl) : `$${formatUSDC(stats.totalPnl)}`}
|
|
</div>
|
|
{!isMobile && (
|
|
<div style={{
|
|
fontSize: 12,
|
|
color: getPnlColor(stats.totalPnlPercent),
|
|
marginTop: 4
|
|
}}>
|
|
{formatPercent(stats.totalPnlPercent)}
|
|
</div>
|
|
)}
|
|
</div>
|
|
)
|
|
}
|
|
},
|
|
{
|
|
title: t('common.actions') || '操作',
|
|
key: 'action',
|
|
width: isMobile ? 100 : 160,
|
|
fixed: 'right' as const,
|
|
render: (_: any, record: CopyTrading) => {
|
|
const menuItems: MenuProps['items'] = [
|
|
{
|
|
key: 'matchedOrders',
|
|
label: t('copyTradingList.matchedOrders') || '已成交订单',
|
|
icon: <UnorderedListOutlined />,
|
|
onClick: () => {
|
|
setOrdersModalCopyTradingId(record.id.toString())
|
|
setOrdersModalTab('buy')
|
|
setOrdersModalOpen(true)
|
|
}
|
|
},
|
|
{
|
|
key: 'filteredOrders',
|
|
label: t('copyTradingList.filteredOrders') || '已过滤订单',
|
|
icon: <UnorderedListOutlined />,
|
|
onClick: () => {
|
|
setFilteredOrdersModalCopyTradingId(record.id.toString())
|
|
setFilteredOrdersModalOpen(true)
|
|
}
|
|
}
|
|
]
|
|
|
|
return (
|
|
<Space size={4}>
|
|
<Tooltip title={t('common.edit') || '编辑'}>
|
|
<div
|
|
onClick={() => {
|
|
setEditModalCopyTradingId(record.id.toString())
|
|
setEditModalOpen(true)
|
|
}}
|
|
style={{
|
|
display: 'flex',
|
|
alignItems: 'center',
|
|
justifyContent: 'center',
|
|
width: '32px',
|
|
height: '32px',
|
|
cursor: 'pointer',
|
|
borderRadius: '6px',
|
|
transition: 'background-color 0.2s'
|
|
}}
|
|
onMouseEnter={(e) => { e.currentTarget.style.backgroundColor = '#f0f0f0' }}
|
|
onMouseLeave={(e) => { e.currentTarget.style.backgroundColor = 'transparent' }}
|
|
>
|
|
<EditOutlined style={{ fontSize: '16px', color: '#1890ff' }} />
|
|
</div>
|
|
</Tooltip>
|
|
|
|
<Tooltip title={t('copyTradingList.statistics') || '统计'}>
|
|
<div
|
|
onClick={() => {
|
|
setStatisticsModalCopyTradingId(record.id.toString())
|
|
setStatisticsModalOpen(true)
|
|
}}
|
|
style={{
|
|
display: 'flex',
|
|
alignItems: 'center',
|
|
justifyContent: 'center',
|
|
width: '32px',
|
|
height: '32px',
|
|
cursor: 'pointer',
|
|
borderRadius: '6px',
|
|
transition: 'background-color 0.2s'
|
|
}}
|
|
onMouseEnter={(e) => { e.currentTarget.style.backgroundColor = '#f0f0f0' }}
|
|
onMouseLeave={(e) => { e.currentTarget.style.backgroundColor = 'transparent' }}
|
|
>
|
|
<BarChartOutlined style={{ fontSize: '16px', color: '#1890ff' }} />
|
|
</div>
|
|
</Tooltip>
|
|
|
|
<Dropdown menu={{ items: menuItems }} trigger={['click']}>
|
|
<Tooltip title={t('copyTradingList.orders') || '订单'}>
|
|
<div
|
|
style={{
|
|
display: 'flex',
|
|
alignItems: 'center',
|
|
justifyContent: 'center',
|
|
width: '32px',
|
|
height: '32px',
|
|
cursor: 'pointer',
|
|
borderRadius: '6px',
|
|
transition: 'background-color 0.2s'
|
|
}}
|
|
onMouseEnter={(e) => { e.currentTarget.style.backgroundColor = '#f0f0f0' }}
|
|
onMouseLeave={(e) => { e.currentTarget.style.backgroundColor = 'transparent' }}
|
|
>
|
|
<UnorderedListOutlined style={{ fontSize: '16px', color: '#1890ff' }} />
|
|
</div>
|
|
</Tooltip>
|
|
</Dropdown>
|
|
|
|
<Popconfirm
|
|
title={t('copyTradingList.deleteConfirm') || '确定要删除这个跟单关系吗？'}
|
|
onConfirm={() => handleDelete(record.id)}
|
|
okText={t('common.confirm') || '确定'}
|
|
cancelText={t('common.cancel') || '取消'}
|
|
>
|
|
<Tooltip title={t('common.delete') || '删除'}>
|
|
<div
|
|
style={{
|
|
display: 'flex',
|
|
alignItems: 'center',
|
|
justifyContent: 'center',
|
|
width: '32px',
|
|
height: '32px',
|
|
cursor: 'pointer',
|
|
borderRadius: '6px',
|
|
transition: 'background-color 0.2s'
|
|
}}
|
|
onMouseEnter={(e) => { e.currentTarget.style.backgroundColor = '#fff1f0' }}
|
|
onMouseLeave={(e) => { e.currentTarget.style.backgroundColor = 'transparent' }}
|
|
>
|
|
<DeleteOutlined style={{ fontSize: '16px', color: '#ff4d4f' }} />
|
|
</div>
|
|
</Tooltip>
|
|
</Popconfirm>
|
|
</Space>
|
|
)
|
|
}
|
|
}
|
|
]
|
|
|
|
return (
|
|
<div>
|
|
<div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: '20px', flexWrap: 'wrap', gap: '12px' }}>
|
|
<h2 style={{ margin: 0, fontSize: isMobile ? '20px' : '24px' }}>{t('copyTradingList.title') || '跟单配置管理'}</h2>
|
|
<Tooltip title={t('copyTradingList.addCopyTrading') || '新增跟单'}>
|
|
<Button
|
|
type="primary"
|
|
icon={<PlusOutlined />}
|
|
onClick={() => setAddModalOpen(true)}
|
|
size={isMobile ? 'middle' : 'large'}
|
|
style={{ borderRadius: '8px', height: isMobile ? '40px' : '48px', fontSize: isMobile ? '14px' : '16px' }}
|
|
/>
|
|
</Tooltip>
|
|
</div>
|
|
|
|
<Card style={{ borderRadius: '12px', boxShadow: '0 2px 8px rgba(0,0,0,0.08)', border: '1px solid #e8e8e8' }} bodyStyle={{ padding: isMobile ? '12px' : '24px' }}>
|
|
<div style={{ marginBottom: 16, display: 'flex', gap: 12, flexWrap: 'wrap' }}>
|
|
<Select
|
|
placeholder={t('copyTradingList.filterWallet') || '筛选钱包'}
|
|
allowClear
|
|
style={{ width: isMobile ? '100%' : 200 }}
|
|
value={filters.accountId}
|
|
onChange={(value) => setFilters({ ...filters, accountId: value || undefined })}
|
|
>
|
|
{accounts.map(account => (
|
|
<Option key={account.id} value={account.id}>
|
|
{account.accountName || `${t('copyTradingList.account') || '账户'} ${account.id}`}
|
|
</Option>
|
|
))}
|
|
</Select>
|
|
|
|
<LeaderSelect
|
|
placeholder={t('copyTradingList.filterLeader') || '筛选 Leader'}
|
|
allowClear
|
|
style={{ width: isMobile ? '100%' : 200 }}
|
|
value={filters.leaderId}
|
|
onChange={(value) => setFilters({ ...filters, leaderId: value || undefined })}
|
|
leaders={leaders}
|
|
/>
|
|
|
|
<Select
|
|
placeholder={t('common.status') || '状态'}
|
|
allowClear
|
|
style={{ width: isMobile ? '100%' : 150 }}
|
|
value={filters.enabled}
|
|
onChange={(value) => setFilters({ ...filters, enabled: value !== undefined ? value : undefined })}
|
|
>
|
|
<Option value={true}>{t('common.enabled') || '开启'}</Option>
|
|
<Option value={false}>{t('common.disabled') || '停止'}</Option>
|
|
</Select>
|
|
</div>
|
|
|
|
{isMobile ? (
|
|
// 移动端卡片布局
|
|
<div>
|
|
{loading ? (
|
|
<div style={{ textAlign: 'center', padding: '40px' }}>
|
|
<Spin size="large" />
|
|
</div>
|
|
) : copyTradings.length === 0 ? (
|
|
<Empty description={t('copyTradingList.noData') || '暂无跟单配置'} />
|
|
) : (
|
|
<List
|
|
dataSource={copyTradings}
|
|
renderItem={(record) => {
|
|
const stats = statisticsMap[record.id]
|
|
|
|
return (
|
|
<Card
|
|
key={record.id}
|
|
style={{
|
|
marginBottom: '10px',
|
|
borderRadius: '10px',
|
|
boxShadow: '0 1px 3px rgba(0,0,0,0.08)',
|
|
border: '1px solid #e8e8e8',
|
|
overflow: 'hidden'
|
|
}}
|
|
bodyStyle={{ padding: '0' }}
|
|
>
|
|
{/* 头部区域 - 配置名称 */}
|
|
<div style={{
|
|
padding: '10px 12px',
|
|
background: 'var(--ant-color-primary, #1677ff)',
|
|
color: '#fff'
|
|
}}>
|
|
<div style={{ fontSize: '15px', fontWeight: '600', marginBottom: '2px', display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
|
|
<span>{record.configName || t('copyTradingList.configNameNotProvided') || '未提供'}</span>
|
|
<Switch
|
|
checked={record.enabled}
|
|
onChange={() => handleToggleStatus(record)}
|
|
checkedChildren={t('copyTradingList.enabled') || '开启'}
|
|
unCheckedChildren={t('copyTradingList.disabled') || '停止'}
|
|
size="small"
|
|
/>
|
|
</div>
|
|
<div style={{ fontSize: '12px', opacity: '0.9' }}>
|
|
{record.copyMode === 'RATIO'
|
|
? `${t('copyTradingList.ratioMode') || '比例'} ${(parseFloat(record.copyRatio || '0') * 100).toFixed(0).replace(/\.0+$/, '')}%`
|
|
: `${t('copyTradingList.fixedAmountMode') || '固定'} $${formatUSDC(record.fixedAmount || '0')}`
|
|
}
|
|
</div>
|
|
</div>
|
|
|
|
{/* 盈亏区域 - 常驻显示 */}
|
|
<div style={{
|
|
padding: '8px 12px',
|
|
backgroundColor: '#fafafa',
|
|
borderBottom: '1px solid #f0f0f0',
|
|
minHeight: '42px',
|
|
display: 'flex',
|
|
alignItems: 'center'
|
|
}}>
|
|
<div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', width: '100%' }}>
|
|
<div>
|
|
<div style={{ fontSize: '10px', color: '#8c8c8c' }}>
|
|
{t('copyTradingList.totalPnl') || '总盈亏'}
|
|
</div>
|
|
{stats ? (
|
|
<div style={{
|
|
fontSize: '14px',
|
|
fontWeight: '600',
|
|
color: getPnlColor(stats.totalPnl),
|
|
display: 'flex',
|
|
alignItems: 'center',
|
|
gap: '4px'
|
|
}}>
|
|
{getPnlIcon(stats.totalPnl)}
|
|
${formatUSDC(stats.totalPnl)}
|
|
</div>
|
|
) : loadingStatistics.has(record.id) ? (
|
|
<Spin size="small" />
|
|
) : (
|
|
<div style={{ fontSize: '14px', color: '#8c8c8c' }}>-</div>
|
|
)}
|
|
</div>
|
|
{stats && (
|
|
<div style={{ textAlign: 'right' }}>
|
|
<div style={{ fontSize: '10px', color: '#8c8c8c' }}>
|
|
{t('copyTradingList.profitRate') || '收益率'}
|
|
</div>
|
|
<div style={{
|
|
fontSize: '12px',
|
|
fontWeight: '500',
|
|
color: getPnlColor(stats.totalPnlPercent)
|
|
}}>
|
|
{formatPercent(stats.totalPnlPercent)}
|
|
</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
|
|
{/* 账户和Leader信息区域 */}
|
|
<div style={{
|
|
padding: '8px 12px',
|
|
fontSize: '11px',
|
|
color: '#8c8c8c',
|
|
borderBottom: '1px solid #f0f0f0'
|
|
}}>
|
|
<div style={{ display: 'flex', alignItems: 'center', marginBottom: '4px' }}>
|
|
<WalletOutlined style={{ fontSize: '12px', marginRight: '4px', color: '#1890ff' }} />
|
|
<span>{t('copyTradingList.wallet') || '账户'}: {record.accountName || `#${record.accountId}`}</span>
|
|
</div>
|
|
<div style={{ display: 'flex', alignItems: 'center' }}>
|
|
<UserOutlined style={{ fontSize: '12px', marginRight: '4px', color: '#722ed1' }} />
|
|
<span>Leader: {record.leaderName || `#${record.leaderId}`}</span>
|
|
</div>
|
|
</div>
|
|
|
|
{/* 图标操作栏 */}
|
|
<div style={{
|
|
padding: '8px 12px',
|
|
display: 'flex',
|
|
justifyContent: 'space-around',
|
|
alignItems: 'center'
|
|
}}>
|
|
<Tooltip title={t('common.edit') || '编辑'}>
|
|
<div
|
|
onClick={() => {
|
|
setEditModalCopyTradingId(record.id.toString())
|
|
setEditModalOpen(true)
|
|
}}
|
|
style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', cursor: 'pointer', padding: '4px 8px' }}
|
|
>
|
|
<EditOutlined style={{ fontSize: '18px', color: '#1890ff' }} />
|
|
<span style={{ fontSize: '10px', color: '#8c8c8c', marginTop: '2px' }}>{t('common.edit') || '编辑'}</span>
|
|
</div>
|
|
</Tooltip>
|
|
|
|
<Tooltip title={t('copyTradingList.statistics') || '统计'}>
|
|
<div
|
|
onClick={() => {
|
|
setStatisticsModalCopyTradingId(record.id.toString())
|
|
setStatisticsModalOpen(true)
|
|
}}
|
|
style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', cursor: 'pointer', padding: '4px 8px' }}
|
|
>
|
|
<BarChartOutlined style={{ fontSize: '18px', color: '#1890ff' }} />
|
|
<span style={{ fontSize: '10px', color: '#8c8c8c', marginTop: '2px' }}>{t('copyTradingList.statistics') || '统计'}</span>
|
|
</div>
|
|
</Tooltip>
|
|
|
|
<Tooltip title={t('copyTradingList.orders') || '订单'}>
|
|
<div
|
|
onClick={() => {
|
|
setOrdersModalCopyTradingId(record.id.toString())
|
|
setOrdersModalTab('buy')
|
|
setOrdersModalOpen(true)
|
|
}}
|
|
style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', cursor: 'pointer', padding: '4px 8px' }}
|
|
>
|
|
<UnorderedListOutlined style={{ fontSize: '18px', color: '#1890ff' }} />
|
|
<span style={{ fontSize: '10px', color: '#8c8c8c', marginTop: '2px' }}>{t('copyTradingList.orders') || '订单'}</span>
|
|
</div>
|
|
</Tooltip>
|
|
|
|
<Popconfirm
|
|
title={t('copyTradingList.deleteConfirm') || '确定要删除这个跟单关系吗？'}
|
|
onConfirm={() => handleDelete(record.id)}
|
|
okText={t('common.confirm') || '确定'}
|
|
cancelText={t('common.cancel') || '取消'}
|
|
>
|
|
<Tooltip title={t('common.delete') || '删除'}>
|
|
<div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', cursor: 'pointer', padding: '4px 8px' }}>
|
|
<DeleteOutlined style={{ fontSize: '18px', color: '#ff4d4f' }} />
|
|
<span style={{ fontSize: '10px', color: '#8c8c8c', marginTop: '2px' }}>{t('common.delete') || '删除'}</span>
|
|
</div>
|
|
</Tooltip>
|
|
</Popconfirm>
|
|
</div>
|
|
</Card>
|
|
)
|
|
}}
|
|
/>
|
|
)}
|
|
</div>
|
|
) : (
|
|
// 桌面端表格布局
|
|
<Table
|
|
columns={columns}
|
|
dataSource={copyTradings}
|
|
rowKey="id"
|
|
loading={loading}
|
|
pagination={{
|
|
pageSize: 20,
|
|
showSizeChanger: true,
|
|
showTotal: (total) => `共 ${total} 条`
|
|
}}
|
|
/>
|
|
)}
|
|
</Card>
|
|
|
|
{/* Modal 组件 */}
|
|
<CopyTradingOrdersModal
|
|
open={ordersModalOpen}
|
|
onClose={() => setOrdersModalOpen(false)}
|
|
copyTradingId={ordersModalCopyTradingId}
|
|
defaultTab={ordersModalTab}
|
|
/>
|
|
<StatisticsModal
|
|
open={statisticsModalOpen}
|
|
onClose={() => setStatisticsModalOpen(false)}
|
|
copyTradingId={statisticsModalCopyTradingId}
|
|
/>
|
|
<FilteredOrdersModal
|
|
open={filteredOrdersModalOpen}
|
|
onClose={() => setFilteredOrdersModalOpen(false)}
|
|
copyTradingId={filteredOrdersModalCopyTradingId}
|
|
/>
|
|
<EditModal
|
|
open={editModalOpen}
|
|
onClose={() => setEditModalOpen(false)}
|
|
copyTradingId={editModalCopyTradingId}
|
|
onSuccess={() => {
|
|
fetchCopyTradings()
|
|
}}
|
|
/>
|
|
<AddModal
|
|
open={addModalOpen}
|
|
onClose={() => setAddModalOpen(false)}
|
|
onSuccess={() => {
|
|
fetchCopyTradings()
|
|
}}
|
|
/>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export default CopyTradingList
|
|
|