106 lines
2.9 KiB
React
106 lines
2.9 KiB
React
|
import { Button, Tooltip } from 'antd'
|
|||
|
|
import { QuestionCircleOutlined } from '@ant-design/icons'
|
|||
|
|
import './ButtonWithTip.css'
|
|||
|
|
|
|||
|
|
/**
|
|||
|
|
* 带有增强提示的按钮组件
|
|||
|
|
* @param {Object} props
|
|||
|
|
* @param {string} props.label - 按钮文本
|
|||
|
|
* @param {ReactNode} props.icon - 按钮图标
|
|||
|
|
* @param {string} props.type - 按钮类型
|
|||
|
|
* @param {boolean} props.danger - 危险按钮
|
|||
|
|
* @param {boolean} props.disabled - 禁用状态
|
|||
|
|
* @param {Function} props.onClick - 点击回调
|
|||
|
|
* @param {Object} props.tip - 提示配置
|
|||
|
|
* @param {string} props.tip.title - 提示标题
|
|||
|
|
* @param {string} props.tip.description - 详细描述
|
|||
|
|
* @param {string} props.tip.shortcut - 快捷键提示
|
|||
|
|
* @param {Array} props.tip.notes - 注意事项列表
|
|||
|
|
* @param {string} props.tip.placement - 提示位置
|
|||
|
|
* @param {boolean} props.showTipIcon - 是否显示提示图标
|
|||
|
|
* @param {string} props.size - 按钮大小
|
|||
|
|
*/
|
|||
|
|
function ButtonWithTip({
|
|||
|
|
label,
|
|||
|
|
icon,
|
|||
|
|
type = 'default',
|
|||
|
|
danger = false,
|
|||
|
|
disabled = false,
|
|||
|
|
onClick,
|
|||
|
|
tip,
|
|||
|
|
showTipIcon = true,
|
|||
|
|
size = 'middle',
|
|||
|
|
...restProps
|
|||
|
|
}) {
|
|||
|
|
// 如果没有提示配置，直接返回普通按钮
|
|||
|
|
if (!tip) {
|
|||
|
|
return (
|
|||
|
|
<Button
|
|||
|
|
type={type}
|
|||
|
|
icon={icon}
|
|||
|
|
danger={danger}
|
|||
|
|
disabled={disabled}
|
|||
|
|
onClick={onClick}
|
|||
|
|
size={size}
|
|||
|
|
{...restProps}
|
|||
|
|
>
|
|||
|
|
{label}
|
|||
|
|
</Button>
|
|||
|
|
)
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 构建提示内容
|
|||
|
|
const tooltipContent = (
|
|||
|
|
<div className="button-tip-content">
|
|||
|
|
{tip.title && <div className="button-tip-title">{tip.title}</div>}
|
|||
|
|
{tip.description && <div className="button-tip-description">{tip.description}</div>}
|
|||
|
|
{tip.shortcut && (
|
|||
|
|
<div className="button-tip-shortcut">
|
|||
|
|
<span className="tip-label">快捷键：</span>
|
|||
|
|
<kbd className="tip-kbd">{tip.shortcut}</kbd>
|
|||
|
|
</div>
|
|||
|
|
)}
|
|||
|
|
{tip.notes && tip.notes.length > 0 && (
|
|||
|
|
<div className="button-tip-notes">
|
|||
|
|
<div className="tip-notes-title">注意事项：</div>
|
|||
|
|
<ul className="tip-notes-list">
|
|||
|
|
{tip.notes.map((note, index) => (
|
|||
|
|
<li key={index}>{note}</li>
|
|||
|
|
))}
|
|||
|
|
</ul>
|
|||
|
|
</div>
|
|||
|
|
)}
|
|||
|
|
</div>
|
|||
|
|
)
|
|||
|
|
|
|||
|
|
return (
|
|||
|
|
<Tooltip
|
|||
|
|
title={tooltipContent}
|
|||
|
|
placement={tip.placement || 'top'}
|
|||
|
|
classNames={{ root: 'button-tip-overlay' }}
|
|||
|
|
mouseEnterDelay={0.3}
|
|||
|
|
arrow={{ pointAtCenter: true }}
|
|||
|
|
>
|
|||
|
|
<div className="button-with-tip-wrapper">
|
|||
|
|
<Button
|
|||
|
|
type={type}
|
|||
|
|
icon={icon}
|
|||
|
|
danger={danger}
|
|||
|
|
disabled={disabled}
|
|||
|
|
onClick={onClick}
|
|||
|
|
size={size}
|
|||
|
|
className="button-with-tip"
|
|||
|
|
{...restProps}
|
|||
|
|
>
|
|||
|
|
{label}
|
|||
|
|
</Button>
|
|||
|
|
{showTipIcon && !disabled && (
|
|||
|
|
<QuestionCircleOutlined className="button-tip-indicator" />
|
|||
|
|
)}
|
|||
|
|
</div>
|
|||
|
|
</Tooltip>
|
|||
|
|
)
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
export default ButtonWithTip
|