feat: 完善视频任务与 KOC 资源库

koc-portal/app/page.tsx

@@ -6,6 +6,10 @@ import {
   formatShanghaiDate as formatDate,
   parseStoredDate,
 } from "./date-utils";
+import {
+  compactPartnerBatchWorkbookForUpload,
+  PARTNER_BATCH_UPLOAD_MAX_BYTES,
+} from "./batch-workbook-upload";
 
 type Assignment = {
   id: string;
@@ -30,6 +34,11 @@ type Assignment = {
     width: number | null;
     height: number | null;
   }>;
+  videos: Array<{
+    index: number;
+    width: number | null;
+    height: number | null;
+  }>;
 };
 
 type DelegationSummary = {
@@ -63,6 +72,8 @@ type TaskPayload = {
     dueAt: string;
     status: string;
     type: "content_publish" | "screenshot_collect";
+    platform: "小红书" | "抖音";
+    contentFormat: "image_text" | "video";
   };
   claim: null | {
     id: string;
@@ -92,7 +103,12 @@ function resolveAdminOrigin() {
   return window.location.origin;
 }
 
-function partnerApi(path: "/api/partner" | "/api/partner-upload") {
+function partnerApi(
+  path:
+    | "/api/partner"
+    | "/api/partner-upload"
+    | "/api/partner-batch-workbook",
+) {
   return `${resolveAdminOrigin()}${path}`;
 }
 
@@ -155,6 +171,36 @@ function safeFileBase(item: Assignment) {
   );
 }
 
+function PlatformBadge({
+  platform,
+  compact = false,
+  logoOnly = false,
+}: {
+  platform: "小红书" | "抖音";
+  compact?: boolean;
+  logoOnly?: boolean;
+}) {
+  return (
+    <span
+      className={`platform-badge ${compact ? "compact" : ""} ${logoOnly ? "logo-only" : ""}`}
+      aria-label={logoOnly ? platform : undefined}
+    >
+      <span className={`platform-logo ${platform === "抖音" ? "douyin" : "xiaohongshu"}`} aria-hidden="true">
+        {platform === "抖音" ? (
+          <svg viewBox="0 0 24 24" focusable="false">
+            <path className="douyin-cyan" d="M14.2 3.2v9.5a4.7 4.7 0 1 1-3.4-4.5v2.7a2.1 2.1 0 1 0 .8 1.7V3.2h2.6Zm0 0c.4 2.4 2 3.8 4.3 4.1V10c-1.7-.1-3.2-.7-4.3-1.7V3.2Z" />
+            <path className="douyin-red" d="M15.2 2.5V12a4.7 4.7 0 1 1-3.4-4.5v2.7a2.1 2.1 0 1 0 .8 1.7V2.5h2.6Zm0 0c.4 2.4 2 3.8 4.3 4.1v2.7c-1.7-.1-3.2-.7-4.3-1.7V2.5Z" />
+            <path className="douyin-white" d="M14.7 2.9v9.5a4.7 4.7 0 1 1-3.4-4.5v2.7a2.1 2.1 0 1 0 .8 1.7V2.9h2.6Zm0 0c.4 2.4 2 3.8 4.3 4.1v2.7c-1.7-.1-3.2-.7-4.3-1.7V2.9Z" />
+          </svg>
+        ) : (
+          <b>小红书</b>
+        )}
+      </span>
+      {!logoOnly && <span>{platform}</span>}
+    </span>
+  );
+}
+
 function exactArrayBuffer(bytes: Uint8Array) {
   const copy = new Uint8Array(bytes.byteLength);
   copy.set(bytes);
@@ -277,6 +323,7 @@ export default function Home() {
   const [adminOrigin, setAdminOrigin] = useState("");
   const [downloadingImage, setDownloadingImage] = useState<number | null>(null);
   const [batchDownloading, setBatchDownloading] = useState(false);
+  const [batchWorkbookWorking, setBatchWorkbookWorking] = useState(false);
   const [creatorWorking, setCreatorWorking] = useState(false);
   const [creatorStage, setCreatorStage] = useState("");
   const [selectedForShare, setSelectedForShare] = useState<string[]>([]);
@@ -289,6 +336,7 @@ export default function Home() {
   } | null>(null);
   const [noteContentCollapsed, setNoteContentCollapsed] = useState(false);
   const submitCardRef = useRef<HTMLFormElement | null>(null);
+  const batchWorkbookInputRef = useRef<HTMLInputElement | null>(null);
   const publishScreenshotPreview = useFilePreview(screenshot);
   const creatorScreenshotPreview = useFilePreview(creatorScreenshot);
   const taskResultPreviews = useMemo(
@@ -504,6 +552,25 @@ export default function Home() {
     return `${adminOrigin}/api/partner-image?${params}`;
   };
 
+  const noteVideoUrl = (
+    item: Assignment,
+    videoIndex: number,
+    download = false,
+  ) => {
+    const params = new URLSearchParams({
+      distribution: item.id,
+      index: String(videoIndex),
+      kind: "video",
+    });
+    if (download) params.set("download", "1");
+    if (delegationToken) params.set("share", delegationToken);
+    else {
+      params.set("task", taskToken);
+      params.set("claim", claimToken);
+    }
+    return `${adminOrigin}/api/partner-image?${params}`;
+  };
+
   const taskResultImageUrl = (item: Assignment, imageIndex: number) => {
     const params = new URLSearchParams({
       distribution: item.id,
@@ -644,6 +711,112 @@ export default function Home() {
     }
   };
 
+  const batchWorkbookParams = () => {
+    const params = new URLSearchParams();
+    if (delegationToken) params.set("share", delegationToken);
+    else {
+      params.set("task", taskToken);
+      params.set("claim", claimToken);
+    }
+    return params;
+  };
+
+  const exportBatchWorkbook = async () => {
+    try {
+      setBatchWorkbookWorking(true);
+      const response = await fetch(
+        `${partnerApi("/api/partner-batch-workbook")}?${batchWorkbookParams()}`,
+        { cache: "no-store" },
+      );
+      if (!response.ok) {
+        const result = (await response.json()) as { error?: string };
+        throw new Error(result.error || "Excel导出失败");
+      }
+      const disposition = response.headers.get("Content-Disposition") || "";
+      const encodedName = disposition.match(/filename\*=UTF-8''([^;]+)/i)?.[1];
+      const fileName = encodedName
+        ? decodeURIComponent(encodedName)
+        : `${payload?.task.name || "领取笔记"}-批量回填.xlsx`;
+      downloadBlob(await response.blob(), fileName);
+      setToast("Excel已导出，填写后从本页面上传即可批量回填");
+    } catch (reason) {
+      setToast(reason instanceof Error ? reason.message : "Excel导出失败");
+    } finally {
+      setBatchWorkbookWorking(false);
+    }
+  };
+
+  const importBatchWorkbook = async (event: ChangeEvent<HTMLInputElement>) => {
+    const file = event.target.files?.[0];
+    event.target.value = "";
+    if (!file) return;
+    try {
+      setBatchWorkbookWorking(true);
+      let uploadBody: Blob = file;
+      let compacted = false;
+      if (file.size > PARTNER_BATCH_UPLOAD_MAX_BYTES) {
+        setToast("文件较大，正在保留回填截图并精简原图…");
+        await new Promise<void>((resolve) => requestAnimationFrame(() => resolve()));
+        const compactedWorkbook = compactPartnerBatchWorkbookForUpload(
+          new Uint8Array(await file.arrayBuffer()),
+        );
+        if (compactedWorkbook.bytes.byteLength > PARTNER_BATCH_UPLOAD_MAX_BYTES) {
+          throw new Error("精简后的回填表仍超过80MB，请重新导出最新版回填表");
+        }
+        uploadBody = new Blob([exactArrayBuffer(compactedWorkbook.bytes)], {
+          type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet",
+        });
+        compacted = true;
+      }
+      const form = new FormData();
+      form.set("file", uploadBody, file.name);
+      form.set("taskToken", taskToken);
+      form.set("claimToken", claimToken);
+      form.set("delegationToken", delegationToken);
+      const response = await fetch(partnerApi("/api/partner-batch-workbook"), {
+        method: "POST",
+        body: form,
+      });
+      const contentType = response.headers.get("Content-Type") || "";
+      const result = (contentType.includes("application/json")
+        ? await response.json()
+        : {
+            error:
+              response.status === 413
+                ? "回填表超过上传限制，请重新导出最新版回填表"
+                : "批量回填服务暂时不可用，请稍后重试",
+          }) as {
+        error?: string;
+        updatedRows?: number;
+        publishedCount?: number;
+        noteScreenshotCount?: number;
+        analysisScreenshotCount?: number;
+      };
+      if (!response.ok) throw new Error(result.error || "批量回填失败");
+      await loadTask(taskToken, claimToken, delegationToken);
+      const details = [
+        result.publishedCount
+          ? `${result.publishedCount}篇发布信息`
+          : "",
+        result.noteScreenshotCount
+          ? `${result.noteScreenshotCount}张笔记截图`
+          : "",
+        result.analysisScreenshotCount
+          ? `${result.analysisScreenshotCount}张数据分析截图`
+          : "",
+      ].filter(Boolean);
+      setToast(
+        details.length > 0
+          ? `${compacted ? "文件已自动精简，" : ""}已更新${details.join("、")}`
+          : `${compacted ? "文件已自动精简，" : ""}表格已读取，没有需要更新的数据`,
+      );
+    } catch (reason) {
+      setToast(reason instanceof Error ? reason.message : "批量回填失败");
+    } finally {
+      setBatchWorkbookWorking(false);
+    }
+  };
+
   const prepareImage = async (item: Assignment, imageIndex: number) => {
     const response = await fetch(noteImageUrl(item, imageIndex));
     if (!response.ok) throw new Error("图片读取失败");
@@ -987,7 +1160,10 @@ export default function Home() {
                 <span>截图任务 {activeBatch.assignments.findIndex((item) => item.id === selected.id) + 1}</span>
                 <span>只需上传结果截图</span>
               </div>
-              <p className="document-label">小红书搜索关键词</p>
+              <div className="document-label-row">
+                <p className="document-label">小红书搜索关键词</p>
+                <PlatformBadge platform={payload.task.platform} compact />
+              </div>
               <div className="note-title-row">
                 <h1>{selected.title}</h1>
                 <button
@@ -1136,7 +1312,9 @@ export default function Home() {
                 <span>笔记内容已收起</span>
                 <strong>{selected.title}</strong>
                 <small>
-                  {selected.images.length} 张配图 · 已完成首次回填
+                  {selected.videos.length > 0
+                    ? `${selected.videos.length} 个视频`
+                    : `${selected.images.length} 张配图`} · 已完成首次回填
                 </small>
               </div>
               <button
@@ -1150,6 +1328,7 @@ export default function Home() {
             <div className="note-document-content">
             <div className="note-document-meta">
               <span>笔记 {activeBatch.assignments.findIndex((item) => item.id === selected.id) + 1}</span>
+              <PlatformBadge platform={payload.task.platform} compact />
               <span>飞书源行 {selected.source_row ?? "—"}</span>
             </div>
             {selected.publish_url && (
@@ -1237,6 +1416,38 @@ export default function Home() {
                 </div>
               </section>
             )}
+            {selected.videos.length > 0 && (
+              <section className="note-videos">
+                <div className="note-images-heading">
+                  <div>
+                    <p className="document-label">发布视频</p>
+                    <span>点击播放，可使用播放器菜单保存原视频</span>
+                  </div>
+                  <b>{selected.videos.length} 个</b>
+                </div>
+                <div className="note-video-grid">
+                  {selected.videos.map((video, index) => (
+                    <div className="note-video-card" key={video.index}>
+                      <video
+                        controls
+                        preload="metadata"
+                        playsInline
+                        src={noteVideoUrl(selected, video.index)}
+                      />
+                      <div className="note-image-actions">
+                        <span>视频 {index + 1}</span>
+                        <a
+                          href={noteVideoUrl(selected, video.index, true)}
+                          download={`${safeFileBase(selected)}-视频-${index + 1}.mp4`}
+                        >
+                          下载视频
+                        </a>
+                      </div>
+                    </div>
+                  ))}
+                </div>
+              </section>
+            )}
             </div>
           </article>
 
@@ -1261,7 +1472,7 @@ export default function Home() {
                 inputMode="url"
                 value={publishUrl}
                 onChange={(event) => setPublishUrl(event.target.value)}
-                placeholder="可粘贴小红书长链、短链或整段分享文案"
+                placeholder={`可粘贴${payload.task.platform}作品链接或整段分享文案`}
                 required
               />
               <small className="field-hint">
@@ -1478,8 +1689,10 @@ export default function Home() {
                   : "合作社转派发布包"}
             </p>
             <h1>{payload.task.name}</h1>
-            <p>
-              {payload.task.brand} · {formatDate(payload.task.dueAt)}前{isScreenshotTask ? "提交" : "发布"}
+            <p className="platform-meta-line">
+              <span>{payload.task.brand}</span>
+              <PlatformBadge platform={payload.task.platform} compact />
+              <span>{formatDate(payload.task.dueAt)}前{isScreenshotTask ? "提交" : "发布"}</span>
               {payload.delegation ? ` · ${payload.delegation.label}` : ""}
             </p>
           </div>
@@ -1500,7 +1713,7 @@ export default function Home() {
                 {isClaimOwner
                   ? isScreenshotTask
                     ? "打开一份查看关键词和要求，完成后单独上传截图；也可以转派给底层KOC"
-                    : "打开一篇，查看内容并单独回填；也可以选择笔记转派给底层KOC"
+                    : "可逐篇回填，也可导出Excel填写后批量上传；还可以选择笔记转派给底层KOC"
                   : isScreenshotTask
                     ? "打开任务查看搜索关键词和要求，完成后逐份上传截图"
                     : "打开一篇查看完整内容，发布后逐篇回填"}
@@ -1508,6 +1721,31 @@ export default function Home() {
             </div>
             <div className="section-actions">
               <span>{activeBatch.assignments.length} {isScreenshotTask ? "份" : "篇"}</span>
+              {!isScreenshotTask && (
+                <>
+                  <button
+                    type="button"
+                    disabled={batchWorkbookWorking}
+                    onClick={() => void exportBatchWorkbook()}
+                  >
+                    {batchWorkbookWorking ? "处理中…" : "导出Excel"}
+                  </button>
+                  <button
+                    type="button"
+                    disabled={batchWorkbookWorking}
+                    onClick={() => batchWorkbookInputRef.current?.click()}
+                  >
+                    上传回填表
+                  </button>
+                  <input
+                    ref={batchWorkbookInputRef}
+                    className="batch-workbook-input"
+                    type="file"
+                    accept=".xlsx,application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"
+                    onChange={(event) => void importBatchWorkbook(event)}
+                  />
+                </>
+              )}
               {isClaimOwner && (
                 <button
                   type="button"
@@ -1609,6 +1847,10 @@ export default function Home() {
                       loading="lazy"
                     />
                   </>
+                ) : item.videos.length > 0 ? (
+                  <span className="note-thumb platform-video-thumb">
+                    <PlatformBadge platform={payload.task.platform} logoOnly />
+                  </span>
                 ) : (
                   <span className="note-thumb empty">无图</span>
                 )}
@@ -1617,7 +1859,11 @@ export default function Home() {
                   <p>
                     {isScreenshotTask
                       ? `搜索关键词 · ${statusLabel(item, payload.task.type)}`
-                      : `${item.images.length} 张配图 · 飞书源行 ${item.source_row ?? "—"} · ${statusLabel(item, payload.task.type)}`}
+                      : <>
+                          <span>{item.videos.length > 0 ? `${item.videos.length} 个视频` : `${item.images.length} 张配图`}</span>
+                          <PlatformBadge platform={payload.task.platform} compact />
+                          <span>飞书源行 {item.source_row ?? "—"} · {statusLabel(item, payload.task.type)}</span>
+                        </>}
                     {!isScreenshotTask && item.creator_screenshot_key ? " · D7截图已交" : ""}
                     {item.delegation_label ? ` · 已转派给 ${item.delegation_label}` : ""}
                   </p>
@@ -1724,7 +1970,10 @@ export default function Home() {
       </header>
       <section className="task-hero">
         <div className="hero-copy">
-          <p className="micro">正在招募 · {payload.task.brand}</p>
+          <div className="hero-platform-line">
+            <p className="micro">正在招募 · {payload.task.brand}</p>
+            <PlatformBadge platform={payload.task.platform} />
+          </div>
           <h1>{payload.task.name}</h1>
           <p>
             {payload.task.type === "screenshot_collect"