sulaimaannaasif6866
01593dcbdc
Co-Authored-By: Devin AI <158243242+devin-ai-integration[bot]@users.noreply.github.com>
315 lines
11 KiB
TypeScript
315 lines
11 KiB
TypeScript
import { useEffect, useState } from "react";
|
||
import { api, ApiError } from "../api";
|
||
import type { SubmissionDetail, SubmissionRow } from "../types";
|
||
import { FIELD_LABELS } from "../types";
|
||
import { ArrowLeft, Check, X } from "lucide-react";
|
||
|
||
const STATUS_TABS = [
|
||
{ key: "pending", label: "待审核" },
|
||
{ key: "approved", label: "已通过" },
|
||
{ key: "rejected", label: "已驳回" },
|
||
];
|
||
|
||
const STATUS_BADGE: Record<string, string> = {
|
||
pending: "bg-amber-50 text-amber-700",
|
||
approved: "bg-emerald-50 text-emerald-700",
|
||
rejected: "bg-red-50 text-red-700",
|
||
};
|
||
const STATUS_TEXT: Record<string, string> = {
|
||
pending: "待审核",
|
||
approved: "已通过",
|
||
rejected: "已驳回",
|
||
};
|
||
|
||
export default function SubmissionsPage({ onPending }: { onPending?: (n: number) => void }) {
|
||
const [tab, setTab] = useState("pending");
|
||
const [rows, setRows] = useState<SubmissionRow[]>([]);
|
||
const [openId, setOpenId] = useState<string | null>(null);
|
||
const [error, setError] = useState("");
|
||
|
||
async function load() {
|
||
setError("");
|
||
try {
|
||
const res = await api.listSubmissions(tab, 1, 50);
|
||
setRows(res.items);
|
||
onPending?.(res.pending);
|
||
} catch (e) {
|
||
setError(e instanceof ApiError ? e.message : "加载失败");
|
||
}
|
||
}
|
||
|
||
useEffect(() => {
|
||
load();
|
||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||
}, [tab]);
|
||
|
||
if (openId) {
|
||
return (
|
||
<SubmissionView
|
||
id={openId}
|
||
onBack={() => {
|
||
setOpenId(null);
|
||
load();
|
||
}}
|
||
/>
|
||
);
|
||
}
|
||
|
||
return (
|
||
<div className="mx-auto max-w-5xl">
|
||
<div className="flex items-center gap-2 mb-4">
|
||
{STATUS_TABS.map((t) => (
|
||
<button
|
||
key={t.key}
|
||
onClick={() => setTab(t.key)}
|
||
className={`px-3 py-1.5 rounded-md text-sm ${
|
||
tab === t.key
|
||
? "bg-emerald-600 text-white"
|
||
: "bg-white border text-gray-600 hover:bg-gray-50"
|
||
}`}
|
||
>
|
||
{t.label}
|
||
</button>
|
||
))}
|
||
</div>
|
||
|
||
{error && (
|
||
<div className="mb-3 bg-red-50 text-red-700 text-sm rounded px-4 py-2">{error}</div>
|
||
)}
|
||
|
||
<div className="bg-white border rounded-lg overflow-hidden">
|
||
<table className="w-full text-sm">
|
||
<thead className="bg-gray-50 text-gray-500 text-left">
|
||
<tr>
|
||
<th className="px-4 py-2 font-medium">商品名称</th>
|
||
<th className="px-4 py-2 font-medium">条码</th>
|
||
<th className="px-4 py-2 font-medium">投稿人</th>
|
||
<th className="px-4 py-2 font-medium">类型</th>
|
||
<th className="px-4 py-2 font-medium">提交时间</th>
|
||
<th className="px-4 py-2 font-medium">状态</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody className="divide-y">
|
||
{rows.length === 0 ? (
|
||
<tr>
|
||
<td colSpan={6} className="px-4 py-8 text-center text-gray-400">
|
||
暂无投稿
|
||
</td>
|
||
</tr>
|
||
) : (
|
||
rows.map((r) => (
|
||
<tr
|
||
key={r.id}
|
||
onClick={() => setOpenId(r.id)}
|
||
className="cursor-pointer hover:bg-gray-50"
|
||
>
|
||
<td className="px-4 py-2 text-gray-800">{r.name}</td>
|
||
<td className="px-4 py-2 text-gray-500">{r.gtin || "—"}</td>
|
||
<td className="px-4 py-2 text-gray-500">{r.submitter_name || "匿名"}</td>
|
||
<td className="px-4 py-2">
|
||
<span className="text-xs text-gray-500">
|
||
{r.matched ? "补全已有商品" : "新建商品"}
|
||
</span>
|
||
</td>
|
||
<td className="px-4 py-2 text-gray-500">
|
||
{new Date(r.created_at).toLocaleString()}
|
||
</td>
|
||
<td className="px-4 py-2">
|
||
<span className={`text-xs rounded px-2 py-0.5 ${STATUS_BADGE[r.status]}`}>
|
||
{STATUS_TEXT[r.status]}
|
||
</span>
|
||
</td>
|
||
</tr>
|
||
))
|
||
)}
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
</div>
|
||
);
|
||
}
|
||
|
||
function Field({ label, value }: { label: string; value: React.ReactNode }) {
|
||
if (value === null || value === undefined || value === "") return null;
|
||
return (
|
||
<div className="flex py-1.5 text-sm">
|
||
<div className="w-28 shrink-0 text-gray-400">{label}</div>
|
||
<div className="text-gray-800 break-all">{value}</div>
|
||
</div>
|
||
);
|
||
}
|
||
|
||
function SubmissionView({ id, onBack }: { id: string; onBack: () => void }) {
|
||
const [d, setD] = useState<SubmissionDetail | null>(null);
|
||
const [error, setError] = useState("");
|
||
const [busy, setBusy] = useState(false);
|
||
const [rejecting, setRejecting] = useState(false);
|
||
const [reason, setReason] = useState("");
|
||
|
||
useEffect(() => {
|
||
api.getSubmission(id).then(setD).catch((e) => setError(e.message));
|
||
}, [id]);
|
||
|
||
async function approve() {
|
||
if (!confirm("确认通过该投稿？将写入正式商品库并记录来源 community。")) return;
|
||
setBusy(true);
|
||
setError("");
|
||
try {
|
||
await api.approveSubmission(id);
|
||
onBack();
|
||
} catch (e) {
|
||
setError(e instanceof ApiError ? e.message : "操作失败");
|
||
} finally {
|
||
setBusy(false);
|
||
}
|
||
}
|
||
|
||
async function reject() {
|
||
setBusy(true);
|
||
setError("");
|
||
try {
|
||
await api.rejectSubmission(id, reason.trim());
|
||
onBack();
|
||
} catch (e) {
|
||
setError(e instanceof ApiError ? e.message : "操作失败");
|
||
} finally {
|
||
setBusy(false);
|
||
}
|
||
}
|
||
|
||
if (error && !d) {
|
||
return (
|
||
<div>
|
||
<button onClick={onBack} className="text-sm text-gray-500 flex items-center gap-1 mb-4">
|
||
<ArrowLeft className="h-4 w-4" /> 返回
|
||
</button>
|
||
<div className="bg-red-50 text-red-700 text-sm rounded px-4 py-3">{error}</div>
|
||
</div>
|
||
);
|
||
}
|
||
if (!d) return <div className="text-gray-400">加载中…</div>;
|
||
|
||
const p = d.payload;
|
||
const nutri = Object.entries(p.nutriments || {});
|
||
|
||
return (
|
||
<div className="mx-auto max-w-3xl">
|
||
<button onClick={onBack} className="text-sm text-gray-500 flex items-center gap-1 mb-4">
|
||
<ArrowLeft className="h-4 w-4" /> 返回投稿队列
|
||
</button>
|
||
|
||
<div className="flex items-center justify-between">
|
||
<h2 className="text-lg font-semibold text-gray-800">{p.name}</h2>
|
||
<span className={`text-xs rounded px-2 py-0.5 ${STATUS_BADGE[d.status]}`}>
|
||
{STATUS_TEXT[d.status]}
|
||
</span>
|
||
</div>
|
||
|
||
{error && <div className="mt-3 bg-red-50 text-red-700 text-sm rounded px-4 py-2">{error}</div>}
|
||
|
||
{d.target_product_id && (
|
||
<div className="mt-3 text-sm bg-blue-50 text-blue-700 rounded px-4 py-2">
|
||
该条码已存在商品，通过后将<b>补全已有商品</b>（仅覆盖本次提供的字段）。
|
||
</div>
|
||
)}
|
||
|
||
<div className="bg-white border rounded-lg p-5 mt-4">
|
||
<h3 className="font-medium text-gray-700 mb-2">投稿内容</h3>
|
||
<Field label="商品名称" value={p.name} />
|
||
<Field label="条码" value={p.gtin} />
|
||
<Field label="品牌" value={p.brand_name} />
|
||
<Field
|
||
label="净含量"
|
||
value={p.net_content_value != null ? `${p.net_content_value} ${p.net_content_unit || ""}` : null}
|
||
/>
|
||
<Field label="产地" value={p.country_of_origin} />
|
||
<Field label="配料" value={p.ingredients_text} />
|
||
{nutri.length > 0 && (
|
||
<Field
|
||
label="营养成分"
|
||
value={
|
||
<span>
|
||
{p.nutrition_basis ? `(${p.nutrition_basis}) ` : ""}
|
||
{nutri.map(([k, v]) => `${FIELD_LABELS[k] || k}:${v}`).join("，")}
|
||
</span>
|
||
}
|
||
/>
|
||
)}
|
||
{p.images && p.images.length > 0 && (
|
||
<Field
|
||
label="图片"
|
||
value={
|
||
<div className="flex flex-wrap gap-2">
|
||
{p.images.map((im, i) => (
|
||
<a key={i} href={im.url} target="_blank" rel="noreferrer">
|
||
<img src={im.url} alt="" className="h-20 w-20 object-cover rounded border" />
|
||
</a>
|
||
))}
|
||
</div>
|
||
}
|
||
/>
|
||
)}
|
||
</div>
|
||
|
||
<div className="bg-white border rounded-lg p-5 mt-4">
|
||
<h3 className="font-medium text-gray-700 mb-2">投稿人 / 备注</h3>
|
||
<Field label="称呼" value={p.submitter_name || "匿名"} />
|
||
<Field label="联系方式" value={p.submitter_contact} />
|
||
<Field label="备注" value={p.note} />
|
||
<Field label="提交时间" value={new Date(d.created_at).toLocaleString()} />
|
||
{d.reviewed_by && <Field label="审核人" value={d.reviewed_by} />}
|
||
{d.review_note && <Field label="驳回原因" value={d.review_note} />}
|
||
{d.result_product_id && <Field label="收录商品ID" value={d.result_product_id} />}
|
||
</div>
|
||
|
||
{d.status === "pending" && (
|
||
<div className="mt-5">
|
||
{rejecting ? (
|
||
<div className="bg-white border rounded-lg p-4">
|
||
<label className="block text-xs text-gray-500 mb-1">驳回原因</label>
|
||
<input
|
||
className="w-full border rounded-md px-3 py-2 text-sm"
|
||
value={reason}
|
||
onChange={(e) => setReason(e.target.value)}
|
||
placeholder="例如：资料无法核实 / 重复投稿"
|
||
/>
|
||
<div className="mt-3 flex gap-2">
|
||
<button
|
||
onClick={reject}
|
||
disabled={busy}
|
||
className="px-4 py-2 rounded bg-red-600 text-white text-sm hover:bg-red-700 disabled:opacity-60"
|
||
>
|
||
确认驳回
|
||
</button>
|
||
<button
|
||
onClick={() => setRejecting(false)}
|
||
className="px-4 py-2 rounded border text-sm text-gray-600"
|
||
>
|
||
取消
|
||
</button>
|
||
</div>
|
||
</div>
|
||
) : (
|
||
<div className="flex gap-3">
|
||
<button
|
||
onClick={approve}
|
||
disabled={busy}
|
||
className="px-5 py-2.5 rounded-lg bg-emerald-600 text-white font-medium hover:bg-emerald-700 disabled:opacity-60 flex items-center gap-1.5"
|
||
>
|
||
<Check className="h-4 w-4" /> 通过并收录
|
||
</button>
|
||
<button
|
||
onClick={() => setRejecting(true)}
|
||
disabled={busy}
|
||
className="px-5 py-2.5 rounded-lg border text-gray-700 font-medium hover:bg-gray-50 flex items-center gap-1.5"
|
||
>
|
||
<X className="h-4 w-4" /> 驳回
|
||
</button>
|
||
</div>
|
||
)}
|
||
</div>
|
||
)}
|
||
</div>
|
||
);
|
||
}
|