imeeting/components/ActionHelpPanel/ActionHelpPanel.jsx

import { useState, useEffect } from 'react'
import { Drawer, Collapse, Badge, Tag, Empty } from 'antd'
import {
  QuestionCircleOutlined,
  BulbOutlined,
  WarningOutlined,
  InfoCircleOutlined,
  ThunderboltOutlined,
} from '@ant-design/icons'
import './ActionHelpPanel.css'

const { Panel } = Collapse

/**
 * 操作帮助面板组件
 * 在页面侧边显示当前操作的详细说明和帮助信息
 * @param {Object} props
 * @param {boolean} props.visible - 是否显示面板
 * @param {Function} props.onClose - 关闭回调
 * @param {Object} props.currentAction - 当前操作信息
 * @param {Array} props.allActions - 所有可用操作列表
 * @param {string} props.placement - 面板位置
 * @param {Function} props.onActionSelect - 选择操作的回调
 */
function ActionHelpPanel({
  visible = false,
  onClose,
  currentAction = null,
  allActions = [],
  placement = 'right',
  onActionSelect,
}) {
  const [activeKey, setActiveKey] = useState(['current'])

  // 当 currentAction 变化时，自动展开"当前操作"面板
  useEffect(() => {
    if (currentAction && visible) {
      setActiveKey(['current'])
    }
  }, [currentAction, visible])

  // 渲染当前操作详情
  const renderCurrentAction = () => {
    if (!currentAction) {
      return (
        <Empty
          image={Empty.PRESENTED_IMAGE_SIMPLE}
          description="将鼠标悬停在按钮上查看帮助"
          style={{ padding: '40px 0' }}
        />
      )
    }

    return (
      <div className="help-action-detail">
        {/* 操作标题 */}
        <div className="help-action-header">
          <div className="help-action-icon">{currentAction.icon}</div>
          <div className="help-action-info">
            <h3 className="help-action-title">{currentAction.title}</h3>
            {currentAction.badge && (
              <Tag color={currentAction.badge.color} className="help-action-badge">
                {currentAction.badge.text}
              </Tag>
            )}
          </div>
        </div>

        {/* 操作描述 */}
        {currentAction.description && (
          <div className="help-section">
            <div className="help-section-title">
              <InfoCircleOutlined /> 功能说明
            </div>
            <div className="help-section-content">{currentAction.description}</div>
          </div>
        )}

        {/* 使用场景 */}
        {currentAction.scenarios && currentAction.scenarios.length > 0 && (
          <div className="help-section">
            <div className="help-section-title">
              <BulbOutlined /> 使用场景
            </div>
            <ul className="help-section-list">
              {currentAction.scenarios.map((scenario, index) => (
                <li key={index}>{scenario}</li>
              ))}
            </ul>
          </div>
        )}

        {/* 操作步骤 */}
        {currentAction.steps && currentAction.steps.length > 0 && (
          <div className="help-section">
            <div className="help-section-title">
              <ThunderboltOutlined /> 操作步骤
            </div>
            <ol className="help-section-steps">
              {currentAction.steps.map((step, index) => (
                <li key={index}>{step}</li>
              ))}
            </ol>
          </div>
        )}

        {/* 注意事项 */}
        {currentAction.warnings && currentAction.warnings.length > 0 && (
          <div className="help-section help-section-warning">
            <div className="help-section-title">
              <WarningOutlined /> 注意事项
            </div>
            <ul className="help-section-list">
              {currentAction.warnings.map((warning, index) => (
                <li key={index}>{warning}</li>
              ))}
            </ul>
          </div>
        )}

        {/* 快捷键 */}
        {currentAction.shortcut && (
          <div className="help-section">
            <div className="help-section-title">⌨️ 快捷键</div>
            <div className="help-shortcut">
              <kbd>{currentAction.shortcut}</kbd>
            </div>
          </div>
        )}

        {/* 权限要求 */}
        {currentAction.permission && (
          <div className="help-section">
            <div className="help-section-title">🔐 权限要求</div>
            <div className="help-section-content">
              <Tag color="blue">{currentAction.permission}</Tag>
            </div>
          </div>
        )}
      </div>
    )
  }

  // 渲染所有操作列表
  const renderAllActions = () => {
    if (allActions.length === 0) {
      return <Empty description="暂无操作" />
    }

    return (
      <div className="help-actions-list">
        {allActions.map((action, index) => (
          <div
            key={index}
            className="help-action-item"
            onClick={() => {
              if (onActionSelect) {
                onActionSelect(action)
                setActiveKey(['current'])
              }
            }}
          >
            <div className="help-action-item-header">
              <span className="help-action-item-icon">{action.icon}</span>
              <span className="help-action-item-title">{action.title}</span>
              {action.shortcut && (
                <kbd className="help-action-item-shortcut">{action.shortcut}</kbd>
              )}
            </div>
            <div className="help-action-item-desc">{action.description}</div>
          </div>
        ))}
      </div>
    )
  }

  return (
    <Drawer
      title={
        <div className="help-panel-title">
          <QuestionCircleOutlined style={{ marginRight: 8 }} />
          操作帮助
          {currentAction && <Badge status="processing" text="实时帮助" />}
        </div>
      }
      placement={placement}
      width={420}
      open={visible}
      onClose={onClose}
      className="action-help-panel"
    >
      <Collapse
        activeKey={activeKey}
        onChange={setActiveKey}
        ghost
        expandIconPosition="end"
      >
        <Panel
          header={
            <div className="help-panel-header">
              <span className="help-panel-header-text">当前操作</span>
              {currentAction && (
                <Badge
                  count="实时"
                  style={{
                    backgroundColor: '#52c41a',
                    fontSize: 10,
                    height: 18,
                    lineHeight: '18px',
                  }}
                />
              )}
            </div>
          }
          key="current"
        >
          {renderCurrentAction()}
        </Panel>

        <Panel header="所有可用操作" key="all">
          {renderAllActions()}
        </Panel>
      </Collapse>
    </Drawer>
  )
}

export default ActionHelpPanel