feat(ai): 自由创作视频生成全量移植(/free-create)——Seedance 文/图生视频+按时长计费+人物素材库

后端: - free_video.py: 提交/轮询/收藏/软删全链路,复用 AITask(新增 is_deleted/is_favorited, migration 0022) - video_pricing.py: 按时长 token 计费(×1.10 buffer+clamp); video_errors.py 错误归一; media_probe.py 时长探测 - catalog/volcano: Seedance free-video 模型接入+seed(migration 0023) - 素材库: FreeAssetGroup/FreeAsset(火山 Assets API 引用登记, migration 0009)+ 上传/轮询/删除接口 - settings: FREE_VIDEO_MAX_CONCURRENT 团队并发闸(默认3); CELERY_TASK_ALWAYS_EAGER 本地联调开关(生产恒关) - 测试: test_free_video.py 新增; billing/products/projects tests 配套调整前端: - /free-create 页面+components/free-create/ 全套(输入栏/@mention 素材引用/生成卡/视频详情弹窗/素材库弹窗) - api.ts/types.ts 扩展 free-video 与 free-assets 接口; 路由/侧边栏入口接入 bug/: 测试清单 (11)(12) 与截图归档 Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
2026-07-06 10:58:36 +08:00
parent 94202e7bce
commit c5f7eb2acc
45 changed files with 5186 additions and 21 deletions
@@ -0,0 +1,93 @@
+// 自由创作·任务卡:生成中(shimmer+平滑进度) / 失败(中文错误+重试) / 完成(悬停播放+操作)。
+import { useRef } from "react";
+import { Download, Heart, RotateCcw, Trash2 } from "lucide-react";
+import type { FreeVideoTask } from "../../types";
+import { MODE_LABELS, STATUS_LABELS, isInFlight, modelLabel } from "./constants";
+
+function ratioStyle(ratio: string) {
+  const [w, h] = ratio.split(":").map(Number);
+  return { aspectRatio: w && h ? `${w} / ${h}` : "16 / 9" };
+}
+
+export function GenerationCard({ task, progress, onOpen, onRetry, onToggleFavorite, onDelete, onDownload }: {
+  task: FreeVideoTask;
+  progress: number;
+  onOpen: () => void;
+  onRetry: () => void;
+  onToggleFavorite: () => void;
+  onDelete: () => void;
+  onDownload: () => void;
+}) {
+  const videoRef = useRef<HTMLVideoElement>(null);
+  const inFlight = isInFlight(task.status);
+  const failed = task.status === "failed" || task.status === "cancelled";
+  const done = task.status === "succeeded" && !!task.video_url;
+
+  return (
+    <div className={`fc-card${done ? " done" : ""}`}>
+      <div
+        className="fc-card-media"
+        style={ratioStyle(task.aspect_ratio)}
+        role={done ? "button" : undefined}
+        tabIndex={done ? 0 : undefined}
+        onClick={done ? onOpen : undefined}
+        onKeyDown={done ? (event) => { if (event.key === "Enter") onOpen(); } : undefined}
+        onMouseEnter={() => { if (done) void videoRef.current?.play().catch(() => undefined); }}
+        onMouseLeave={() => { videoRef.current?.pause(); if (videoRef.current) videoRef.current.currentTime = 0; }}
+      >
+        {inFlight && (
+          <div className="fc-card-generating">
+            <span className="spinner" />
+            <div className="fc-progress"><span style={{ width: `${Math.min(progress, 95)}%` }} /></div>
+            <span className="mono">{STATUS_LABELS[task.status] || "生成中"} · {Math.round(Math.min(progress, 95))}%</span>
+          </div>
+        )}
+        {failed && (
+          <div className="fc-card-failed">
+            <span className="pill pill-l2 pill-err"><span className="dot" />失败</span>
+            <p>{task.error_message || "生成失败,请重试"}</p>
+            <button type="button" className="btn btn-sm" onClick={(event) => { event.stopPropagation(); onRetry(); }}>
+              <RotateCcw size={13} /> 重试
+            </button>
+          </div>
+        )}
+        {done && (
+          <>
+            <video
+              ref={videoRef}
+              src={task.video_url}
+              poster={task.thumbnail_url || undefined}
+              muted
+              loop
+              playsInline
+              preload="metadata"
+            />
+            <div className="fc-card-hover">
+              <button type="button" className="fc-hover-btn" title="下载" onClick={(event) => { event.stopPropagation(); onDownload(); }}>
+                <Download size={14} />
+              </button>
+              <button type="button" className={`fc-hover-btn${task.is_favorited ? " fav" : ""}`} title={task.is_favorited ? "取消收藏" : "收藏"} onClick={(event) => { event.stopPropagation(); onToggleFavorite(); }}>
+                <Heart size={14} fill={task.is_favorited ? "currentColor" : "none"} />
+              </button>
+              <button type="button" className="fc-hover-btn danger" title="删除" onClick={(event) => { event.stopPropagation(); onDelete(); }}>
+                <Trash2 size={14} />
+              </button>
+            </div>
+          </>
+        )}
+        {task.status === "succeeded" && !task.video_url && (
+          <div className="fc-card-failed">
+            <p>视频链接已失效{task.fallback_note ? `(${task.fallback_note})` : ""}</p>
+          </div>
+        )}
+      </div>
+      <div className="fc-card-meta">
+        <div className="fc-card-prompt" title={task.prompt}>{task.prompt}</div>
+        <div className="fc-card-sub mono">
+          // {MODE_LABELS[task.mode] || task.mode} · {modelLabel(task.model)} · {task.resolution.toUpperCase()} · {task.duration}s
+          {task.status === "succeeded" && ` · ¥${Number(task.actual_cost || 0).toFixed(2)}`}
+        </div>
+      </div>
+    </div>
+  );
+}