xiaoxia-saas/apps/web/src/pages/generate/components/GenerateStepsBar.tsx

/**
 * 智能剪辑步骤条组件
 */
import React from "react"
import { STEPS } from "../constants"

interface GenerateStepsBarProps {
  /** 当前步骤（1-based） */
  currentStep: number
  /** 点击已完成步骤的回调（用于回退） */
  onStepClick?: (step: number) => void
}

const GenerateStepsBar: React.FC<GenerateStepsBarProps> = ({ currentStep, onStepClick }) => {
  return (
    <div className="xx-steps-bar">
      {STEPS.map((step, idx) => {
        const isActive = currentStep === step.key
        const isDone = currentStep > step.key
        const cls = ["xx-step-item", isActive ? "active" : "", isDone ? "done" : ""]
          .filter(Boolean)
          .join(" ")
        return (
          <React.Fragment key={step.key}>
            {idx > 0 && <span className="xx-step-arrow">→</span>}
            <div
              className={cls}
              onClick={() => {
                // 允许点击已完成的步骤回退
                if (isDone && onStepClick) {
                  onStepClick(step.key)
                }
              }}
              role="button"
              tabIndex={0}
            >
              <div className="xx-step-num">{isDone ? "✓" : step.key}</div>
              <span className="xx-step-label">{step.label}</span>
            </div>
          </React.Fragment>
        )
      })}
    </div>
  )
}

export default GenerateStepsBar