feat:备注图标支持悬浮预览备注内容

This commit is contained in:
2026-11-08 15:09:23 +08:00
parent 46ac332502
commit 1dba8e4c2e
@@ -1,5 +1,5 @@
import { useState } from 'react'
import { Button, Divider, Input, Popover, Space, Tag, Typography } from 'antd'
import { Button, Divider, Input, Popover, Space, Tag, Tooltip, Typography } from 'antd'
import {
CheckOutlined,
CloseCircleOutlined,
@@ -186,14 +186,28 @@ export function TokenRemarkCell({
}}
placement="bottomLeft"
>
<Button
size="small"
type={hasRemark ? 'primary' : 'text'}
danger={hasRemark && Boolean(isAbnormalOrReported)}
icon={hasRemark ? <MessageOutlined /> : <EditOutlined />}
title={hasRemark ? `备注:${record.remark}(点击修改)` : '添加备注'}
style={{ width: 26, height: 26, padding: 0, fontSize: 12 }}
/>
<span style={{ display: 'inline-flex' }}>
<Tooltip
title={
hasRemark ? (
<div style={{ maxWidth: 280, whiteSpace: 'pre-wrap', wordBreak: 'break-word' }}>
{record.remark}
<div style={{ marginTop: 4, fontSize: 11, opacity: 0.75 }}>点击修改</div>
</div>
) : (
'添加备注'
)
}
>
<Button
size="small"
type={hasRemark ? 'primary' : 'text'}
danger={hasRemark && Boolean(isAbnormalOrReported)}
icon={hasRemark ? <MessageOutlined /> : <EditOutlined />}
style={{ width: 26, height: 26, padding: 0, fontSize: 12 }}
/>
</Tooltip>
</span>
</Popover>
)
}