gen2d/frontend/src/pages/GeneratePage.tsx

import { useEffect } from 'react'
import { useNavigate, useParams } from 'react-router-dom'
import { useTaskStore } from '../stores/task'
import { useGenerationStore } from '../stores/generation'
import GenerateForm from '../components/GenerateForm'
import ProgressBar from '../components/ProgressBar'

export default function GeneratePage() {
  const { projectId = 'proj-default' } = useParams()
  const navigate = useNavigate()
  const { assetType, reset: resetTask } = useTaskStore()
  const {
    status,
    stage,
    progress,
    retryCount,
    rejectReason,
    taskId,
    submit,
    reset: resetGeneration,
  } = useGenerationStore()

  // 组件卸载时重置生成状态
  useEffect(() => {
    return () => resetGeneration()
  }, [resetGeneration])

  // 完成后自动跳转
  useEffect(() => {
    if (status === 'completed' && taskId) {
      const timer = setTimeout(() => {
        navigate(`/projects/${projectId}/tasks/${taskId}`)
      }, 1500)
      return () => clearTimeout(timer)
    }
  }, [status, taskId, projectId, navigate])

  const handleSubmit = async (finalPrompt: string) => {
    await submit(projectId, finalPrompt, assetType)
  }

  const handleReset = () => {
    resetGeneration()
    resetTask()
  }

  return (
    <div className="container" style={{ paddingTop: 24, paddingBottom: 40 }}>
      <h1 style={{ fontSize: 24, marginBottom: 32 }}>新建生成</h1>

      {/* 生成表单 */}
      {status === 'idle' || status === 'submitting' ? (
        <GenerateForm onSubmit={handleSubmit} submitting={status === 'submitting'} />
      ) : (
        <div style={{ display: 'flex', flexDirection: 'column', gap: 24 }}>
          {/* 进度条 */}
          <ProgressBar
            stage={stage}
            progress={progress}
            status={status}
            retryCount={retryCount}
            rejectReason={rejectReason}
          />

          {/* 状态提示 */}
          {status === 'running' && (
            <p style={{ textAlign: 'center', color: 'var(--text-secondary)' }}>
              管线执行中，请稍候...
            </p>
          )}

          {status === 'completed' && (
            <p style={{ textAlign: 'center', color: 'var(--success)' }}>
              ✓ 生成完成，正在跳转到结果页...
            </p>
          )}

          {status === 'failed' && (
            <div style={{ textAlign: 'center' }}>
              <p style={{ color: 'var(--error)', marginBottom: 16 }}>生成失败</p>
              <button className="btn-primary" onClick={handleReset}>
                重新开始
              </button>
            </div>
          )}
        </div>
      )}
    </div>
  )
}