refactor: 优化匹配关系列表的订单ID显示
- 将'卖出订单ID'和'买入订单ID'两列合并为一列'订单ID' - 第一行显示买入订单ID，第二行显示卖出订单ID - 添加'买入'和'卖出'标签区分两种订单ID - 保持复制按钮功能 - 优化移动端和桌面端的显示效果 - 桌面端列宽从120+180调整为150+200以容纳更多内容
This commit is contained in:
WrBug
@@ -132,59 +132,60 @@ const MatchedOrdersTab: React.FC<MatchedOrdersTabProps> = ({ copyTradingId, acti
|
||||
}
|
||||
},
|
||||
{
|
||||
title: t('copyTradingOrders.sellOrderId') || '卖出订单ID',
|
||||
dataIndex: 'sellOrderId',
|
||||
key: 'sellOrderId',
|
||||
width: isMobile ? 120 : 180,
|
||||
render: (text: string) => {
|
||||
const isAuto = isAutoGeneratedOrderId(text)
|
||||
title: t('copyTradingOrders.orderId') || '订单ID',
|
||||
dataIndex: 'orderId',
|
||||
key: 'orderId',
|
||||
width: isMobile ? 150 : 200,
|
||||
render: (_: any, record: MatchedOrderInfo) => {
|
||||
const buyOrderId = record.buyOrderId
|
||||
const sellOrderId = record.sellOrderId
|
||||
const isBuyAuto = isAutoGeneratedOrderId(buyOrderId)
|
||||
const isSellAuto = isAutoGeneratedOrderId(sellOrderId)
|
||||
|
||||
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.buyOrderId') || '买入订单ID',
|
||||
dataIndex: 'buyOrderId',
|
||||
key: 'buyOrderId',
|
||||
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>
|
||||
<div style={{ display: 'flex', alignItems: 'center', gap: '8px', marginBottom: '4px' }}>
|
||||
<span style={{ fontSize: isMobile ? 11 : 12, color: '#999' }}>
|
||||
{t('copyTradingOrders.buy') || '买入'}:
|
||||
</span>
|
||||
<span style={{ fontFamily: 'monospace', fontSize: isMobile ? 11 : 12 }}>
|
||||
{isMobile
|
||||
? `${buyOrderId.slice(0, 6)}...${buyOrderId.slice(-4)}`
|
||||
: `${buyOrderId.slice(0, 8)}...${buyOrderId.slice(-6)}`
|
||||
}
|
||||
</span>
|
||||
{!isBuyAuto && (
|
||||
<Button
|
||||
type="text"
|
||||
size="small"
|
||||
icon={<CopyOutlined />}
|
||||
onClick={() => handleCopyOrderId(buyOrderId)}
|
||||
style={{ padding: 0, height: 'auto', fontSize: isMobile ? 11 : 12 }}
|
||||
title={t('common.copy') || '复制'}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
<div style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
|
||||
<span style={{ fontSize: isMobile ? 11 : 12, color: '#999' }}>
|
||||
{t('copyTradingOrders.sell') || '卖出'}:
|
||||
</span>
|
||||
<span style={{ fontFamily: 'monospace', fontSize: isMobile ? 11 : 12 }}>
|
||||
{isMobile
|
||||
? `${sellOrderId.slice(0, 6)}...${sellOrderId.slice(-4)}`
|
||||
: `${sellOrderId.slice(0, 8)}...${sellOrderId.slice(-6)}`
|
||||
}
|
||||
</span>
|
||||
{!isSellAuto && (
|
||||
<Button
|
||||
type="text"
|
||||
size="small"
|
||||
icon={<CopyOutlined />}
|
||||
onClick={() => handleCopyOrderId(sellOrderId)}
|
||||
style={{ padding: 0, height: 'auto', fontSize: isMobile ? 11 : 12 }}
|
||||
title={t('common.copy') || '复制'}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -347,50 +348,42 @@ const MatchedOrdersTab: React.FC<MatchedOrdersTabProps> = ({ copyTradingId, acti
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
<div style={{ fontSize: '12px', color: '#666', marginBottom: '4px' }}>{t('copyTradingOrders.sellOrderId') || '卖出订单ID'}</div>
|
||||
<div style={{
|
||||
fontSize: '13px',
|
||||
fontWeight: '500',
|
||||
fontFamily: 'monospace',
|
||||
marginBottom: '8px',
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
gap: '8px'
|
||||
}}>
|
||||
<span>{order.sellOrderId.slice(0, 8)}...{order.sellOrderId.slice(-6)}</span>
|
||||
{!isAutoGeneratedOrderId(order.sellOrderId) && (
|
||||
<Button
|
||||
type="text"
|
||||
size="small"
|
||||
icon={<CopyOutlined />}
|
||||
onClick={() => handleCopyOrderId(order.sellOrderId)}
|
||||
style={{ padding: 0, height: 'auto', fontSize: '12px' }}
|
||||
title={t('common.copy') || '复制'}
|
||||
/>
|
||||
)}
|
||||
<div style={{ fontSize: '12px', color: '#666', marginBottom: '4px' }}>{t('copyTradingOrders.orderId') || '订单ID'}</div>
|
||||
<div style={{ marginBottom: '8px' }}>
|
||||
<div style={{ marginBottom: '4px' }}>
|
||||
<div style={{ fontSize: '11px', color: '#999', marginBottom: '2px' }}>{t('copyTradingOrders.buy') || '买入'}:</div>
|
||||
<div style={{ fontSize: '13px', fontWeight: '500', fontFamily: 'monospace', display: 'flex', alignItems: 'center', gap: '8px' }}>
|
||||
<span>{order.buyOrderId.slice(0, 8)}...{order.buyOrderId.slice(-6)}</span>
|
||||
{!isAutoGeneratedOrderId(order.buyOrderId) && (
|
||||
<Button
|
||||
type="text"
|
||||
size="small"
|
||||
icon={<CopyOutlined />}
|
||||
onClick={() => handleCopyOrderId(order.buyOrderId)}
|
||||
style={{ padding: 0, height: 'auto', fontSize: '12px' }}
|
||||
title={t('common.copy') || '复制'}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
<div style={{ fontSize: '12px', color: '#666', marginBottom: '4px' }}>{t('copyTradingOrders.buyOrderId') || '买入订单ID'}</div>
|
||||
<div style={{
|
||||
fontSize: '13px',
|
||||
fontWeight: '500',
|
||||
fontFamily: 'monospace',
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
gap: '8px'
|
||||
}}>
|
||||
<span>{order.buyOrderId.slice(0, 8)}...{order.buyOrderId.slice(-6)}</span>
|
||||
{!isAutoGeneratedOrderId(order.buyOrderId) && (
|
||||
<Button
|
||||
type="text"
|
||||
size="small"
|
||||
icon={<CopyOutlined />}
|
||||
onClick={() => handleCopyOrderId(order.buyOrderId)}
|
||||
style={{ padding: 0, height: 'auto', fontSize: '12px' }}
|
||||
title={t('common.copy') || '复制'}
|
||||
/>
|
||||
)}
|
||||
<div>
|
||||
<div style={{ fontSize: '11px', color: '#999', marginBottom: '2px' }}>{t('copyTradingOrders.sell') || '卖出'}:</div>
|
||||
<div style={{ fontSize: '13px', fontWeight: '500', fontFamily: 'monospace', display: 'flex', alignItems: 'center', gap: '8px' }}>
|
||||
<span>{order.sellOrderId.slice(0, 8)}...{order.sellOrderId.slice(-6)}</span>
|
||||
{!isAutoGeneratedOrderId(order.sellOrderId) && (
|
||||
<Button
|
||||
type="text"
|
||||
size="small"
|
||||
icon={<CopyOutlined />}
|
||||
onClick={() => handleCopyOrderId(order.sellOrderId)}
|
||||
style={{ padding: 0, height: 'auto', fontSize: '12px' }}
|
||||
title={t('common.copy') || '复制'}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<Divider style={{ margin: '12px 0' }} />
|
||||
|
||||
|
||||
Reference in New Issue
Block a user