fix(cover): 模板缩略图渲染 + 自动生成封面404修复

问题1：模板卡片不显示预览图 - 之前写死渐变色+🖼️emoji，完全没用 thumbnail_url 字段 - 新增 TemplateThumb 子组件：优先渲染 tpl.thumbnail_url（object-fit:cover），图片加载失败或无URL时回退到按模板id哈希的柔和渐变色占位 - 选中态✓覆盖在图片上层问题2：自动生成封面 POST /generation/generate-cover 返回404 根因：前端用魔法字符串 "default" 作为 template_id 发给后端，但后端模板库中不存在 id="default" 的记录，resolve_draft_plan_id 返回404。修复： 1. 前端 useSharedCover：挂载时拉模板列表，把初始 "default" 占位符自动解析为第一个系统模板的真实id；用户未选模板时传空串给API层 2. 前端 api/generation/cover.ts：templateId 为空或 "default" 时不传 template_id query 参数（而非传 "default"） 3. 后端 generation_cover.py： - template_id Query 改为可选（默认空串） - 移除原来强依赖 get_draft_plan_id(auto_create_default=False) 的 Depends - 在函数体内手动 resolve：空串时 auto_create_default=True 自动兜底到用户默认模板；非空时走原校验逻辑 4. useBatchCovers：批量一键生成同样不传 "default" 5. Step6CoverSettings：透传原始 selectedTemplateId 给 useBatchCovers 6. 保留 selectedTemplateId==="default" 的UI展示分支（"默认模板"文案）用于首次挂载模板列表加载完成前的过渡态验证： - tsc --noEmit ✅ - eslint --max-warnings=0 ✅ - prettier ✅ - vite build ✅ - 后端 Python 语法检查 ✅ - 未修改 CI 配置
2026-09-26 16:12:57 +08:00
parent 8a396303b8
commit 0a6473e5d7
6 changed files with 159 additions and 75 deletions
@@ -30,7 +30,7 @@ from packages.domain.config_schemas import normalize_plan_config
 from packages.middleware.points_gate import points_gate
 from packages.shared.storage import get_shared_storage_service

-from .templates_editor.dependencies import get_draft_plan_id, get_editor_services
+from .templates_editor.dependencies import get_editor_services

 logger = logging.getLogger(__name__)
 router = APIRouter(tags=["Generation"])
