style(copy-trading): 跟单列表操作列改为图标按钮样式
- 操作列编辑、统计等改为 Tooltip+图标点击,与策略列表风格统一 - 操作列宽度 200 -> 160 Made-with: Cursor
This commit is contained in:
@@ -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>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user