feat(generate): 图片持久化到本地 generation/ 目录，前端对接真实 API

后端: - POST /api/v1/generate 接收 projectId，生成 taskId，将图片保存至 generation/{projectId}/{taskId}/ - 新增 GET /api/v1/tasks/:taskId 和 GET /api/v1/tasks/:taskId/assets 查询端点 - 添加 /generation 静态文件服务，前端可通过 URL 直接访问生成的图片 - PipelineInput 增加 ProjectID/TaskID 字段前端: - generate.ts 对接真实后端 API，移除 mock 模式 - 401 时不再强制登出跳转，改为抛错由调用方处理 - GeneratePage 加载工程风格，传递 projectId 和完整参数 - generation store 简化为同步 API 模式，移除 WebSocket mock - ResultPage 使用 getTask/getAssets 按 taskId 查询结果
2026-05-25 12:27:07 +08:00
parent 6bda5a1f35
commit 74c1725473
13 changed files with 297 additions and 114 deletions
@@ -41,10 +41,6 @@ async function request<T>(url: string, options: RequestInit = {}): Promise<T> {
  const json: ApiResponse<T> = await res.json()

  if (json.code !== 0) {
-    if (json.code === 401) {
-      clearToken()
-      window.location.href = '/login'
-    }
    throw new ApiError(json.code, json.message)
  }

@@ -1,23 +1,42 @@
-import type { Asset, Task } from './types'
-import { mockGetAssets, mockGetTask, mockSubmitGenerate } from './mock'
-
-const USE_MOCK = true
+import { post, get } from './client'
+import type {
+  Asset,
+  AssetsResponse,
+  GenerateRequest,
+  GenerateResponse,
+  Task,
+} from './types'

 export async function submitGenerate(
-  projectId: string,
-  prompt: string,
-  assetType: string
-): Promise<string> {
-  if (USE_MOCK) return mockSubmitGenerate(projectId, prompt, assetType)
-  throw new Error('Not implemented')
+  req: GenerateRequest,
+): Promise<GenerateResponse> {
+  return post<GenerateResponse>('/api/v1/generate', req)
 }

 export async function getTask(taskId: string): Promise<Task> {
-  if (USE_MOCK) return mockGetTask(taskId)
-  throw new Error('Not implemented')
+  return get<Task>(`/api/v1/tasks/${taskId}`)
 }

 export async function getAssets(taskId: string): Promise<Asset[]> {
-  if (USE_MOCK) return mockGetAssets(taskId)
-  throw new Error('Not implemented')
+  const resp = await get<AssetsResponse>(`/api/v1/tasks/${taskId}/assets`)
+  return toAssetList(resp)
+}
+
+/** 将响应转为 Asset[] 供前端组件使用 */
+function toAssetList(
+  resp: AssetsResponse | GenerateResponse,
+): Asset[] {
+  return resp.assets.map((a, i) => ({
+    id: `asset-${i}`,
+    url: a.url,
+    format: a.format,
+    width: resp.metadata.frameWidth,
+    height: resp.metadata.frameHeight,
+    metadata: {
+      frameWidth: resp.metadata.frameWidth,
+      frameHeight: resp.metadata.frameHeight,
+      frameCount: resp.metadata.frameCount,
+      directions: resp.metadata.directions,
+    },
+  }))
 }
@@ -91,16 +91,47 @@ export interface Asset {
  }
 }

