feat: 智能封面调用后端生成 + 删除封面说明文字 (#1271, #1272)

- useStep6Cover 新增 generateAutoCover 方法
- Step6CoverSettings auto 模式自动触发 POST /generate-cover
- 预览区优先显示 thumbnail_url
- autoTriggeredRef 在素材变更时正确重置
- buildPayload.ts 空值兜底
- 删除封面说明文字(#1272)
- can_generate 使用 any() 优化
- 清理测试残留代码

apps/web/src/pages/generate/components/GenerateStepContent.tsx

@@ -172,6 +172,8 @@ export const GenerateStepContent: React.FC<GenerateStepContentProps> = (props) =
           coverSettings={coverSettings}
           onCoverSettingsChange={onCoverSettingsChange}
           duration={duration}
+          assetIds={materialMode === "auto" ? smartSelectedIds : selectedMaterials}
+          selectedTemplate={selectedTemplate}
         />
       )
     case 7:

apps/web/src/pages/generate/components/Step6CoverSettings.tsx

@@ -1,4 +1,4 @@
-import React from "react"
+import React, { useEffect, useRef } from "react"
 import type { CoverConfig } from "../../editing-planner/types"
 import { useStep6Cover } from "../hooks/useStep6Cover"
 import { CoverModeSelector } from "./cover-settings/CoverModeSelector"
@@ -9,6 +9,10 @@ interface Step6CoverSettingsProps {
   coverSettings: CoverConfig
   onCoverSettingsChange: (settings: CoverConfig) => void
   duration: number
+  /** 当前素材 ID 列表，用于智能封面生成 */
+  assetIds?: string[]
+  /** 当前选中的模板 ID */
+  selectedTemplate?: string
 }
 
 const Step6CoverSettings: React.FC<Step6CoverSettingsProps> = (props) => {
@@ -19,10 +23,47 @@ const Step6CoverSettings: React.FC<Step6CoverSettingsProps> = (props) => {
     setMode,
     setFrameTime,
     handleUpload,
+    generateAutoCover,
     totalDuration,
     COVER_MODE_LABELS,
     COVER_MODE_ICONS,
-  } = useStep6Cover(props)
+  } = useStep6Cover({
+    coverSettings: props.coverSettings,
+    onCoverSettingsChange: props.onCoverSettingsChange,
+    duration: props.duration,
+    assetIds: props.assetIds,
+    selectedTemplate: props.selectedTemplate,
+  })
+
+  // 进入 auto 模式时自动触发智能封面生成
+  const autoTriggeredRef = useRef(false)
+  useEffect(() => {
+    // 切换模式、禁用封面或素材变更时重置触发标记
+    if (coverSettings.mode !== "auto" || !coverSettings.enabled) {
+      autoTriggeredRef.current = false
+      return
+    }
+    // 有素材且未生成过封面时自动触发
+    if (
+      coverSettings.mode === "auto" &&
+      !coverSettings.thumbnail_url &&
+      !autoTriggeredRef.current &&
+      props.assetIds &&
+      props.assetIds.length > 0
+    ) {
+      autoTriggeredRef.current = true
+      generateAutoCover()
+    }
+  }, [
+    coverSettings.enabled,
+    coverSettings.mode,
+    coverSettings.thumbnail_url,
+    generateAutoCover,
+    props.assetIds,
+  ])
+
+  // 预览图：优先 thumbnail_url，其次 upload_url
+  const previewUrl = coverSettings.thumbnail_url || coverSettings.upload_url
 
   return (
     <div className="xx-form-section">
@@ -52,9 +93,6 @@ const Step6CoverSettings: React.FC<Step6CoverSettingsProps> = (props) => {
 
           {coverSettings.mode === "auto" && (
             <div className="xx-cover-auto">
-              <div className="xx-cover-auto-desc">
-                AI 将分析视频内容，自动选择最具吸引力的画面作为封面。
-              </div>
               <div className="xx-cover-auto-badge">
                 <span style={{ fontSize: 24 }}>🤖</span>
                 <span>AI 智能选帧</span>
@@ -77,14 +115,14 @@ const Step6CoverSettings: React.FC<Step6CoverSettingsProps> = (props) => {
 
           <div className="xx-section-title">封面预览</div>
           <div className="xx-cover-preview-box">
-            {coverSettings.upload_url ? (
-              <img src={coverSettings.upload_url} alt="封面预览" className="xx-cover-preview-img" />
+            {previewUrl ? (
+              <img src={previewUrl} alt="封面预览" className="xx-cover-preview-img" />
             ) : (
               <div className="xx-cover-preview-placeholder">
                 <span style={{ fontSize: 28 }}>🖼️</span>
                 <span>
                   {coverSettings.mode === "auto"
-                    ? "AI 智能选择"
+                    ? "AI 正在选择..."
                     : coverSettings.mode === "frame"
                       ? `帧 ${formatTime(coverSettings.frame_time)}`
                       : "未上传封面"}

apps/web/src/pages/generate/hooks/useStep6Cover.ts

@@ -2,21 +2,30 @@
  * Step 6 封面设置 Hook
  * 封装封面设置的交互逻辑
  */
-import { useCallback } from "react"
+import { useCallback, useRef } from "react"
 import type { CoverConfig } from "../../editing-planner/types"
 import { COVER_MODE_LABELS, COVER_MODE_ICONS, DEFAULT_COVER_SETTINGS } from "../constants"
+import { generateCover } from "@/api/template-editor"
 
 interface UseStep6CoverProps {
   coverSettings: CoverConfig
   onCoverSettingsChange: (settings: CoverConfig) => void
   duration: number
+  /** 当前素材 ID 列表，用于智能封面生成 */
+  assetIds?: string[]
+  /** 当前选中的模板 ID */
+  selectedTemplate?: string
 }
 
 export function useStep6Cover({
   coverSettings,
   onCoverSettingsChange,
   duration,
+  assetIds = [],
+  selectedTemplate = "",
 }: UseStep6CoverProps) {
+  const generatingRef = useRef(false)
+
   const formatTime = useCallback((seconds: number) => {
     const m = Math.floor(seconds / 60)
     const s = Math.floor(seconds % 60)
@@ -62,6 +71,30 @@ export function useStep6Cover({
     [coverSettings, onCoverSettingsChange],
   )
 
+  /** 调用后端智能封面 API，生成封面并更新预览 */
+  const generateAutoCover = useCallback(async () => {
+    if (!selectedTemplate || assetIds.length === 0 || generatingRef.current) return
+    generatingRef.current = true
+    try {
+      const response = await generateCover(selectedTemplate, {
+        asset_ids: assetIds,
+        cover_type: "ai_frame",
+      })
+      const thumbnailUrl = response.cover?.thumbnail_url || ""
+      if (thumbnailUrl) {
+        onCoverSettingsChange({
+          ...coverSettings,
+          thumbnail_url: thumbnailUrl,
+          ai_suggested_time: response.cover?.frame_time ?? null,
+        })
+      }
+    } catch (err) {
+      console.warn("[Step6] 智能封面生成失败:", err)
+    } finally {
+      generatingRef.current = false
+    }
+  }, [selectedTemplate, assetIds, coverSettings, onCoverSettingsChange])
+
   const totalDuration = duration || 30
 
   return {
@@ -71,6 +104,7 @@ export function useStep6Cover({
     setMode,
     setFrameTime,
     handleUpload,
+    generateAutoCover,
     totalDuration,
     COVER_MODE_LABELS,
     COVER_MODE_ICONS,