style(copy-trading): 跟单列表操作列改为图标按钮样式

- 操作列编辑、统计等改为 Tooltip+图标点击,与策略列表风格统一
- 操作列宽度 200 -> 160

Made-with: Cursor
This commit is contained in:
WrBug
2026-03-02 17:40:44 +08:00
parent 46e10ebdd8
commit 97249db546
+93 -53
View File
@@ -297,7 +297,7 @@ const CopyTradingList: React.FC = () => {
{ {
title: t('common.actions') || '操作', title: t('common.actions') || '操作',
key: 'action', key: 'action',
width: isMobile ? 100 : 200, width: isMobile ? 100 : 160,
fixed: 'right' as const, fixed: 'right' as const,
render: (_: any, record: CopyTrading) => { render: (_: any, record: CopyTrading) => {
const menuItems: MenuProps['items'] = [ const menuItems: MenuProps['items'] = [
@@ -321,61 +321,101 @@ const CopyTradingList: React.FC = () => {
} }
} }
] ]
return ( return (
<Space size={isMobile ? 'small' : 'middle'} wrap> <Space size={4}>
{!isMobile && ( <Tooltip title={t('common.edit') || '编辑'}>
<> <div
<Button onClick={() => {
type="link" setEditModalCopyTradingId(record.id.toString())
size="small" setEditModalOpen(true)
icon={<EditOutlined />} }}
onClick={() => { style={{
setEditModalCopyTradingId(record.id.toString()) display: 'flex',
setEditModalOpen(true) alignItems: 'center',
}} justifyContent: 'center',
> width: '32px',
{t('common.edit') || '编辑'} height: '32px',
</Button> cursor: 'pointer',
<Button borderRadius: '6px',
type="link" transition: 'background-color 0.2s'
size="small" }}
icon={<BarChartOutlined />} onMouseEnter={(e) => { e.currentTarget.style.backgroundColor = '#f0f0f0' }}
onClick={() => { onMouseLeave={(e) => { e.currentTarget.style.backgroundColor = 'transparent' }}
setStatisticsModalCopyTradingId(record.id.toString()) >
setStatisticsModalOpen(true) <EditOutlined style={{ fontSize: '16px', color: '#1890ff' }} />
}} </div>
> </Tooltip>
{t('copyTradingList.statistics') || '统计'}
</Button> <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']}> <Dropdown menu={{ items: menuItems }} trigger={['click']}>
<Button <Tooltip title={t('copyTradingList.orders') || '订单'}>
type="link" <div
size="small" style={{
icon={<UnorderedListOutlined />} display: 'flex',
> alignItems: 'center',
{isMobile ? '' : (t('copyTradingList.orders') || '订单')} justifyContent: 'center',
</Button> width: '32px',
</Dropdown> height: '32px',
{!isMobile && ( cursor: 'pointer',
<Popconfirm borderRadius: '6px',
title={t('copyTradingList.deleteConfirm') || '确定要删除这个跟单关系吗?'} transition: 'background-color 0.2s'
onConfirm={() => handleDelete(record.id)} }}
okText={t('common.confirm') || '确定'} onMouseEnter={(e) => { e.currentTarget.style.backgroundColor = '#f0f0f0' }}
cancelText={t('common.cancel') || '取消'} onMouseLeave={(e) => { e.currentTarget.style.backgroundColor = 'transparent' }}
>
<Button
type="link"
size="small"
danger
icon={<DeleteOutlined />}
> >
{t('common.delete') || '删除'} <UnorderedListOutlined style={{ fontSize: '16px', color: '#1890ff' }} />
</Button> </div>
</Popconfirm> </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> </Space>
) )
} }