-// 生成请求
+// 生成请求 — 对应 POST /api/v1/generate
 export interface GenerateRequest {
  projectId: string
-  prompt: string
+  prompt?: string
  assetType: AssetType
+  tags?: string[]
+  userNote?: string
+  projectStyle?: Record<string, string>
  taskStyle?: Record<string, string>
-  params?: {
-    resolution?: number
-    frames?: { directions?: number; framesPerDirection?: number }
-    format?: 'spritesheet' | 'individual'
+  resolution?: number
+  directions?: number
+  framesPerDir?: number
+  format?: 'spritesheet' | 'individual'
+}
+
+// 生成响应 — 对应 POST /api/v1/generate 返回
+export interface GenerateResponse {
+  taskId: string
+  assets: {
+    url: string
+    format: string
+  }[]
+  metadata: {
+    frameWidth: number
+    frameHeight: number
+    frameCount: number
+    directions: number
+  }
+}
+
+// 素材列表响应 — 对应 GET /api/v1/tasks/:taskId/assets
+export interface AssetsResponse {
+  assets: {
+    url: string
+    format: string
+  }[]
+  metadata: {
+    frameWidth: number
+    frameHeight: number
+    frameCount: number
+    directions: number
  }
 }

@@ -5,11 +5,8 @@ export function useGenerate() {
  return {
    submit: store.submit,
    taskId: store.taskId,
-    stage: store.stage,
    progress: store.progress,
    status: store.status,
-    retryCount: store.retryCount,
-    rejectReason: store.rejectReason,
    assets: store.assets,
    error: store.error,
    reset: store.reset,
@@ -1,27 +1,35 @@
 import { useEffect } from 'react'
 import { useNavigate, useParams } from 'react-router-dom'
 import { useTaskStore } from '../stores/task'
+import { useProjectStore } from '../stores/project'
 import { useGenerationStore } from '../stores/generation'
 import { useToastStore } from '../stores/toast'
+import { extractTags } from '../api/prompt'
+import { mergeStyles } from '../utils/style'
+import type { GenerateRequest } from '../api/types'
 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 addToast = useToastStore(s => s.addToast)
+
+  const taskStore = useTaskStore()
+  const { style: projectStyle, loadProject } = useProjectStore()
  const {
    status,
-    stage,
    progress,
-    retryCount,
-    rejectReason,
    taskId,
    submit,
    reset: resetGeneration,
  } = useGenerationStore()

+  // 加载工程风格
+  useEffect(() => {
+    loadProject(projectId)
+  }, [projectId, loadProject])
+
  // 组件卸载时重置生成状态
  useEffect(() => {
    return () => resetGeneration()
@@ -30,48 +38,57 @@ export default function GeneratePage() {
  // 失败时显示 toast
  useEffect(() => {
    if (status === 'failed') {
-      addToast({ type: 'error', message: '素材生成失败，请重试' })
+      const errText = useGenerationStore.getState().error || '未知错误'
+      addToast({ type: 'error', message: `素材生成失败：${errText}` })
    }
  }, [status, addToast])

-  // 完成后自动跳转
-  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 { taskStyle, params, enableAI, optimizedPrompt } = taskStore
+    const mergedStyle = mergeStyles(projectStyle, taskStyle)
+    const tags = extractTags(mergedStyle)
+
+    const req: GenerateRequest = {
+      projectId,
+      prompt: enableAI && optimizedPrompt ? optimizedPrompt : finalPrompt,
+      assetType: taskStore.assetType,
+      tags,
+      projectStyle,
+      taskStyle,
+      resolution: params.resolution,
+      directions: params.frames?.directions,
+      framesPerDir: params.frames?.framesPerDirection,
+      format: params.format,
+    }
+
+    await submit(req)
+  }
+
+  const handleViewResult = () => {
+    if (taskId) navigate(`/projects/${projectId}/tasks/${taskId}`)
  }

  const handleReset = () => {
    resetGeneration()
-    resetTask()
+    taskStore.reset()
  }

  return (
    <div className="container page-enter" 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}
+            stage={null}
            progress={progress}
            status={status}
-            retryCount={retryCount}
-            rejectReason={rejectReason}
+            retryCount={0}
+            rejectReason={null}
          />

-          {/* 状态提示 */}
          {status === 'running' && (
            <p style={{ textAlign: 'center', color: 'var(--text-secondary)' }}>
              管线执行中，请稍候...
@@ -79,14 +96,26 @@ export default function GeneratePage() {
          )}

          {status === 'completed' && (
-            <p style={{ textAlign: 'center', color: 'var(--success)' }}>
-              ✓ 生成完成，正在跳转到结果页...
-            </p>
+            <div style={{ textAlign: 'center' }}>
+              <p style={{ color: 'var(--success)', marginBottom: 16 }}>
+                生成完成
+              </p>
+              <div style={{ display: 'flex', gap: 12, justifyContent: 'center' }}>
+                <button className="btn-primary" onClick={handleViewResult}>
+                  查看结果
+                </button>
+                <button className="btn-secondary" onClick={handleReset}>
+                  继续生成
+                </button>
+              </div>
+            </div>
          )}

          {status === 'failed' && (
            <div style={{ textAlign: 'center' }}>
-              <p style={{ color: 'var(--error)', marginBottom: 16 }}>生成失败</p>
+              <p style={{ color: 'var(--error)', marginBottom: 16 }}>
+                {useGenerationStore.getState().error || '生成失败'}
+              </p>
              <button className="btn-primary" onClick={handleReset}>
                重新开始
              </button>
@@ -1,82 +1,74 @@
 import { create } from 'zustand'
-import type { Asset, PipelineProgress, PipelineStage } from '../api/types'
+import type { Asset, GenerateRequest, GenerateResponse } from '../api/types'
 import { submitGenerate } from '../api/generate'
-import { createMockWebSocket } from '../api/mock'

 type Status = 'idle' | 'submitting' | 'running' | 'completed' | 'failed'

 interface GenerationState {
  taskId: string | null
-  stage: PipelineStage | null
+  projectId: string | null
  progress: number
  status: Status
-  retryCount: number
-  rejectReason: string | null
  assets: Asset[]
  error: string | null
-  submit: (projectId: string, prompt: string, assetType: string) => Promise<void>
-  handleProgress: (msg: PipelineProgress) => void
+  submit: (req: GenerateRequest) => Promise<void>
  reset: () => void
 }

-let cleanupWs: (() => void) | null = null
-
-export const useGenerationStore = create<GenerationState>((set, get) => ({
+export const useGenerationStore = create<GenerationState>((set) => ({
  taskId: null,
-  stage: null,
+  projectId: null,
  progress: 0,
  status: 'idle',
-  retryCount: 0,
-  rejectReason: null,
  assets: [],
  error: null,

-  submit: async (projectId, prompt, assetType) => {
+  submit: async (req) => {
    set({ status: 'submitting', error: null })
    try {
-      const taskId = await submitGenerate(projectId, prompt, assetType)
-      set({ taskId, status: 'running', progress: 0 })
+      set({ status: 'running', progress: 30 })
+      const result = await submitGenerate(req)

-      // 启动 mock WebSocket
-      cleanupWs = createMockWebSocket(
-        taskId,
-        (msg) => get().handleProgress(msg),
-        (assets) => {
-          set({ status: 'completed', assets, progress: 100 })
-        },
-        (error) => {
-          set({ status: 'failed', error })
-        }
-      )
+      set({ progress: 80 })
+      const assets = mapAssets(result)
+
+      set({
+        taskId: result.taskId,
+        projectId: req.projectId,
+        status: 'completed',
+        progress: 100,
+        assets,
+      })
    } catch (err) {
-      set({ status: 'failed', error: (err as Error).message })
-    }
-  },
-
-  handleProgress: (msg) => {
-    set({
-      stage: msg.stage,
-      progress: msg.progress,
-      retryCount: msg.retryCount ?? get().retryCount,
-      rejectReason: msg.rejectReason ?? null,
-    })
-    if (msg.result?.assets) {
-      set({ assets: msg.result.assets })
+      const errMsg = (err as Error).message
+      set({ status: 'failed', error: errMsg })
    }
  },

  reset: () => {
-    cleanupWs?.()
-    cleanupWs = null
    set({
      taskId: null,
-      stage: null,
+      projectId: null,
      progress: 0,
      status: 'idle',
-      retryCount: 0,
-      rejectReason: null,
      assets: [],
      error: null,
    })
  },
 }))
+
+function mapAssets(resp: GenerateResponse): Asset[] {
+  return resp.assets.map((a, i) => ({
+    id: `asset-${i}`,
+    url: a.url,
+    format: a.format,
+    width: resp.metadata.frameWidth,
+    height: resp.metadata.frameHeight,
+    metadata: {
+      frameWidth: resp.metadata.frameWidth,
+      frameHeight: resp.metadata.frameHeight,
+      frameCount: resp.metadata.frameCount,
+      directions: resp.metadata.directions,
+    },
+  }))
+}