91 lines
2.7 KiB
React
91 lines
2.7 KiB
React
|
import { Tag } from 'antd'
|
|||
|
|
import {
|
|||
|
|
InfoCircleOutlined,
|
|||
|
|
BulbOutlined,
|
|||
|
|
WarningOutlined,
|
|||
|
|
CloseOutlined,
|
|||
|
|
} from '@ant-design/icons'
|
|||
|
|
import './BottomHintBar.css'
|
|||
|
|
|
|||
|
|
/**
|
|||
|
|
* 底部固定提示栏组件
|
|||
|
|
* 在页面底部显示当前悬停按钮的实时说明
|
|||
|
|
* @param {Object} props
|
|||
|
|
* @param {boolean} props.visible - 是否显示提示栏
|
|||
|
|
* @param {Object} props.hintInfo - 当前提示信息
|
|||
|
|
* @param {Function} props.onClose - 关闭回调
|
|||
|
|
* @param {string} props.theme - 主题：light, dark, gradient
|
|||
|
|
*/
|
|||
|
|
function BottomHintBar({ visible = false, hintInfo = null, onClose, theme = 'gradient' }) {
|
|||
|
|
if (!visible || !hintInfo) return null
|
|||
|
|
|
|||
|
|
return (
|
|||
|
|
<div
|
|||
|
|
className={`bottom-hint-bar bottom-hint-bar-${theme}`}
|
|||
|
|
onMouseEnter={(e) => e.stopPropagation()}
|
|||
|
|
>
|
|||
|
|
<div className="hint-bar-container">
|
|||
|
|
{/* 左侧：图标和标题 */}
|
|||
|
|
<div className="hint-bar-left">
|
|||
|
|
<div className="hint-bar-icon">{hintInfo.icon}</div>
|
|||
|
|
<div className="hint-bar-title-section">
|
|||
|
|
<h4 className="hint-bar-title">{hintInfo.title}</h4>
|
|||
|
|
{hintInfo.badge && (
|
|||
|
|
<Tag color={hintInfo.badge.color} className="hint-bar-badge">
|
|||
|
|
{hintInfo.badge.text}
|
|||
|
|
</Tag>
|
|||
|
|
)}
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
{/* 中间：主要信息 */}
|
|||
|
|
<div className="hint-bar-center">
|
|||
|
|
{/* 描述 */}
|
|||
|
|
{hintInfo.description && (
|
|||
|
|
<div className="hint-bar-description">
|
|||
|
|
<InfoCircleOutlined className="hint-info-icon" />
|
|||
|
|
<span>{hintInfo.description}</span>
|
|||
|
|
</div>
|
|||
|
|
)}
|
|||
|
|
|
|||
|
|
{/* 快速提示 */}
|
|||
|
|
{hintInfo.quickTip && (
|
|||
|
|
<div className="hint-bar-quick-tip">
|
|||
|
|
<BulbOutlined className="hint-tip-icon" />
|
|||
|
|
<span>{hintInfo.quickTip}</span>
|
|||
|
|
</div>
|
|||
|
|
)}
|
|||
|
|
|
|||
|
|
{/* 警告 */}
|
|||
|
|
{hintInfo.warning && (
|
|||
|
|
<div className="hint-bar-warning">
|
|||
|
|
<WarningOutlined className="hint-warning-icon" />
|
|||
|
|
<span>{hintInfo.warning}</span>
|
|||
|
|
</div>
|
|||
|
|
)}
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
{/* 右侧：快捷键和关闭 */}
|
|||
|
|
<div className="hint-bar-right">
|
|||
|
|
{hintInfo.shortcut && (
|
|||
|
|
<div className="hint-bar-shortcut">
|
|||
|
|
<span className="shortcut-label">快捷键</span>
|
|||
|
|
<kbd className="shortcut-kbd">{hintInfo.shortcut}</kbd>
|
|||
|
|
</div>
|
|||
|
|
)}
|
|||
|
|
{onClose && (
|
|||
|
|
<button className="hint-bar-close" onClick={onClose}>
|
|||
|
|
<CloseOutlined />
|
|||
|
|
</button>
|
|||
|
|
)}
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
{/* 进度指示条 */}
|
|||
|
|
<div className="hint-bar-progress" />
|
|||
|
|
</div>
|
|||
|
|
)
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
export default BottomHintBar
|