@@ -349,8 +349,8 @@ def _is_trusted_media_url(url: str) -> bool:
@points_gate("ai_cover")
 def generate_cover(
    body: GenerateCoverRequest,
-    template_id: str = Query(..., description="模板 ID"),
-    plan_id: str = Depends(get_draft_plan_id),
+    template_id: str = Query("", description="模板 ID，为空时使用用户默认模板"),
+    plan_id: str = "",
    services: tuple[EditTemplateService, EditPlanService] = Depends(get_editor_services),
    db: Session = Depends(get_db_session),
    current_user: AuthenticatedUser = Depends(get_current_user),
@@ -366,7 +366,27 @@ def generate_cover(

    MediaKit 的调用方式（strategy / max_frames / 轮询 / 重试 / 降级）不变。
    """
-    _, plan_svc = services
+    tpl_svc, plan_svc = services
+    # template_id 为空时自动创建/获取用户默认模板，保证 ai_frame 无模板也能抽帧
+    if not template_id:
+        from app.api.routes.templates_editor.dependencies import resolve_draft_plan_id
+        plan_id = resolve_draft_plan_id(
+            template_id="",
+            services=services,
+            current_user=current_user,
+            db=db,
+            auto_create_default=True,
+        )
+    else:
+        # 校验模板存在且可访问（原 Depends 逻辑）
+        from app.api.routes.templates_editor.dependencies import resolve_draft_plan_id
+        plan_id = resolve_draft_plan_id(
+            template_id=template_id,
+            services=services,
+            current_user=current_user,
+            db=db,
+            auto_create_default=False,
+        )
    plan = plan_svc.get_plan_or_raise(plan_id)

    # ── upload 类型：直接保存前端上传的封面图片，不需要预览视频 ──────
@@ -51,12 +51,18 @@ export interface GenerateCoverResponse {

 /** AI 生成封面 — 从最终成片中抽帧（MediaKit 选帧） */
 export async function generateCover(
-  templateId: string,
+  templateId: string | undefined | null,
  data: GenerateCoverRequest,
 ): Promise<GenerateCoverResponse> {
+  // templateId 为空时不传该参数，让后端使用默认模板配置
+  // （前端此前用 "default" 作为占位符，该 id 不存在于后端模板库会 404）
+  const params: Record<string, string> = {}
+  if (templateId && templateId !== "default") {
+    params.template_id = templateId
+  }
  const response = await apiClient.post<GenerateCoverResponse>("/generation/generate-cover", data, {
    timeout: 300000,
-    params: { template_id: templateId },
+    params,
  })
  return response.data
 }
@@ -85,6 +85,13 @@ export function useSharedCover(opts: UseSharedCoverOptions): UseSharedCoverRetur
        config: t.config,
      }))
      setTemplates(list)
+      // 若当前选中 "default"（初始占位），自动解析为第一个系统模板的真实 id
+      // （"default" 不是后端真实模板 id，传过去会 404）
+      setSelectedTemplateId((prev) => {
+        if (prev !== "default") return prev
+        const firstSys = list.find((t) => t.is_system)
+        return firstSys?.id || list[0]?.id || "default"
+      })
    } catch (err) {
      const axiosErr = err as {
        response?: {
@@ -112,6 +119,11 @@ export function useSharedCover(opts: UseSharedCoverOptions): UseSharedCoverRetur
    }
  }, [])

+  useEffect(() => {
+    // 挂载时拉一次模板列表，用于把 "default" 占位符解析成真实模板 id
+    void reloadTemplates()
+  }, [reloadTemplates])
+
  useEffect(() => {
    if (showCoverSettings) {
      void reloadTemplates()
@@ -193,7 +205,12 @@ export function useSharedCover(opts: UseSharedCoverOptions): UseSharedCoverRetur
        await deleteCoverTemplate(id)
        setTemplates((prev) => prev.filter((t) => t.id !== id))
        if (selectedTemplateId === id) {
-          setSelectedTemplateId("default")
+          // 删除后选中第一个系统模板作为兜底，避免 magic string "default" 传后端 404
+          setTemplates((prevAfter) => {
+            const firstSys = prevAfter.find((t) => t.is_system)
+            setSelectedTemplateId(firstSys?.id || prevAfter[0]?.id || "")
+            return prevAfter
+          })
        }
      } catch (err) {
        const axiosErr = err as {
@@ -231,7 +248,8 @@ export function useSharedCover(opts: UseSharedCoverOptions): UseSharedCoverRetur
    }
    setGenerating(true)
    try {
-      const url = await generateFn(selectedTemplateId || "default")
+      const tplId = selectedTemplateId && selectedTemplateId !== "default" ? selectedTemplateId : ""
+      const url = await generateFn(tplId)
      if (!url) {
        message.warning("封面生成未返回图片，请重试")
      }
@@ -266,7 +284,7 @@ export function useSharedCover(opts: UseSharedCoverOptions): UseSharedCoverRetur

  const selectedTemplateName =
    templates.find((t) => t.id === selectedTemplateId)?.name ||
-    (selectedTemplateId === "default" ? "默认模板" : "自定义")
+    (selectedTemplateId === "default" || !selectedTemplateId ? "默认模板" : "自定义")

  return {
    templates,
@@ -186,7 +186,7 @@ const Step6CoverSettings: React.FC<Step6CoverSettingsProps> = (props) => {
   * 透传给 useBatchCovers，由其在 generateOne/generateAll 中发给后端。
   */
  const batchCovers = useBatchCovers({
-    selectedTemplate: shared.selectedTemplateId || "default",
+    selectedTemplate: shared.selectedTemplateId,
    generatedVideos: props.generatedVideos,
    titles: batchTitles,
    titleStyle: {
@@ -1,4 +1,4 @@
-import React from "react"
+import React, { useMemo, useState } from "react"
 import type { CoverTemplate } from "../../types/cover"
 import Modal from "@/components/ui/Modal"
 import Button from "@/components/ui/Button"
@@ -17,15 +17,58 @@ interface CoverSettingsModalProps {
  onCreateNew: () => void
 }

-const GRADIENT_MAP: Record<string, string> = {
-  default: "linear-gradient(135deg, #e0e0e0, #c0c0c0)",
-  "bold-red": "linear-gradient(135deg, #ef4444, #b91c1c)",
-  "elegant-black": "linear-gradient(135deg, #374151, #111827)",
-  "gradient-blue": "linear-gradient(135deg, #3b82f6, #1d4ed8)",
-  "gradient-purple": "linear-gradient(135deg, #8b5cf6, #6d28d9)",
-  "warm-orange": "linear-gradient(135deg, #f97316, #ea580c)",
-  "fresh-green": "linear-gradient(135deg, #22c55e, #15803d)",
-  "tech-blue": "linear-gradient(135deg, #06b6d4, #0e7490)",
+/** 模板缩略图：优先渲染 thumbnail_url；加载失败/无图时展示占位 */
+const TemplateThumb: React.FC<{ tpl: CoverTemplate; isSelected: boolean }> = ({
+  tpl,
+  isSelected,
+}) => {
+  const [errored, setErrored] = useState(false)
+  const url = tpl.thumbnail_url && !errored ? tpl.thumbnail_url : ""
+  // 随机柔和渐变做占位，保证卡片不会灰成一片
+  const placeholderBg = useMemo(() => {
+    const palettes = [
+      ["#e0e0e0", "#c0c0c0"],
+      ["#ef4444", "#b91c1c"],
+      ["#374151", "#111827"],
+      ["#3b82f6", "#1d4ed8"],
+      ["#8b5cf6", "#6d28d9"],
+      ["#f97316", "#ea580c"],
+      ["#22c55e", "#15803d"],
+      ["#06b6d4", "#0e7490"],
+    ]
+    let h = 0
+    for (const ch of tpl.id || tpl.name || "") h = (h * 31 + ch.charCodeAt(0)) >>> 0
+    const [a, b] = palettes[h % palettes.length]
+    return `linear-gradient(135deg, ${a}, ${b})`
+  }, [tpl.id, tpl.name])
+
+  return (
+    <div
+      className="xx-cover-template-thumb"
+      style={{
+        background: url ? "#000" : placeholderBg,
+        position: "relative",
+        overflow: "hidden",
+      }}
+    >
+      {isSelected && <span className="xx-cover-template-check">✓</span>}
+      {url ? (
+        <img
+          src={url}
+          alt={tpl.name}
+          onError={() => setErrored(true)}
+          style={{
+            width: "100%",
+            height: "100%",
+            objectFit: "cover",
+            display: "block",
+          }}
+        />
+      ) : (
+        <span style={{ fontSize: 28, opacity: 0.5 }}>🖼️</span>
+      )}
+    </div>
+  )
 }

 const CoverSettingsModal: React.FC<CoverSettingsModalProps> = ({
@@ -97,13 +140,7 @@ const CoverSettingsModal: React.FC<CoverSettingsModalProps> = ({
                className={`xx-cover-template-card${isSelected ? " selected" : ""}`}
                onClick={() => onSelectTemplate(tpl.id)}
              >
-                <div
-                  className="xx-cover-template-thumb"
-                  style={{ background: GRADIENT_MAP[tpl.id] || GRADIENT_MAP.default }}
-                >
-                  {isSelected && <span className="xx-cover-template-check">✓</span>}
-                  🖼️
-                </div>
+                <TemplateThumb tpl={tpl} isSelected={isSelected} />
                <div className="xx-cover-template-info">
                  <div className="xx-cover-template-name">
                    {tpl.name}
@@ -107,54 +107,57 @@ export function useBatchCovers({
      addBusy(index)
      try {
        const titleText = titles[index] || ""
-        const response = await generateCover(selectedTemplate || "default", {
-          generated_video_id: target.id,
-          video_url: target.file_url || target.download_url || "",
-          cover_type: "ai_frame",
-          ...(titleText
-            ? {
-                title_config: {
-                  text: titleText,
-                  font: titleStyle.font,
-                  font_size: titleStyle.size,
-                  font_color: titleStyle.color,
-                  position: titleStyle.position,
-                  bold: titleStyle.bold,
-                  italic: titleStyle.italic,
-                  stroke: titleStyle.stroke
-                    ? {
-                        enabled: true,
-                        width: titleStyle.strokeWidth ?? 4,
-                        color: titleStyle.strokeColor ?? "#000000",
-                      }
-                    : { enabled: false },
-                  shadow: titleStyle.shadow
-                    ? {
-                        enabled: true,
-                        offset_x: titleStyle.shadowOffsetX ?? 2,
-                        offset_y: titleStyle.shadowOffsetY ?? 2,
-                        blur: titleStyle.shadowBlur ?? 4,
-                        color: titleStyle.shadowColor ?? "rgba(0,0,0,0.8)",
-                      }
-                    : { enabled: false },
-                  line_height: titleStyle.lineHeight ?? 1.2,
-                  margin_top: titleStyle.marginTop ?? 24,
-                  max_chars_per_line: titleStyle.maxCharsPerLine ?? 0,
-                  background: titleStyle.bgEnabled
-                    ? {
-                        enabled: true,
-                        color: titleStyle.bgColor,
-                        padding: titleStyle.bgPadding,
-                        radius: titleStyle.bgRadius,
-                      }
-                    : { enabled: false },
-                  line_overrides: (titleStyle.lineOverrides ?? []) as Array<
-                    Record<string, unknown>
-                  >,
-                },
-              }
-            : {}),
-        })
+        const response = await generateCover(
+          selectedTemplate && selectedTemplate !== "default" ? selectedTemplate : undefined,
+          {
+            generated_video_id: target.id,
+            video_url: target.file_url || target.download_url || "",
+            cover_type: "ai_frame",
+            ...(titleText
+              ? {
+                  title_config: {
+                    text: titleText,
+                    font: titleStyle.font,
+                    font_size: titleStyle.size,
+                    font_color: titleStyle.color,
+                    position: titleStyle.position,
+                    bold: titleStyle.bold,
+                    italic: titleStyle.italic,
+                    stroke: titleStyle.stroke
+                      ? {
+                          enabled: true,
+                          width: titleStyle.strokeWidth ?? 4,
+                          color: titleStyle.strokeColor ?? "#000000",
+                        }
+                      : { enabled: false },
+                    shadow: titleStyle.shadow
+                      ? {
+                          enabled: true,
+                          offset_x: titleStyle.shadowOffsetX ?? 2,
+                          offset_y: titleStyle.shadowOffsetY ?? 2,
+                          blur: titleStyle.shadowBlur ?? 4,
+                          color: titleStyle.shadowColor ?? "rgba(0,0,0,0.8)",
+                        }
+                      : { enabled: false },
+                    line_height: titleStyle.lineHeight ?? 1.2,
+                    margin_top: titleStyle.marginTop ?? 24,
+                    max_chars_per_line: titleStyle.maxCharsPerLine ?? 0,
+                    background: titleStyle.bgEnabled
+                      ? {
+                          enabled: true,
+                          color: titleStyle.bgColor,
+                          padding: titleStyle.bgPadding,
+                          radius: titleStyle.bgRadius,
+                        }
+                      : { enabled: false },
+                    line_overrides: (titleStyle.lineOverrides ?? []) as Array<
+                      Record<string, unknown>
+                    >,
+                  },
+                }
+              : {}),
+          },
+        )
        const url = response.cover?.image_url || response.cover?.thumbnail_url || ""
        if (url) {
          patchCover(index, url)