1360 lines
48 KiB
TypeScript
1360 lines
48 KiB
TypeScript
"use client";
|
||
|
||
import { zipSync } from "fflate";
|
||
import { ChangeEvent, FormEvent, useCallback, useEffect, useMemo, useState } from "react";
|
||
import {
|
||
formatShanghaiDate as formatDate,
|
||
parseStoredDate,
|
||
} from "./date-utils";
|
||
|
||
type Assignment = {
|
||
id: string;
|
||
status: string;
|
||
publish_url: string | null;
|
||
publish_time: string | null;
|
||
publish_screenshot_key: string | null;
|
||
creator_screenshot_key: string | null;
|
||
ocr_status: string;
|
||
exposure: number | null;
|
||
views: number | null;
|
||
title: string;
|
||
body: string;
|
||
source_row: number | null;
|
||
account_nickname: string | null;
|
||
delegation_bundle_id?: string | null;
|
||
delegation_label?: string | null;
|
||
images: Array<{
|
||
index: number;
|
||
width: number | null;
|
||
height: number | null;
|
||
}>;
|
||
};
|
||
|
||
type DelegationSummary = {
|
||
id: string;
|
||
label: string;
|
||
share_token: string;
|
||
quantity: number;
|
||
status: "active" | "revoked";
|
||
created_at: string;
|
||
revoked_at: string | null;
|
||
completed_count: number;
|
||
creator_completed_count: number;
|
||
};
|
||
|
||
type RecoveredClaim = {
|
||
claimToken: string;
|
||
quantity: number;
|
||
completedCount: number;
|
||
createdAt: string;
|
||
firstTitle: string;
|
||
};
|
||
|
||
type TaskPayload = {
|
||
task: {
|
||
name: string;
|
||
brand: string;
|
||
quantity?: number;
|
||
claimedQuantity?: number;
|
||
availableQuantity?: number;
|
||
dueAt: string;
|
||
status: string;
|
||
};
|
||
claim: null | {
|
||
id: string;
|
||
claimantName: string;
|
||
quantity: number;
|
||
createdAt: string;
|
||
assignments: Assignment[];
|
||
delegations: DelegationSummary[];
|
||
};
|
||
delegation: null | {
|
||
id: string;
|
||
label: string;
|
||
quantity: number;
|
||
createdAt: string;
|
||
assignments: Assignment[];
|
||
};
|
||
};
|
||
|
||
const PRODUCTION_ADMIN_ORIGIN =
|
||
"https://koc-loop-mvp-wufp.pyeongwu.chatgpt.site";
|
||
|
||
function partnerApi(path: "/api/partner" | "/api/partner-upload") {
|
||
const origin =
|
||
window.location.hostname === "localhost"
|
||
? "http://localhost:3001"
|
||
: PRODUCTION_ADMIN_ORIGIN;
|
||
return `${origin}${path}`;
|
||
}
|
||
|
||
function statusLabel(item: Assignment) {
|
||
return item.publish_url ? "已回填" : "待发布";
|
||
}
|
||
|
||
function creatorScreenshotDueAt(publishTime?: string | null) {
|
||
if (!publishTime) return null;
|
||
const date = parseStoredDate(publishTime);
|
||
if (Number.isNaN(date.getTime())) return null;
|
||
date.setDate(date.getDate() + 7);
|
||
return date.toISOString();
|
||
}
|
||
|
||
function imageExtension(contentType: string) {
|
||
const extensionByType: Record<string, string> = {
|
||
"image/avif": "avif",
|
||
"image/gif": "gif",
|
||
"image/jpeg": "jpg",
|
||
"image/png": "png",
|
||
"image/webp": "webp",
|
||
};
|
||
return extensionByType[contentType] ?? "jpg";
|
||
}
|
||
|
||
function safeFileBase(item: Assignment) {
|
||
return (
|
||
item.title.replace(/[\\/:*?"<>|]/g, "").trim().slice(0, 30) ||
|
||
`笔记-${item.source_row ?? "配图"}`
|
||
);
|
||
}
|
||
|
||
function exactArrayBuffer(bytes: Uint8Array) {
|
||
const copy = new Uint8Array(bytes.byteLength);
|
||
copy.set(bytes);
|
||
return copy.buffer;
|
||
}
|
||
|
||
function downloadBlob(blob: Blob, fileName: string) {
|
||
const objectUrl = URL.createObjectURL(blob);
|
||
const anchor = document.createElement("a");
|
||
anchor.href = objectUrl;
|
||
anchor.download = fileName;
|
||
document.body.appendChild(anchor);
|
||
anchor.click();
|
||
anchor.remove();
|
||
window.setTimeout(() => URL.revokeObjectURL(objectUrl), 1000);
|
||
}
|
||
|
||
async function compressScreenshot(file: File) {
|
||
if (file.size < 900_000 || !file.type.startsWith("image/")) return file;
|
||
const bitmap = await createImageBitmap(file);
|
||
const maxEdge = 1800;
|
||
const scale = Math.min(1, maxEdge / Math.max(bitmap.width, bitmap.height));
|
||
const canvas = document.createElement("canvas");
|
||
canvas.width = Math.max(1, Math.round(bitmap.width * scale));
|
||
canvas.height = Math.max(1, Math.round(bitmap.height * scale));
|
||
const context = canvas.getContext("2d");
|
||
if (!context) {
|
||
bitmap.close();
|
||
return file;
|
||
}
|
||
context.drawImage(bitmap, 0, 0, canvas.width, canvas.height);
|
||
bitmap.close();
|
||
const blob = await new Promise<Blob | null>((resolve) =>
|
||
canvas.toBlob(resolve, "image/jpeg", 0.84),
|
||
);
|
||
if (!blob) return file;
|
||
return new File([blob], `${file.name.replace(/\.[^.]+$/, "")}.jpg`, {
|
||
type: "image/jpeg",
|
||
});
|
||
}
|
||
|
||
export default function Home() {
|
||
const [taskToken, setTaskToken] = useState("");
|
||
const [claimToken, setClaimToken] = useState("");
|
||
const [delegationToken, setDelegationToken] = useState("");
|
||
const [selectedId, setSelectedId] = useState("");
|
||
const [payload, setPayload] = useState<TaskPayload | null>(null);
|
||
const [loading, setLoading] = useState(true);
|
||
const [working, setWorking] = useState(false);
|
||
const [error, setError] = useState("");
|
||
const [toast, setToast] = useState("");
|
||
const [claimantName, setClaimantName] = useState("");
|
||
const [quantity, setQuantity] = useState(1);
|
||
const [publishUrl, setPublishUrl] = useState("");
|
||
const [screenshot, setScreenshot] = useState<File | null>(null);
|
||
const [creatorScreenshot, setCreatorScreenshot] = useState<File | null>(null);
|
||
const [creatorExposure, setCreatorExposure] = useState("");
|
||
const [creatorViews, setCreatorViews] = useState("");
|
||
const [entryMode, setEntryMode] = useState<"claim" | "recover">("claim");
|
||
const [recoveredClaims, setRecoveredClaims] = useState<RecoveredClaim[]>([]);
|
||
const [adminOrigin, setAdminOrigin] = useState(PRODUCTION_ADMIN_ORIGIN);
|
||
const [downloadingImage, setDownloadingImage] = useState<number | null>(null);
|
||
const [batchDownloading, setBatchDownloading] = useState(false);
|
||
const [creatorWorking, setCreatorWorking] = useState(false);
|
||
const [creatorStage, setCreatorStage] = useState("");
|
||
const [selectedForShare, setSelectedForShare] = useState<string[]>([]);
|
||
const [shareLabel, setShareLabel] = useState("");
|
||
const [shareComposerOpen, setShareComposerOpen] = useState(false);
|
||
const [shareWorking, setShareWorking] = useState(false);
|
||
|
||
const updateUrl = useCallback(
|
||
(nextClaim: string, nextNote = "", nextDelegation = "") => {
|
||
const url = new URL(window.location.href);
|
||
if (nextClaim) url.searchParams.set("claim", nextClaim);
|
||
else url.searchParams.delete("claim");
|
||
if (nextDelegation) url.searchParams.set("share", nextDelegation);
|
||
else url.searchParams.delete("share");
|
||
if (nextNote) url.searchParams.set("note", nextNote);
|
||
else url.searchParams.delete("note");
|
||
if (nextDelegation) url.searchParams.delete("task");
|
||
window.history.replaceState({}, "", url);
|
||
},
|
||
[],
|
||
);
|
||
|
||
const loadTask = useCallback(async (
|
||
task: string,
|
||
claim: string,
|
||
delegation = "",
|
||
) => {
|
||
try {
|
||
setLoading(true);
|
||
setError("");
|
||
const params = new URLSearchParams();
|
||
if (task) params.set("task", task);
|
||
if (claim) params.set("claim", claim);
|
||
if (delegation) params.set("share", delegation);
|
||
const response = await fetch(`${partnerApi("/api/partner")}?${params}`, {
|
||
cache: "no-store",
|
||
});
|
||
const result = (await response.json()) as TaskPayload & { error?: string };
|
||
if (!response.ok) throw new Error(result.error || "暂时无法打开任务");
|
||
setPayload(result);
|
||
if (result.claim) setClaimantName(result.claim.claimantName);
|
||
} catch (reason) {
|
||
setError(reason instanceof Error ? reason.message : "暂时无法打开任务");
|
||
} finally {
|
||
setLoading(false);
|
||
}
|
||
}, []);
|
||
|
||
useEffect(() => {
|
||
const timer = window.setTimeout(() => {
|
||
if (window.location.hostname === "localhost") {
|
||
setAdminOrigin("http://localhost:3001");
|
||
}
|
||
const params = new URLSearchParams(window.location.search);
|
||
const task = params.get("task") ?? "";
|
||
const claim = params.get("claim") ?? "";
|
||
const delegation = params.get("share") ?? "";
|
||
const note = params.get("note") ?? "";
|
||
setTaskToken(task);
|
||
setClaimToken(claim);
|
||
setDelegationToken(delegation);
|
||
setSelectedId(note);
|
||
if (!task && !delegation) {
|
||
setLoading(false);
|
||
setError("任务链接不完整，请向运营重新获取");
|
||
return;
|
||
}
|
||
void loadTask(task, claim, delegation);
|
||
}, 0);
|
||
return () => window.clearTimeout(timer);
|
||
}, [loadTask]);
|
||
|
||
useEffect(() => {
|
||
if (!toast) return;
|
||
const timer = window.setTimeout(() => setToast(""), 2600);
|
||
return () => window.clearTimeout(timer);
|
||
}, [toast]);
|
||
|
||
const activeBatch = payload?.claim ?? payload?.delegation ?? null;
|
||
const selected = useMemo(
|
||
() => activeBatch?.assignments.find((item) => item.id === selectedId) ?? null,
|
||
[activeBatch, selectedId],
|
||
);
|
||
|
||
useEffect(() => {
|
||
if (!selected) return;
|
||
const timer = window.setTimeout(() => {
|
||
setPublishUrl(selected.publish_url ?? "");
|
||
setScreenshot(null);
|
||
setCreatorScreenshot(null);
|
||
setCreatorExposure(
|
||
selected.exposure === null ? "" : String(selected.exposure),
|
||
);
|
||
setCreatorViews(selected.views === null ? "" : String(selected.views));
|
||
}, 0);
|
||
return () => window.clearTimeout(timer);
|
||
}, [selected]);
|
||
|
||
const claimNotes = async (event: FormEvent) => {
|
||
event.preventDefault();
|
||
try {
|
||
setWorking(true);
|
||
const response = await fetch(partnerApi("/api/partner"), {
|
||
method: "POST",
|
||
headers: { "Content-Type": "application/json" },
|
||
body: JSON.stringify({
|
||
action: "claim",
|
||
taskToken,
|
||
claimantIdentifier: claimantName,
|
||
quantity,
|
||
}),
|
||
});
|
||
const result = (await response.json()) as {
|
||
claimToken?: string;
|
||
claimedCount?: number;
|
||
error?: string;
|
||
};
|
||
if (!response.ok || !result.claimToken) {
|
||
throw new Error(result.error || "领取失败");
|
||
}
|
||
setClaimToken(result.claimToken);
|
||
setDelegationToken("");
|
||
updateUrl(result.claimToken);
|
||
await loadTask(taskToken, result.claimToken);
|
||
setToast(`已领取 ${result.claimedCount} 篇，逐篇发布即可`);
|
||
} catch (reason) {
|
||
setToast(reason instanceof Error ? reason.message : "领取失败");
|
||
} finally {
|
||
setWorking(false);
|
||
}
|
||
};
|
||
|
||
const openRecoveredClaim = async (nextClaimToken: string) => {
|
||
setClaimToken(nextClaimToken);
|
||
setDelegationToken("");
|
||
setSelectedId("");
|
||
setShareComposerOpen(false);
|
||
setSelectedForShare([]);
|
||
updateUrl(nextClaimToken);
|
||
await loadTask(taskToken, nextClaimToken);
|
||
};
|
||
|
||
const recoverClaims = async (event: FormEvent) => {
|
||
event.preventDefault();
|
||
try {
|
||
setWorking(true);
|
||
const response = await fetch(partnerApi("/api/partner"), {
|
||
method: "POST",
|
||
headers: { "Content-Type": "application/json" },
|
||
body: JSON.stringify({
|
||
action: "recover",
|
||
taskToken,
|
||
claimantIdentifier: claimantName,
|
||
}),
|
||
});
|
||
const result = (await response.json()) as {
|
||
claims?: RecoveredClaim[];
|
||
error?: string;
|
||
};
|
||
if (!response.ok || !result.claims?.length) {
|
||
throw new Error(result.error || "没有找到领取记录");
|
||
}
|
||
setRecoveredClaims(result.claims);
|
||
if (result.claims.length === 1) {
|
||
await openRecoveredClaim(result.claims[0].claimToken);
|
||
}
|
||
} catch (reason) {
|
||
setToast(reason instanceof Error ? reason.message : "领取记录查找失败");
|
||
} finally {
|
||
setWorking(false);
|
||
}
|
||
};
|
||
|
||
const showRecovery = async () => {
|
||
setEntryMode("recover");
|
||
setRecoveredClaims([]);
|
||
setClaimToken("");
|
||
setDelegationToken("");
|
||
setSelectedId("");
|
||
setShareComposerOpen(false);
|
||
setSelectedForShare([]);
|
||
updateUrl("");
|
||
await loadTask(taskToken, "");
|
||
};
|
||
|
||
const noteImageUrl = (item: Assignment, imageIndex: number) => {
|
||
const params = new URLSearchParams({
|
||
distribution: item.id,
|
||
index: String(imageIndex),
|
||
});
|
||
if (delegationToken) params.set("share", delegationToken);
|
||
else {
|
||
params.set("task", taskToken);
|
||
params.set("claim", claimToken);
|
||
}
|
||
return `${adminOrigin}/api/partner-image?${params}`;
|
||
};
|
||
|
||
const openNote = (item: Assignment) => {
|
||
setSelectedId(item.id);
|
||
updateUrl(claimToken, item.id, delegationToken);
|
||
};
|
||
|
||
const closeNote = () => {
|
||
setSelectedId("");
|
||
updateUrl(claimToken, "", delegationToken);
|
||
};
|
||
|
||
const copyText = async (value: string, successMessage: string) => {
|
||
try {
|
||
await navigator.clipboard.writeText(value);
|
||
setToast(successMessage);
|
||
} catch {
|
||
setToast("复制失败，请长按对应文字复制");
|
||
}
|
||
};
|
||
|
||
const delegationUrl = (shareToken: string) => {
|
||
const url = new URL(window.location.origin);
|
||
url.searchParams.set("share", shareToken);
|
||
return url.toString();
|
||
};
|
||
|
||
const toggleShareSelection = (distributionId: string) => {
|
||
setSelectedForShare((current) =>
|
||
current.includes(distributionId)
|
||
? current.filter((id) => id !== distributionId)
|
||
: [...current, distributionId],
|
||
);
|
||
};
|
||
|
||
const createDelegation = async (event: FormEvent) => {
|
||
event.preventDefault();
|
||
if (!payload?.claim || selectedForShare.length === 0) return;
|
||
try {
|
||
setShareWorking(true);
|
||
const response = await fetch(partnerApi("/api/partner"), {
|
||
method: "POST",
|
||
headers: { "Content-Type": "application/json" },
|
||
body: JSON.stringify({
|
||
action: "create_delegation",
|
||
taskToken,
|
||
claimToken,
|
||
delegationLabel: shareLabel,
|
||
distributionIds: selectedForShare,
|
||
}),
|
||
});
|
||
const result = (await response.json()) as {
|
||
delegation?: {
|
||
id: string;
|
||
label: string;
|
||
shareToken: string;
|
||
quantity: number;
|
||
};
|
||
error?: string;
|
||
};
|
||
if (!response.ok || !result.delegation) {
|
||
throw new Error(result.error || "分享链接生成失败");
|
||
}
|
||
await copyText(
|
||
delegationUrl(result.delegation.shareToken),
|
||
`已生成给 ${result.delegation.label} 的分享链接并复制`,
|
||
);
|
||
setSelectedForShare([]);
|
||
setShareLabel("");
|
||
setShareComposerOpen(false);
|
||
await loadTask(taskToken, claimToken);
|
||
} catch (reason) {
|
||
setToast(reason instanceof Error ? reason.message : "分享链接生成失败");
|
||
} finally {
|
||
setShareWorking(false);
|
||
}
|
||
};
|
||
|
||
const revokeDelegation = async (bundle: DelegationSummary) => {
|
||
if (!window.confirm(`确认撤销“${bundle.label}”的分享链接吗？`)) return;
|
||
try {
|
||
setShareWorking(true);
|
||
const response = await fetch(partnerApi("/api/partner"), {
|
||
method: "POST",
|
||
headers: { "Content-Type": "application/json" },
|
||
body: JSON.stringify({
|
||
action: "revoke_delegation",
|
||
taskToken,
|
||
claimToken,
|
||
delegationBundleId: bundle.id,
|
||
}),
|
||
});
|
||
const result = (await response.json()) as {
|
||
revoked?: boolean;
|
||
error?: string;
|
||
};
|
||
if (!response.ok || !result.revoked) {
|
||
throw new Error(result.error || "撤销失败");
|
||
}
|
||
await loadTask(taskToken, claimToken);
|
||
setSelectedForShare([]);
|
||
setToast("分享链接已撤销，相关笔记可以重新转派");
|
||
} catch (reason) {
|
||
setToast(reason instanceof Error ? reason.message : "撤销失败");
|
||
} finally {
|
||
setShareWorking(false);
|
||
}
|
||
};
|
||
|
||
const prepareImage = async (item: Assignment, imageIndex: number) => {
|
||
const response = await fetch(noteImageUrl(item, imageIndex));
|
||
if (!response.ok) throw new Error("图片读取失败");
|
||
const blob = await response.blob();
|
||
const extension = imageExtension(blob.type);
|
||
const fileName = `${safeFileBase(item)}-图片${imageIndex}.${extension}`;
|
||
const buffer = await blob.arrayBuffer();
|
||
return {
|
||
bytes: new Uint8Array(buffer),
|
||
file: new File([buffer], fileName, { type: blob.type || "image/jpeg" }),
|
||
};
|
||
};
|
||
|
||
const shareImages = async (files: File[], title: string) => {
|
||
if (
|
||
typeof navigator.share !== "function" ||
|
||
typeof navigator.canShare !== "function" ||
|
||
!navigator.canShare({ files })
|
||
) {
|
||
return false;
|
||
}
|
||
await navigator.share({ files, title });
|
||
return true;
|
||
};
|
||
|
||
const downloadImage = async (item: Assignment, imageIndex: number) => {
|
||
try {
|
||
setDownloadingImage(imageIndex);
|
||
const prepared = await prepareImage(item, imageIndex);
|
||
try {
|
||
if (await shareImages([prepared.file], item.title)) {
|
||
setToast("请在系统菜单中选择“存储图像”");
|
||
return;
|
||
}
|
||
} catch (reason) {
|
||
if (reason instanceof DOMException && reason.name === "AbortError") return;
|
||
}
|
||
downloadBlob(
|
||
new Blob([exactArrayBuffer(prepared.bytes)], {
|
||
type: prepared.file.type,
|
||
}),
|
||
prepared.file.name,
|
||
);
|
||
setToast(`图片 ${imageIndex} 已下载到文件`);
|
||
} catch {
|
||
setToast("图片下载失败，请点击图片后保存");
|
||
} finally {
|
||
setDownloadingImage(null);
|
||
}
|
||
};
|
||
|
||
const downloadAllImages = async (item: Assignment) => {
|
||
try {
|
||
setBatchDownloading(true);
|
||
const prepared = await Promise.all(
|
||
item.images.map((image) => prepareImage(item, image.index)),
|
||
);
|
||
const files = prepared.map((image) => image.file);
|
||
try {
|
||
if (await shareImages(files, `${item.title}｜全部配图`)) {
|
||
setToast("请在系统菜单中选择“存储图像”批量保存");
|
||
return;
|
||
}
|
||
} catch (reason) {
|
||
if (reason instanceof DOMException && reason.name === "AbortError") return;
|
||
}
|
||
const archive = zipSync(
|
||
Object.fromEntries(
|
||
prepared.map((image) => [image.file.name, image.bytes]),
|
||
),
|
||
{ level: 0 },
|
||
);
|
||
downloadBlob(
|
||
new Blob([exactArrayBuffer(archive)], { type: "application/zip" }),
|
||
`${safeFileBase(item)}-全部配图.zip`,
|
||
);
|
||
setToast("当前浏览器不支持直接存相册，已下载全部配图 ZIP");
|
||
} catch {
|
||
setToast("批量保存失败，请尝试用系统浏览器打开");
|
||
} finally {
|
||
setBatchDownloading(false);
|
||
}
|
||
};
|
||
|
||
const chooseScreenshot = (event: ChangeEvent<HTMLInputElement>) => {
|
||
setScreenshot(event.target.files?.[0] ?? null);
|
||
};
|
||
|
||
const chooseCreatorScreenshot = (event: ChangeEvent<HTMLInputElement>) => {
|
||
setCreatorScreenshot(event.target.files?.[0] ?? null);
|
||
};
|
||
|
||
const uploadEvidence = async (
|
||
selectedItem: Assignment,
|
||
file: File,
|
||
kind: "publish" | "creator-center",
|
||
) => {
|
||
const compressed = await compressScreenshot(file);
|
||
const headers: Record<string, string> = {
|
||
"Content-Type": compressed.type || "image/jpeg",
|
||
"X-KOC-Distribution": selectedItem.id,
|
||
"X-KOC-File-Name": encodeURIComponent(compressed.name),
|
||
"X-KOC-Upload-Kind": kind,
|
||
};
|
||
if (delegationToken) {
|
||
headers["X-KOC-Delegation"] = delegationToken;
|
||
} else {
|
||
headers["X-KOC-Task"] = taskToken;
|
||
headers["X-KOC-Claim"] = claimToken;
|
||
}
|
||
const uploadResponse = await fetch(partnerApi("/api/partner-upload"), {
|
||
method: "POST",
|
||
headers,
|
||
body: compressed,
|
||
});
|
||
const uploadResult = (await uploadResponse.json()) as { error?: string };
|
||
if (!uploadResponse.ok) {
|
||
throw new Error(
|
||
uploadResult.error ||
|
||
(kind === "creator-center"
|
||
? "创作者中心截图上传失败"
|
||
: "发布截图上传失败"),
|
||
);
|
||
}
|
||
};
|
||
|
||
const submitNote = async (event: FormEvent) => {
|
||
event.preventDefault();
|
||
if (!selected) return;
|
||
try {
|
||
setWorking(true);
|
||
if (screenshot) {
|
||
await uploadEvidence(selected, screenshot, "publish");
|
||
} else if (!selected.publish_screenshot_key) {
|
||
throw new Error("请上传这篇笔记的发布截图");
|
||
}
|
||
|
||
const response = await fetch(partnerApi("/api/partner"), {
|
||
method: "POST",
|
||
headers: { "Content-Type": "application/json" },
|
||
body: JSON.stringify({
|
||
action: "submit",
|
||
taskToken,
|
||
claimToken,
|
||
delegationToken,
|
||
distributionId: selected.id,
|
||
publishUrl,
|
||
}),
|
||
});
|
||
const result = (await response.json()) as { error?: string };
|
||
if (!response.ok) throw new Error(result.error || "回填失败");
|
||
await loadTask(taskToken, claimToken, delegationToken);
|
||
setScreenshot(null);
|
||
setToast("这篇笔记已回填，不会与其他笔记错配");
|
||
} catch (reason) {
|
||
setToast(reason instanceof Error ? reason.message : "回填失败");
|
||
} finally {
|
||
setWorking(false);
|
||
}
|
||
};
|
||
|
||
const submitCreatorData = async () => {
|
||
if (!selected) return;
|
||
if (!creatorScreenshot && !selected.creator_screenshot_key) {
|
||
setToast("请选择创作者中心截图");
|
||
return;
|
||
}
|
||
if (
|
||
!/^\d{1,12}$/.test(creatorExposure) ||
|
||
!/^\d{1,12}$/.test(creatorViews)
|
||
) {
|
||
setToast("请填写正确的曝光量和阅读量");
|
||
return;
|
||
}
|
||
try {
|
||
setCreatorWorking(true);
|
||
if (creatorScreenshot) {
|
||
setCreatorStage("正在上传截图…");
|
||
await uploadEvidence(
|
||
selected,
|
||
creatorScreenshot,
|
||
"creator-center",
|
||
);
|
||
}
|
||
setCreatorStage("正在保存数据…");
|
||
const response = await fetch(partnerApi("/api/partner"), {
|
||
method: "POST",
|
||
headers: { "Content-Type": "application/json" },
|
||
body: JSON.stringify({
|
||
action: "submit_creator_metrics",
|
||
taskToken,
|
||
claimToken,
|
||
delegationToken,
|
||
distributionId: selected.id,
|
||
exposure: creatorExposure,
|
||
views: creatorViews,
|
||
}),
|
||
});
|
||
const result = (await response.json()) as { error?: string };
|
||
if (!response.ok) {
|
||
throw new Error(result.error || "创作者数据提交失败");
|
||
}
|
||
await loadTask(taskToken, claimToken, delegationToken);
|
||
setCreatorScreenshot(null);
|
||
setToast("创作者截图、曝光量和阅读量已提交");
|
||
} catch (reason) {
|
||
setToast(
|
||
reason instanceof Error ? reason.message : "创作者数据提交失败",
|
||
);
|
||
} finally {
|
||
setCreatorWorking(false);
|
||
setCreatorStage("");
|
||
}
|
||
};
|
||
|
||
if (loading) {
|
||
return (
|
||
<main className="portal-shell loading-shell">
|
||
<div className="loading-mark">K</div>
|
||
<p>正在打开任务…</p>
|
||
</main>
|
||
);
|
||
}
|
||
|
||
if (error || !payload) {
|
||
return (
|
||
<main className="portal-shell">
|
||
<section className="message-card">
|
||
<div className="message-icon">!</div>
|
||
<p className="micro">KOC LOOP</p>
|
||
<h1>暂时无法打开任务</h1>
|
||
<p>{error || "任务不存在"}</p>
|
||
<button onClick={() => window.location.reload()}>重新加载</button>
|
||
</section>
|
||
</main>
|
||
);
|
||
}
|
||
|
||
if (selected && activeBatch) {
|
||
const creatorDueAt = creatorScreenshotDueAt(selected.publish_time);
|
||
const creatorDataReady =
|
||
Boolean(selected.creator_screenshot_key) &&
|
||
selected.exposure !== null &&
|
||
selected.views !== null;
|
||
return (
|
||
<main className="portal-shell detail-shell">
|
||
<header className="portal-topbar">
|
||
<div className="portal-brand"><span>K</span><strong>KOC LOOP</strong></div>
|
||
<div className="claimant-chip">
|
||
{payload.claim ? payload.claim.claimantName : "合作社转派 · 无需登录"}
|
||
</div>
|
||
</header>
|
||
<button className="back-link" onClick={closeNote}>← 返回我的笔记</button>
|
||
<div className="detail-grid">
|
||
<article className="note-document">
|
||
<div className="note-document-meta">
|
||
<span>笔记 {activeBatch.assignments.findIndex((item) => item.id === selected.id) + 1}</span>
|
||
<span>飞书源行 {selected.source_row ?? "—"}</span>
|
||
</div>
|
||
<div className="note-title-row">
|
||
<h1>{selected.title}</h1>
|
||
<button
|
||
type="button"
|
||
className="inline-copy"
|
||
onClick={() => void copyText(selected.title, "标题已复制")}
|
||
>
|
||
复制标题
|
||
</button>
|
||
</div>
|
||
<div className="document-rule" />
|
||
<div className="document-label-row">
|
||
<p className="document-label">正文与话题</p>
|
||
<button
|
||
type="button"
|
||
className="inline-copy"
|
||
onClick={() => void copyText(selected.body, "文案已复制")}
|
||
>
|
||
复制文案
|
||
</button>
|
||
</div>
|
||
<div className="note-body">{selected.body || "暂无正文"}</div>
|
||
{selected.images.length > 0 && (
|
||
<section className="note-images">
|
||
<div className="note-images-heading">
|
||
<div>
|
||
<p className="document-label">发布配图</p>
|
||
<span>手机优先打开系统保存菜单，其他浏览器会下载文件</span>
|
||
</div>
|
||
<div className="note-images-tools">
|
||
<b>{selected.images.length} 张</b>
|
||
{selected.images.length > 1 && (
|
||
<button
|
||
type="button"
|
||
disabled={batchDownloading}
|
||
onClick={() => void downloadAllImages(selected)}
|
||
>
|
||
{batchDownloading ? "正在准备…" : "批量保存图片"}
|
||
</button>
|
||
)}
|
||
</div>
|
||
</div>
|
||
<div className="note-image-grid">
|
||
{selected.images.map((image, index) => (
|
||
<div className="note-image-card" key={image.index}>
|
||
<a
|
||
className="note-image-preview"
|
||
href={noteImageUrl(selected, image.index)}
|
||
target="_blank"
|
||
rel="noreferrer"
|
||
>
|
||
{/* Private claim-bound images intentionally bypass the public image optimizer. */}
|
||
{/* eslint-disable-next-line @next/next/no-img-element */}
|
||
<img
|
||
src={noteImageUrl(selected, image.index)}
|
||
alt={`${selected.title} 配图 ${index + 1}`}
|
||
width={image.width ?? undefined}
|
||
height={image.height ?? undefined}
|
||
loading={index === 0 ? "eager" : "lazy"}
|
||
/>
|
||
</a>
|
||
<div className="note-image-actions">
|
||
<span>图片 {index + 1}</span>
|
||
<button
|
||
type="button"
|
||
disabled={downloadingImage === image.index}
|
||
onClick={() => void downloadImage(selected, image.index)}
|
||
>
|
||
{downloadingImage === image.index ? "下载中…" : "下载原图"}
|
||
</button>
|
||
</div>
|
||
</div>
|
||
))}
|
||
</div>
|
||
</section>
|
||
)}
|
||
</article>
|
||
|
||
<form className="submit-card" onSubmit={submitNote}>
|
||
<div className="submit-heading">
|
||
<div>
|
||
<p className="micro">逐篇回填</p>
|
||
<h2>填写这篇笔记的发布信息</h2>
|
||
</div>
|
||
<span className={selected.publish_url ? "done" : "pending"}>
|
||
{statusLabel(selected)}
|
||
</span>
|
||
</div>
|
||
<div className="mapping-note">
|
||
<span>1 : 1</span>
|
||
<p>以下信息只会绑定到当前笔记，不按顺序批量匹配。</p>
|
||
</div>
|
||
<label>
|
||
<span>发布链接</span>
|
||
<input
|
||
type="text"
|
||
inputMode="url"
|
||
value={publishUrl}
|
||
onChange={(event) => setPublishUrl(event.target.value)}
|
||
placeholder="可粘贴小红书长链、短链或整段分享文案"
|
||
required
|
||
/>
|
||
<small className="field-hint">
|
||
系统会自动提取链接，并识别发布账号
|
||
</small>
|
||
</label>
|
||
<label>
|
||
<span>发布截图</span>
|
||
<div className={`screenshot-picker ${screenshot || selected.publish_screenshot_key ? "has-file" : ""}`}>
|
||
<input type="file" accept="image/*" onChange={chooseScreenshot} />
|
||
<b>{screenshot ? "✓" : selected.publish_screenshot_key ? "✓" : "＋"}</b>
|
||
<strong>
|
||
{screenshot
|
||
? screenshot.name
|
||
: selected.publish_screenshot_key
|
||
? "发布截图已上传"
|
||
: "点击上传这篇笔记的发布截图"}
|
||
</strong>
|
||
<small>支持 JPG、PNG，最大8MB</small>
|
||
</div>
|
||
</label>
|
||
<button className="submit-primary" disabled={working}>
|
||
{working ? "正在提交…" : selected.publish_url ? "更新这篇笔记" : "确认回填这篇笔记"}
|
||
</button>
|
||
{selected.publish_time && (
|
||
<p className="submitted-at">上次回填：{formatDate(selected.publish_time, true)}</p>
|
||
)}
|
||
{selected.publish_url && (
|
||
<section className="creator-recovery">
|
||
<div className="creator-recovery-heading">
|
||
<div>
|
||
<p className="micro">第7天数据回收</p>
|
||
<h3>上传截图并填写数据</h3>
|
||
</div>
|
||
<span className={creatorDataReady ? "done" : ""}>
|
||
{creatorDataReady ? "已提交" : "待提交"}
|
||
</span>
|
||
</div>
|
||
<p className="creator-recovery-tip">
|
||
请在发布满7天后，上传创作者中心数据页完整截图，并填写页面显示的数据。
|
||
{creatorDueAt && ` 建议上传日期：${formatDate(creatorDueAt)}。`}
|
||
</p>
|
||
<label>
|
||
<span>创作者中心截图</span>
|
||
<div
|
||
className={`screenshot-picker compact ${
|
||
creatorScreenshot || selected.creator_screenshot_key
|
||
? "has-file"
|
||
: ""
|
||
}`}
|
||
>
|
||
<input
|
||
type="file"
|
||
accept="image/*"
|
||
onChange={chooseCreatorScreenshot}
|
||
/>
|
||
<b>
|
||
{creatorScreenshot || selected.creator_screenshot_key
|
||
? "✓"
|
||
: "＋"}
|
||
</b>
|
||
<strong>
|
||
{creatorScreenshot
|
||
? creatorScreenshot.name
|
||
: selected.creator_screenshot_key
|
||
? "创作者中心截图已提交"
|
||
: "点击选择第7天创作者中心截图"}
|
||
</strong>
|
||
<small>截图仅用于运营核对，不再自动OCR</small>
|
||
</div>
|
||
</label>
|
||
<div className="creator-metric-grid">
|
||
<label>
|
||
<span>曝光量</span>
|
||
<input
|
||
type="number"
|
||
inputMode="numeric"
|
||
min="0"
|
||
step="1"
|
||
max="999999999999"
|
||
value={creatorExposure}
|
||
onChange={(event) => setCreatorExposure(event.target.value)}
|
||
placeholder="填写截图中的曝光量"
|
||
required
|
||
/>
|
||
</label>
|
||
<label>
|
||
<span>阅读量</span>
|
||
<input
|
||
type="number"
|
||
inputMode="numeric"
|
||
min="0"
|
||
step="1"
|
||
max="999999999999"
|
||
value={creatorViews}
|
||
onChange={(event) => setCreatorViews(event.target.value)}
|
||
placeholder="填写截图中的阅读量"
|
||
required
|
||
/>
|
||
</label>
|
||
</div>
|
||
<button
|
||
type="button"
|
||
className="creator-submit"
|
||
disabled={
|
||
creatorWorking ||
|
||
(!creatorScreenshot && !selected.creator_screenshot_key) ||
|
||
!creatorExposure ||
|
||
!creatorViews
|
||
}
|
||
onClick={() => void submitCreatorData()}
|
||
>
|
||
{creatorWorking
|
||
? creatorStage || "正在处理…"
|
||
: creatorDataReady
|
||
? "更新创作者数据"
|
||
: "提交创作者数据"}
|
||
</button>
|
||
</section>
|
||
)}
|
||
</form>
|
||
</div>
|
||
{toast && <div className="toast">{toast}</div>}
|
||
</main>
|
||
);
|
||
}
|
||
|
||
if (activeBatch) {
|
||
const completed = activeBatch.assignments.filter((item) => item.publish_url).length;
|
||
const isClaimOwner = Boolean(payload.claim);
|
||
const shareableCount = payload.claim?.assignments.filter(
|
||
(item) => !item.publish_url && !item.delegation_bundle_id,
|
||
).length ?? 0;
|
||
return (
|
||
<main className="portal-shell">
|
||
<header className="portal-topbar">
|
||
<div className="portal-brand"><span>K</span><strong>KOC LOOP</strong></div>
|
||
{payload.claim ? (
|
||
<div className="claim-tools">
|
||
<button onClick={() => void showRecovery()}>找回其他批次</button>
|
||
<div className="claimant-chip">{payload.claim.claimantName}</div>
|
||
</div>
|
||
) : (
|
||
<div className="claimant-chip">合作社转派 · 无需登录</div>
|
||
)}
|
||
</header>
|
||
<section className="claimed-hero">
|
||
<div>
|
||
<p className="micro">
|
||
{isClaimOwner ? "我的领取任务" : "合作社转派发布包"}
|
||
</p>
|
||
<h1>{payload.task.name}</h1>
|
||
<p>
|
||
{payload.task.brand} · {formatDate(payload.task.dueAt)}前发布
|
||
{payload.delegation ? ` · ${payload.delegation.label}` : ""}
|
||
</p>
|
||
</div>
|
||
<div className="completion-ring">
|
||
<strong>{completed}/{activeBatch.assignments.length}</strong>
|
||
<span>已回填</span>
|
||
</div>
|
||
</section>
|
||
<section className="notes-section">
|
||
<div className="section-heading">
|
||
<div>
|
||
<h2>{isClaimOwner ? "我领取的笔记" : "需要发布的笔记"}</h2>
|
||
<p>
|
||
{isClaimOwner
|
||
? "打开一篇，查看内容并单独回填；也可以选择笔记转派给底层KOC"
|
||
: "打开一篇查看完整内容，发布后逐篇回填"}
|
||
</p>
|
||
</div>
|
||
<div className="section-actions">
|
||
<span>{activeBatch.assignments.length} 篇</span>
|
||
{isClaimOwner && (
|
||
<button
|
||
type="button"
|
||
className={shareComposerOpen ? "active" : ""}
|
||
disabled={shareableCount === 0 && !shareComposerOpen}
|
||
onClick={() => {
|
||
setShareComposerOpen((current) => !current);
|
||
setSelectedForShare([]);
|
||
setShareLabel("");
|
||
}}
|
||
>
|
||
{shareComposerOpen ? "取消选择" : "选择笔记并分享"}
|
||
</button>
|
||
)}
|
||
</div>
|
||
</div>
|
||
{payload.claim && shareComposerOpen && (
|
||
<form className="share-composer" onSubmit={createDelegation}>
|
||
<div>
|
||
<p className="micro">合作社转派</p>
|
||
<h3>生成免登录分享链接</h3>
|
||
<p>
|
||
勾选待发布笔记，底层KOC打开链接即可查看内容并逐篇回填。
|
||
</p>
|
||
</div>
|
||
<label>
|
||
<span>接收人备注</span>
|
||
<input
|
||
value={shareLabel}
|
||
maxLength={24}
|
||
onChange={(event) => setShareLabel(event.target.value)}
|
||
placeholder="例如：A、小王"
|
||
required
|
||
/>
|
||
</label>
|
||
<div className="share-composer-action">
|
||
<strong>已选 {selectedForShare.length} 篇</strong>
|
||
<button
|
||
className="share-primary"
|
||
disabled={
|
||
shareWorking ||
|
||
selectedForShare.length === 0 ||
|
||
!shareLabel.trim()
|
||
}
|
||
>
|
||
{shareWorking ? "生成中…" : "生成并复制分享链接"}
|
||
</button>
|
||
</div>
|
||
<small>
|
||
对方无需登录，也不会填写手机号、微信或企微；分享链接可用于后续第7天数据回收。
|
||
</small>
|
||
</form>
|
||
)}
|
||
<div className="note-list">
|
||
{activeBatch.assignments.map((item, index) => {
|
||
const shareDisabled = Boolean(
|
||
item.publish_url || item.delegation_bundle_id,
|
||
);
|
||
return (
|
||
<article
|
||
key={item.id}
|
||
className={`note-row ${shareComposerOpen && isClaimOwner ? "share-selecting" : ""}`}
|
||
>
|
||
{shareComposerOpen && isClaimOwner && (
|
||
<label
|
||
className={`share-checkbox ${shareDisabled ? "disabled" : ""}`}
|
||
title={
|
||
item.publish_url
|
||
? "已发布笔记不能转派"
|
||
: item.delegation_bundle_id
|
||
? `已转派给 ${item.delegation_label}`
|
||
: "选择这篇笔记"
|
||
}
|
||
>
|
||
<input
|
||
type="checkbox"
|
||
checked={selectedForShare.includes(item.id)}
|
||
disabled={shareDisabled}
|
||
onChange={() => toggleShareSelection(item.id)}
|
||
aria-label={`选择笔记：${item.title}`}
|
||
/>
|
||
<span>✓</span>
|
||
</label>
|
||
)}
|
||
<span className={`note-index ${item.publish_url ? "done" : ""}`}>
|
||
{String(index + 1).padStart(2, "0")}
|
||
</span>
|
||
{item.images[0] ? (
|
||
<>
|
||
{/* Private claim-bound images intentionally bypass the public image optimizer. */}
|
||
{/* eslint-disable-next-line @next/next/no-img-element */}
|
||
<img
|
||
className="note-thumb"
|
||
src={noteImageUrl(item, item.images[0].index)}
|
||
alt=""
|
||
loading="lazy"
|
||
/>
|
||
</>
|
||
) : (
|
||
<span className="note-thumb empty">无图</span>
|
||
)}
|
||
<div>
|
||
<h3>{item.title}</h3>
|
||
<p>
|
||
{item.images.length} 张配图 · 飞书源行 {item.source_row ?? "—"} · {statusLabel(item)}
|
||
{item.creator_screenshot_key ? " · D7截图已交" : ""}
|
||
{item.delegation_label ? ` · 已转派给 ${item.delegation_label}` : ""}
|
||
</p>
|
||
</div>
|
||
<span
|
||
className={`note-status ${
|
||
item.publish_url
|
||
? "done"
|
||
: item.delegation_bundle_id
|
||
? "delegated"
|
||
: ""
|
||
}`}
|
||
>
|
||
{item.publish_url
|
||
? "已回填"
|
||
: item.delegation_bundle_id
|
||
? "已转派"
|
||
: "待发布"}
|
||
</span>
|
||
<button onClick={() => openNote(item)}>
|
||
{item.publish_url ? "查看 / 修改" : "查看并回填"} →
|
||
</button>
|
||
</article>
|
||
);
|
||
})}
|
||
</div>
|
||
{payload.claim && payload.claim.delegations.length > 0 && (
|
||
<section className="delegation-history">
|
||
<div className="delegation-heading">
|
||
<div>
|
||
<p className="micro">分享记录</p>
|
||
<h3>转派发布包</h3>
|
||
</div>
|
||
<span>{payload.claim.delegations.length} 个</span>
|
||
</div>
|
||
<div className="delegation-list">
|
||
{payload.claim.delegations.map((bundle) => (
|
||
<article
|
||
key={bundle.id}
|
||
className={bundle.status === "revoked" ? "revoked" : ""}
|
||
>
|
||
<div>
|
||
<strong>{bundle.label}</strong>
|
||
<span>
|
||
{bundle.quantity} 篇 · 已发布{" "}
|
||
{Number(bundle.completed_count ?? 0)}/{bundle.quantity} ·
|
||
D7完成 {Number(bundle.creator_completed_count ?? 0)}
|
||
</span>
|
||
</div>
|
||
<small>{formatDate(bundle.created_at, true)}</small>
|
||
<span className={`delegation-status ${bundle.status}`}>
|
||
{bundle.status === "active" ? "分享中" : "已撤销"}
|
||
</span>
|
||
{bundle.status === "active" && (
|
||
<div className="delegation-actions">
|
||
<button
|
||
type="button"
|
||
onClick={() =>
|
||
void copyText(
|
||
delegationUrl(bundle.share_token),
|
||
`已复制给 ${bundle.label} 的分享链接`,
|
||
)
|
||
}
|
||
>
|
||
复制链接
|
||
</button>
|
||
{Number(bundle.completed_count ?? 0) === 0 && (
|
||
<button
|
||
type="button"
|
||
className="danger"
|
||
disabled={shareWorking}
|
||
onClick={() => void revokeDelegation(bundle)}
|
||
>
|
||
撤销
|
||
</button>
|
||
)}
|
||
</div>
|
||
)}
|
||
</article>
|
||
))}
|
||
</div>
|
||
</section>
|
||
)}
|
||
</section>
|
||
<div className="safe-tip">
|
||
{isClaimOwner
|
||
? "以后再次打开原任务链接，填写相同微信号或手机号即可找回全部领取批次和分享记录。"
|
||
: "请保存当前分享链接；发布后仍需通过此链接回填第7天截图、曝光量和阅读量。"}
|
||
</div>
|
||
{toast && <div className="toast">{toast}</div>}
|
||
</main>
|
||
);
|
||
}
|
||
|
||
return (
|
||
<main className="portal-shell">
|
||
<header className="portal-topbar">
|
||
<div className="portal-brand"><span>K</span><strong>KOC LOOP</strong></div>
|
||
<span className="external-label">KOC领取页</span>
|
||
</header>
|
||
<section className="task-hero">
|
||
<div className="hero-copy">
|
||
<p className="micro">正在招募 · {payload.task.brand}</p>
|
||
<h1>{payload.task.name}</h1>
|
||
<p>领取后可查看完整笔记正文，每篇笔记独立回填发布信息。</p>
|
||
<div className="hero-meta">
|
||
<span>截止 {formatDate(payload.task.dueAt)}</span>
|
||
<span>剩余 {payload.task.availableQuantity} 篇</span>
|
||
</div>
|
||
</div>
|
||
<aside className="claim-card">
|
||
<div className="entry-switch" aria-label="领取入口">
|
||
<button
|
||
type="button"
|
||
className={entryMode === "claim" ? "active" : ""}
|
||
onClick={() => {
|
||
setEntryMode("claim");
|
||
setRecoveredClaims([]);
|
||
}}
|
||
>
|
||
领取新笔记
|
||
</button>
|
||
<button
|
||
type="button"
|
||
className={entryMode === "recover" ? "active" : ""}
|
||
onClick={() => {
|
||
setEntryMode("recover");
|
||
setRecoveredClaims([]);
|
||
}}
|
||
>
|
||
找回领取记录
|
||
</button>
|
||
</div>
|
||
{entryMode === "claim" ? (
|
||
<form onSubmit={claimNotes}>
|
||
<div>
|
||
<p className="micro">01 · 确认领取</p>
|
||
<h2>你要领取多少篇？</h2>
|
||
</div>
|
||
<label>
|
||
<span>微信号 / 手机号</span>
|
||
<input
|
||
value={claimantName}
|
||
onChange={(event) => setClaimantName(event.target.value)}
|
||
placeholder="请输入微信号或手机号"
|
||
autoCapitalize="none"
|
||
autoCorrect="off"
|
||
spellCheck={false}
|
||
maxLength={64}
|
||
required
|
||
/>
|
||
</label>
|
||
<div className="quantity-control">
|
||
<button type="button" onClick={() => setQuantity(Math.max(1, quantity - 1))}>−</button>
|
||
<div><strong>{quantity}</strong><span>篇</span></div>
|
||
<button
|
||
type="button"
|
||
onClick={() =>
|
||
setQuantity(Math.min(payload.task.availableQuantity || 1, quantity + 1))
|
||
}
|
||
>
|
||
＋
|
||
</button>
|
||
</div>
|
||
<button
|
||
className="claim-primary"
|
||
disabled={working || payload.task.availableQuantity === 0}
|
||
>
|
||
{payload.task.availableQuantity === 0
|
||
? "当前任务已领完"
|
||
: working
|
||
? "领取中…"
|
||
: `确认领取 ${quantity} 篇`}
|
||
</button>
|
||
<small>领取后系统会生成你的专属笔记清单</small>
|
||
</form>
|
||
) : (
|
||
<form onSubmit={recoverClaims}>
|
||
<div>
|
||
<p className="micro">找回历史记录</p>
|
||
<h2>继续之前领取的笔记</h2>
|
||
<p className="recover-intro">
|
||
输入领取时使用的微信号或手机号；同一任务多次领取会分批展示。
|
||
</p>
|
||
</div>
|
||
<label>
|
||
<span>领取时的微信号 / 手机号</span>
|
||
<input
|
||
value={claimantName}
|
||
onChange={(event) => setClaimantName(event.target.value)}
|
||
placeholder="需与领取时完全一致"
|
||
autoCapitalize="none"
|
||
autoCorrect="off"
|
||
spellCheck={false}
|
||
maxLength={64}
|
||
required
|
||
/>
|
||
</label>
|
||
<button className="claim-primary" disabled={working}>
|
||
{working ? "正在查找…" : "查找我的领取记录"}
|
||
</button>
|
||
{recoveredClaims.length > 0 && (
|
||
<div className="recovery-list">
|
||
{recoveredClaims.map((claim, index) => (
|
||
<button
|
||
type="button"
|
||
key={claim.claimToken}
|
||
onClick={() => void openRecoveredClaim(claim.claimToken)}
|
||
>
|
||
<span>第 {recoveredClaims.length - index} 批 · {formatDate(claim.createdAt, true)}</span>
|
||
<strong>{claim.firstTitle}</strong>
|
||
<small>{claim.completedCount}/{claim.quantity} 已回填</small>
|
||
<i>继续填写 →</i>
|
||
</button>
|
||
))}
|
||
</div>
|
||
)}
|
||
</form>
|
||
)}
|
||
</aside>
|
||
</section>
|
||
<section className="steps">
|
||
<div><span>1</span><strong>选择数量</strong><p>一次可领多篇</p></div>
|
||
<i />
|
||
<div><span>2</span><strong>逐篇查看</strong><p>标题正文完整展示</p></div>
|
||
<i />
|
||
<div><span>3</span><strong>单篇回填</strong><p>昵称、链接、截图一一对应</p></div>
|
||
</section>
|
||
<footer>由 KOC LOOP 提供任务与数据安全保障</footer>
|
||
{toast && <div className="toast">{toast}</div>}
|
||
</main>
|
||
);
|
||
}
|