+ return {!historyOpen &&
+}
diff --git a/frontend/src/AskUserPortal.jsx b/frontend/src/AskUserPortal.jsx
new file mode 100644
index 0000000..4d4fed6
--- /dev/null
+++ b/frontend/src/AskUserPortal.jsx
@@ -0,0 +1,925 @@
+import React, { useEffect, useMemo, useRef, useState } from "react";
+import {
+ Check,
+ ClipboardCheck,
+ Copy,
+ ExternalLink,
+ ImagePlus,
+ ListChecks,
+ LogOut,
+ MessageCircle,
+ PackageCheck,
+ ShieldCheck,
+ Trash2,
+} from "lucide-react";
+
+const SESSION_KEY = "ask_user_session";
+const EXHAUSTED_MESSAGE = "本次任务已被领取完，请关注下一个任务！";
+const fileKey = (file) => `${file.name}-${file.size}-${file.lastModified}`;
+const maskPhone = (phone = "") =>
+ phone.replace(/(\d{3})\d{4}(\d{4})/, "$1****$2");
+
+function getTaskNo() {
+ const segments = window.location.pathname.split("/").filter(Boolean);
+ return segments[1] || "latest";
+}
+
+function PhoneLogin({ api, onLogin }) {
+ const [phone, setPhone] = useState("");
+ const [code, setCode] = useState("");
+ const [busy, setBusy] = useState(false);
+ const [sending, setSending] = useState(false);
+ const [cooldown, setCooldown] = useState(0);
+ const [error, setError] = useState("");
+ const [devCode, setDevCode] = useState("");
+ useEffect(() => {
+ if (!cooldown) return undefined;
+ const timer = window.setInterval(() => setCooldown((value) => Math.max(0, value - 1)), 1000);
+ return () => window.clearInterval(timer);
+ }, [cooldown]);
+ async function sendCode() {
+ if (!/^1\d{10}$/.test(phone)) return setError("请输入正确的 11 位手机号码");
+ setSending(true); setError("");
+ try {
+ const result = await api("/api/ask/auth/send-code", { method: "POST", body: JSON.stringify({ phone }) });
+ setCooldown(result.data.retry_after || 60); setDevCode(result.data.dev_code || "");
+ } catch (requestError) { setError(requestError.message); } finally { setSending(false); }
+ }
+
+ async function submit(event) {
+ event.preventDefault();
+ if (!/^1\d{10}$/.test(phone)) {
+ setError("请输入正确的 11 位手机号码");
+ return;
+ }
+ if (!/^\d{6}$/.test(code)) { setError("请输入6位验证码"); return; }
+ setBusy(true);
+ setError("");
+ try {
+ const result = await api("/api/ask/auth/phone-login", {
+ method: "POST",
+ body: JSON.stringify({ phone, code }),
+ });
+ localStorage.setItem(SESSION_KEY, JSON.stringify(result.data));
+ onLogin(result.data);
+ } catch (requestError) {
+ setError(requestError.message);
+ } finally {
+ setBusy(false);
+ }
+ }
+
+ return (
+
+
+
+
+
+ 淘宝问答运营官方承接通道
+
+ 官方认证
+
+
+
+
+ );
+}
+
+function TaskExhausted({ session, onLogout }) {
+ return (
+
+
+
+
+
+ 淘宝问答运营官方承接通道
+
+ 官方认证
+
+
+
+
+
+ 任务已领完
+ 本次任务已被领取完
+ 当前链接中的问题已全部分配给其他用户，请关注下一个任务！
+
+ 当前账号：{session.user_id} · {maskPhone(session.phone)}
+
+
+
+
+
+ );
+}
+
+function Header({
+ session,
+ assignment,
+ onLogout,
+ step,
+ view,
+ onOpenHistory,
+ onOpenClaim,
+}) {
+ return (
+ <>
+
+
+
+ 淘宝问答运营官方承接通道
+
+ 官方认证
+
+
+ 问
+
+ 问大家提问用户
+ 手机已绑定
+
+ ID：{session.user_id} · {maskPhone(session.phone)}
+
+
+
+
+
+
+ );
+}
+
+function SelectQuestions({
+ assignment,
+ selected,
+ setSelected,
+ onConfirm,
+ busy,
+}) {
+ const isSubmitted = ["待审核", "已通过"].includes(assignment.status);
+ const isUsed = (item) => item.used || (isSubmitted && item.selected);
+ const usedCount = assignment.used_count ?? assignment.questions.filter(isUsed).length;
+ const remainingCount = assignment.remaining_count ?? Math.max(assignment.questions.length - usedCount, 0);
+ const selectableQuestions = assignment.questions.filter((item) => !isUsed(item));
+ const allSelected = selectableQuestions.length > 0 && selectableQuestions.every((item) =>
+ selected.includes(item.id),
+ );
+ function toggle(id) {
+ if (isUsed(assignment.questions.find((item) => item.id === id))) return;
+ setSelected((current) =>
+ current.includes(id)
+ ? current.filter((value) => value !== id)
+ : [...current, id],
+ );
+ }
+ return (
+ <>
+
+
+
+ 任务ID
+
+ {assignment.task_id}
+
+
+
+
+ 本任务认领进度
+ 每个链接最多认领 {assignment.questions.length} 条
+
+
+ 已认领 {usedCount} / {assignment.questions.length}
+
+
+
+
+
+ {remainingCount
+ ? `还可继续选择 ${remainingCount} 条问题`
+ : "本任务认领额度已达上限"}
+
+
+
+
+
+
+ 请选择提问内容（共 {assignment.questions.length} 题）
+
+
+
+
+ {assignment.questions.map((item) => {
+ const active = selected.includes(item.id);
+ return (
+
+ );
+ })}
+
+
+
+
+ );
+}
+
+function ConfirmStage({
+ assignment,
+ api,
+ session,
+ taskNo,
+ onSubmitted,
+ setError,
+}) {
+ const selectedQuestions = assignment.questions.filter(
+ (item) => item.selected,
+ );
+ const [files, setFiles] = useState([]);
+ const [paymentFile, setPaymentFile] = useState(null);
+ const [payeeName, setPayeeName] = useState("");
+ const [reviewOpen, setReviewOpen] = useState(false);
+ const [busy, setBusy] = useState(false);
+ const [copiedId, setCopiedId] = useState(null);
+ const inputRef = useRef(null);
+ const paymentInputRef = useRef(null);
+ const previews = useMemo(
+ () => files.map((file) => ({ file, url: URL.createObjectURL(file) })),
+ [files],
+ );
+ useEffect(
+ () => () => previews.forEach((item) => URL.revokeObjectURL(item.url)),
+ [previews],
+ );
+ function addFiles(list) {
+ const images = Array.from(list).filter((file) =>
+ /^image\/(jpeg|png|webp)$/.test(file.type),
+ );
+ setFiles((current) =>
+ [...current, ...images].filter(
+ (file, index, all) =>
+ all.findIndex((row) => fileKey(row) === fileKey(file)) === index,
+ ),
+ );
+ }
+ async function copyQuestion(item) {
+ try {
+ await navigator.clipboard.writeText(item.question);
+ setCopiedId(item.id);
+ window.setTimeout(
+ () => setCopiedId((current) => (current === item.id ? null : current)),
+ 1500,
+ );
+ } catch {
+ setCopiedId(null);
+ }
+ }
+ async function submit() {
+ setBusy(true);
+ setError("");
+ const body = new FormData();
+ body.append("token", session.token);
+ files.forEach((file) => body.append("files", file));
+ body.append("payment_file", paymentFile);
+ body.append("payee_name", payeeName);
+ try {
+ const result = await api(
+ `/api/ask/tasks/${encodeURIComponent(taskNo)}/submission`,
+ {
+ method: "POST",
+ body,
+ },
+ );
+ setReviewOpen(false);
+ onSubmitted(result.data);
+ } catch (requestError) {
+ setError(requestError.message);
+ } finally {
+ setBusy(false);
+ }
+ }
+
+ return (
+
+
+
+
+ 问大家核验商品
+ {assignment.task_id}
+
+
+
+
+
+
+ 官方任务商品
+
{assignment.product_name}
+
+
+
+
+ 已选提问内容（共 {selectedQuestions.length} 题）
+ 请在淘宝提问对应内容
+
+ {selectedQuestions.map((item, index) => (
+
+ #{index + 1}
+ {item.question}
+
+
+ ))}
+
+
+
+
+ 支持多图 · 可多次添加 · JPG/PNG/WEBP
+ 已上传 {files.length} 张
+
+
+ {previews.map(({ file, url }, index) => (
+
+ 
+
+ 图 {index + 1}
+
+ ))}
+
+
+
+
+ {reviewOpen && (
+
+
+
+
+
+ 提交审核核对
+ 请确认凭证信息无误，提交后将锁定审核
+
+
+
+ 任务编号（TaskID）
+ {assignment.task_id}
+
+
+ 已完成问题
+ {selectedQuestions.length} 条（已认领）
+
+ {selectedQuestions.map((item) => (
+
{item.question}
+ ))}
+
+ 提问截图
+ 已上传（{files.length}张）
+
+
+ 收款码
+ 已上传
+
+
+
+ )}
+
+
+ {passed ? "✓" : assignment.status === "未通过" ? "!" : "⌁"}
+ {assignment.status}
+
+ {pending
+ ? "任务正在审核，请耐心等待。"
+ : passed
+ ? "运营审核已通过"
+ : "运营审核未通过"}
+
+
+ {pending
+ ? "审核专员正在核验您的淘宝提问截图与发布有效性，核验通过后将自动更新状态。"
+ : passed
+ ? "您提交的提问凭证已经核验通过，本次任务审核完成。"
+ : "请根据运营反馈修改截图后重新提交审核。"}
+
+
+
提交记录凭据
+
+ - 任务ID：
+ - {assignment.task_id}
+ - 提交问题：
+ -
+ {assignment.questions.filter((item) => item.selected).length} 条
+
+ - 提交时间：
+ -
+ {new Date(assignment.updated_at).toLocaleString("zh-CN", {
+ hour12: false,
+ })}
+
+ - 锁定状态：
+ - {pending ? "已锁定不可撤销" : assignment.status}
+
+
+
+
+
+
+
+ 全部任务（{history.length}）
+ 进行中 {inProgress}
+ 已完成 {completed}
+
+ {filtered.length === 0 ? (
+
暂无历史提交任务
+ ) : (
+ filtered.map((item) => (
+
+
+
+ {item.questions
+ .filter((question) => question.selected)
+ .map((question) => question.question)
+ .join("、") || "尚未选择问题"}
+
+
+ 认领问题{" "}
+ {item.questions.filter((question) => question.selected).length} 条
+ · 更新时间{" "}
+ {new Date(item.updated_at).toLocaleTimeString("zh-CN", {
+ hour12: false,
+ })}
+
+
+
+ ))
+ )}
+
+
创建任务
通过顶部切换创建「提问任务」或「回答任务」。
+
+
ⓘ 回答截图审核用户提交截图后会立即进入此审核队列。按「用户ID」分组核对识别的问题，勾选需要派发的问题，回答可重新生成或直接编辑，确认后生成任务。
+ {error && {error}
}
+
+
+ 已选 {selectedCount} / {editableQuestions.length} 题
+
+
+ {records.length === 0 &&
暂无待审核的回答截图
}
+ {records.map(record => {
+ const locked = record.status === '待用户完成'
+ const selected = record.questions.filter(question => question.selected).length
+ const allSelected = record.questions.length > 0 && selected === record.questions.length
+ const identifying = record.questions.length === 0 && ['待筛选', '待运营派发'].includes(record.status)
+ const open = expanded[record.id]
+ return
+
+ {open && record.questions.map(question =>
+
+
+
Q{question.sequence_no}：{question.question}
+
+ {question.product_image &&
}
+
{question.product_title}来源：模拟OCR识别
+ {question.source_image &&
识图原始截图：
}
+
+