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',
|
title: t('copyTradingOrders.orderId') || '订单ID',
|
||||||
dataIndex: 'sellOrderId',
|
dataIndex: 'orderId',
|
||||||
key: 'sellOrderId',
|
key: 'orderId',
|
||||||
width: isMobile ? 120 : 180,
|
width: isMobile ? 150 : 200,
|
||||||
render: (text: string) => {
|
render: (_: any, record: MatchedOrderInfo) => {
|
||||||
const isAuto = isAutoGeneratedOrderId(text)
|
const buyOrderId = record.buyOrderId
|
||||||
|
const sellOrderId = record.sellOrderId
|
||||||
|
const isBuyAuto = isAutoGeneratedOrderId(buyOrderId)
|
||||||
|
const isSellAuto = isAutoGeneratedOrderId(sellOrderId)
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
|
<div>
|
||||||
<span style={{ fontFamily: 'monospace', fontSize: isMobile ? 11 : 12 }}>
|
<div style={{ display: 'flex', alignItems: 'center', gap: '8px', marginBottom: '4px' }}>
|
||||||
{isMobile
|
<span style={{ fontSize: isMobile ? 11 : 12, color: '#999' }}>
|
||||||
? `${text.slice(0, 6)}...${text.slice(-4)}`
|
{t('copyTradingOrders.buy') || '买入'}:
|
||||||
: `${text.slice(0, 8)}...${text.slice(-6)}`
|
</span>
|
||||||
}
|
<span style={{ fontFamily: 'monospace', fontSize: isMobile ? 11 : 12 }}>
|
||||||
</span>
|
{isMobile
|
||||||
{!isAuto && (
|
? `${buyOrderId.slice(0, 6)}...${buyOrderId.slice(-4)}`
|
||||||
<Button
|
: `${buyOrderId.slice(0, 8)}...${buyOrderId.slice(-6)}`
|
||||||
type="text"
|
}
|
||||||
size="small"
|
</span>
|
||||||
icon={<CopyOutlined />}
|
{!isBuyAuto && (
|
||||||
onClick={() => handleCopyOrderId(text)}
|
<Button
|
||||||
style={{ padding: 0, height: 'auto', fontSize: isMobile ? 11 : 12 }}
|
type="text"
|
||||||
title={t('common.copy') || '复制'}
|
size="small"
|
||||||
/>
|
icon={<CopyOutlined />}
|
||||||
)}
|
onClick={() => handleCopyOrderId(buyOrderId)}
|
||||||
</div>
|
style={{ padding: 0, height: 'auto', fontSize: isMobile ? 11 : 12 }}
|
||||||
)
|
title={t('common.copy') || '复制'}
|
||||||
}
|
/>
|
||||||
},
|
)}
|
||||||
{
|
</div>
|
||||||
title: t('copyTradingOrders.buyOrderId') || '买入订单ID',
|
<div style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
|
||||||
dataIndex: 'buyOrderId',
|
<span style={{ fontSize: isMobile ? 11 : 12, color: '#999' }}>
|
||||||
key: 'buyOrderId',
|
{t('copyTradingOrders.sell') || '卖出'}:
|
||||||
width: isMobile ? 120 : 180,
|
</span>
|
||||||
render: (text: string) => {
|
<span style={{ fontFamily: 'monospace', fontSize: isMobile ? 11 : 12 }}>
|
||||||
const isAuto = isAutoGeneratedOrderId(text)
|
{isMobile
|
||||||
return (
|
? `${sellOrderId.slice(0, 6)}...${sellOrderId.slice(-4)}`
|
||||||
<div style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
|
: `${sellOrderId.slice(0, 8)}...${sellOrderId.slice(-6)}`
|
||||||
<span style={{ fontFamily: 'monospace', fontSize: isMobile ? 11 : 12 }}>
|
}
|
||||||
{isMobile
|
</span>
|
||||||
? `${text.slice(0, 6)}...${text.slice(-4)}`
|
{!isSellAuto && (
|
||||||
: `${text.slice(0, 8)}...${text.slice(-6)}`
|
<Button
|
||||||
}
|
type="text"
|
||||||
</span>
|
size="small"
|
||||||
{!isAuto && (
|
icon={<CopyOutlined />}
|
||||||
<Button
|
onClick={() => handleCopyOrderId(sellOrderId)}
|
||||||
type="text"
|
style={{ padding: 0, height: 'auto', fontSize: isMobile ? 11 : 12 }}
|
||||||
size="small"
|
title={t('common.copy') || '复制'}
|
||||||
icon={<CopyOutlined />}
|
/>
|
||||||
onClick={() => handleCopyOrderId(text)}
|
)}
|
||||||
style={{ padding: 0, height: 'auto', fontSize: isMobile ? 11 : 12 }}
|
</div>
|
||||||
title={t('common.copy') || '复制'}
|
|
||||||
/>
|
|
||||||
)}
|
|
||||||
</div>
|
</div>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
@@ -347,50 +348,42 @@ const MatchedOrdersTab: React.FC<MatchedOrdersTabProps> = ({ copyTradingId, acti
|
|||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
<div style={{ fontSize: '12px', color: '#666', marginBottom: '4px' }}>{t('copyTradingOrders.sellOrderId') || '卖出订单ID'}</div>
|
<div style={{ fontSize: '12px', color: '#666', marginBottom: '4px' }}>{t('copyTradingOrders.orderId') || '订单ID'}</div>
|
||||||
<div style={{
|
<div style={{ marginBottom: '8px' }}>
|
||||||
fontSize: '13px',
|
<div style={{ marginBottom: '4px' }}>
|
||||||
fontWeight: '500',
|
<div style={{ fontSize: '11px', color: '#999', marginBottom: '2px' }}>{t('copyTradingOrders.buy') || '买入'}:</div>
|
||||||
fontFamily: 'monospace',
|
<div style={{ fontSize: '13px', fontWeight: '500', fontFamily: 'monospace', display: 'flex', alignItems: 'center', gap: '8px' }}>
|
||||||
marginBottom: '8px',
|
<span>{order.buyOrderId.slice(0, 8)}...{order.buyOrderId.slice(-6)}</span>
|
||||||
display: 'flex',
|
{!isAutoGeneratedOrderId(order.buyOrderId) && (
|
||||||
alignItems: 'center',
|
<Button
|
||||||
gap: '8px'
|
type="text"
|
||||||
}}>
|
size="small"
|
||||||
<span>{order.sellOrderId.slice(0, 8)}...{order.sellOrderId.slice(-6)}</span>
|
icon={<CopyOutlined />}
|
||||||
{!isAutoGeneratedOrderId(order.sellOrderId) && (
|
onClick={() => handleCopyOrderId(order.buyOrderId)}
|
||||||
<Button
|
style={{ padding: 0, height: 'auto', fontSize: '12px' }}
|
||||||
type="text"
|
title={t('common.copy') || '复制'}
|
||||||
size="small"
|
/>
|
||||||
icon={<CopyOutlined />}
|
)}
|
||||||
onClick={() => handleCopyOrderId(order.sellOrderId)}
|
</div>
|
||||||
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>
|
||||||
<div style={{
|
<div style={{ fontSize: '11px', color: '#999', marginBottom: '2px' }}>{t('copyTradingOrders.sell') || '卖出'}:</div>
|
||||||
fontSize: '13px',
|
<div style={{ fontSize: '13px', fontWeight: '500', fontFamily: 'monospace', display: 'flex', alignItems: 'center', gap: '8px' }}>
|
||||||
fontWeight: '500',
|
<span>{order.sellOrderId.slice(0, 8)}...{order.sellOrderId.slice(-6)}</span>
|
||||||
fontFamily: 'monospace',
|
{!isAutoGeneratedOrderId(order.sellOrderId) && (
|
||||||
display: 'flex',
|
<Button
|
||||||
alignItems: 'center',
|
type="text"
|
||||||
gap: '8px'
|
size="small"
|
||||||
}}>
|
icon={<CopyOutlined />}
|
||||||
<span>{order.buyOrderId.slice(0, 8)}...{order.buyOrderId.slice(-6)}</span>
|
onClick={() => handleCopyOrderId(order.sellOrderId)}
|
||||||
{!isAutoGeneratedOrderId(order.buyOrderId) && (
|
style={{ padding: 0, height: 'auto', fontSize: '12px' }}
|
||||||
<Button
|
title={t('common.copy') || '复制'}
|
||||||
type="text"
|
/>
|
||||||
size="small"
|
)}
|
||||||
icon={<CopyOutlined />}
|
</div>
|
||||||
onClick={() => handleCopyOrderId(order.buyOrderId)}
|
|
||||||
style={{ padding: 0, height: 'auto', fontSize: '12px' }}
|
|
||||||
title={t('common.copy') || '复制'}
|
|
||||||
/>
|
|
||||||
)}
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
<Divider style={{ margin: '12px 0' }} />
|
<Divider style={{ margin: '12px 0' }} />
|
||||||
|
|
||||||
|
|||||||
Reference in New Issue
Block a user