91 lines
2.7 KiB
JavaScript
91 lines
2.7 KiB
JavaScript
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
|