imeeting/components/ButtonWithGuide/ButtonWithGuide.jsx

import { useState } from 'react'
import { Button, Modal, Steps, Tag } from 'antd'
import {
  QuestionCircleOutlined,
  BulbOutlined,
  WarningOutlined,
  CheckCircleOutlined,
  InfoCircleOutlined,
} from '@ant-design/icons'
import './ButtonWithGuide.css'

/**
 * 带引导的按钮组件 - 简洁现代设计
 * 在按钮旁边显示一个简洁的帮助图标，点击后显示详细引导
 */
function ButtonWithGuide({
  label,
  icon,
  type = 'default',
  danger = false,
  disabled = false,
  onClick,
  guide,
  size = 'middle',
  ...restProps
}) {
  const [showGuideModal, setShowGuideModal] = useState(false)

  const handleGuideClick = (e) => {
    e.stopPropagation()
    if (guide) {
      setShowGuideModal(true)
    }
  }

  return (
    <>
      <div className="button-with-guide">
        <Button
          type={type}
          icon={icon}
          danger={danger}
          disabled={disabled}
          onClick={onClick}
          size={size}
          {...restProps}
        >
          {label}
        </Button>
        {guide && !disabled && (
          <button className="guide-icon-btn" onClick={handleGuideClick} title="查看帮助">
            <QuestionCircleOutlined />
          </button>
        )}
      </div>

      {/* 引导弹窗 */}
      {guide && (
        <Modal
          title={
            <div className="guide-modal-header">
              <span className="guide-modal-icon">{guide.icon || icon}</span>
              <span className="guide-modal-title">{guide.title}</span>
              {guide.badge && (
                <Tag color={guide.badge.color} className="guide-modal-badge">
                  {guide.badge.text}
                </Tag>
              )}
            </div>
          }
          open={showGuideModal}
          onCancel={() => setShowGuideModal(false)}
          footer={[
            <Button key="close" type="primary" onClick={() => setShowGuideModal(false)}>
              知道了
            </Button>,
          ]}
          width={600}
          className="button-guide-modal"
        >
          {/* 功能描述 */}
          {guide.description && (
            <div className="guide-section">
              <div className="guide-section-title">
                <InfoCircleOutlined className="guide-section-icon" />
                功能说明
              </div>
              <p className="guide-section-content">{guide.description}</p>
            </div>
          )}

          {/* 使用步骤 */}
          {guide.steps && guide.steps.length > 0 && (
            <div className="guide-section">
              <div className="guide-section-title">
                <CheckCircleOutlined className="guide-section-icon" />
                操作步骤
              </div>
              <Steps
                direction="vertical"
                current={-1}
                items={guide.steps.map((step, index) => ({
                  title: `步骤 ${index + 1}`,
                  description: step,
                  status: 'wait',
                }))}
                className="guide-steps"
              />
            </div>
          )}

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

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

          {/* 快捷键和权限 */}
          {(guide.shortcut || guide.permission) && (
            <div className="guide-footer">
              {guide.shortcut && (
                <div className="guide-footer-item">
                  <span className="guide-footer-label">快捷键：</span>
                  <kbd className="guide-footer-kbd">{guide.shortcut}</kbd>
                </div>
              )}
              {guide.permission && (
                <div className="guide-footer-item">
                  <span className="guide-footer-label">权限要求：</span>
                  <Tag color="blue">{guide.permission}</Tag>
                </div>
              )}
            </div>
          )}
        </Modal>
      )}
    </>
  )
}

export default ButtonWithGuide