后端生成闸+多项修复;前端全站更新;QA 审计与报告

后端: - 新增 celery_health 生成前置闸——无 worker 在线时图片/视频生成入口一律 503,防"提交到 ARK 后无人轮询、结果悬空+额度冻结"的数据丢失 - 拼接导出:帧率跟随源众数、字幕逐句重映射、原声/BGM 混音修复 - 资金核算审计脚本 + genesis 账目回填 + 滞留预留清理命令 - 接入 yunqi provider 与豆包 TTS 模型(catalog/migrations/bootstrap 命令) 前端:全站页面更新(pipeline/library/products/projects/team/account 等), 新增共享 pager 分页组件 QA:刷新 function-audit 全量输出,新增 full-qa 报告文档:BP 产品介绍资料、design/CLAUDE.md Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
2026-06-15 10:06:15 +08:00
parent 890cb9ab67
commit 216a711291
92 changed files with 5114 additions and 2027 deletions
@@ -2,10 +2,25 @@ import { useEffect, useState } from "react";
 import type { FormEvent } from "react";
 import type { Asset } from "../types";
 import { ConfirmModal, Drawer, MediaLightbox } from "../components/overlays";
+import { Pager } from "../components/pager";

-// asset.source / asset.asset_type → 中文标签(筛选下拉用)
+const LIB_PAGE_SIZE = 10;
+
+// asset.source / asset.asset_type / asset.category → 中文标签(筛选下拉 + 卡片 meta 用,不给用户看裸枚举)
 const SOURCE_LABELS: Record<string, string> = { upload: "上传", ai_generated: "AI 生成", exported: "导出", system: "系统" };
 const KIND_LABELS: Record<string, string> = { image: "图片", video: "视频", audio: "音频", subtitle: "字幕", document: "文档" };
+const CATEGORY_LABELS: Record<string, string> = { person: "人物", scene: "场景", product_image: "商品图", video_clip: "视频片段", final_video: "成片", upload: "上传", uncategorized: "未分类" };
+
+// 上传文件 → 资产类型:按 MIME 推断,字幕按后缀,兜底文档(后端直接存这个值,不能一律写死 image)
+function inferAssetType(file: File): string {
+  const mime = file.type || "";
+  if (mime.startsWith("image/")) return "image";
+  if (mime.startsWith("video/")) return "video";
+  if (mime.startsWith("audio/")) return "audio";
+  const ext = (file.name.split(".").pop() || "").toLowerCase();
+  if (["srt", "vtt", "ass"].includes(ext)) return "subtitle";
+  return "document";
+}

 type LibTab = "people" | "scenes" | "products" | "finals" | "uploads" | "unclassified";

@@ -44,6 +59,7 @@ export function LibraryPage({ assets, onUpload, onDelete }: { assets: Asset[]; o
  const [drawer, setDrawer] = useState(false);
  const [file, setFile] = useState<File | null>(null);
  const [name, setName] = useState("");
+  const [uploading, setUploading] = useState(false);
  const [openChip, setOpenChip] = useState("");
  const [srcFilter, setSrcFilter] = useState("");
  const [kindFilter, setKindFilter] = useState("");
@@ -52,13 +68,17 @@ export function LibraryPage({ assets, onUpload, onDelete }: { assets: Asset[]; o
  const [editMode, setEditMode] = useState(false);
  const [metaFilter, setMetaFilter] = useState<Record<string, string>>({});
  const [confirmId, setConfirmId] = useState<string | null>(null);
-  // 资产预览灯箱(图片放大 / 视频播放)
-  const [preview, setPreview] = useState<{ src: string; kind: "image" | "video"; name: string } | null>(null);
+  // 资产预览灯箱(图片放大 / 视频播放 / 音频试听)
+  const [preview, setPreview] = useState<{ src: string; kind: "image" | "video" | "audio"; name: string } | null>(null);
  useEffect(() => {
    document.body.classList.toggle("edit-mode", editMode);
    return () => document.body.classList.remove("edit-mode");
  }, [editMode]);

+  // 分页:每页 10 个,切 tab / 改筛选 / 改排序回到第 1 页(数据多时全量渲染卡顿,视频卡每张挂一个 <video>)
+  const [page, setPage] = useState(1);
+  useEffect(() => { setPage(1); }, [tab, query, srcFilter, kindFilter, metaFilter, sortDesc]);
+
  // 切 tab 时清空与该 tab 无关的筛选
  useEffect(() => { setOpenChip(""); setSrcFilter(""); setKindFilter(""); setMetaFilter({}); }, [tab]);
  useEffect(() => {
@@ -86,17 +106,29 @@ export function LibraryPage({ assets, onUpload, onDelete }: { assets: Asset[]; o
      const cmp = (b.created_at || "").localeCompare(a.created_at || "");
      return sortDesc ? cmp : -cmp;
    });
+  // 当前页切片(删除资产后页数缩水时钳回最后一页)
+  const totalPages = Math.max(1, Math.ceil(filtered.length / LIB_PAGE_SIZE));
+  const curPage = Math.min(page, totalPages);
+  const pageItems = filtered.slice((curPage - 1) * LIB_PAGE_SIZE, curPage * LIB_PAGE_SIZE);

  async function submit(event: FormEvent) {
    event.preventDefault();
-    if (!file) return;
+    if (!file || uploading) return;
    const formData = new FormData();
    formData.append("file", file);
    formData.append("name", name || file.name);
-    formData.append("asset_type", "image");
+    formData.append("asset_type", inferAssetType(file));
    formData.append("category", "upload");
-    await onUpload(formData);
-    setDrawer(false);
+    // 上传 + 列表刷新要数秒,按钮给「上传中…」反馈,防止用户重复点
+    setUploading(true);
+    try {
+      await onUpload(formData);
+      setDrawer(false);
+      setFile(null);
+      setName("");
+    } finally {
+      setUploading(false);
+    }
  }

  return (
@@ -209,14 +241,21 @@ export function LibraryPage({ assets, onUpload, onDelete }: { assets: Asset[]; o
        </div>
      </div>

-      <div className="result-meta" id="result-meta">// 显示 <span className="count">{filtered.length}</span> / {inTab.length} 个资产</div>
+      <div className="result-meta" id="result-meta">// 显示 <span className="count">{pageItems.length}</span> / {filtered.length} 个资产{filtered.length !== inTab.length ? "(已筛选)" : ""}</div>

      {filtered.length ? (
        <div className="asset-grid" id="asset-grid">
-          {filtered.map((asset) => {
+          {pageItems.map((asset) => {
            const cover = asset.files?.find((f) => f.is_primary)?.preview_url || asset.files?.[0]?.preview_url || "";
            const isVideo = asset.asset_type === "video";
-            const openPreview = cover ? () => setPreview({ src: cover, kind: isVideo ? "video" : "image", name: asset.name }) : undefined;
+            const isAudio = asset.asset_type === "audio";
+            const previewKind = isVideo ? "video" : isAudio ? "audio" : "image";
+            const openPreview = cover ? () => setPreview({ src: cover, kind: previewKind, name: asset.name }) : undefined;
+            // 卡片 meta:upload 分类下「上传 · 上传」无信息量,改显资产类型;其余显分类中文
+            const catLabel = (asset.category === "upload" ? KIND_LABELS[asset.asset_type] : CATEGORY_LABELS[asset.category || ""]) || asset.category;
+            const srcLabel = SOURCE_LABELS[asset.source || ""] || asset.source;
+            // 成片卡补导出时间(created_at = 导出入库时刻),格式 2026-06-09 18:21
+            const exportedAt = asset.category === "final_video" ? (asset.created_at || "").slice(0, 16).replace("T", " ") : "";
            return (
              <article className={`asset-card ${asset.asset_type}`} key={asset.id}>
                {editMode && onDelete && (
@@ -224,17 +263,24 @@ export function LibraryPage({ assets, onUpload, onDelete }: { assets: Asset[]; o
                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"><path d="M3 6h18" /><path d="M8 6V4a2 2 0 012-2h4a2 2 0 012 2v2" /><path d="M19 6l-1.5 14a2 2 0 01-2 1.8H8.5a2 2 0 01-2-1.8L5 6" /></svg>
                  </button>
                )}
-                <div className="placeholder asset-thumb" role={openPreview ? "button" : undefined} tabIndex={openPreview ? 0 : undefined} title={openPreview ? (isVideo ? "点击播放" : "点击放大") : undefined} style={openPreview ? { cursor: isVideo ? "pointer" : "zoom-in", position: "relative" } : undefined} onClick={openPreview} onKeyDown={openPreview ? (event) => { if (event.key === "Enter" || event.key === " ") { event.preventDefault(); openPreview(); } } : undefined}>
-                  {cover
-                    ? (isVideo
-                        ? <>
-                            <video src={cover} muted playsInline preload="metadata" style={{ width: "100%", height: "100%", objectFit: "cover", borderRadius: "inherit" }} />
-                            <span className="lib-play-badge" aria-hidden="true"><svg viewBox="0 0 24 24" fill="currentColor"><path d="M8 5v14l11-7z" /></svg></span>
-                          </>
-                        : <img src={cover} alt={asset.name} loading="lazy" />)
-                    : <span className="ph-frame">{asset.asset_type}</span>}
+                <div className="placeholder asset-thumb" role={openPreview ? "button" : undefined} tabIndex={openPreview ? 0 : undefined} title={openPreview ? (isVideo ? "点击播放" : isAudio ? "点击试听" : "点击放大") : undefined} style={openPreview ? { cursor: isVideo || isAudio ? "pointer" : "zoom-in", position: "relative" } : undefined} onClick={openPreview} onKeyDown={openPreview ? (event) => { if (event.key === "Enter" || event.key === " ") { event.preventDefault(); openPreview(); } } : undefined}>
+                  {cover && isVideo && (
+                    <>
+                      <video src={cover} muted playsInline preload="metadata" style={{ width: "100%", height: "100%", objectFit: "cover", borderRadius: "inherit" }} />
+                      <span className="lib-play-badge" aria-hidden="true"><svg viewBox="0 0 24 24" fill="currentColor"><path d="M8 5v14l11-7z" /></svg></span>
+                    </>
+                  )}
+                  {isAudio && (
+                    // 音频没有可视封面,preview_url 是音频文件本身,塞 <img> 必裂图 → 用默认音符占位
+                    <span className="lib-audio-ph" aria-hidden="true">
+                      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"><path d="M9 18V5l12-2v13" /><circle cx="6" cy="18" r="3" /><circle cx="18" cy="16" r="3" /></svg>
+                      <span className="mono">AUDIO</span>
+                    </span>
+                  )}
+                  {cover && !isVideo && !isAudio && <img src={cover} alt={asset.name} loading="lazy" />}
+                  {!cover && !isAudio && <span className="ph-frame">{KIND_LABELS[asset.asset_type] || asset.asset_type}</span>}
                </div>
-                <div className="asset-body"><div className="asset-name">{asset.name}</div><div className="asset-meta">{asset.category} · {asset.source}</div></div>
+                <div className="asset-body"><div className="asset-name">{asset.name}</div><div className="asset-meta">{catLabel} · {srcLabel}{exportedAt && <span className="asset-meta-time"> · {exportedAt}</span>}</div></div>
              </article>
            );
          })}
@@ -243,6 +289,8 @@ export function LibraryPage({ assets, onUpload, onDelete }: { assets: Asset[]; o
        <div className="empty-filter">// 当前分类暂无真实资产</div>
      )}

+      <Pager page={curPage} total={filtered.length} pageSize={LIB_PAGE_SIZE} onChange={setPage} />
+
      <MediaLightbox open={!!preview} src={preview?.src || ""} kind={preview?.kind} name={preview?.name} close={() => setPreview(null)} />

      <ConfirmModal
@@ -254,7 +302,7 @@ export function LibraryPage({ assets, onUpload, onDelete }: { assets: Asset[]; o
        onConfirm={async () => { const id = confirmId; setConfirmId(null); if (id) await onDelete?.(id); }}
      />

-      <Drawer title="上传资产" open={drawer} close={() => setDrawer(false)}><form onSubmit={submit}><div className="field"><label className="field-label">文件</label><input className="input file-input" type="file" onChange={(event) => setFile(event.target.files?.[0] || null)} /></div><div className="field"><label className="field-label">资产名称</label><input className="input" value={name} onChange={(event) => setName(event.target.value)} /></div><div className="drawer-actions"><button className="btn btn-ghost" type="button" onClick={() => setDrawer(false)}>取消</button><button className="btn btn-primary" type="submit" disabled={!file}>上传资产</button></div></form></Drawer>
+      <Drawer title="上传资产" open={drawer} close={() => setDrawer(false)}><form onSubmit={submit}><div className="field"><label className="field-label">文件</label><input className="input file-input" type="file" accept="image/*,video/*,audio/*,.srt,.vtt,.ass" onChange={(event) => setFile(event.target.files?.[0] || null)} /></div><div className="field"><label className="field-label">资产名称</label><input className="input" value={name} onChange={(event) => setName(event.target.value)} /></div><div className="drawer-actions"><button className="btn btn-ghost" type="button" onClick={() => setDrawer(false)}>取消</button><button className="btn btn-primary" type="submit" disabled={!file || uploading}>{uploading ? "上传中…" : "上传资产"}</button></div></form></Drawer>
    </section>
  );
 }