4464 lines
154 KiB
JavaScript
4464 lines
154 KiB
JavaScript
import React, { useEffect, useRef, useState } from "react";
|
||
import { createRoot } from "react-dom/client";
|
||
import {
|
||
BookOpen,
|
||
ClipboardList,
|
||
Database,
|
||
BarChart3,
|
||
FileText,
|
||
LogOut,
|
||
MessageCircle,
|
||
Plus,
|
||
Search,
|
||
Settings,
|
||
ShieldCheck,
|
||
Sparkles,
|
||
Users,
|
||
} from "lucide-react";
|
||
import "./styles.css";
|
||
import "./admin.css";
|
||
import CreateAnswerTasksPageV2 from "./CreateAnswerTasksPage.jsx";
|
||
import AnswerUserPortalV2 from "./AnswerUserPortal.jsx";
|
||
import TaskBoardPage, { clearTaskBoardCache } from "./TaskBoardPage.jsx";
|
||
import ReviewCenterPage from "./ReviewCenterPage.jsx";
|
||
import CreateAskTasksPage from "./CreateAskTasksPage.jsx";
|
||
import AskUserPortal from "./AskUserPortal.jsx";
|
||
import RefundUploadPage from "./RefundUploadPage.jsx";
|
||
import { analyzeProductIntent, validateGenerationOptions } from "./productIntent.js";
|
||
import { readPageCache, writePageCache } from "./pageCache.js";
|
||
|
||
// 兼容公共回答链接末尾有无斜杠，避免 /answer 被识别为运营后台路由。
|
||
if (window.location.pathname === "/answer")
|
||
window.history.replaceState(null, "", "/answer/");
|
||
|
||
const publicPortalUserAgent = navigator.userAgent || "";
|
||
const isDingTalkMobile =
|
||
(/DingTalk|AliApp\(DT/i.test(publicPortalUserAgent) &&
|
||
/Android|iPhone|iPad|iPod|Mobile/i.test(publicPortalUserAgent)) ||
|
||
(new URLSearchParams(window.location.search).get("from") === "dingtalk" &&
|
||
window.matchMedia("(max-width: 700px)").matches);
|
||
if (isDingTalkMobile) document.documentElement.classList.add("dingtalk-mobile");
|
||
|
||
const API = import.meta.env.VITE_API_BASE || "";
|
||
const Z = {
|
||
brand: "\u3010\u95ee\u5927\u5bb6\u3011",
|
||
backend: "\u8fd0\u8425\u7ba1\u7406\u540e\u53f0",
|
||
subtitle:
|
||
"\u667a\u80fd\u95ee\u7b54\u5e93\u4e0e\u4efb\u52a1\u7ba1\u7406\u7cfb\u7edf",
|
||
username: "\u7528\u6237\u540d",
|
||
password: "\u5bc6\u7801",
|
||
login: "\u767b\u5f55\u540e\u53f0",
|
||
register: "\u6ce8\u518c\u7528\u6237",
|
||
displayName: "\u663e\u793a\u540d\u79f0",
|
||
};
|
||
|
||
async function api(path, options = {}) {
|
||
const isForm = options.body instanceof FormData;
|
||
const response = await fetch(`${API}${path}`, {
|
||
credentials: "include",
|
||
headers: isForm
|
||
? { ...(options.headers || {}) }
|
||
: { "Content-Type": "application/json", ...(options.headers || {}) },
|
||
...options,
|
||
});
|
||
const data = await response.json().catch(() => ({}));
|
||
if (!response.ok) {
|
||
const message = data.detail || `请求失败（HTTP ${response.status}）`;
|
||
throw new Error(message);
|
||
}
|
||
return data;
|
||
}
|
||
|
||
async function readReferenceFile(file, requestApi = api) {
|
||
if (!file) return "";
|
||
if (/\.xlsx$/i.test(file.name)) {
|
||
const body = new FormData();
|
||
body.append("file", file);
|
||
const result = await requestApi("/api/admin/reference-qa/parse", { method: "POST", body });
|
||
return result.data.text || "";
|
||
}
|
||
const text = await file.text();
|
||
if (file.name.toLowerCase().endsWith(".json")) {
|
||
try {
|
||
const data = JSON.parse(text);
|
||
if (Array.isArray(data)) return data.map((item) => `问题：${item.question || item.q || ""}\n回答：${(item.answers || item.answer || item.a || []).toString()}`).join("\n");
|
||
if (Array.isArray(data.items)) return data.items.map((item) => `问题：${item.question || ""}\n回答：${(item.answers || []).join("；")}`).join("\n");
|
||
} catch {
|
||
// Keep the original text so the backend/model can still interpret it.
|
||
}
|
||
}
|
||
return text.slice(0, 20000);
|
||
}
|
||
|
||
function LoginPage({ onLogin }) {
|
||
const [username, setUsername] = useState("");
|
||
const [password, setPassword] = useState("");
|
||
const [error, setError] = useState("");
|
||
const [loading, setLoading] = useState(false);
|
||
const [dingtalkLoading, setDingtalkLoading] = useState(false);
|
||
const [autoDingtalkLogin, setAutoDingtalkLogin] = useState(false);
|
||
const [dingtalkLoginFailed, setDingtalkLoginFailed] = useState(false);
|
||
const autoLoginStarted = useRef(false);
|
||
const query = new URLSearchParams(window.location.search);
|
||
const getDingTalkBridge = () => window.dd || window.DingTalkPC || window.dingtalk;
|
||
// The DingTalk SDK is loaded on every page, including a normal browser.
|
||
// Do not treat the mere presence of `window.dd` as proof that we are inside
|
||
// the DingTalk workbench, otherwise local/browser users lose password login.
|
||
const inDingtalkWorkbench = /DingTalk|AliApp\(DT/i.test(navigator.userAgent || "") || query.get("from") === "dingtalk";
|
||
function loadDingTalkSdk() {
|
||
if (getDingTalkBridge()) return Promise.resolve(getDingTalkBridge());
|
||
return new Promise((resolve, reject) => {
|
||
const existing = document.querySelector('script[data-dingtalk-sdk="true"]');
|
||
const urls = [
|
||
existing?.src || "https://g.alicdn.com/dingding/dingtalk-jsapi/2.10.3/dingtalk.open.js",
|
||
"https://g.alicdn.com/dingding/dingtalk-jsapi/2.15.15/dingtalk.open.js",
|
||
];
|
||
let urlIndex = 0;
|
||
let settled = false;
|
||
const finish = () => {
|
||
if (settled) return;
|
||
if (getDingTalkBridge()) resolve(getDingTalkBridge());
|
||
else if (urlIndex < urls.length - 1) {
|
||
urlIndex += 1;
|
||
const fallback = document.createElement("script");
|
||
fallback.src = urls[urlIndex];
|
||
fallback.async = true;
|
||
fallback.dataset.dingtalkSdk = "true";
|
||
fallback.onload = finish;
|
||
fallback.onerror = finish;
|
||
document.head.appendChild(fallback);
|
||
} else {
|
||
settled = true;
|
||
reject(new Error("钉钉JSAPI未加载，请确认应用类型为H5微应用，并将 ask.dieya.net.cn 加入应用安全域名"));
|
||
}
|
||
};
|
||
if (existing) {
|
||
existing.addEventListener("load", finish, { once: true });
|
||
existing.addEventListener("error", finish, { once: true });
|
||
window.setTimeout(finish, 5000);
|
||
return;
|
||
}
|
||
const script = document.createElement("script");
|
||
script.src = urls[0];
|
||
script.async = true;
|
||
script.dataset.dingtalkSdk = "true";
|
||
script.onload = finish;
|
||
script.onerror = finish;
|
||
document.head.appendChild(script);
|
||
window.setTimeout(finish, 8000);
|
||
});
|
||
}
|
||
async function requestDingTalkAuthCode(corpId) {
|
||
const ding = (await loadDingTalkSdk()) || getDingTalkBridge();
|
||
return new Promise((resolve, reject) => {
|
||
if (!ding) return reject(new Error("未检测到钉钉JSAPI，请将当前地址配置为钉钉H5微应用首页，并加入应用安全域名"));
|
||
let settled = false;
|
||
const finish = (callback) => (value) => {
|
||
if (settled) return;
|
||
settled = true;
|
||
callback(value);
|
||
};
|
||
const success = finish((result) => {
|
||
const code = result?.code || result?.authCode;
|
||
code ? resolve(code) : reject(new Error("钉钉未返回免登授权码"));
|
||
});
|
||
const failure = finish((error) => reject(new Error(error?.errorMessage || error?.message || "钉钉免登授权失败")));
|
||
const invoke = () => {
|
||
try {
|
||
const requestAuthCode = ding.runtime?.permission?.requestAuthCode || ding.permission?.requestAuthCode;
|
||
if (requestAuthCode) {
|
||
requestAuthCode.call(ding.runtime?.permission || ding.permission, { corpId, onSuccess: success, onFail: failure });
|
||
return;
|
||
}
|
||
if (typeof ding.getAuthCode === "function") {
|
||
ding.getAuthCode({ onSuccess: success, onFail: failure });
|
||
return;
|
||
}
|
||
throw new Error("当前钉钉版本不支持工作台免登JSAPI");
|
||
} catch (error) {
|
||
failure(error);
|
||
}
|
||
};
|
||
if (typeof ding.ready === "function") ding.ready(invoke);
|
||
else invoke();
|
||
window.setTimeout(() => failure(new Error("钉钉免登请求超时，请确认应用已发布并开通免登权限")), 10000);
|
||
});
|
||
}
|
||
async function loginWithDingTalkWorkbench() {
|
||
setDingtalkLoading(true);
|
||
setError("");
|
||
setDingtalkLoginFailed(false);
|
||
try {
|
||
const config = await api("/api/admin/auth/dingtalk/config");
|
||
if (!config.data?.enabled || !config.data?.corp_id) throw new Error("钉钉工作台免登尚未配置，请联系管理员");
|
||
const code = await requestDingTalkAuthCode(config.data.corp_id);
|
||
const result = await api("/api/admin/auth/dingtalk/workbench", { method: "POST", body: JSON.stringify({ code }) });
|
||
onLogin(result.data.user);
|
||
} catch (err) {
|
||
setError(err.message);
|
||
setDingtalkLoginFailed(true);
|
||
setAutoDingtalkLogin(false);
|
||
setDingtalkLoading(false);
|
||
}
|
||
}
|
||
async function submit(event) {
|
||
event.preventDefault();
|
||
setError("");
|
||
if (!username.trim() || !password)
|
||
return setError("\u8bf7\u5b8c\u6574\u586b\u5199\u4fe1\u606f");
|
||
setLoading(true);
|
||
try {
|
||
const result = await api("/api/admin/auth/login", {
|
||
method: "POST",
|
||
body: JSON.stringify({ username, password }),
|
||
});
|
||
onLogin(result.data.user);
|
||
} catch (err) {
|
||
setError(err.message);
|
||
} finally {
|
||
setLoading(false);
|
||
}
|
||
}
|
||
useEffect(() => {
|
||
if (!inDingtalkWorkbench || autoLoginStarted.current) return;
|
||
autoLoginStarted.current = true;
|
||
setAutoDingtalkLogin(true);
|
||
loginWithDingTalkWorkbench();
|
||
}, []);
|
||
if (autoDingtalkLogin) {
|
||
return <div className="loading-screen">正在验证钉钉身份…</div>;
|
||
}
|
||
if (inDingtalkWorkbench && dingtalkLoginFailed) {
|
||
return (
|
||
<main className="login-shell">
|
||
<section className="login-card dingtalk-workbench-card">
|
||
<div className="brand-mark"><MessageCircle size={28} /></div>
|
||
<div className="brand-title">{Z.brand}</div>
|
||
<h1>钉钉工作台免登</h1>
|
||
<p className="login-subtitle">正在使用当前钉钉账号验证身份，不需要输入后台账号密码。</p>
|
||
<div className="form-error">{error || "钉钉免登失败，请稍后重试"}</div>
|
||
<button className="primary-button login-button" type="button" onClick={() => { setAutoDingtalkLogin(true); loginWithDingTalkWorkbench(); }} disabled={dingtalkLoading}>
|
||
{dingtalkLoading ? "正在验证钉钉身份…" : "重新验证"}
|
||
</button>
|
||
<div className="login-hint">请从钉钉工作台打开此应用，并确认应用已发布、配置安全域名和免登权限。</div>
|
||
</section>
|
||
</main>
|
||
);
|
||
}
|
||
return (
|
||
<main className="login-shell">
|
||
<div className="login-decoration">
|
||
<div className="orb orb-a" />
|
||
<div className="orb orb-b" />
|
||
<div className="grid-lines" />
|
||
</div>
|
||
<section className="login-card">
|
||
<div className="brand-mark">
|
||
<MessageCircle size={28} />
|
||
</div>
|
||
<div className="brand-title">{Z.brand}</div>
|
||
<h1>{Z.backend}</h1>
|
||
<p className="login-subtitle">从钉钉工作台进入，使用钉钉身份安全登录</p>
|
||
{!inDingtalkWorkbench && <div className="login-divider"><span>运营后台账号登录</span></div>}
|
||
<form onSubmit={submit} className="login-form">
|
||
<label>
|
||
{Z.username}
|
||
<input
|
||
autoFocus
|
||
value={username}
|
||
onChange={(event) => setUsername(event.target.value)}
|
||
placeholder={"\u8bf7\u8f93\u5165\u7528\u6237\u540d"}
|
||
/>
|
||
</label>
|
||
<label>
|
||
{Z.password}
|
||
<input
|
||
type="password"
|
||
value={password}
|
||
onChange={(event) => setPassword(event.target.value)}
|
||
placeholder={
|
||
"\u8bf7\u8f93\u5165\u5bc6\u7801"
|
||
}
|
||
/>
|
||
</label>
|
||
{error && <div className="form-error">{error}</div>}
|
||
<button className="primary-button login-button" disabled={loading}>
|
||
{loading ? "\u767b\u5f55\u4e2d\u2026" : Z.login}
|
||
</button>
|
||
</form>
|
||
<div className="login-hint">
|
||
{
|
||
"\u8fd0\u8425\u8d26\u53f7\u767b\u5f55 \u00b7 \u7528\u6237 A/B \u8bf7\u4f7f\u7528\u72ec\u7acb\u4efb\u52a1\u94fe\u63a5"
|
||
}
|
||
</div>
|
||
</section>
|
||
</main>
|
||
);
|
||
}
|
||
|
||
const BASE_ITEMS = [
|
||
{
|
||
id: "assistant",
|
||
icon: Sparkles,
|
||
label: "\u95ee\u7b54\u52a9\u624b",
|
||
group: "\u95ee\u7b54\u7ba1\u7406",
|
||
tag: "AI",
|
||
},
|
||
{
|
||
id: "library",
|
||
icon: Database,
|
||
label: "\u95ee\u7b54\u5e93",
|
||
group: "\u95ee\u7b54\u7ba1\u7406",
|
||
},
|
||
{
|
||
id: "create",
|
||
icon: Plus,
|
||
label: "\u521b\u5efa\u4efb\u52a1",
|
||
group: "\u4efb\u52a1\u7ba1\u7406",
|
||
},
|
||
{
|
||
id: "board",
|
||
icon: ClipboardList,
|
||
label: "\u4efb\u52a1\u770b\u677f",
|
||
group: "\u4efb\u52a1\u7ba1\u7406",
|
||
},
|
||
{
|
||
id: "review",
|
||
icon: ShieldCheck,
|
||
label: "\u5ba1\u6838\u4e2d\u5fc3",
|
||
group: "\u4efb\u52a1\u7ba1\u7406",
|
||
},
|
||
{
|
||
id: "guide",
|
||
icon: BookOpen,
|
||
label: "\u4f7f\u7528\u8bf4\u660e",
|
||
group: "\u4efb\u52a1\u7ba1\u7406",
|
||
href: "https://alidocs.dingtalk.com/i/nodes/amweZ92PV6w4kNGdcqEmwAMYJxEKBD6p?corpId=dinga78635fdab496f8735c2f4657eb6378f&doc_type=wiki_doc&editNotify=true&iframeQuery=utm_medium=im_card&utm_source=im&utm_medium=im_card&utm_scene=team_space&utm_source=im",
|
||
},
|
||
];
|
||
const ADMIN_ITEMS = [
|
||
{
|
||
id: "usage",
|
||
icon: BarChart3,
|
||
label: "使用统计",
|
||
group: "系统管理",
|
||
},
|
||
{
|
||
id: "users",
|
||
icon: Users,
|
||
label: "\u7528\u6237\u7ba1\u7406",
|
||
group: "\u7cfb\u7edf\u7ba1\u7406",
|
||
},
|
||
{
|
||
id: "logs",
|
||
icon: FileText,
|
||
label: "\u767b\u5f55\u65e5\u5fd7",
|
||
group: "\u7cfb\u7edf\u7ba1\u7406",
|
||
},
|
||
{
|
||
id: "settings",
|
||
icon: Settings,
|
||
label: "\u7cfb\u7edf\u914d\u7f6e",
|
||
group: "\u7cfb\u7edf\u7ba1\u7406",
|
||
},
|
||
];
|
||
|
||
function Sidebar({ user, active, setActive, reviewBadge }) {
|
||
const baseItems = BASE_ITEMS.map((item) =>
|
||
item.id === "review" ? { ...item, badge: reviewBadge } : item,
|
||
);
|
||
const items =
|
||
user.role_code === "super_admin"
|
||
? [...baseItems, ...ADMIN_ITEMS]
|
||
: baseItems;
|
||
const groups = [...new Set(items.map((item) => item.group))];
|
||
return (
|
||
<aside className="sidebar">
|
||
<div className="side-brand">
|
||
<div className="brand-icon">
|
||
<MessageCircle size={21} />
|
||
</div>
|
||
<div>
|
||
<strong>{Z.brand}</strong>
|
||
<span>{"\u8fd0\u8425\u667a\u80fd\u63a7\u5236\u53f0 v2.4"}</span>
|
||
</div>
|
||
</div>
|
||
<div className="nav-group">
|
||
{groups.map((group) => (
|
||
<React.Fragment key={group}>
|
||
<div className="nav-title">{group}</div>
|
||
{items
|
||
.filter((item) => item.group === group)
|
||
.map((item) => (
|
||
<NavItem
|
||
key={item.id}
|
||
item={item}
|
||
active={active}
|
||
setActive={setActive}
|
||
/>
|
||
))}
|
||
</React.Fragment>
|
||
))}
|
||
</div>
|
||
<div className="system-status">
|
||
<span className="status-dot" />
|
||
{"\u7cfb\u7edf\u72b6\u6001\uff1a\u6b63\u5e38\u8fd0\u884c"}
|
||
</div>
|
||
</aside>
|
||
);
|
||
}
|
||
function NavItem({ item, active, setActive }) {
|
||
const Icon = item.icon;
|
||
if (item.href) {
|
||
return (
|
||
<a
|
||
className="nav-item"
|
||
href={item.href}
|
||
target="_blank"
|
||
rel="noopener noreferrer"
|
||
title="在新标签页打开使用说明"
|
||
>
|
||
<Icon size={17} />
|
||
<span>{item.label}</span>
|
||
<em aria-hidden="true">↗</em>
|
||
</a>
|
||
);
|
||
}
|
||
return (
|
||
<button
|
||
className={`nav-item ${active === item.id ? "active" : ""}`}
|
||
onClick={() => setActive(item.id)}
|
||
>
|
||
<Icon size={17} />
|
||
<span>{item.label}</span>
|
||
{item.tag && <em>{item.tag}</em>}
|
||
{item.badge && <b>{item.badge}</b>}
|
||
</button>
|
||
);
|
||
}
|
||
function Topbar({ user, onLogout }) {
|
||
return (
|
||
<header className="topbar">
|
||
<div />
|
||
<div className="top-actions">
|
||
<div className="user-menu">
|
||
<div className="avatar">{user.display_name.slice(0, 1)}</div>
|
||
<div>
|
||
<strong>
|
||
{user.display_name}（{user.role_label}）
|
||
</strong>
|
||
</div>
|
||
<button
|
||
className="logout-btn"
|
||
onClick={onLogout}
|
||
title={"\u9000\u51fa\u767b\u5f55"}
|
||
>
|
||
<LogOut size={16} />
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</header>
|
||
);
|
||
}
|
||
function PageHeading({ title, description, actions }) {
|
||
return (
|
||
<div className="page-heading">
|
||
<div>
|
||
<h2>{title}</h2>
|
||
<p>{description}</p>
|
||
</div>
|
||
{actions && <div className="heading-actions">{actions}</div>}
|
||
</div>
|
||
);
|
||
}
|
||
function AssistantPage() {
|
||
const [form, setForm] = useState({
|
||
product_name: "泊泉雅三色修护凝精华",
|
||
category: "",
|
||
benefits: "",
|
||
selling_points: "",
|
||
language_style: "",
|
||
target_group: "",
|
||
usage_scene: "",
|
||
purchase_channel: "",
|
||
question_count: "",
|
||
answers_per_question: "",
|
||
answer_requirement: "",
|
||
seed_style: false,
|
||
});
|
||
const [items, setItems] = useState([]);
|
||
const [loading, setLoading] = useState(false);
|
||
const [error, setError] = useState("");
|
||
const [manualOpen, setManualOpen] = useState(false);
|
||
const [referenceFile, setReferenceFile] = useState(null);
|
||
const [referenceQa, setReferenceQa] = useState("");
|
||
const update = (key, value) =>
|
||
setForm((current) => ({ ...current, [key]: value }));
|
||
async function generate() {
|
||
const intentError = analyzeProductIntent([
|
||
form.product_name,
|
||
form.category,
|
||
form.benefits,
|
||
form.selling_points,
|
||
]);
|
||
if (intentError) {
|
||
setError(intentError);
|
||
setItems([]);
|
||
return;
|
||
}
|
||
const optionsError = validateGenerationOptions(form);
|
||
if (optionsError) {
|
||
setError(optionsError);
|
||
return;
|
||
}
|
||
setError("");
|
||
setLoading(true);
|
||
try {
|
||
const reference_qa = referenceFile ? await readReferenceFile(referenceFile, api) : referenceQa;
|
||
const result = await api("/api/admin/qa/generate", {
|
||
method: "POST",
|
||
body: JSON.stringify({
|
||
...form,
|
||
question_count: Number(form.question_count),
|
||
answers_per_question: Number(form.answers_per_question) || 2,
|
||
reference_qa,
|
||
}),
|
||
});
|
||
setItems(result.data.items);
|
||
} catch (err) {
|
||
setError(err.message);
|
||
setItems([]);
|
||
} finally {
|
||
setLoading(false);
|
||
}
|
||
}
|
||
function toggle(id) {
|
||
setItems((current) =>
|
||
current.map((item) =>
|
||
item.id === id ? { ...item, accepted: !item.accepted } : item,
|
||
),
|
||
);
|
||
}
|
||
function acceptAll() {
|
||
setItems((current) =>
|
||
current.map((item) => ({ ...item, accepted: true, status: "已采纳" })),
|
||
);
|
||
}
|
||
function edit(item) {
|
||
const question = window.prompt("编辑问题", item.question);
|
||
if (question === null) return;
|
||
const answer = window.prompt(
|
||
"编辑回答（多个回答用换行分隔）",
|
||
item.answers.join("\n"),
|
||
);
|
||
if (answer === null) return;
|
||
setItems((current) =>
|
||
current.map((row) =>
|
||
row.id === item.id
|
||
? {
|
||
...row,
|
||
question: question.trim() || row.question,
|
||
answers: answer
|
||
.split("\n")
|
||
.map((value) => value.trim())
|
||
.filter(Boolean),
|
||
status: "待采纳",
|
||
}
|
||
: row,
|
||
),
|
||
);
|
||
}
|
||
const addManual = (question, answers) => {
|
||
setItems((current) => [
|
||
...current,
|
||
{
|
||
id: `Q${String(current.length + 1).padStart(3, "0")}`,
|
||
question,
|
||
answers,
|
||
source: "手动添加",
|
||
status: "待采纳",
|
||
accepted: false,
|
||
},
|
||
]);
|
||
setManualOpen(false);
|
||
};
|
||
const selected = items.filter((item) => item.accepted).length;
|
||
return (
|
||
<>
|
||
<PageHeading
|
||
title="问答助手"
|
||
description="运营内容生产入口，输入商品要求即可快速生成 QA，并将采纳内容收录至问答库。"
|
||
/>
|
||
<div className="qa-workspace">
|
||
<section className="config-card panel">
|
||
<div className="panel-title">
|
||
<Settings size={18} />
|
||
生成条件配置 <small>* 商品信息至少填写一项</small>
|
||
</div>
|
||
<div className="rule" />
|
||
<h4>商品信息</h4>
|
||
<label>
|
||
商品名称
|
||
<input
|
||
value={form.product_name}
|
||
onChange={(event) => update("product_name", event.target.value)}
|
||
placeholder="请输入商品名称"
|
||
/>
|
||
</label>
|
||
<div className="two-col">
|
||
<label>
|
||
商品品类
|
||
<input
|
||
value={form.category}
|
||
onChange={(event) => update("category", event.target.value)}
|
||
placeholder="例如：面部精华"
|
||
/>
|
||
</label>
|
||
<label>
|
||
商品功效
|
||
<input
|
||
value={form.benefits}
|
||
onChange={(event) => update("benefits", event.target.value)}
|
||
placeholder="例如：舒缓泛红、修护屏障"
|
||
/>
|
||
</label>
|
||
</div>
|
||
<label>
|
||
商品卖点
|
||
<textarea
|
||
value={form.selling_points}
|
||
onChange={(event) => update("selling_points", event.target.value)}
|
||
placeholder="例如：油敏肌救星，植萃配方，修护泛红速效"
|
||
/>
|
||
</label>
|
||
<label className="reference-qa-upload">
|
||
真实问答参考（选填）
|
||
<input type="file" accept=".txt,.csv,.json,.md,.xlsx,text/plain,text/csv,application/json,text/markdown,application/vnd.openxmlformats-officedocument.spreadsheetml.sheet" onChange={(event) => setReferenceFile(event.target.files?.[0] || null)} />
|
||
<small>{referenceFile ? `已选择：${referenceFile.name}` : "支持 TXT、CSV、JSON、Markdown、XLSX，模型将参考其中的问答语气与角度"}</small>
|
||
{referenceFile && <button type="button" className="reference-qa-clear" onClick={() => setReferenceFile(null)}>清除已选文件</button>}
|
||
</label>
|
||
<div className="rule" />
|
||
<h4>生成偏好与数量</h4>
|
||
<div className="two-col">
|
||
<label>
|
||
语言风格
|
||
<select
|
||
value={form.language_style}
|
||
onChange={(event) =>
|
||
update("language_style", event.target.value)
|
||
}
|
||
>
|
||
<option value="">请选择语言风格</option>
|
||
<option>口语（亲切随性）</option>
|
||
<option>幽默</option>
|
||
<option>专业</option>
|
||
</select>
|
||
</label>
|
||
<label>
|
||
目标人群
|
||
<select
|
||
value={form.target_group}
|
||
onChange={(event) => update("target_group", event.target.value)}
|
||
>
|
||
<option value="">请选择目标人群</option>
|
||
<option>女性</option>
|
||
<option>男性</option>
|
||
<option>学生</option>
|
||
<option>熟龄人群</option>
|
||
</select>
|
||
</label>
|
||
</div>
|
||
<div className="two-col">
|
||
<label>
|
||
提问生成条数 *
|
||
<input
|
||
type="number"
|
||
min="1"
|
||
required
|
||
value={form.question_count}
|
||
onChange={(event) =>
|
||
update("question_count", event.target.value)
|
||
}
|
||
/>
|
||
</label>
|
||
<label>
|
||
单题回答条数
|
||
<input
|
||
type="number"
|
||
min="1"
|
||
max="10"
|
||
value={form.answers_per_question}
|
||
onChange={(event) =>
|
||
update("answers_per_question", event.target.value)
|
||
}
|
||
/>
|
||
</label>
|
||
</div>
|
||
<div className="two-col">
|
||
<label>
|
||
使用场景
|
||
<select
|
||
value={form.usage_scene}
|
||
onChange={(event) => update("usage_scene", event.target.value)}
|
||
>
|
||
<option value="">请选择使用场景</option>
|
||
<option>居家</option>
|
||
<option>旅行</option>
|
||
<option>通勤</option>
|
||
<option>运动</option>
|
||
<option>换季</option>
|
||
</select>
|
||
</label>
|
||
<label>
|
||
购买渠道
|
||
<select
|
||
value={form.purchase_channel}
|
||
onChange={(event) =>
|
||
update("purchase_channel", event.target.value)
|
||
}
|
||
>
|
||
<option value="">请选择购买渠道</option>
|
||
<option>电商平台</option>
|
||
<option>大型商超</option>
|
||
<option>药房</option>
|
||
<option>美妆店</option>
|
||
</select>
|
||
</label>
|
||
</div>
|
||
<label>
|
||
回答要求（选填）
|
||
<input
|
||
value={form.answer_requirement}
|
||
onChange={(event) =>
|
||
update("answer_requirement", event.target.value)
|
||
}
|
||
placeholder="例如：回答需要包含吸收速度和使用感"
|
||
/>
|
||
</label>
|
||
<div className="switch-row">
|
||
<span>种草式回答</span>
|
||
<button
|
||
type="button"
|
||
className={`switch ${form.seed_style ? "on" : ""}`}
|
||
onClick={() => update("seed_style", !form.seed_style)}
|
||
>
|
||
<i />
|
||
</button>
|
||
</div>
|
||
{error && <div className="form-error">{error}</div>}
|
||
<button
|
||
className="primary-button generate-btn"
|
||
onClick={generate}
|
||
disabled={loading}
|
||
>
|
||
<Sparkles size={18} />
|
||
{loading ? "大模型生成中…" : "生成 Q&A"}
|
||
</button>
|
||
</section>
|
||
<section className="results-area">
|
||
<div className="result-toolbar">
|
||
<label className="check-label">
|
||
<input
|
||
type="checkbox"
|
||
checked={items.length > 0 && selected === items.length}
|
||
onChange={(event) =>
|
||
setItems((current) =>
|
||
current.map((item) => ({
|
||
...item,
|
||
accepted: event.target.checked,
|
||
})),
|
||
)
|
||
}
|
||
/>{" "}
|
||
全选 ({selected}/{items.length})
|
||
</label>
|
||
<div>
|
||
<button
|
||
className="ghost-button"
|
||
onClick={() =>
|
||
setItems((current) => [
|
||
...current,
|
||
{
|
||
id: `Q${String(current.length + 1).padStart(3, "0")}`,
|
||
question: "手动输入问题",
|
||
answers: ["手动输入参考回答"],
|
||
source: "手动添加",
|
||
status: "待采纳",
|
||
accepted: false,
|
||
},
|
||
])
|
||
}
|
||
>
|
||
+ 手动添加Q&A
|
||
</button>
|
||
<button
|
||
className="success-button"
|
||
onClick={acceptAll}
|
||
disabled={!items.length}
|
||
>
|
||
✓ 批量采纳
|
||
</button>
|
||
<button
|
||
className="ghost-button"
|
||
onClick={generate}
|
||
disabled={loading}
|
||
>
|
||
↻ 重新生成
|
||
</button>
|
||
</div>
|
||
</div>
|
||
{items.length === 0 && (
|
||
<div className="empty-results panel">
|
||
<Sparkles size={22} />
|
||
<span>填写左侧商品条件后，点击“生成 Q&A”</span>
|
||
</div>
|
||
)}
|
||
{items.map((item) => (
|
||
<article className="qa-card" key={item.id}>
|
||
<div className="qa-meta">
|
||
<input
|
||
type="checkbox"
|
||
checked={item.accepted}
|
||
onChange={() => toggle(item.id)}
|
||
/>
|
||
<code>{item.id}</code>
|
||
<span>来源：{item.source}</span>
|
||
<strong className={item.accepted ? "accepted" : ""}>
|
||
{item.accepted ? "已采纳" : "待采纳"}
|
||
</strong>
|
||
<div className="qa-actions">
|
||
<button onClick={() => edit(item)}>编辑</button>
|
||
<button
|
||
className="accept-link"
|
||
onClick={() => toggle(item.id)}
|
||
>
|
||
{item.accepted ? "✓ 已采纳" : "✓ 采纳"}
|
||
</button>
|
||
</div>
|
||
</div>
|
||
<h3>问题：{item.question}</h3>
|
||
{item.answers.map((answer, index) => (
|
||
<p key={`${item.id}-${index}`}>
|
||
<b>回答{index + 1}：</b>
|
||
{answer}
|
||
</p>
|
||
))}
|
||
</article>
|
||
))}
|
||
</section>
|
||
</div>
|
||
</>
|
||
);
|
||
}
|
||
|
||
function InlineQAItem({ item, onToggle, onDelete, onSave }) {
|
||
const [editing, setEditing] = useState(false);
|
||
const [question, setQuestion] = useState(item.question);
|
||
const [answers, setAnswers] = useState(item.answers);
|
||
useEffect(() => {
|
||
setQuestion(item.question);
|
||
setAnswers(item.answers);
|
||
}, [item.question, item.answers]);
|
||
function save() {
|
||
const cleanAnswers = answers.map((value) => value.trim()).filter(Boolean);
|
||
if (!question.trim() || !cleanAnswers.length) return;
|
||
onSave(item.id, question.trim(), cleanAnswers);
|
||
setEditing(false);
|
||
}
|
||
function addAnswer() {
|
||
setAnswers((current) => [...current, ""]);
|
||
}
|
||
function removeAnswer(index) {
|
||
if (answers.length <= 1) return;
|
||
setAnswers((current) =>
|
||
current.filter((_, answerIndex) => answerIndex !== index),
|
||
);
|
||
}
|
||
return (
|
||
<article className={`qa-card ${editing ? "editing" : ""}`}>
|
||
<div className="qa-meta">
|
||
<input
|
||
type="checkbox"
|
||
checked={item.accepted}
|
||
onChange={() => onToggle(item.id)}
|
||
/>
|
||
<code>{item.id}</code>
|
||
<span>来源：{item.source}</span>
|
||
<strong className={item.accepted ? "accepted" : ""}>
|
||
{item.accepted ? "已采纳" : "待采纳"}
|
||
</strong>
|
||
<div className="qa-actions">
|
||
{editing ? (
|
||
<>
|
||
<button onClick={save}>保存</button>
|
||
<button
|
||
onClick={() => {
|
||
setQuestion(item.question);
|
||
setAnswers(item.answers);
|
||
setEditing(false);
|
||
}}
|
||
>
|
||
取消
|
||
</button>
|
||
</>
|
||
) : (
|
||
<>
|
||
<button onClick={() => {
|
||
if (!answers.length) setAnswers([""]);
|
||
setEditing(true);
|
||
}}>编辑</button>
|
||
<button className="accept-link" onClick={() => onToggle(item.id)}>
|
||
{item.accepted ? "✓ 已采纳" : "✓ 采纳"}
|
||
</button>
|
||
<button className="delete-link" onClick={() => onDelete(item.id)}>
|
||
删除
|
||
</button>
|
||
</>
|
||
)}
|
||
</div>
|
||
</div>
|
||
{editing ? (
|
||
<div className="inline-edit-fields">
|
||
<label>
|
||
问题
|
||
<input
|
||
value={question}
|
||
onChange={(event) => setQuestion(event.target.value)}
|
||
/>
|
||
</label>
|
||
{answers.map((answer, index) => (
|
||
<div className="answer-edit-row" key={index}>
|
||
<label>
|
||
回答{index + 1}
|
||
<textarea
|
||
value={answer}
|
||
onChange={(event) =>
|
||
setAnswers((current) =>
|
||
current.map((value, answerIndex) =>
|
||
answerIndex === index ? event.target.value : value,
|
||
),
|
||
)
|
||
}
|
||
/>
|
||
</label>
|
||
{answers.length > 1 && (
|
||
<button
|
||
type="button"
|
||
className="remove-answer"
|
||
onClick={() => removeAnswer(index)}
|
||
>
|
||
删除回答
|
||
</button>
|
||
)}
|
||
</div>
|
||
))}
|
||
<button
|
||
type="button"
|
||
className="add-answer-button"
|
||
onClick={addAnswer}
|
||
>
|
||
＋ 添加回答
|
||
</button>
|
||
</div>
|
||
) : (
|
||
<>
|
||
<h3>问题：{item.question}</h3>
|
||
{(item.answers || []).map((answer, index) => (
|
||
<p key={`${item.id}-${index}`}>
|
||
<b>回答{index + 1}：</b>
|
||
{answer}
|
||
</p>
|
||
))}
|
||
{!(item.answers || []).length && <p className="qa-empty-answer">尚未生成回答，请点击“编辑”补充</p>}
|
||
</>
|
||
)}
|
||
</article>
|
||
);
|
||
}
|
||
|
||
function ManualQAForm({ onClose, onSave }) {
|
||
const [question, setQuestion] = useState("");
|
||
const [answers, setAnswers] = useState([""]);
|
||
function addAnswer() {
|
||
setAnswers((current) => [...current, ""]);
|
||
}
|
||
function save(event) {
|
||
event.preventDefault();
|
||
const clean = answers.map((value) => value.trim()).filter(Boolean);
|
||
if (!question.trim() || !clean.length) return;
|
||
onSave(question.trim(), clean);
|
||
}
|
||
return (
|
||
<div className="manual-modal-backdrop">
|
||
<form className="manual-modal" onSubmit={save}>
|
||
<div className="manual-modal-header">
|
||
<h3>手动添加 Q&A 问答</h3>
|
||
<button type="button" onClick={onClose}>
|
||
×
|
||
</button>
|
||
</div>
|
||
<div className="manual-modal-rule" />
|
||
<label>
|
||
问题描述 *
|
||
<input
|
||
autoFocus
|
||
required
|
||
value={question}
|
||
onChange={(event) => setQuestion(event.target.value)}
|
||
placeholder="输入你提出的问题（例如：敏感肌用会刺激吗？）"
|
||
/>
|
||
</label>
|
||
{answers.map((answer, index) => (
|
||
<div className="manual-answer-row" key={index}>
|
||
<label>
|
||
回答 {index + 1}
|
||
{index > 0 && "（可选）"}
|
||
<textarea
|
||
required={index === 0}
|
||
value={answer}
|
||
onChange={(event) =>
|
||
setAnswers((current) =>
|
||
current.map((value, answerIndex) =>
|
||
answerIndex === index ? event.target.value : value,
|
||
),
|
||
)
|
||
}
|
||
placeholder={
|
||
index === 0
|
||
? "输入该问题的推荐回答内容"
|
||
: "输入更多回答（可选）"
|
||
}
|
||
/>
|
||
</label>
|
||
{index > 0 && (
|
||
<button
|
||
type="button"
|
||
className="remove-answer"
|
||
onClick={() =>
|
||
setAnswers((current) =>
|
||
current.filter((_, answerIndex) => answerIndex !== index),
|
||
)
|
||
}
|
||
>
|
||
删除
|
||
</button>
|
||
)}
|
||
</div>
|
||
))}
|
||
<button
|
||
type="button"
|
||
className="add-answer-button modal-add-answer"
|
||
onClick={addAnswer}
|
||
>
|
||
＋ 添加回答
|
||
</button>
|
||
<div className="manual-modal-actions">
|
||
<button type="button" className="ghost-button" onClick={onClose}>
|
||
取消
|
||
</button>
|
||
<button className="primary-button">保存并添加</button>
|
||
</div>
|
||
</form>
|
||
</div>
|
||
);
|
||
}
|
||
|
||
function AssistantQuestionImportModal({ form, onClose, onImport }) {
|
||
const inputRef = useRef(null);
|
||
const [file, setFile] = useState(null);
|
||
const [questions, setQuestions] = useState([]);
|
||
const [generateAnswers, setGenerateAnswers] = useState(true);
|
||
const [answersPerQuestion, setAnswersPerQuestion] = useState(
|
||
String(Number(form.answers_per_question) || 2),
|
||
);
|
||
const [busy, setBusy] = useState(false);
|
||
const [error, setError] = useState("");
|
||
const [jobProgress, setJobProgress] = useState(null);
|
||
const [retryJobId, setRetryJobId] = useState("");
|
||
|
||
async function selectFile(nextFile) {
|
||
setFile(nextFile || null);
|
||
setQuestions([]);
|
||
setError("");
|
||
setJobProgress(null);
|
||
setRetryJobId("");
|
||
if (!nextFile) return;
|
||
setBusy(true);
|
||
try {
|
||
const body = new FormData();
|
||
body.append("file", nextFile);
|
||
const result = await api("/api/admin/ask-questions/import", { method: "POST", body });
|
||
setQuestions(result.data.questions || []);
|
||
} catch (err) {
|
||
setError(err.message || "文件解析失败");
|
||
} finally {
|
||
setBusy(false);
|
||
}
|
||
}
|
||
|
||
async function submit(event) {
|
||
event.preventDefault();
|
||
if (!questions.length || busy) return;
|
||
const answerCount = Number(answersPerQuestion);
|
||
if (generateAnswers && (!Number.isInteger(answerCount) || answerCount < 1 || answerCount > 20)) {
|
||
setError("每个问题的回答条数必须是 1-20 的整数");
|
||
return;
|
||
}
|
||
setBusy(true);
|
||
setError("");
|
||
try {
|
||
await onImport(questions, generateAnswers, answerCount, {
|
||
jobId: retryJobId,
|
||
onProgress: setJobProgress,
|
||
});
|
||
} catch (err) {
|
||
setError(err.message || "批量导入失败");
|
||
if (err.bulkJob) {
|
||
setJobProgress(err.bulkJob);
|
||
setRetryJobId(err.bulkJob.id || "");
|
||
}
|
||
setBusy(false);
|
||
}
|
||
}
|
||
|
||
return (
|
||
<div className="manual-modal-backdrop" onMouseDown={(event) => event.target === event.currentTarget && !busy && onClose()}>
|
||
<form className="manual-modal ask-import-dialog assistant-import-dialog" onSubmit={submit}>
|
||
<div className="manual-modal-header">
|
||
<h3>批量导入问题</h3>
|
||
<button type="button" disabled={busy} onClick={onClose}>×</button>
|
||
</div>
|
||
<p>导入本地问题文件，并选择是否为每个问题自动生成参考回答。</p>
|
||
<input
|
||
ref={inputRef}
|
||
hidden
|
||
type="file"
|
||
accept=".txt,.csv,.json,.md,.xlsx,text/plain,text/csv,application/json,text/markdown,application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"
|
||
onChange={(event) => selectFile(event.target.files?.[0] || null)}
|
||
/>
|
||
<button type="button" className="ask-import-picker" disabled={busy} onClick={() => inputRef.current?.click()}>
|
||
<FileText size={22} />
|
||
<span>{file ? file.name : "选择本地问题文件"}<small>支持 TXT、CSV、JSON、Markdown、XLSX，最大 5MB</small></span>
|
||
</button>
|
||
<small className="ask-import-rule">TXT、Markdown 每行一个问题；表格文件优先读取“问题”列。</small>
|
||
<fieldset className="assistant-import-options">
|
||
<legend>是否自动生成回答</legend>
|
||
<div className="assistant-import-mode" role="group" aria-label="是否自动生成回答">
|
||
<button type="button" disabled={busy || !!retryJobId} className={!generateAnswers ? "active" : ""} onClick={() => setGenerateAnswers(false)}>不生成回答</button>
|
||
<button type="button" disabled={busy || !!retryJobId} className={generateAnswers ? "active" : ""} onClick={() => setGenerateAnswers(true)}>自动生成回答</button>
|
||
</div>
|
||
{generateAnswers && (
|
||
<label>
|
||
每个问题生成回答条数
|
||
<input type="number" disabled={busy || !!retryJobId} min="1" max="20" step="1" value={answersPerQuestion} onChange={(event) => setAnswersPerQuestion(event.target.value)} />
|
||
<small>可填写 1-20 条，默认 2 条</small>
|
||
</label>
|
||
)}
|
||
</fieldset>
|
||
{busy && !questions.length && <div className="ask-import-status">正在解析文件…</div>}
|
||
{jobProgress && (
|
||
<div className={`assistant-import-progress ${jobProgress.failed ? "has-failures" : ""}`}>
|
||
<header><span>{jobProgress.status === "completed" ? "回答生成完成" : jobProgress.status === "partial_failed" || jobProgress.status === "failed" ? "部分问题生成失败" : "正在生成回答"}</span><b>{jobProgress.progress_percent || 0}%</b></header>
|
||
<div className="assistant-import-progress-track"><i style={{ width: `${jobProgress.progress_percent || 0}%` }} /></div>
|
||
<p><span>共 {jobProgress.total || 0} 条</span><span>已完成 <b>{jobProgress.completed || 0}</b></span><span>失败 <b>{jobProgress.failed || 0}</b></span><span>待处理 <b>{jobProgress.pending || 0}</b></span></p>
|
||
</div>
|
||
)}
|
||
{error && <div className="form-error">{error}</div>}
|
||
{questions.length > 0 && (
|
||
<div className="ask-import-preview">
|
||
<header><strong>识别到 {questions.length} 条问题</strong><span>重复问题已自动排除</span></header>
|
||
<ol>{questions.slice(0, 8).map((question, index) => <li key={`${question}-${index}`}>{question}</li>)}</ol>
|
||
{questions.length > 8 && <small>还有 {questions.length - 8} 条未展开显示</small>}
|
||
</div>
|
||
)}
|
||
<div className="manual-modal-actions">
|
||
<button type="button" disabled={busy} onClick={onClose}>取消</button>
|
||
<button type="submit" className="primary-button" disabled={!questions.length || busy}>
|
||
{busy ? (jobProgress ? `正在生成回答（${jobProgress.completed || 0}/${jobProgress.total || questions.length}）…` : generateAnswers ? "正在生成回答…" : "正在导入…") : retryJobId ? `重试 ${jobProgress?.failed || 0} 条失败问题` : `导入 ${questions.length || 0} 条问题`}
|
||
</button>
|
||
</div>
|
||
</form>
|
||
</div>
|
||
);
|
||
}
|
||
|
||
function AssistantPageV2() {
|
||
const [form, setForm] = useState({
|
||
product_name: "",
|
||
category: "",
|
||
benefits: "",
|
||
selling_points: "",
|
||
language_style: "",
|
||
target_group: "",
|
||
usage_scene: "",
|
||
purchase_channel: "",
|
||
question_count: "",
|
||
answers_per_question: "",
|
||
answer_requirement: "",
|
||
seed_style: false,
|
||
});
|
||
const [items, setItems] = useState([]);
|
||
const [loading, setLoading] = useState(false);
|
||
const [error, setError] = useState("");
|
||
const update = (key, value) =>
|
||
setForm((current) => ({ ...current, [key]: value }));
|
||
async function generate() {
|
||
const intentError = analyzeProductIntent([
|
||
form.product_name,
|
||
form.category,
|
||
form.benefits,
|
||
form.selling_points,
|
||
]);
|
||
if (intentError) {
|
||
setError(intentError);
|
||
setItems([]);
|
||
return;
|
||
}
|
||
const optionsError = validateGenerationOptions(form);
|
||
if (optionsError) {
|
||
setError(optionsError);
|
||
return;
|
||
}
|
||
setError("");
|
||
setLoading(true);
|
||
try {
|
||
const result = await api("/api/admin/qa/generate", {
|
||
method: "POST",
|
||
body: JSON.stringify({
|
||
...form,
|
||
question_count: Number(form.question_count),
|
||
answers_per_question: Number(form.answers_per_question) || 2,
|
||
}),
|
||
});
|
||
setItems(result.data.items);
|
||
} catch (err) {
|
||
setError(err.message);
|
||
setItems([]);
|
||
} finally {
|
||
setLoading(false);
|
||
}
|
||
}
|
||
const toggle = (id) =>
|
||
setItems((current) =>
|
||
current.map((item) =>
|
||
item.id === id
|
||
? {
|
||
...item,
|
||
accepted: !item.accepted,
|
||
status: !item.accepted ? "已采纳" : "待采纳",
|
||
}
|
||
: item,
|
||
),
|
||
);
|
||
const save = (id, question, answers) =>
|
||
setItems((current) =>
|
||
current.map((item) =>
|
||
item.id === id
|
||
? { ...item, question, answers, accepted: false, status: "待采纳" }
|
||
: item,
|
||
),
|
||
);
|
||
const remove = (id) =>
|
||
setItems((current) => current.filter((item) => item.id !== id));
|
||
const addManual = () =>
|
||
setItems((current) => [
|
||
...current,
|
||
{
|
||
id: `Q${String(current.length + 1).padStart(3, "0")}`,
|
||
question: "手动输入问题",
|
||
answers: ["手动输入参考回答"],
|
||
source: "手动添加",
|
||
status: "待采纳",
|
||
accepted: false,
|
||
},
|
||
]);
|
||
const selected = items.filter((item) => item.accepted).length;
|
||
return (
|
||
<>
|
||
<PageHeading
|
||
title="问答助手"
|
||
description="运营内容生产入口，输入商品要求即可快速生成 QA，并将采纳内容收录至问答库。"
|
||
/>
|
||
<div className="qa-workspace">
|
||
<section className="config-card panel">
|
||
<div className="panel-title">
|
||
<Settings size={18} />
|
||
生成条件配置 <small>* 商品信息至少填写一项</small>
|
||
</div>
|
||
<div className="rule" />
|
||
<h4>商品信息</h4>
|
||
<label>
|
||
商品名称
|
||
<input
|
||
value={form.product_name}
|
||
onChange={(event) => update("product_name", event.target.value)}
|
||
placeholder="请输入商品名称"
|
||
/>
|
||
</label>
|
||
<div className="two-col">
|
||
<label>
|
||
商品品类
|
||
<input
|
||
value={form.category}
|
||
onChange={(event) => update("category", event.target.value)}
|
||
placeholder="例如：面部精华"
|
||
/>
|
||
</label>
|
||
<label>
|
||
商品功效
|
||
<input
|
||
value={form.benefits}
|
||
onChange={(event) => update("benefits", event.target.value)}
|
||
placeholder="例如：舒缓泛红、修护屏障"
|
||
/>
|
||
</label>
|
||
</div>
|
||
<label>
|
||
商品卖点
|
||
<textarea
|
||
value={form.selling_points}
|
||
onChange={(event) => update("selling_points", event.target.value)}
|
||
placeholder="例如：油敏肌救星，植萃配方，修护泛红速效"
|
||
/>
|
||
</label>
|
||
<div className="rule" />
|
||
<h4>生成偏好与数量</h4>
|
||
<div className="two-col">
|
||
<label>
|
||
语言风格
|
||
<select
|
||
value={form.language_style}
|
||
onChange={(event) =>
|
||
update("language_style", event.target.value)
|
||
}
|
||
>
|
||
<option value="">请选择语言风格</option>
|
||
<option>口语（亲切随性）</option>
|
||
<option>幽默</option>
|
||
<option>专业</option>
|
||
</select>
|
||
</label>
|
||
<label>
|
||
目标人群
|
||
<select
|
||
value={form.target_group}
|
||
onChange={(event) => update("target_group", event.target.value)}
|
||
>
|
||
<option value="">请选择目标人群</option>
|
||
<option>女性</option>
|
||
<option>男性</option>
|
||
<option>学生</option>
|
||
<option>熟龄人群</option>
|
||
</select>
|
||
</label>
|
||
</div>
|
||
<div className="two-col">
|
||
<label>
|
||
提问生成条数 *
|
||
<input
|
||
type="number"
|
||
min="1"
|
||
required
|
||
value={form.question_count}
|
||
onChange={(event) =>
|
||
update("question_count", event.target.value)
|
||
}
|
||
/>
|
||
</label>
|
||
<label>
|
||
单题回答条数
|
||
<input
|
||
type="number"
|
||
min="1"
|
||
max="10"
|
||
value={form.answers_per_question}
|
||
onChange={(event) =>
|
||
update("answers_per_question", event.target.value)
|
||
}
|
||
/>
|
||
</label>
|
||
</div>
|
||
<div className="two-col">
|
||
<label>
|
||
使用场景
|
||
<select
|
||
value={form.usage_scene}
|
||
onChange={(event) => update("usage_scene", event.target.value)}
|
||
>
|
||
<option value="">请选择使用场景</option>
|
||
<option>居家</option>
|
||
<option>旅行</option>
|
||
<option>通勤</option>
|
||
<option>运动</option>
|
||
<option>换季</option>
|
||
</select>
|
||
</label>
|
||
<label>
|
||
购买渠道
|
||
<select
|
||
value={form.purchase_channel}
|
||
onChange={(event) =>
|
||
update("purchase_channel", event.target.value)
|
||
}
|
||
>
|
||
<option value="">请选择购买渠道</option>
|
||
<option>电商平台</option>
|
||
<option>大型商超</option>
|
||
<option>药房</option>
|
||
<option>美妆店</option>
|
||
</select>
|
||
</label>
|
||
</div>
|
||
<label>
|
||
回答要求（选填）
|
||
<input
|
||
value={form.answer_requirement}
|
||
onChange={(event) =>
|
||
update("answer_requirement", event.target.value)
|
||
}
|
||
placeholder="例如：回答需要包含吸收速度和使用感"
|
||
/>
|
||
</label>
|
||
<div className="switch-row">
|
||
<span>种草式回答</span>
|
||
<button
|
||
type="button"
|
||
className={`switch ${form.seed_style ? "on" : ""}`}
|
||
onClick={() => update("seed_style", !form.seed_style)}
|
||
>
|
||
<i />
|
||
</button>
|
||
</div>
|
||
{error && <div className="form-error">{error}</div>}
|
||
<button
|
||
className="primary-button generate-btn"
|
||
onClick={generate}
|
||
disabled={loading}
|
||
>
|
||
<Sparkles size={18} />
|
||
{loading ? "大模型生成中…" : "生成 Q&A"}
|
||
</button>
|
||
</section>
|
||
<section className="results-area">
|
||
<div className="result-toolbar">
|
||
<label className="check-label">
|
||
<input
|
||
type="checkbox"
|
||
checked={items.length > 0 && selected === items.length}
|
||
onChange={(event) =>
|
||
setItems((current) =>
|
||
current.map((item) => ({
|
||
...item,
|
||
accepted: event.target.checked,
|
||
status: event.target.checked ? "已采纳" : "待采纳",
|
||
})),
|
||
)
|
||
}
|
||
/>{" "}
|
||
全选 ({selected}/{items.length})
|
||
</label>
|
||
<div>
|
||
<button className="ghost-button" onClick={addManual}>
|
||
＋ 手动添加Q&A
|
||
</button>
|
||
<button
|
||
className="success-button"
|
||
onClick={() =>
|
||
setItems((current) =>
|
||
current.map((item) => ({
|
||
...item,
|
||
accepted: true,
|
||
status: "已采纳",
|
||
})),
|
||
)
|
||
}
|
||
disabled={!items.length}
|
||
>
|
||
✓ 批量采纳
|
||
</button>
|
||
<button
|
||
className="ghost-button"
|
||
onClick={generate}
|
||
disabled={loading}
|
||
>
|
||
↻ 重新生成
|
||
</button>
|
||
</div>
|
||
</div>
|
||
{items.length === 0 && (
|
||
<div className="empty-results panel">
|
||
<Sparkles size={22} />
|
||
<span>填写左侧商品条件后，点击“生成 Q&A”</span>
|
||
</div>
|
||
)}
|
||
{items.map((item) => (
|
||
<InlineQAItem
|
||
key={item.id}
|
||
item={item}
|
||
onToggle={toggle}
|
||
onDelete={remove}
|
||
onSave={save}
|
||
/>
|
||
))}
|
||
</section>
|
||
</div>
|
||
</>
|
||
);
|
||
}
|
||
|
||
function QALibraryPage({ selectionMode = false }) {
|
||
const [records, setRecords] = useState([]);
|
||
const [search, setSearch] = useState("");
|
||
const [loading, setLoading] = useState(true);
|
||
const [error, setError] = useState("");
|
||
const [editing, setEditing] = useState(null);
|
||
const [deleting, setDeleting] = useState(null);
|
||
const [deleteBusy, setDeleteBusy] = useState(false);
|
||
const [selectedIds, setSelectedIds] = useState([]);
|
||
async function load(keyword = search) {
|
||
setLoading(true);
|
||
try {
|
||
const result = await api(
|
||
`/api/admin/qa-library?search=${encodeURIComponent(keyword.trim())}`,
|
||
);
|
||
setRecords(result.data);
|
||
setError("");
|
||
} catch (err) {
|
||
setError(err.message);
|
||
} finally {
|
||
setLoading(false);
|
||
}
|
||
}
|
||
useEffect(() => {
|
||
load("");
|
||
const refresh = () => load(search);
|
||
window.addEventListener("qa-library-changed", refresh);
|
||
return () => window.removeEventListener("qa-library-changed", refresh);
|
||
}, []);
|
||
async function removeRecord() {
|
||
if (!deleting || deleteBusy) return;
|
||
setDeleteBusy(true);
|
||
try {
|
||
await api(`/api/admin/qa-library/${deleting.id}`, { method: "DELETE" });
|
||
setRecords((current) => current.filter((item) => item.id !== deleting.id));
|
||
setDeleting(null);
|
||
window.dispatchEvent(new Event("qa-library-changed"));
|
||
} catch (err) {
|
||
setError(err.message);
|
||
} finally {
|
||
setDeleteBusy(false);
|
||
}
|
||
}
|
||
return (
|
||
<>
|
||
<PageHeading
|
||
title={selectionMode ? "从问答库添加提问" : "问答库"}
|
||
description={selectionMode ? "搜索并勾选问题，添加后将返回当前提问任务。" : "集中沉淀运营已采纳的问答内容，供后续选题和回答参考。"}
|
||
/>
|
||
<section className={`qa-library-toolbar panel${selectionMode ? " selection-mode" : ""}`}>
|
||
<div className="qa-library-search-row">
|
||
<div className="qa-library-search-input">
|
||
<Search size={17} />
|
||
<input
|
||
value={search}
|
||
onChange={(event) => setSearch(event.target.value)}
|
||
onKeyDown={(event) => event.key === "Enter" && load()}
|
||
placeholder="搜索商品、品类、问题或回答"
|
||
/>
|
||
</div>
|
||
<button type="button" className="primary-button" onClick={() => load()}>
|
||
搜索
|
||
</button>
|
||
</div>
|
||
<div className="qa-library-selection-actions">
|
||
{selectionMode && <label className="qa-library-select-all"><input type="checkbox" checked={records.length > 0 && records.every((item) => selectedIds.includes(item.id))} onChange={(event) => setSelectedIds(event.target.checked ? records.map((item) => item.id) : [])} /> 全选当前搜索结果</label>}
|
||
<span>共 {records.length} 条问答</span>
|
||
{selectionMode && <button type="button" className="ghost-button" onClick={() => window.dispatchEvent(new CustomEvent("switch-create-ask"))}>返回创建任务</button>}
|
||
{selectionMode && <button type="button" className="primary-button" disabled={!selectedIds.length} onClick={() => window.dispatchEvent(new CustomEvent("qa-library-selected", { detail: records.filter((item) => selectedIds.includes(item.id)) }))}>添加已选并返回（{selectedIds.length}）</button>}
|
||
</div>
|
||
</section>
|
||
{error && <div className="form-error">{error}</div>}
|
||
<section className="qa-library-list">
|
||
{loading ? (
|
||
<div className="empty-results panel">正在加载问答库…</div>
|
||
) : records.length === 0 ? (
|
||
<div className="empty-results panel">
|
||
暂无已采纳问答，请先在问答助手中采纳内容。
|
||
</div>
|
||
) : (
|
||
records.map((record) => (
|
||
<article className={`qa-library-card panel${selectionMode ? " selectable" : ""}`} key={record.id}>
|
||
<header>
|
||
<div>
|
||
{selectionMode && <input type="checkbox" checked={selectedIds.includes(record.id)} onChange={() => setSelectedIds((current) => current.includes(record.id) ? current.filter((id) => id !== record.id) : [...current, record.id])} aria-label={`选择问题 ${record.question}`} />}
|
||
<strong>{record.product_name || "未填写商品名称"}</strong>
|
||
{record.category && <span>{record.category}</span>}
|
||
</div>
|
||
<div className="qa-library-card-tools">
|
||
<small>
|
||
{record.source} · {record.created_by} ·{" "}
|
||
{new Date(record.created_at).toLocaleString("zh-CN", {
|
||
hour12: false,
|
||
})}
|
||
</small>
|
||
<button onClick={() => setEditing(record)}>编辑</button>
|
||
<button className="danger-button" onClick={() => setDeleting(record)}>删除</button>
|
||
</div>
|
||
</header>
|
||
<h3>Q：{record.question}</h3>
|
||
<div className="qa-library-answers">
|
||
{record.answers.map((answer, index) => (
|
||
<p key={`${record.id}-${index}`}>
|
||
<b>A{index + 1}</b>
|
||
{answer}
|
||
</p>
|
||
))}
|
||
</div>
|
||
{(record.benefits || record.selling_points) && (
|
||
<footer>
|
||
{record.benefits && <span>功效：{record.benefits}</span>}
|
||
{record.selling_points && (
|
||
<span>卖点：{record.selling_points}</span>
|
||
)}
|
||
</footer>
|
||
)}
|
||
</article>
|
||
))
|
||
)}
|
||
</section>
|
||
{editing && (
|
||
<QALibraryEditModal
|
||
record={editing}
|
||
onClose={() => setEditing(null)}
|
||
onSaved={(updated) => {
|
||
setRecords((current) =>
|
||
current.map((item) => (item.id === updated.id ? updated : item)),
|
||
);
|
||
setEditing(null);
|
||
}}
|
||
/>
|
||
)}
|
||
{deleting && (
|
||
<div className="manual-modal-backdrop" onMouseDown={(event) => event.target === event.currentTarget && setDeleting(null)}>
|
||
<section className="manual-modal qa-library-delete-modal" role="dialog" aria-modal="true" aria-labelledby="qa-delete-title">
|
||
<div className="manual-modal-header">
|
||
<h3 id="qa-delete-title">确认删除</h3>
|
||
<button type="button" onClick={() => setDeleting(null)}>×</button>
|
||
</div>
|
||
<p>确定要删除这条问答吗？删除后将无法恢复。</p>
|
||
<div className="qa-delete-preview">Q：{deleting.question}</div>
|
||
<div className="manual-modal-actions">
|
||
<button type="button" onClick={() => setDeleting(null)}>取消</button>
|
||
<button type="button" className="danger-solid-button" disabled={deleteBusy} onClick={removeRecord}>{deleteBusy ? "删除中…" : "确认删除"}</button>
|
||
</div>
|
||
</section>
|
||
</div>
|
||
)}
|
||
</>
|
||
);
|
||
}
|
||
|
||
function QALibraryEditModal({ record, onClose, onSaved }) {
|
||
const [form, setForm] = useState({
|
||
product_name: record.product_name || "",
|
||
category: record.category || "",
|
||
benefits: record.benefits || "",
|
||
selling_points: record.selling_points || "",
|
||
question: record.question || "",
|
||
answers: (record.answers || []).join("\n"),
|
||
});
|
||
const [saving, setSaving] = useState(false);
|
||
const [error, setError] = useState("");
|
||
const update = (key, value) => setForm((current) => ({ ...current, [key]: value }));
|
||
async function save(event) {
|
||
event.preventDefault();
|
||
const answers = form.answers.split("\n").map((value) => value.trim()).filter(Boolean);
|
||
if (!form.question.trim() || !answers.length) {
|
||
setError("问题和回答不能为空");
|
||
return;
|
||
}
|
||
setSaving(true);
|
||
setError("");
|
||
try {
|
||
const result = await api(`/api/admin/qa-library/${record.id}`, {
|
||
method: "PATCH",
|
||
body: JSON.stringify({ ...form, question: form.question.trim(), answers }),
|
||
});
|
||
onSaved(result.data);
|
||
window.dispatchEvent(new Event("qa-library-changed"));
|
||
} catch (err) {
|
||
setError(err.message);
|
||
} finally {
|
||
setSaving(false);
|
||
}
|
||
}
|
||
return (
|
||
<div className="manual-modal-backdrop" onMouseDown={(event) => event.target === event.currentTarget && onClose()}>
|
||
<form className="manual-modal qa-library-edit-modal" onSubmit={save}>
|
||
<div className="manual-modal-header">
|
||
<h3>编辑问答</h3>
|
||
<button type="button" onClick={onClose}>×</button>
|
||
</div>
|
||
<label>商品名称<input value={form.product_name} onChange={(event) => update("product_name", event.target.value)} /></label>
|
||
<div className="two-col">
|
||
<label>商品品类<input value={form.category} onChange={(event) => update("category", event.target.value)} /></label>
|
||
<label>商品功效<input value={form.benefits} onChange={(event) => update("benefits", event.target.value)} /></label>
|
||
</div>
|
||
<label>商品卖点<input value={form.selling_points} onChange={(event) => update("selling_points", event.target.value)} /></label>
|
||
<label>问题<textarea value={form.question} onChange={(event) => update("question", event.target.value)} /></label>
|
||
<label>参考回答（每行一条）<textarea rows="5" value={form.answers} onChange={(event) => update("answers", event.target.value)} /></label>
|
||
{error && <div className="form-error">{error}</div>}
|
||
<div className="manual-modal-actions">
|
||
<button type="button" onClick={onClose}>取消</button>
|
||
<button className="primary-button" disabled={saving}>{saving ? "保存中…" : "保存修改"}</button>
|
||
</div>
|
||
</form>
|
||
</div>
|
||
);
|
||
}
|
||
|
||
function AssistantPageFinal() {
|
||
const cached = readPageCache("assistant", {});
|
||
const [form, setForm] = useState(cached.form || {
|
||
product_name: "",
|
||
category: "",
|
||
benefits: "",
|
||
selling_points: "",
|
||
language_style: "",
|
||
target_group: "",
|
||
usage_scene: "",
|
||
purchase_channel: "",
|
||
question_count: "",
|
||
answers_per_question: "",
|
||
answer_requirement: "",
|
||
seed_style: false,
|
||
});
|
||
const [items, setItems] = useState(cached.items || []);
|
||
const [loading, setLoading] = useState(false);
|
||
const [error, setError] = useState("");
|
||
const [saving, setSaving] = useState(false);
|
||
const [savedMessage, setSavedMessage] = useState("");
|
||
const [adoptedDialog, setAdoptedDialog] = useState(null);
|
||
const [manualOpen, setManualOpen] = useState(false);
|
||
const [importOpen, setImportOpen] = useState(false);
|
||
const [referenceFile, setReferenceFile] = useState(null);
|
||
const [referenceFileName, setReferenceFileName] = useState(cached.referenceFileName || "");
|
||
const [referenceQa, setReferenceQa] = useState(cached.referenceQa || "");
|
||
const referenceInputRef = useRef(null);
|
||
useEffect(() => {
|
||
writePageCache("assistant", { form, items, referenceQa, referenceFileName });
|
||
}, [form, items, referenceQa, referenceFileName]);
|
||
const update = (key, value) =>
|
||
setForm((current) => ({ ...current, [key]: value }));
|
||
async function selectReferenceFile(file) {
|
||
setReferenceFile(file);
|
||
setReferenceFileName(file?.name || "");
|
||
setError("");
|
||
if (!file) {
|
||
setReferenceQa("");
|
||
return;
|
||
}
|
||
try {
|
||
setReferenceQa(await readReferenceFile(file, api));
|
||
} catch (err) {
|
||
setError(err.message || "参考文件读取失败");
|
||
}
|
||
}
|
||
function clearReferenceFile() {
|
||
setReferenceFile(null);
|
||
setReferenceFileName("");
|
||
setReferenceQa("");
|
||
if (referenceInputRef.current) referenceInputRef.current.value = "";
|
||
}
|
||
async function generate() {
|
||
const intentError = analyzeProductIntent([
|
||
form.product_name,
|
||
form.category,
|
||
form.benefits,
|
||
form.selling_points,
|
||
]);
|
||
if (intentError) {
|
||
setError(intentError);
|
||
setItems([]);
|
||
return;
|
||
}
|
||
const optionsError = validateGenerationOptions(form);
|
||
if (optionsError) {
|
||
setError(optionsError);
|
||
return;
|
||
}
|
||
setError("");
|
||
setLoading(true);
|
||
try {
|
||
const reference_qa = referenceFile ? await readReferenceFile(referenceFile, api) : referenceQa;
|
||
setReferenceQa(reference_qa);
|
||
const result = await api("/api/admin/qa/generate", {
|
||
method: "POST",
|
||
body: JSON.stringify({
|
||
...form,
|
||
question_count: Number(form.question_count),
|
||
answers_per_question: Number(form.answers_per_question) || 2,
|
||
reference_qa,
|
||
}),
|
||
});
|
||
setItems(result.data.items);
|
||
} catch (err) {
|
||
setError(err.message);
|
||
setItems([]);
|
||
} finally {
|
||
setLoading(false);
|
||
}
|
||
}
|
||
async function adopt(targetItems, showDialog = false) {
|
||
if (!targetItems.length || saving) return;
|
||
const readyItems = targetItems.filter((item) =>
|
||
(item.answers || []).some((answer) => String(answer || "").trim()),
|
||
);
|
||
if (!readyItems.length) {
|
||
setError("请先为问题补充回答，再采纳到问答库");
|
||
return;
|
||
}
|
||
setSaving(true);
|
||
setSavedMessage("");
|
||
try {
|
||
const result = await api("/api/admin/qa-library", {
|
||
method: "POST",
|
||
body: JSON.stringify({
|
||
product_name: form.product_name,
|
||
category: form.category,
|
||
benefits: form.benefits,
|
||
selling_points: form.selling_points,
|
||
items: readyItems.map(({ question, answers, source }) => ({
|
||
question,
|
||
answers,
|
||
source,
|
||
})),
|
||
}),
|
||
});
|
||
const ids = new Set(readyItems.map((item) => item.id));
|
||
setItems((current) =>
|
||
current.map((item) =>
|
||
ids.has(item.id)
|
||
? { ...item, accepted: true, status: "已采纳" }
|
||
: item,
|
||
),
|
||
);
|
||
const { added_count: added, skipped_count: skipped } = result.data;
|
||
if (showDialog) setAdoptedDialog({ count: readyItems.length, added, skipped });
|
||
setSavedMessage(
|
||
added > 0
|
||
? `已将 ${added} 条问答存入问答库${skipped ? `，${skipped} 条重复内容已跳过` : ""}`
|
||
: "这些问答已经存在于问答库中",
|
||
);
|
||
window.dispatchEvent(new Event("qa-library-changed"));
|
||
} catch (err) {
|
||
setError(err.message);
|
||
} finally {
|
||
setSaving(false);
|
||
}
|
||
}
|
||
function toggle(id) {
|
||
const target = items.find((item) => item.id === id);
|
||
if (!target) return;
|
||
if (target.accepted) return;
|
||
if (!(target.answers || []).some((answer) => String(answer || "").trim())) {
|
||
setError("请先为该问题补充回答，再采纳到问答库");
|
||
return;
|
||
}
|
||
adopt([target]);
|
||
}
|
||
const acceptAll = () => adopt(items, true);
|
||
const save = (id, question, answers) =>
|
||
setItems((current) =>
|
||
current.map((item) =>
|
||
item.id === id
|
||
? { ...item, question, answers, accepted: false, status: "待采纳" }
|
||
: item,
|
||
),
|
||
);
|
||
const remove = (id) =>
|
||
setItems((current) => current.filter((item) => item.id !== id));
|
||
const addManual = (question, answers) => {
|
||
setItems((current) => [
|
||
...current,
|
||
{
|
||
id: `Q${String(current.length + 1).padStart(3, "0")}`,
|
||
question,
|
||
answers,
|
||
source: "手动添加",
|
||
status: "待采纳",
|
||
accepted: false,
|
||
},
|
||
]);
|
||
setManualOpen(false);
|
||
};
|
||
async function addImportedQuestions(questions, generateAnswers, answersPerQuestion, jobOptions = {}) {
|
||
const existing = new Set(items.map((item) => String(item.question || "").trim().toLocaleLowerCase()));
|
||
const newQuestions = questions.filter((question) => !existing.has(String(question || "").trim().toLocaleLowerCase()));
|
||
if (!newQuestions.length && !jobOptions.jobId) {
|
||
setSavedMessage("导入的问题已全部存在于当前列表中");
|
||
setImportOpen(false);
|
||
return;
|
||
}
|
||
let importedItems;
|
||
if (generateAnswers) {
|
||
const intentError = analyzeProductIntent([
|
||
form.product_name,
|
||
form.category,
|
||
form.benefits,
|
||
form.selling_points,
|
||
]);
|
||
if (intentError) throw new Error(`自动生成回答前，${intentError}`);
|
||
let job;
|
||
if (jobOptions.jobId) {
|
||
const retryResult = await api(`/api/admin/qa/generate-answer-jobs/${jobOptions.jobId}/retry`, { method: "POST" });
|
||
job = retryResult.data;
|
||
} else {
|
||
const createResult = await api("/api/admin/qa/generate-answer-jobs", {
|
||
method: "POST",
|
||
body: JSON.stringify({
|
||
...form,
|
||
questions: newQuestions,
|
||
answers_per_question: answersPerQuestion,
|
||
}),
|
||
});
|
||
job = createResult.data;
|
||
}
|
||
jobOptions.onProgress?.(job);
|
||
while (["queued", "processing"].includes(job.status)) {
|
||
await new Promise((resolve) => window.setTimeout(resolve, 1200));
|
||
const progressResult = await api(`/api/admin/qa/generate-answer-jobs/${job.id}`);
|
||
job = progressResult.data;
|
||
jobOptions.onProgress?.(job);
|
||
}
|
||
if (job.status !== "completed") {
|
||
const failure = new Error(`已完成 ${job.completed} 条，${job.failed} 条生成失败。点击下方按钮仅重试失败问题。`);
|
||
failure.bulkJob = job;
|
||
throw failure;
|
||
}
|
||
const detailResult = await api(`/api/admin/qa/generate-answer-jobs/${job.id}?include_items=true`);
|
||
importedItems = detailResult.data.items || [];
|
||
} else {
|
||
importedItems = newQuestions.map((question) => ({
|
||
question,
|
||
answers: [],
|
||
source: "批量导入",
|
||
status: "待补充回答",
|
||
accepted: false,
|
||
}));
|
||
}
|
||
const idPrefix = `IMP${Date.now()}`;
|
||
setItems((current) => [
|
||
...current,
|
||
...importedItems.map((item, index) => ({ ...item, id: `${idPrefix}-${index + 1}` })),
|
||
]);
|
||
setSavedMessage(
|
||
generateAnswers
|
||
? `已导入 ${importedItems.length} 条问题，并生成每题 ${answersPerQuestion} 条回答`
|
||
: `已导入 ${importedItems.length} 条问题，可点击“编辑”补充回答`,
|
||
);
|
||
setError("");
|
||
setImportOpen(false);
|
||
}
|
||
const selected = items.filter((item) => item.accepted).length;
|
||
return (
|
||
<>
|
||
<PageHeading
|
||
title="问答助手"
|
||
description="运营内容生产入口，输入商品要求即可快速生成 QA，并将采纳内容收录至问答库。"
|
||
/>
|
||
<div className="qa-workspace">
|
||
<section className="config-card panel">
|
||
<div className="panel-title">
|
||
<Settings size={18} />
|
||
生成条件配置 <small>* 商品信息至少填写一项</small>
|
||
</div>
|
||
<div className="rule" />
|
||
<h4>商品信息</h4>
|
||
<label>
|
||
商品名称
|
||
<input
|
||
value={form.product_name}
|
||
onChange={(event) => update("product_name", event.target.value)}
|
||
placeholder="请输入商品名称"
|
||
/>
|
||
</label>
|
||
<div className="two-col">
|
||
<label>
|
||
商品品类
|
||
<input
|
||
value={form.category}
|
||
onChange={(event) => update("category", event.target.value)}
|
||
placeholder="例如：面部精华"
|
||
/>
|
||
</label>
|
||
<label>
|
||
商品功效
|
||
<input
|
||
value={form.benefits}
|
||
onChange={(event) => update("benefits", event.target.value)}
|
||
placeholder="例如：舒缓泛红、修护屏障"
|
||
/>
|
||
</label>
|
||
</div>
|
||
<label>
|
||
商品卖点
|
||
<textarea
|
||
value={form.selling_points}
|
||
onChange={(event) => update("selling_points", event.target.value)}
|
||
placeholder="例如：油敏肌救星，植萃配方，修护泛红速效"
|
||
/>
|
||
</label>
|
||
<label className="reference-qa-upload">
|
||
真实问答参考（选填）
|
||
<input ref={referenceInputRef} type="file" accept=".txt,.csv,.json,.md,.xlsx,text/plain,text/csv,application/json,text/markdown,application/vnd.openxmlformats-officedocument.spreadsheetml.sheet" onChange={(event) => selectReferenceFile(event.target.files?.[0] || null)} />
|
||
<small>{referenceFileName ? `已选择：${referenceFileName}` : "支持 TXT、CSV、JSON、Markdown、XLSX，模型将参考其中的问答语气与角度"}</small>
|
||
{referenceFileName && <button type="button" className="reference-qa-clear" onClick={clearReferenceFile}>清除已选文件</button>}
|
||
</label>
|
||
<div className="rule" />
|
||
<h4>生成偏好与数量</h4>
|
||
<div className="two-col">
|
||
<label>
|
||
语言风格
|
||
<select
|
||
value={form.language_style}
|
||
onChange={(event) =>
|
||
update("language_style", event.target.value)
|
||
}
|
||
>
|
||
<option value="">请选择语言风格</option>
|
||
<option>口语（亲切随性）</option>
|
||
<option>幽默</option>
|
||
<option>专业</option>
|
||
</select>
|
||
</label>
|
||
<label>
|
||
目标人群
|
||
<select
|
||
value={form.target_group}
|
||
onChange={(event) => update("target_group", event.target.value)}
|
||
>
|
||
<option value="">请选择目标人群</option>
|
||
<option>女性</option>
|
||
<option>男性</option>
|
||
<option>学生</option>
|
||
<option>熟龄人群</option>
|
||
</select>
|
||
</label>
|
||
</div>
|
||
<div className="two-col">
|
||
<label>
|
||
提问生成条数 *
|
||
<input
|
||
type="number"
|
||
min="1"
|
||
required
|
||
value={form.question_count}
|
||
onChange={(event) =>
|
||
update("question_count", event.target.value)
|
||
}
|
||
/>
|
||
</label>
|
||
<label>
|
||
单题回答条数
|
||
<input
|
||
type="number"
|
||
min="1"
|
||
max="20"
|
||
value={form.answers_per_question}
|
||
onChange={(event) =>
|
||
update("answers_per_question", event.target.value)
|
||
}
|
||
/>
|
||
</label>
|
||
</div>
|
||
<div className="two-col">
|
||
<label>
|
||
使用场景
|
||
<select
|
||
value={form.usage_scene}
|
||
onChange={(event) => update("usage_scene", event.target.value)}
|
||
>
|
||
<option value="">请选择使用场景</option>
|
||
<option>居家</option>
|
||
<option>旅行</option>
|
||
<option>通勤</option>
|
||
<option>运动</option>
|
||
<option>换季</option>
|
||
</select>
|
||
</label>
|
||
<label>
|
||
购买渠道
|
||
<select
|
||
value={form.purchase_channel}
|
||
onChange={(event) =>
|
||
update("purchase_channel", event.target.value)
|
||
}
|
||
>
|
||
<option value="">请选择购买渠道</option>
|
||
<option>电商平台</option>
|
||
<option>大型商超</option>
|
||
<option>药房</option>
|
||
<option>美妆店</option>
|
||
</select>
|
||
</label>
|
||
</div>
|
||
<label>
|
||
回答要求（选填）
|
||
<input
|
||
value={form.answer_requirement}
|
||
onChange={(event) =>
|
||
update("answer_requirement", event.target.value)
|
||
}
|
||
placeholder="例如：回答需要包含吸收速度和使用感"
|
||
/>
|
||
</label>
|
||
<div className="switch-row">
|
||
<span>种草式回答</span>
|
||
<button
|
||
type="button"
|
||
className={`switch ${form.seed_style ? "on" : ""}`}
|
||
onClick={() => update("seed_style", !form.seed_style)}
|
||
>
|
||
<i />
|
||
</button>
|
||
</div>
|
||
{error && <div className="form-error">{error}</div>}
|
||
{savedMessage && <div className="form-success">{savedMessage}</div>}
|
||
<button
|
||
className="primary-button generate-btn"
|
||
onClick={generate}
|
||
disabled={loading}
|
||
>
|
||
<Sparkles size={18} />
|
||
{loading ? "大模型生成中…" : "生成 Q&A"}
|
||
</button>
|
||
</section>
|
||
<section className="results-area">
|
||
<div className="result-toolbar">
|
||
<label className="check-label">
|
||
<input
|
||
type="checkbox"
|
||
checked={items.length > 0 && selected === items.length}
|
||
onChange={(event) => {
|
||
if (event.target.checked) acceptAll();
|
||
}}
|
||
/>{" "}
|
||
全选 ({selected}/{items.length})
|
||
</label>
|
||
<div>
|
||
<button
|
||
className="ghost-button"
|
||
onClick={() => setManualOpen(true)}
|
||
>
|
||
＋ 手动添加Q&A
|
||
</button>
|
||
<button
|
||
className="ghost-button"
|
||
onClick={() => setImportOpen(true)}
|
||
>
|
||
<FileText size={14} /> 批量导入问题
|
||
</button>
|
||
<button
|
||
className="success-button"
|
||
onClick={acceptAll}
|
||
disabled={!items.length || saving}
|
||
>
|
||
{saving ? "正在存入…" : "✓ 批量采纳"}
|
||
</button>
|
||
<button
|
||
className="ghost-button"
|
||
onClick={generate}
|
||
disabled={loading}
|
||
>
|
||
↻ 重新生成
|
||
</button>
|
||
</div>
|
||
</div>
|
||
{items.length === 0 && (
|
||
<div className="empty-results panel">
|
||
<Sparkles size={22} />
|
||
<span>填写左侧商品条件后，点击“生成 Q&A”</span>
|
||
</div>
|
||
)}
|
||
{items.map((item) => (
|
||
<InlineQAItem
|
||
key={item.id}
|
||
item={item}
|
||
onToggle={toggle}
|
||
onDelete={remove}
|
||
onSave={save}
|
||
/>
|
||
))}
|
||
</section>
|
||
</div>
|
||
{manualOpen && (
|
||
<ManualQAForm onClose={() => setManualOpen(false)} onSave={addManual} />
|
||
)}
|
||
{importOpen && (
|
||
<AssistantQuestionImportModal form={form} onClose={() => setImportOpen(false)} onImport={addImportedQuestions} />
|
||
)}
|
||
{adoptedDialog && (
|
||
<div
|
||
className="adopt-success-backdrop"
|
||
onMouseDown={(event) => event.target === event.currentTarget && setAdoptedDialog(null)}
|
||
>
|
||
<section className="adopt-success-modal" role="dialog" aria-modal="true" aria-labelledby="adopt-success-title">
|
||
<div className="adopt-success-icon">✓</div>
|
||
<h2 id="adopt-success-title">问答已采纳</h2>
|
||
<p>已采纳 {adoptedDialog.count} 条，采纳问答已收录至问答库。</p>
|
||
<button type="button" className="primary-button" onClick={() => setAdoptedDialog(null)}>知道了</button>
|
||
</section>
|
||
</div>
|
||
)}
|
||
</>
|
||
);
|
||
}
|
||
|
||
function UserTable({ users, onChanged }) {
|
||
const [editing, setEditing] = useState(null);
|
||
const [form, setForm] = useState({
|
||
username: "",
|
||
password: "",
|
||
display_name: "",
|
||
role_code: "operator",
|
||
is_active: true,
|
||
});
|
||
function open(user) {
|
||
setForm(
|
||
user
|
||
? {
|
||
username: user.username,
|
||
password: "",
|
||
display_name: user.display_name,
|
||
role_code: user.role_code,
|
||
is_active: user.is_active,
|
||
}
|
||
: {
|
||
username: "",
|
||
password: "",
|
||
display_name: "",
|
||
role_code: "operator",
|
||
is_active: true,
|
||
},
|
||
);
|
||
setEditing(user || "new");
|
||
}
|
||
async function save(event) {
|
||
event.preventDefault();
|
||
try {
|
||
if (editing === "new")
|
||
await api("/api/admin/users", {
|
||
method: "POST",
|
||
body: JSON.stringify(form),
|
||
});
|
||
else
|
||
await api(`/api/admin/users/${editing.id}`, {
|
||
method: "PATCH",
|
||
body: JSON.stringify({
|
||
password: form.password || undefined,
|
||
display_name: form.display_name,
|
||
role_code: form.role_code,
|
||
is_active: form.is_active,
|
||
}),
|
||
});
|
||
setEditing(null);
|
||
onChanged();
|
||
} catch (error) {
|
||
window.alert(error.message);
|
||
}
|
||
}
|
||
async function remove(user) {
|
||
if (
|
||
!window.confirm(
|
||
`\u786e\u8ba4\u5220\u9664\u7528\u6237 ${user.username}\uff1f`,
|
||
)
|
||
)
|
||
return;
|
||
try {
|
||
await api(`/api/admin/users/${user.id}`, { method: "DELETE" });
|
||
onChanged();
|
||
} catch (error) {
|
||
window.alert(error.message);
|
||
}
|
||
}
|
||
return (
|
||
<>
|
||
<div className="user-table-actions">
|
||
<button className="primary-button" onClick={() => open(null)}>
|
||
<Plus size={16} />
|
||
{"\u65b0\u589e\u7528\u6237"}
|
||
</button>
|
||
</div>
|
||
{editing && (
|
||
<div className="user-modal-backdrop">
|
||
<form className="user-modal panel" onSubmit={save}>
|
||
<h3>
|
||
{editing === "new"
|
||
? "\u65b0\u589e\u7528\u6237"
|
||
: "\u7f16\u8f91\u7528\u6237"}
|
||
</h3>
|
||
{editing === "new" && (
|
||
<label>
|
||
{"\u7528\u6237\u540d"}
|
||
<input
|
||
required
|
||
value={form.username}
|
||
onChange={(event) =>
|
||
setForm({ ...form, username: event.target.value })
|
||
}
|
||
/>
|
||
</label>
|
||
)}
|
||
<label>
|
||
{"\u663e\u793a\u540d\u79f0"}
|
||
<input
|
||
required
|
||
value={form.display_name}
|
||
onChange={(event) =>
|
||
setForm({ ...form, display_name: event.target.value })
|
||
}
|
||
/>
|
||
</label>
|
||
<label>
|
||
{editing === "new"
|
||
? "\u521d\u59cb\u5bc6\u7801"
|
||
: "\u91cd\u7f6e\u5bc6\u7801\uff08\u9009\u586b\uff09"}
|
||
<input
|
||
type="password"
|
||
minLength="8"
|
||
required={editing === "new"}
|
||
value={form.password}
|
||
onChange={(event) =>
|
||
setForm({ ...form, password: event.target.value })
|
||
}
|
||
/>
|
||
</label>
|
||
<label>
|
||
{"\u89d2\u8272"}
|
||
<select
|
||
value={form.role_code}
|
||
onChange={(event) =>
|
||
setForm({ ...form, role_code: event.target.value })
|
||
}
|
||
>
|
||
<option value="operator">{"\u666e\u901a\u8fd0\u8425"}</option>
|
||
<option value="super_admin">
|
||
{"\u8d85\u7ea7\u7ba1\u7406\u5458"}
|
||
</option>
|
||
</select>
|
||
</label>
|
||
{editing !== "new" && (
|
||
<label className="checkbox-row">
|
||
<input
|
||
type="checkbox"
|
||
checked={form.is_active}
|
||
onChange={(event) =>
|
||
setForm({ ...form, is_active: event.target.checked })
|
||
}
|
||
/>
|
||
{"\u542f\u7528\u8d26\u53f7"}
|
||
</label>
|
||
)}
|
||
<div className="modal-actions">
|
||
<button
|
||
type="button"
|
||
className="ghost-button"
|
||
onClick={() => setEditing(null)}
|
||
>
|
||
{"\u53d6\u6d88"}
|
||
</button>
|
||
<button className="primary-button">{"\u4fdd\u5b58"}</button>
|
||
</div>
|
||
</form>
|
||
</div>
|
||
)}
|
||
<table className="data-table">
|
||
<thead>
|
||
<tr>
|
||
<th>{"\u8d26\u53f7"}</th>
|
||
<th>{"\u663e\u793a\u540d\u79f0"}</th>
|
||
<th>{"\u89d2\u8272"}</th>
|
||
<th>{"\u72b6\u6001"}</th>
|
||
<th>{"\u6700\u8fd1\u767b\u5f55"}</th>
|
||
<th>{"\u64cd\u4f5c"}</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
{users.map((user) => (
|
||
<tr key={user.id}>
|
||
<td>{user.username}</td>
|
||
<td>{user.display_name}</td>
|
||
<td>
|
||
<span className="role-pill">{user.role_label}</span>
|
||
</td>
|
||
<td>
|
||
<span
|
||
className={
|
||
user.is_active ? "status-pill success" : "status-pill"
|
||
}
|
||
>
|
||
{user.is_active ? "\u6b63\u5e38" : "\u505c\u7528"}
|
||
</span>
|
||
</td>
|
||
<td>
|
||
{user.last_login_at
|
||
? new Date(user.last_login_at).toLocaleString()
|
||
: "\u672a\u767b\u5f55"}
|
||
</td>
|
||
<td>
|
||
<button className="table-action" onClick={() => open(user)}>
|
||
{"\u7f16\u8f91"}
|
||
</button>
|
||
<button
|
||
className="table-action danger"
|
||
onClick={() => remove(user)}
|
||
>
|
||
{"\u5220\u9664"}
|
||
</button>
|
||
</td>
|
||
</tr>
|
||
))}
|
||
</tbody>
|
||
</table>
|
||
</>
|
||
);
|
||
}
|
||
function LogTable({ logs }) {
|
||
return (
|
||
<table className="data-table">
|
||
<thead>
|
||
<tr>
|
||
<th>{"\u8d26\u53f7"}</th>
|
||
<th>{"\u7ed3\u679c"}</th>
|
||
<th>IP \u5730\u5740</th>
|
||
<th>{"\u65f6\u95f4"}</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
{logs.map((log, index) => (
|
||
<tr key={`${log.created_at}-${index}`}>
|
||
<td>{log.username}</td>
|
||
<td>
|
||
<span
|
||
className={log.success ? "status-pill success" : "status-pill"}
|
||
>
|
||
{log.success ? "\u6210\u529f" : "\u5931\u8d25"}
|
||
</span>
|
||
</td>
|
||
<td>{log.ip_address || "-"}</td>
|
||
<td>{new Date(log.created_at).toLocaleString()}</td>
|
||
</tr>
|
||
))}
|
||
</tbody>
|
||
</table>
|
||
);
|
||
}
|
||
function SettingsTable({ settings }) {
|
||
return (
|
||
<div className="settings-list">
|
||
{Object.entries(settings).map(([key, value]) => (
|
||
<div className="settings-row" key={key}>
|
||
<strong>{key}</strong>
|
||
<span>
|
||
{Array.isArray(value)
|
||
? value.map((item) => item.label).join("\u3001")
|
||
: String(value)}
|
||
</span>
|
||
</div>
|
||
))}
|
||
</div>
|
||
);
|
||
}
|
||
function ReviewTable({ records, onRefresh }) {
|
||
const [busy, setBusy] = useState("");
|
||
async function decide(record, approved) {
|
||
setBusy(record.task_id);
|
||
try {
|
||
await api(`/api/admin/reviews/${record.task_id}/decision`, {
|
||
method: "POST",
|
||
body: JSON.stringify({ approved }),
|
||
});
|
||
onRefresh();
|
||
} catch (error) {
|
||
window.alert(error.message);
|
||
} finally {
|
||
setBusy("");
|
||
}
|
||
}
|
||
return (
|
||
<div className="review-list">
|
||
{records.length === 0 && (
|
||
<div className="empty-state">暂无待审核记录</div>
|
||
)}
|
||
{records.map((record) => (
|
||
<article className="review-card panel" key={record.task_id}>
|
||
<div className="review-card-head">
|
||
<div>
|
||
<strong>{record.task_id}</strong>
|
||
<span>
|
||
{record.user_name} · {record.product_name}
|
||
</span>
|
||
</div>
|
||
<span className="status-pill">{record.status}</span>
|
||
</div>
|
||
<div className="review-columns">
|
||
<div>
|
||
<h4>邀答截图（{record.invited_screenshots.length}）</h4>
|
||
<div className="review-images">
|
||
{record.invited_screenshots.map((image) => (
|
||
<img key={image.name} src={image.data_url} alt={image.name} />
|
||
))}
|
||
</div>
|
||
</div>
|
||
<div>
|
||
<h4>识别问题（{record.recognized_questions.length}）</h4>
|
||
{record.recognized_questions.map((question) => (
|
||
<div className="review-question" key={question.id}>
|
||
<b>{question.id}</b>
|
||
{question.question}
|
||
</div>
|
||
))}
|
||
</div>
|
||
<div>
|
||
<h4>完成截图（{record.final_screenshots.length}）</h4>
|
||
<div className="review-images">
|
||
{record.final_screenshots.map((image) => (
|
||
<img key={image.name} src={image.data_url} alt={image.name} />
|
||
))}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div className="review-actions">
|
||
<button
|
||
className="danger-button"
|
||
disabled={!!busy}
|
||
onClick={() => decide(record, false)}
|
||
>
|
||
驳回
|
||
</button>
|
||
<button
|
||
className="primary-button"
|
||
disabled={!!busy}
|
||
onClick={() => decide(record, true)}
|
||
>
|
||
审核通过
|
||
</button>
|
||
</div>
|
||
</article>
|
||
))}
|
||
</div>
|
||
);
|
||
}
|
||
function ReviewPanel({ records, onRefresh }) {
|
||
const [queue, setQueue] = useState("answer");
|
||
return (
|
||
<>
|
||
<div className="review-queues">
|
||
<button
|
||
className={queue === "ask" ? "active" : ""}
|
||
onClick={() => setQueue("ask")}
|
||
>
|
||
队列一：提问审核
|
||
</button>
|
||
<button
|
||
className={queue === "answer" ? "active" : ""}
|
||
onClick={() => setQueue("answer")}
|
||
>
|
||
队列二：回答审核
|
||
</button>
|
||
</div>
|
||
<div className="review-tip">
|
||
<strong>{queue === "answer" ? "回答审核说明" : "提问审核说明"}</strong>
|
||
<span>
|
||
{queue === "answer"
|
||
? "查看用户上传的邀答截图、识别问题及完成回答截图，确认问题与回答内容是否符合任务要求。点击截图可放大查看。"
|
||
: "对照已发布的问题文字与用户提交截图，审核提问是否合规、相关、无重复。"}
|
||
</span>
|
||
</div>
|
||
{queue === "answer" ? (
|
||
<ReviewTable records={records} onRefresh={onRefresh} />
|
||
) : (
|
||
<div className="empty-state">暂无提问审核记录</div>
|
||
)}
|
||
</>
|
||
);
|
||
}
|
||
function UsagePanel({ data }) {
|
||
const maxCount = Math.max(1, ...(data.trend || []).map((item) => item.count || 0));
|
||
return (
|
||
<div className="usage-statistics">
|
||
<div className="usage-summary-grid">
|
||
<div><span>近30天使用次数</span><strong>{data.total_count || 0}</strong></div>
|
||
<div><span>今日使用次数</span><strong>{data.today_count || 0}</strong></div>
|
||
<div><span>今日使用人数</span><strong>{data.today_users || 0}</strong></div>
|
||
</div>
|
||
<section className="usage-chart-section">
|
||
<div className="usage-section-heading"><h3>近30天使用趋势</h3><span>每次进入后台计 1 次（10 分钟内不重复）</span></div>
|
||
<div className="usage-chart" aria-label="近30天使用趋势图">
|
||
{(data.trend || []).map((item) => (
|
||
<div className="usage-chart-column" key={item.date} title={`${item.date}：${item.count} 次，${item.users} 人`}>
|
||
<i style={{ height: `${Math.max(4, (item.count / maxCount) * 100)}%` }} />
|
||
<small>{item.date.slice(5).replace("-", "/")}</small>
|
||
</div>
|
||
))}
|
||
</div>
|
||
</section>
|
||
<section className="usage-users-section">
|
||
<div className="usage-section-heading"><h3>使用人员</h3><span>按近30天使用次数排序</span></div>
|
||
{(data.users || []).length ? (
|
||
<div className="usage-user-list">
|
||
{data.users.map((item) => (
|
||
<div className="usage-user-row" key={`${item.user_id}-${item.username}`}>
|
||
<div><strong>{item.display_name}</strong><span>{item.department_name}</span></div>
|
||
<b>{item.count} 次</b>
|
||
</div>
|
||
))}
|
||
</div>
|
||
) : <div className="empty-state">暂无使用记录</div>}
|
||
</section>
|
||
</div>
|
||
);
|
||
}
|
||
|
||
function AdminPage({ type }) {
|
||
const [data, setData] = useState(null);
|
||
const [error, setError] = useState("");
|
||
const [reload, setReload] = useState(0);
|
||
const config = {
|
||
usage: {
|
||
title: "使用统计",
|
||
description: "查看运营后台的进入次数、使用人员和所属部门。",
|
||
endpoint: "/api/admin/usage/stats",
|
||
},
|
||
users: {
|
||
title: "\u7528\u6237\u7ba1\u7406",
|
||
description:
|
||
"\u7ba1\u7406\u8fd0\u8425\u540e\u53f0\u8d26\u53f7\u53ca\u89d2\u8272\u72b6\u6001\u3002",
|
||
endpoint: "/api/admin/users",
|
||
},
|
||
logs: {
|
||
title: "\u767b\u5f55\u65e5\u5fd7",
|
||
description:
|
||
"\u67e5\u770b\u8fd0\u8425\u540e\u53f0\u8d26\u53f7\u7684\u767b\u5f55\u8bb0\u5f55\u3002",
|
||
endpoint: "/api/admin/auth/login-logs",
|
||
},
|
||
settings: {
|
||
title: "\u7cfb\u7edf\u914d\u7f6e",
|
||
description:
|
||
"\u67e5\u770b\u5f53\u524d\u540e\u53f0\u8fd0\u884c\u53c2\u6570\u4e0e\u53ef\u7528\u89d2\u8272\u3002",
|
||
endpoint: "/api/admin/settings",
|
||
},
|
||
review: {
|
||
title: "\u5ba1\u6838\u4e2d\u5fc3",
|
||
description:
|
||
"\u67e5\u770b\u56de\u7b54\u7528\u6237\u4e0a\u4f20\u7684\u622a\u56fe\u4e0e\u8bc6\u522b\u95ee\u9898\u3002",
|
||
endpoint: "/api/admin/reviews",
|
||
},
|
||
}[type];
|
||
useEffect(() => {
|
||
setData(null);
|
||
setError("");
|
||
api(config.endpoint)
|
||
.then((result) => setData(result.data))
|
||
.catch((err) => setError(err.message));
|
||
}, [type, reload]);
|
||
return (
|
||
<>
|
||
<PageHeading title={config.title} description={config.description} />
|
||
<section className="admin-panel panel">
|
||
{error ? (
|
||
<div className="form-error">{error}</div>
|
||
) : data === null ? (
|
||
<div className="empty-state">{"\u52a0\u8f7d\u4e2d\u2026"}</div>
|
||
) : type === "usage" ? (
|
||
<UsagePanel data={data} />
|
||
) : type === "users" ? (
|
||
<UserTable
|
||
users={data}
|
||
onChanged={() => setReload((value) => value + 1)}
|
||
/>
|
||
) : type === "logs" ? (
|
||
<LogTable logs={data} />
|
||
) : type === "review" ? (
|
||
<ReviewPanel
|
||
records={data}
|
||
onRefresh={() => setReload((value) => value + 1)}
|
||
/>
|
||
) : (
|
||
<SettingsTable settings={data} />
|
||
)}
|
||
</section>
|
||
</>
|
||
);
|
||
}
|
||
|
||
function AnswerTaskPage() {
|
||
const segments = window.location.pathname.split('/').filter(Boolean)
|
||
const linkToken = segments[0] === 'answer' ? (segments[1] || '') : ''
|
||
if (!linkToken) return <InvalidAnswerLink />;
|
||
return <AnswerUserPortalV2 api={api} linkToken={linkToken} />;
|
||
/* Legacy task-specific flow retained temporarily for migration. */
|
||
useEffect(() => {
|
||
const button = document.createElement("button");
|
||
button.textContent = "← 返回";
|
||
button.className = "answer-back-floating";
|
||
button.onclick = () => {
|
||
if (window.history.length > 1) window.history.back();
|
||
else window.location.href = "/";
|
||
};
|
||
document.body.appendChild(button);
|
||
return () => button.remove();
|
||
}, []);
|
||
const taskId = "";
|
||
const token = "";
|
||
const [task, setTask] = useState(null);
|
||
const [files, setFiles] = useState([]);
|
||
const [selected, setSelected] = useState([]);
|
||
const [userName, setUserName] = useState("");
|
||
const [error, setError] = useState("");
|
||
const [loading, setLoading] = useState(true);
|
||
const [submitting, setSubmitting] = useState(false);
|
||
const [done, setDone] = useState(false);
|
||
useEffect(() => {
|
||
setLoading(false);
|
||
setTask({
|
||
task_id: "公共回答链接",
|
||
product_name: "淘宝问大家",
|
||
status: "待上传",
|
||
recognized_questions: [],
|
||
selected_questions: [],
|
||
});
|
||
}, []);
|
||
function choose(event) {
|
||
const next = Array.from(event.target.files || []);
|
||
if (next.length > 10) return setError("最多上传10张截图");
|
||
setError("");
|
||
setFiles(next);
|
||
}
|
||
async function uploadInvited(event) {
|
||
event.preventDefault();
|
||
if (!files.length) return setError("请先选择截图");
|
||
setSubmitting(true);
|
||
setError("");
|
||
const body = new FormData();
|
||
body.append("token", token);
|
||
body.append("user_name", userName);
|
||
files.forEach((file) => body.append("files", file));
|
||
try {
|
||
await api(
|
||
`/api/answer/tasks/${encodeURIComponent(taskId)}/invited-screenshots`,
|
||
{ method: "POST", body, headers: {} },
|
||
);
|
||
const result = await api(
|
||
`/api/answer/tasks/${encodeURIComponent(taskId)}?token=${encodeURIComponent(token)}`,
|
||
);
|
||
setTask(result.data);
|
||
setFiles([]);
|
||
} catch (err) {
|
||
setError(err.message);
|
||
} finally {
|
||
setSubmitting(false);
|
||
}
|
||
}
|
||
async function submitSelection() {
|
||
if (!selected.length) return setError("请至少选择一个要回答的问题");
|
||
setSubmitting(true);
|
||
try {
|
||
const result = await api(
|
||
`/api/answer/tasks/${encodeURIComponent(taskId)}/select`,
|
||
{
|
||
method: "POST",
|
||
body: JSON.stringify({ token, question_ids: selected }),
|
||
},
|
||
);
|
||
setTask(result.data);
|
||
setError("");
|
||
} catch (err) {
|
||
setError(err.message);
|
||
} finally {
|
||
setSubmitting(false);
|
||
}
|
||
}
|
||
async function uploadFinal(event) {
|
||
event.preventDefault();
|
||
if (!files.length) return setError("请先选择完成截图");
|
||
setSubmitting(true);
|
||
const body = new FormData();
|
||
body.append("token", token);
|
||
files.forEach((file) => body.append("files", file));
|
||
try {
|
||
await api(
|
||
`/api/answer/tasks/${encodeURIComponent(taskId)}/final-screenshots`,
|
||
{ method: "POST", body, headers: {} },
|
||
);
|
||
setDone(true);
|
||
setTask((current) => ({ ...current, status: "待审核" }));
|
||
setFiles([]);
|
||
} catch (err) {
|
||
setError(err.message);
|
||
} finally {
|
||
setSubmitting(false);
|
||
}
|
||
}
|
||
if (loading)
|
||
return (
|
||
<div className="answer-page">
|
||
<div className="answer-card">
|
||
<div className="empty-state">加载任务中…</div>
|
||
</div>
|
||
</div>
|
||
);
|
||
if (error && !task)
|
||
return (
|
||
<div className="answer-page">
|
||
<div className="answer-card">
|
||
<h1>回答任务链接</h1>
|
||
<div className="form-error">{error}</div>
|
||
</div>
|
||
</div>
|
||
);
|
||
const recognized = task?.recognized_questions || [];
|
||
const assigned = task?.selected_questions || [];
|
||
const canSelect = task?.status === "待筛选" && recognized.length > 0;
|
||
const canFinish = task?.status === "待完成" && assigned.length > 0;
|
||
return (
|
||
<div className="answer-page">
|
||
<div className="answer-card">
|
||
<div className="answer-brand">
|
||
<MessageCircle size={20} />
|
||
<span>【问大家】回答任务</span>
|
||
</div>
|
||
<div className="answer-head">
|
||
<h1>{task.product_name}</h1>
|
||
<span className="status-pill">{done ? "待审核" : task.status}</span>
|
||
</div>
|
||
<p className="answer-task-id">任务ID：{task.task_id}</p>
|
||
{error && <div className="form-error">{error}</div>}
|
||
{!recognized.length && (
|
||
<form onSubmit={uploadInvited} className="answer-section">
|
||
<h2>上传受邀回答截图</h2>
|
||
<p>请上传淘宝“被邀请回答”页面截图，系统会自动识别其中的问题。</p>
|
||
<label>
|
||
用户标识（选填）
|
||
<input
|
||
value={userName}
|
||
onChange={(event) => setUserName(event.target.value)}
|
||
placeholder="例如：淘宝昵称"
|
||
/>
|
||
</label>
|
||
<label className="upload-box">
|
||
<input
|
||
type="file"
|
||
accept="image/jpeg,image/png,image/webp"
|
||
multiple
|
||
onChange={choose}
|
||
/>
|
||
<span>点击选择截图（最多10张，仅支持 JPG/PNG/WEBP）</span>
|
||
</label>
|
||
{files.length > 0 && (
|
||
<div className="file-list">已选择 {files.length} 张截图</div>
|
||
)}
|
||
<button
|
||
className="primary-button answer-submit"
|
||
disabled={submitting}
|
||
>
|
||
{submitting ? "识别提交中…" : "上传并提交审核"}
|
||
</button>
|
||
</form>
|
||
)}
|
||
{canSelect && (
|
||
<section className="answer-section">
|
||
<h2>请选择要回答的问题</h2>
|
||
<p>系统已识别出以下问题，请勾选后提交给运营筛选。</p>
|
||
<div className="answer-question-list">
|
||
{recognized.map((question) => (
|
||
<label key={question.id}>
|
||
<input
|
||
type="checkbox"
|
||
checked={selected.includes(question.id)}
|
||
onChange={(event) =>
|
||
setSelected((current) =>
|
||
event.target.checked
|
||
? [...current, question.id]
|
||
: current.filter((id) => id !== question.id),
|
||
)
|
||
}
|
||
/>
|
||
<span>
|
||
<b>{question.id}</b>
|
||
{question.question}
|
||
</span>
|
||
</label>
|
||
))}
|
||
</div>
|
||
<button
|
||
className="primary-button answer-submit"
|
||
onClick={submitSelection}
|
||
disabled={submitting}
|
||
>
|
||
{submitting ? "提交中…" : "确认选择"}
|
||
</button>
|
||
</section>
|
||
)}
|
||
{canFinish && (
|
||
<section className="answer-section">
|
||
<h2>完成回答</h2>
|
||
<p>请复制参考回答到淘宝完成回答，然后上传完成截图。</p>
|
||
<div className="assigned-list">
|
||
{assigned.map((question) => (
|
||
<article key={question.id}>
|
||
<h3>
|
||
{question.id} {question.question}
|
||
</h3>
|
||
<p>参考回答：{question.answer}</p>
|
||
</article>
|
||
))}
|
||
</div>
|
||
<form onSubmit={uploadFinal}>
|
||
<label className="upload-box">
|
||
<input
|
||
type="file"
|
||
accept="image/jpeg,image/png,image/webp"
|
||
multiple
|
||
onChange={choose}
|
||
/>
|
||
<span>点击选择完成截图（最多10张）</span>
|
||
</label>
|
||
{files.length > 0 && (
|
||
<div className="file-list">已选择 {files.length} 张截图</div>
|
||
)}
|
||
<button
|
||
className="primary-button answer-submit"
|
||
disabled={submitting}
|
||
>
|
||
{submitting ? "提交中…" : "提交完成截图"}
|
||
</button>
|
||
</form>
|
||
</section>
|
||
)}
|
||
{done && (
|
||
<div className="answer-success">已提交运营审核，请等待处理。</div>
|
||
)}
|
||
{task.status === "待审核" && !done && (
|
||
<div className="answer-success">已提交运营审核，请等待处理。</div>
|
||
)}
|
||
</div>
|
||
</div>
|
||
);
|
||
}
|
||
|
||
function InvalidAnswerLink() {
|
||
return (
|
||
<main className="answer-v2-shell">
|
||
<section className="answer-v2-app login-only">
|
||
<section className="answer-v2-login">
|
||
<h1>回答任务链接无效</h1>
|
||
<p>请联系对应运营获取专属回答任务链接。</p>
|
||
</section>
|
||
</section>
|
||
</main>
|
||
);
|
||
}
|
||
function SubmissionStatusDynamic({
|
||
record,
|
||
history,
|
||
onRefresh,
|
||
onNew,
|
||
onHistory,
|
||
}) {
|
||
if (!record) return null;
|
||
const passed = record.status === "已通过";
|
||
const rejected = record.status === "未通过";
|
||
return (
|
||
<>
|
||
<div
|
||
className={`answer-status-card ${passed ? "passed" : rejected ? "rejected" : ""}`}
|
||
>
|
||
<div className="answer-status-heading">
|
||
<span>{passed ? "✓" : rejected ? "!" : "◷"}</span>
|
||
<div>
|
||
<h2>
|
||
{passed ? "审核已通过" : rejected ? "审核未通过" : "正在审核中"}{" "}
|
||
<em>
|
||
{passed ? "审核通过" : rejected ? "需要重传" : "截图初审"}
|
||
</em>
|
||
</h2>
|
||
<p>
|
||
{passed
|
||
? "您提交的截图已通过运营审核，后续问题派发功能接入后将在这里展示。"
|
||
: rejected
|
||
? "本次截图未通过审核，请重新上传清晰、完整的截图。"
|
||
: "您提交的被邀回答截图正在审核，运营正在核验问题，请耐心等待。"}
|
||
</p>
|
||
</div>
|
||
</div>
|
||
<div className="answer-status-meta">
|
||
<div>
|
||
<span>{passed || rejected ? "处理时间" : "提交时间"}</span>
|
||
<b>{new Date(record.updated_at).toLocaleString()}</b>
|
||
</div>
|
||
<div>
|
||
<span>当前状态</span>
|
||
<b>{record.status}</b>
|
||
</div>
|
||
</div>
|
||
<div className="answer-status-actions">
|
||
<span>
|
||
{passed
|
||
? "审核结果已更新"
|
||
: rejected
|
||
? "请重新上传材料"
|
||
: "页面可刷新查看最新审核结果"}
|
||
</span>
|
||
<button className="ghost-button" onClick={onRefresh}>
|
||
↻ 刷新状态
|
||
</button>
|
||
</div>
|
||
</div>
|
||
<div className="answer-material-card">
|
||
<div>
|
||
<h3>▧ 已提交核验材料（只读）</h3>
|
||
<span>♙ 已锁定审核</span>
|
||
</div>
|
||
<div className="answer-material-grid">
|
||
{record.invited_screenshots.map((image, index) => (
|
||
<figure
|
||
key={`${image.name}-${index}`}
|
||
>
|
||
<img src={image.data_url} alt={image.name} />
|
||
<figcaption>◉ 被邀截图{index + 1}</figcaption>
|
||
</figure>
|
||
))}
|
||
</div>
|
||
</div>
|
||
<div className="answer-history-actions">
|
||
<button className="ghost-button" onClick={onHistory}>
|
||
上传历史（{history.length}）
|
||
</button>
|
||
<button className="primary-button" onClick={onNew}>
|
||
{rejected ? "重新上传" : "继续上传"}
|
||
</button>
|
||
</div>
|
||
</>
|
||
);
|
||
}
|
||
|
||
function AnswerUserPortal() {
|
||
const [session, setSession] = useState(() =>
|
||
JSON.parse(localStorage.getItem("answer_user_session") || "null"),
|
||
);
|
||
const [phone, setPhone] = useState("");
|
||
const [records, setRecords] = useState([]);
|
||
const [files, setFiles] = useState([]);
|
||
const [error, setError] = useState("");
|
||
const [busy, setBusy] = useState(false);
|
||
async function login(event) {
|
||
event.preventDefault();
|
||
setBusy(true);
|
||
setError("");
|
||
try {
|
||
const result = await api("/api/answer/auth/phone-login", {
|
||
method: "POST",
|
||
body: JSON.stringify({ phone }),
|
||
});
|
||
localStorage.setItem("answer_user_session", JSON.stringify(result.data));
|
||
setSession(result.data);
|
||
} catch (err) {
|
||
setError(err.message);
|
||
} finally {
|
||
setBusy(false);
|
||
}
|
||
}
|
||
async function load() {
|
||
if (!session) return;
|
||
try {
|
||
const result = await api(
|
||
`/api/answer/me/submissions?token=${encodeURIComponent(session.token)}`,
|
||
);
|
||
setRecords(result.data);
|
||
} catch (err) {
|
||
setError(err.message);
|
||
}
|
||
}
|
||
useEffect(() => {
|
||
load();
|
||
}, [session]);
|
||
useEffect(() => {
|
||
if (!session) return;
|
||
const timer = setInterval(load, 15000);
|
||
return () => clearInterval(timer);
|
||
}, [session]);
|
||
async function upload(event) {
|
||
event.preventDefault();
|
||
if (!files.length) return setError("请先选择截图");
|
||
setBusy(true);
|
||
const body = new FormData();
|
||
body.append("token", session.token);
|
||
files.forEach((file) => body.append("files", file));
|
||
try {
|
||
await api("/api/answer/me/submissions", { method: "POST", body });
|
||
setFiles([]);
|
||
await load();
|
||
} catch (err) {
|
||
setError(err.message);
|
||
} finally {
|
||
setBusy(false);
|
||
}
|
||
}
|
||
async function complete(record, event) {
|
||
event.preventDefault();
|
||
const selected = Array.from(event.currentTarget.elements.files.files || []);
|
||
if (!selected.length) return setError("请上传完成截图");
|
||
setBusy(true);
|
||
const body = new FormData();
|
||
body.append("token", session.token);
|
||
selected.forEach((file) => body.append("files", file));
|
||
try {
|
||
await api(`/api/answer/me/submissions/${record.id}/completion`, {
|
||
method: "POST",
|
||
body,
|
||
});
|
||
await load();
|
||
} catch (err) {
|
||
setError(err.message);
|
||
} finally {
|
||
setBusy(false);
|
||
}
|
||
}
|
||
if (!session)
|
||
return (
|
||
<main className="answer-public-shell">
|
||
<section className="answer-mobile-app answer-login">
|
||
<header className="answer-public-header">
|
||
<div>
|
||
<ShieldCheck size={16} />
|
||
<strong>淘宝问答运营官方承接通道</strong>
|
||
<em>官方认证</em>
|
||
</div>
|
||
</header>
|
||
<form className="answer-phone-card" onSubmit={login}>
|
||
<div className="answer-login-icon">
|
||
<MessageCircle size={28} />
|
||
</div>
|
||
<h1>手机号登录</h1>
|
||
<p>登录后系统会生成唯一用户ID，用于接收和跟踪回答任务。</p>
|
||
<label>
|
||
手机号码
|
||
<input
|
||
autoFocus
|
||
inputMode="numeric"
|
||
maxLength="11"
|
||
value={phone}
|
||
onChange={(event) =>
|
||
setPhone(event.target.value.replace(/\D/g, ""))
|
||
}
|
||
placeholder="请输入11位手机号"
|
||
/>
|
||
</label>
|
||
{error && <div className="form-error">{error}</div>}
|
||
<button className="primary-button" disabled={busy}>
|
||
{busy ? "登录中…" : "登录并进入任务中心"}
|
||
</button>
|
||
<small>第一版暂不发送短信验证码</small>
|
||
</form>
|
||
</section>
|
||
</main>
|
||
);
|
||
const latest = records[0];
|
||
return (
|
||
<main className="answer-public-shell">
|
||
<section className="answer-mobile-app">
|
||
<header className="answer-public-header">
|
||
<div>
|
||
<ShieldCheck size={16} />
|
||
<strong>淘宝问答运营官方承接通道</strong>
|
||
<em>官方认证</em>
|
||
</div>
|
||
<button
|
||
onClick={() => {
|
||
localStorage.removeItem("answer_user_session");
|
||
setSession(null);
|
||
}}
|
||
>
|
||
退出
|
||
</button>
|
||
</header>
|
||
<div className="answer-user-card">
|
||
<div>
|
||
<strong>用户ID：{session.user_id}</strong>
|
||
<span>{latest?.status || "待上传"}</span>
|
||
</div>
|
||
<p>{session.taobao_id || session.account || session.phone}</p>
|
||
</div>
|
||
<section className="answer-public-body">
|
||
{error && <div className="form-error">{error}</div>}
|
||
{(!latest || ["已通过", "未通过"].includes(latest.status)) && (
|
||
<form onSubmit={upload}>
|
||
<div className="answer-guide">
|
||
<small>✣ 邀答问题识别</small>
|
||
<h1>上传被邀请回答截图</h1>
|
||
<p>
|
||
系统将模拟识别商品标题、商品主图和问题，并自动生成参考回答，交由运营派发。
|
||
</p>
|
||
</div>
|
||
<div className="answer-upload-card">
|
||
<label className="answer-dropzone">
|
||
<input
|
||
name="files"
|
||
type="file"
|
||
accept="image/jpeg,image/png,image/webp"
|
||
multiple
|
||
onChange={(event) =>
|
||
setFiles(Array.from(event.target.files).slice(0, 10))
|
||
}
|
||
/>
|
||
<span className="answer-upload-plus">＋</span>
|
||
<strong>上传被邀截图</strong>
|
||
<small>最多10张 JPG、PNG、WEBP</small>
|
||
</label>
|
||
{files.length > 0 && (
|
||
<div className="file-list">已选择 {files.length} 张</div>
|
||
)}
|
||
</div>
|
||
<button
|
||
className="primary-button answer-submit"
|
||
disabled={busy || !files.length}
|
||
>
|
||
{busy ? "识别和生成回答中…" : "提交识别"}
|
||
</button>
|
||
</form>
|
||
)}
|
||
{latest && (
|
||
<div className="answer-personal-task">
|
||
<div className="answer-status-card">
|
||
<h2>{latest.status}</h2>
|
||
<p>提交编号：{latest.submission_no}</p>
|
||
<p>
|
||
{latest.status === "待运营派发"
|
||
? "问题和回答已同步至运营后台“创建任务”。"
|
||
: latest.status === "待用户完成"
|
||
? "运营已派发回答任务，请按参考回答完成淘宝回答。"
|
||
: latest.status === "待审核"
|
||
? "完成截图已提交，等待运营审核。"
|
||
: latest.status === "已通过"
|
||
? "任务审核已通过。"
|
||
: "请关注任务进度。"}
|
||
</p>
|
||
</div>
|
||
{latest.status === "待用户完成" && (
|
||
<>
|
||
<div className="assigned-list">
|
||
{latest.questions
|
||
.filter((q) => q.selected)
|
||
.map((q) => (
|
||
<article key={q.id}>
|
||
<h3>{q.question}</h3>
|
||
<p>商品：{q.product_title}</p>
|
||
<p>参考回答：{q.answer}</p>
|
||
</article>
|
||
))}
|
||
</div>
|
||
<form
|
||
className="answer-upload-card"
|
||
onSubmit={(event) => complete(latest, event)}
|
||
>
|
||
<h3>上传完成回答截图</h3>
|
||
<input
|
||
name="files"
|
||
type="file"
|
||
accept="image/jpeg,image/png,image/webp"
|
||
multiple
|
||
/>
|
||
<button className="primary-button" disabled={busy}>
|
||
提交完成截图
|
||
</button>
|
||
</form>
|
||
</>
|
||
)}
|
||
</div>
|
||
)}
|
||
<div className="answer-help">
|
||
<strong>上传历史</strong>
|
||
{records.map((item) => (
|
||
<p key={item.id}>
|
||
{item.submission_no} · {item.status} ·{" "}
|
||
{new Date(item.created_at).toLocaleString()}
|
||
</p>
|
||
))}
|
||
</div>
|
||
</section>
|
||
</section>
|
||
</main>
|
||
);
|
||
}
|
||
|
||
function PublicAnswerPageWithStatus() {
|
||
const [records, setRecords] = useState([]);
|
||
const [showHistory, setShowHistory] = useState(false);
|
||
const [uploading, setUploading] = useState(false);
|
||
const [poll, setPoll] = useState(0);
|
||
async function load() {
|
||
try {
|
||
const result = await api(
|
||
"/api/answer/public/submissions?client_id=anonymous-browser",
|
||
);
|
||
setRecords(result.data);
|
||
} catch {}
|
||
}
|
||
useEffect(() => {
|
||
load();
|
||
}, [poll]);
|
||
useEffect(() => {
|
||
const timer = setInterval(() => setPoll((value) => value + 1), 15000);
|
||
return () => clearInterval(timer);
|
||
}, []);
|
||
if (showHistory)
|
||
return (
|
||
<main className="answer-public-shell">
|
||
<section className="answer-mobile-app">
|
||
<SubmissionHistory
|
||
records={records}
|
||
onBack={() => setShowHistory(false)}
|
||
/>
|
||
</section>
|
||
</main>
|
||
);
|
||
if (records.length && !uploading) {
|
||
const status = records[0].status;
|
||
const passed = status === "已通过";
|
||
const rejected = status === "未通过";
|
||
return (
|
||
<main className="answer-public-shell">
|
||
<section className="answer-mobile-app">
|
||
<header className="answer-public-header">
|
||
<div>
|
||
<ShieldCheck size={16} />
|
||
<strong>淘宝问答运营官方承接通道</strong>
|
||
<em>官方认证</em>
|
||
</div>
|
||
</header>
|
||
<div className="answer-tabs">
|
||
<strong>
|
||
<ClipboardList size={17} />
|
||
任务认证 <i />
|
||
</strong>
|
||
<span>⌁ 任务状态 {status}</span>
|
||
</div>
|
||
<div className="answer-progress">
|
||
<div className="complete">
|
||
<b>✓</b>
|
||
<span>上传截图</span>
|
||
</div>
|
||
<div className={passed ? "complete" : "active"}>
|
||
<b>{passed ? "✓" : "2"}</b>
|
||
<span>运营审核</span>
|
||
</div>
|
||
<div className={passed ? "active" : ""}>
|
||
<b>3</b>
|
||
<span>问题派发</span>
|
||
</div>
|
||
<div>
|
||
<b>4</b>
|
||
<span>完成任务</span>
|
||
</div>
|
||
</div>
|
||
<section className="answer-public-body">
|
||
<SubmissionStatusDynamic
|
||
record={records[0]}
|
||
history={records}
|
||
onRefresh={load}
|
||
onNew={() => setUploading(true)}
|
||
onHistory={() => setShowHistory(true)}
|
||
/>
|
||
{rejected && (
|
||
<div className="answer-public-error form-error">
|
||
审核未通过，请重新上传符合要求的截图。
|
||
</div>
|
||
)}
|
||
</section>
|
||
</section>
|
||
</main>
|
||
);
|
||
}
|
||
return (
|
||
<PublicAnswerPageEnhanced
|
||
key={records.length}
|
||
onSubmitted={() => {
|
||
setUploading(false);
|
||
setPoll((value) => value + 1);
|
||
}}
|
||
/>
|
||
);
|
||
}
|
||
|
||
function PublicAnswerPageEnhanced({ onSubmitted }) {
|
||
const [files, setFiles] = useState([]);
|
||
const [userName, setUserName] = useState("");
|
||
const [error, setError] = useState("");
|
||
const [submitting, setSubmitting] = useState(false);
|
||
const [done, setDone] = useState(false);
|
||
const [dragging, setDragging] = useState(false);
|
||
const [history, setHistory] = useState([]);
|
||
const [showHistory, setShowHistory] = useState(false);
|
||
const [current, setCurrent] = useState(null);
|
||
const clientId = (() => {
|
||
let value = localStorage.getItem("answer_client_id");
|
||
if (!value) {
|
||
value = `web-${Date.now()}-${Math.random().toString(36).slice(2)}`;
|
||
localStorage.setItem("answer_client_id", value);
|
||
}
|
||
return value;
|
||
})();
|
||
async function refreshHistory() {
|
||
try {
|
||
const result = await api(
|
||
`/api/answer/public/submissions?client_id=${encodeURIComponent(clientId)}`,
|
||
);
|
||
setHistory(result.data);
|
||
if (result.data.length) {
|
||
setCurrent(result.data[0]);
|
||
setDone(true);
|
||
}
|
||
} catch {}
|
||
}
|
||
useEffect(() => {
|
||
refreshHistory();
|
||
}, []);
|
||
useEffect(
|
||
() => () => files.forEach((item) => URL.revokeObjectURL(item.preview)),
|
||
[files],
|
||
);
|
||
function addFiles(list) {
|
||
const incoming = Array.from(list || []).filter((file) =>
|
||
["image/jpeg", "image/png", "image/webp"].includes(file.type),
|
||
);
|
||
if (files.length + incoming.length > 10)
|
||
return setError("每次最多上传10张截图");
|
||
if (incoming.length !== Array.from(list || []).length)
|
||
setError("仅支持 JPG、PNG、WEBP 图片");
|
||
else setError("");
|
||
setFiles((current) => [
|
||
...current,
|
||
...incoming.map((file) => ({ file, preview: URL.createObjectURL(file) })),
|
||
]);
|
||
}
|
||
function removeFile(index) {
|
||
setFiles((current) => {
|
||
URL.revokeObjectURL(current[index].preview);
|
||
return current.filter((_, fileIndex) => fileIndex !== index);
|
||
});
|
||
}
|
||
async function submit(event) {
|
||
event.preventDefault();
|
||
if (!files.length) return setError("请先上传至少一张受邀回答截图");
|
||
setSubmitting(true);
|
||
setError("");
|
||
const body = new FormData();
|
||
body.append("client_id", "anonymous-browser");
|
||
body.append("user_name", userName);
|
||
files.forEach((item) => body.append("files", item.file));
|
||
try {
|
||
await api("/api/answer/public/submissions", { method: "POST", body });
|
||
setDone(true);
|
||
files.forEach((item) => URL.revokeObjectURL(item.preview));
|
||
setFiles([]);
|
||
onSubmitted?.();
|
||
} catch (err) {
|
||
setError(err.message);
|
||
} finally {
|
||
setSubmitting(false);
|
||
}
|
||
}
|
||
return (
|
||
<main className="answer-public-shell">
|
||
<section className="answer-mobile-app">
|
||
<header className="answer-public-header">
|
||
<div>
|
||
<ShieldCheck size={16} />
|
||
<strong>淘宝问答运营官方承接通道</strong>
|
||
<em>官方认证</em>
|
||
</div>
|
||
<button
|
||
type="button"
|
||
onClick={() =>
|
||
window.alert(
|
||
"请上传清晰、完整的淘宝“被邀请回答”页面截图；单次最多10张。",
|
||
)
|
||
}
|
||
>
|
||
？ 规则说明
|
||
</button>
|
||
</header>
|
||
<div className="answer-user-card">
|
||
<div>
|
||
<strong>淘宝问答承接</strong>
|
||
<span className={done ? "finished" : ""}>
|
||
{done ? "已提交" : "待提交"}
|
||
</span>
|
||
</div>
|
||
<p>公共回答截图识别通道</p>
|
||
</div>
|
||
<div className="answer-tabs">
|
||
<strong>
|
||
<ClipboardList size={17} />
|
||
任务认证 <i />
|
||
</strong>
|
||
<span>⌁ 任务状态 {done ? "已提交审核" : "第1步·上传截图"}</span>
|
||
</div>
|
||
<div className="answer-progress">
|
||
<div className={!done ? "active" : "complete"}>
|
||
<b>{done ? "✓" : "1"}</b>
|
||
<span>上传截图</span>
|
||
</div>
|
||
<div className={done ? "active" : ""}>
|
||
<b>2</b>
|
||
<span>运营审核</span>
|
||
</div>
|
||
<div>
|
||
<b>3</b>
|
||
<span>问题派发</span>
|
||
</div>
|
||
<div>
|
||
<b>4</b>
|
||
<span>完成任务</span>
|
||
</div>
|
||
</div>
|
||
<section className="answer-public-body">
|
||
<div className="answer-guide">
|
||
<small>✣ 任务认证与核验</small>
|
||
<h1>{done ? "截图已提交审核" : "上传被邀请回答截图"}</h1>
|
||
<p>
|
||
{done
|
||
? "运营将在审核中心查看原始截图和系统识别的问题，请留意后续通知。"
|
||
: "请上传淘宝“被邀请回答”页面的真实截图。提交后系统将识别截图中的问题，并连同原始截图提交运营审核。"}
|
||
</p>
|
||
</div>
|
||
{done ? (
|
||
<div className="answer-done-card">
|
||
<div className="answer-done-icon">✓</div>
|
||
<h2>已提交运营审核</h2>
|
||
<p>本次截图已成功接收，请等待运营处理。</p>
|
||
<button className="primary-button" onClick={() => setDone(false)}>
|
||
继续上传一批截图
|
||
</button>
|
||
</div>
|
||
) : (
|
||
<form onSubmit={submit}>
|
||
<div className="answer-upload-card">
|
||
<div className="answer-upload-title">
|
||
<div>
|
||
<h2>上传被邀请回答截图</h2>
|
||
<p>支持多张上传，最多10张</p>
|
||
</div>
|
||
<span>必传</span>
|
||
</div>
|
||
<label>
|
||
用户标识（选填）
|
||
<input
|
||
value={userName}
|
||
onChange={(event) => setUserName(event.target.value)}
|
||
placeholder="填写淘宝昵称，便于运营识别"
|
||
/>
|
||
</label>
|
||
<label
|
||
className={`answer-dropzone ${dragging ? "dragging" : ""}`}
|
||
onDragEnter={(event) => {
|
||
event.preventDefault();
|
||
setDragging(true);
|
||
}}
|
||
onDragOver={(event) => event.preventDefault()}
|
||
onDragLeave={() => setDragging(false)}
|
||
onDrop={(event) => {
|
||
event.preventDefault();
|
||
setDragging(false);
|
||
addFiles(event.dataTransfer.files);
|
||
}}
|
||
>
|
||
<input
|
||
type="file"
|
||
accept="image/jpeg,image/png,image/webp"
|
||
multiple
|
||
onChange={(event) => {
|
||
addFiles(event.target.files);
|
||
event.target.value = "";
|
||
}}
|
||
/>
|
||
<span className="answer-upload-plus">＋</span>
|
||
<strong>上传被邀截图</strong>
|
||
<small>
|
||
点击选择或拖入图片
|
||
<br />
|
||
支持 JPG、PNG、WEBP
|
||
</small>
|
||
</label>
|
||
{files.length > 0 && (
|
||
<div className="answer-preview-grid">
|
||
{files.map((item, index) => (
|
||
<figure key={`${item.file.name}-${index}`}>
|
||
<img src={item.preview} alt={item.file.name} />
|
||
<button type="button" onClick={() => removeFile(index)}>
|
||
×
|
||
</button>
|
||
<figcaption>{item.file.name}</figcaption>
|
||
</figure>
|
||
))}
|
||
</div>
|
||
)}
|
||
<div className="answer-upload-note">
|
||
<span>▧ 请确保截图清晰、信息完整、无遮挡</span>
|
||
<b>已添加 {files.length}/10 张</b>
|
||
</div>
|
||
</div>
|
||
{error && (
|
||
<div className="form-error answer-public-error">{error}</div>
|
||
)}
|
||
<div className="answer-submit-card">
|
||
<div>
|
||
<span>♢ 请先上传截图后再提交</span>
|
||
<b>已添加 {files.length} 张</b>
|
||
</div>
|
||
<button
|
||
className="primary-button"
|
||
disabled={!files.length || submitting}
|
||
>
|
||
{submitting ? "正在识别并提交…" : "确认提交截图，进入审核 →"}
|
||
</button>
|
||
</div>
|
||
</form>
|
||
)}
|
||
<div className="answer-help">
|
||
<strong>上传说明</strong>
|
||
<ul>
|
||
<li>请上传淘宝“被邀请回答”页面截图。</li>
|
||
<li>截图需要完整显示问题文字，不要裁剪关键内容。</li>
|
||
<li>提交后用户端不展示识别结果，由运营统一审核。</li>
|
||
</ul>
|
||
</div>
|
||
</section>
|
||
</section>
|
||
</main>
|
||
);
|
||
}
|
||
|
||
function SubmissionStatus({ record, history, onRefresh, onNew, onHistory }) {
|
||
if (!record) return null;
|
||
return (
|
||
<>
|
||
<div className="answer-status-card">
|
||
<div className="answer-status-heading">
|
||
<span>◷</span>
|
||
<div>
|
||
<h2>
|
||
正在审核中 <em>截图初审</em>
|
||
</h2>
|
||
<p>您提交的被邀回答截图正在审核，运营正在核验问题，请耐心等待。</p>
|
||
</div>
|
||
</div>
|
||
<div className="answer-status-meta">
|
||
<div>
|
||
<span>提交时间</span>
|
||
<b>{new Date(record.updated_at).toLocaleString()}</b>
|
||
</div>
|
||
<div>
|
||
<span>预计审核耗时</span>
|
||
<b>通常 3～10 分钟</b>
|
||
</div>
|
||
</div>
|
||
<div className="answer-status-actions">
|
||
<span>页面可刷新查看最新审核结果</span>
|
||
<button className="ghost-button" onClick={onRefresh}>
|
||
↻ 刷新状态
|
||
</button>
|
||
</div>
|
||
</div>
|
||
<div className="answer-material-card">
|
||
<div>
|
||
<h3>▧ 已提交核验材料（只读）</h3>
|
||
<span>♙ 已锁定审核</span>
|
||
</div>
|
||
<div className="answer-material-grid">
|
||
{record.invited_screenshots.map((image, index) => (
|
||
<figure
|
||
key={`${image.name}-${index}`}
|
||
>
|
||
<img src={image.data_url} alt={image.name} />
|
||
<figcaption>◉ 被邀截图{index + 1}</figcaption>
|
||
</figure>
|
||
))}
|
||
</div>
|
||
</div>
|
||
<div className="answer-history-actions">
|
||
<button className="ghost-button" onClick={onHistory}>
|
||
上传历史（{history.length}）
|
||
</button>
|
||
<button className="primary-button" onClick={onNew}>
|
||
继续上传
|
||
</button>
|
||
</div>
|
||
</>
|
||
);
|
||
}
|
||
function SubmissionHistory({ records, onBack }) {
|
||
return (
|
||
<div className="answer-history-page">
|
||
<div className="answer-history-head">
|
||
<button onClick={onBack}>← 返回</button>
|
||
<h2>上传历史</h2>
|
||
</div>
|
||
{records.length === 0 ? (
|
||
<div className="empty-state">暂无上传记录</div>
|
||
) : (
|
||
records.map((record) => (
|
||
<article key={record.task_id}>
|
||
<div>
|
||
<strong>{record.task_id}</strong>
|
||
<span className="status-pill">{record.status}</span>
|
||
</div>
|
||
<p>
|
||
{new Date(record.updated_at).toLocaleString()} ·{" "}
|
||
{record.invited_screenshots.length} 张截图
|
||
</p>
|
||
<div className="answer-history-thumbs">
|
||
{record.invited_screenshots.map((image, index) => (
|
||
<img
|
||
key={index}
|
||
src={image.data_url}
|
||
alt={image.name}
|
||
/>
|
||
))}
|
||
</div>
|
||
</article>
|
||
))
|
||
)}
|
||
</div>
|
||
);
|
||
}
|
||
|
||
function PublicAnswerPageEnhancedBridge(props) {
|
||
const [finished, setFinished] = useState(false);
|
||
if (finished) {
|
||
props.onSubmitted?.();
|
||
return null;
|
||
}
|
||
return <PublicAnswerPage />;
|
||
}
|
||
function PublicAnswerPage() {
|
||
const [files, setFiles] = useState([]);
|
||
const [userName, setUserName] = useState("");
|
||
const [error, setError] = useState("");
|
||
const [submitting, setSubmitting] = useState(false);
|
||
const [done, setDone] = useState(false);
|
||
function choose(event) {
|
||
const next = Array.from(event.target.files || []);
|
||
if (next.length > 10) {
|
||
setError("最多上传10张截图");
|
||
return;
|
||
}
|
||
setFiles(next);
|
||
setError("");
|
||
}
|
||
async function submit(event) {
|
||
event.preventDefault();
|
||
if (!files.length) return setError("请先选择受邀回答截图");
|
||
setSubmitting(true);
|
||
const body = new FormData();
|
||
body.append("user_name", userName);
|
||
files.forEach((file) => body.append("files", file));
|
||
try {
|
||
await api("/api/answer/public/submissions", { method: "POST", body });
|
||
setDone(true);
|
||
setFiles([]);
|
||
setError("");
|
||
} catch (err) {
|
||
setError(err.message);
|
||
} finally {
|
||
setSubmitting(false);
|
||
}
|
||
}
|
||
return (
|
||
<div className="answer-page">
|
||
<div className="answer-card">
|
||
<div className="answer-brand">
|
||
<MessageCircle size={20} />
|
||
<span>【问大家】回答任务中心</span>
|
||
</div>
|
||
<div className="answer-head">
|
||
<h1>上传受邀回答截图</h1>
|
||
</div>
|
||
<p className="answer-task-id">
|
||
所有回答用户使用同一个链接，无需登录或输入任务ID
|
||
</p>
|
||
{error && <div className="form-error">{error}</div>}
|
||
{done ? (
|
||
<div className="answer-success">
|
||
<strong>已提交运营审核</strong>
|
||
<p>系统已接收截图并识别问题，请等待运营处理。</p>
|
||
<button className="ghost-button" onClick={() => setDone(false)}>
|
||
继续上传
|
||
</button>
|
||
</div>
|
||
) : (
|
||
<form onSubmit={submit} className="answer-section">
|
||
<p>
|
||
请上传淘宝“被邀请回答”页面截图，系统将识别截图中的问题，并连同原始截图提交给运营审核。
|
||
</p>
|
||
<label>
|
||
用户标识（选填）
|
||
<input
|
||
value={userName}
|
||
onChange={(event) => setUserName(event.target.value)}
|
||
placeholder="例如：淘宝昵称"
|
||
/>
|
||
</label>
|
||
<label className="upload-box">
|
||
<input
|
||
type="file"
|
||
accept="image/jpeg,image/png,image/webp"
|
||
multiple
|
||
onChange={choose}
|
||
/>
|
||
<span>点击选择截图（最多10张，仅支持 JPG、PNG、WEBP）</span>
|
||
</label>
|
||
{files.length > 0 && (
|
||
<div className="file-list">
|
||
已选择 {files.length} 张截图：
|
||
{files.map((file) => file.name).join("、")}
|
||
</div>
|
||
)}
|
||
<button
|
||
className="primary-button answer-submit"
|
||
disabled={submitting}
|
||
>
|
||
{submitting ? "识别并提交中…" : "上传并提交审核"}
|
||
</button>
|
||
</form>
|
||
)}
|
||
</div>
|
||
</div>
|
||
);
|
||
}
|
||
function CreateAnswerTasksPage() {
|
||
const [records, setRecords] = useState([]);
|
||
const [error, setError] = useState("");
|
||
const [busy, setBusy] = useState("");
|
||
async function load() {
|
||
try {
|
||
const result = await api("/api/admin/answer-task-drafts");
|
||
setRecords(result.data);
|
||
} catch (err) {
|
||
setError(err.message);
|
||
}
|
||
}
|
||
useEffect(() => {
|
||
load();
|
||
}, []);
|
||
async function update(question, payload) {
|
||
setBusy(question.id);
|
||
try {
|
||
await api(`/api/admin/answer-task-drafts/questions/${question.id}`, {
|
||
method: "PATCH",
|
||
body: JSON.stringify(payload),
|
||
});
|
||
await load();
|
||
} catch (err) {
|
||
window.alert(err.message);
|
||
} finally {
|
||
setBusy("");
|
||
}
|
||
}
|
||
async function publish(record) {
|
||
setBusy(record.id);
|
||
try {
|
||
await api(`/api/admin/answer-task-drafts/${record.id}/publish`, {
|
||
method: "POST",
|
||
});
|
||
await load();
|
||
} catch (err) {
|
||
window.alert(err.message);
|
||
} finally {
|
||
setBusy("");
|
||
}
|
||
}
|
||
return (
|
||
<>
|
||
<PageHeading
|
||
title="创建任务"
|
||
description="按用户ID查看截图识别的问题，筛选并发布回答任务。"
|
||
/>
|
||
<div className="review-tip">
|
||
<strong>选择任务说明</strong>
|
||
<span>
|
||
每个用户上传批次独立分组；勾选需要派发的问题，可编辑或重新生成回答，确认后生成任务。
|
||
</span>
|
||
</div>
|
||
{error && <div className="form-error">{error}</div>}
|
||
<div className="answer-draft-list">
|
||
{records.length === 0 && (
|
||
<div className="empty-results panel">暂无待创建的回答任务</div>
|
||
)}
|
||
{records.map((record) => (
|
||
<article className="answer-draft-group panel" key={record.id}>
|
||
<header>
|
||
<div>
|
||
<strong>{record.user_id}</strong>
|
||
<span>
|
||
{record.taobao_id || record.phone}
|
||
</span>
|
||
<code>{record.submission_no}</code>
|
||
<em>{record.status}</em>
|
||
</div>
|
||
<button
|
||
className="primary-button"
|
||
disabled={!!busy || record.status === "待用户完成"}
|
||
onClick={() => publish(record)}
|
||
>
|
||
{record.status === "待用户完成" ? "已派发" : "生成任务"}
|
||
</button>
|
||
</header>
|
||
{record.questions.map((question) => (
|
||
<section className="answer-draft-question" key={question.id}>
|
||
<input
|
||
type="checkbox"
|
||
checked={question.selected}
|
||
disabled={record.status === "待用户完成"}
|
||
onChange={(event) =>
|
||
update(question, { selected: event.target.checked })
|
||
}
|
||
/>
|
||
<div className="answer-draft-content">
|
||
<h3>
|
||
Q{question.sequence_no}：{question.question}
|
||
</h3>
|
||
<div className="answer-product-line">
|
||
{question.product_image && (
|
||
<img src={question.product_image} alt="商品主图" />
|
||
)}
|
||
<span>
|
||
<b>{question.product_title}</b>
|
||
<small>来源：模拟OCR识别</small>
|
||
</span>
|
||
{question.source_image && (
|
||
<img
|
||
className="source-shot"
|
||
src={question.source_image}
|
||
alt="识别原始截图"
|
||
/>
|
||
)}
|
||
</div>
|
||
<textarea
|
||
defaultValue={question.answer}
|
||
disabled={record.status === "待用户完成"}
|
||
onBlur={(event) =>
|
||
event.target.value !== question.answer &&
|
||
update(question, { answer: event.target.value })
|
||
}
|
||
/>
|
||
</div>
|
||
<button
|
||
className="ghost-button"
|
||
disabled={!!busy || record.status === "待用户完成"}
|
||
onClick={() => update(question, { regenerate: true })}
|
||
>
|
||
↻
|
||
</button>
|
||
</section>
|
||
))}
|
||
</article>
|
||
))}
|
||
</div>
|
||
</>
|
||
);
|
||
}
|
||
function CompletionReviewPage() {
|
||
const [records, setRecords] = useState([]);
|
||
async function load() {
|
||
const result = await api("/api/admin/answer-completion-reviews");
|
||
setRecords(result.data);
|
||
}
|
||
useEffect(() => {
|
||
load();
|
||
}, []);
|
||
async function decide(record, approved) {
|
||
await api(`/api/admin/answer-completion-reviews/${record.id}/decision`, {
|
||
method: "POST",
|
||
body: JSON.stringify({ approved }),
|
||
});
|
||
load();
|
||
}
|
||
return (
|
||
<>
|
||
<PageHeading
|
||
title="审核中心"
|
||
description="仅审核用户完成回答后上传的完成截图。"
|
||
/>
|
||
<div className="answer-draft-list">
|
||
{records.length === 0 && (
|
||
<div className="empty-results panel">暂无完成截图待审核</div>
|
||
)}
|
||
{records.map((record) => (
|
||
<article className="answer-draft-group panel" key={record.id}>
|
||
<header>
|
||
<div>
|
||
<strong>{record.user_id}</strong>
|
||
<code>{record.submission_no}</code>
|
||
<em>{record.status}</em>
|
||
</div>
|
||
</header>
|
||
<div className="review-columns">
|
||
<div>
|
||
<h4>派发问答</h4>
|
||
{record.questions
|
||
.filter((q) => q.selected)
|
||
.map((q) => (
|
||
<div className="review-question" key={q.id}>
|
||
{q.question}
|
||
<br />
|
||
<small>{q.answer}</small>
|
||
</div>
|
||
))}
|
||
</div>
|
||
<div>
|
||
<h4>完成截图</h4>
|
||
<div className="review-images">
|
||
{record.completion_screenshots.map((image) => (
|
||
<img key={image.id} src={image.data_url} alt={image.name} />
|
||
))}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div className="review-actions">
|
||
<button
|
||
className="danger-button"
|
||
onClick={() => decide(record, false)}
|
||
>
|
||
驳回
|
||
</button>
|
||
<button
|
||
className="primary-button"
|
||
onClick={() => decide(record, true)}
|
||
>
|
||
审核通过
|
||
</button>
|
||
</div>
|
||
</article>
|
||
))}
|
||
</div>
|
||
</>
|
||
);
|
||
}
|
||
function GlobalImageViewer() {
|
||
const [gallery, setGallery] = useState([]);
|
||
const [currentIndex, setCurrentIndex] = useState(-1);
|
||
const [scale, setScale] = useState(1);
|
||
const [position, setPosition] = useState({ x: 0, y: 0 });
|
||
const [dragging, setDragging] = useState(false);
|
||
const [dockSide, setDockSide] = useState("right");
|
||
const [floatingPosition, setFloatingPosition] = useState(null);
|
||
const [panelDragging, setPanelDragging] = useState(false);
|
||
const panelRef = useRef(null);
|
||
const panelDragStart = useRef(null);
|
||
const dragStart = useRef(null);
|
||
const src = gallery[currentIndex]?.src || "";
|
||
useEffect(() => {
|
||
const handleClick = (event) => {
|
||
const image = event.target?.closest?.("img");
|
||
if (!image || !image.src || image.closest(".global-image-viewer")) return;
|
||
const scope = image.closest(".review-v2-modal") || document;
|
||
const imageNodes = Array.from(scope.querySelectorAll("img")).filter(
|
||
(node) => node.src && !node.closest(".global-image-viewer"),
|
||
);
|
||
const items = imageNodes.map((node) => ({
|
||
src: node.currentSrc || node.src,
|
||
alt: node.alt || "审核图片",
|
||
}));
|
||
setGallery(items);
|
||
setCurrentIndex(Math.max(0, imageNodes.indexOf(image)));
|
||
setScale(1);
|
||
setPosition({ x: 0, y: 0 });
|
||
};
|
||
const handleKeyDown = (event) => {
|
||
if (event.key === "Escape") {
|
||
setGallery([]);
|
||
setCurrentIndex(-1);
|
||
setFloatingPosition(null);
|
||
}
|
||
};
|
||
document.addEventListener("click", handleClick);
|
||
document.addEventListener("keydown", handleKeyDown);
|
||
return () => {
|
||
document.removeEventListener("click", handleClick);
|
||
document.removeEventListener("keydown", handleKeyDown);
|
||
};
|
||
}, []);
|
||
useEffect(() => {
|
||
if (!src) return undefined;
|
||
const handleGalleryKeyDown = (event) => {
|
||
if (event.key === "ArrowLeft") {
|
||
setCurrentIndex((current) => Math.max(0, current - 1));
|
||
}
|
||
if (event.key === "ArrowRight") {
|
||
setCurrentIndex((current) => Math.min(gallery.length - 1, current + 1));
|
||
}
|
||
};
|
||
document.addEventListener("keydown", handleGalleryKeyDown);
|
||
return () => document.removeEventListener("keydown", handleGalleryKeyDown);
|
||
}, [src, gallery.length]);
|
||
useEffect(() => {
|
||
if (!src) return;
|
||
setScale(1);
|
||
setPosition({ x: 0, y: 0 });
|
||
}, [currentIndex, src]);
|
||
useEffect(() => {
|
||
document.body.classList.remove("image-preview-left", "image-preview-right");
|
||
if (!src) return undefined;
|
||
const className = `image-preview-${dockSide}`;
|
||
document.body.classList.add(className);
|
||
return () => document.body.classList.remove(className);
|
||
}, [src, dockSide]);
|
||
if (!src) return null;
|
||
const changeScale = (delta) => {
|
||
setScale((current) => {
|
||
const next = Math.min(5, Math.max(0.5, current + delta));
|
||
if (next <= 1) setPosition({ x: 0, y: 0 });
|
||
return next;
|
||
});
|
||
};
|
||
const resetView = () => {
|
||
setScale(1);
|
||
setPosition({ x: 0, y: 0 });
|
||
};
|
||
const beginDrag = (event) => {
|
||
if (event.button !== 0) return;
|
||
event.currentTarget.setPointerCapture?.(event.pointerId);
|
||
dragStart.current = {
|
||
x: event.clientX - position.x,
|
||
y: event.clientY - position.y,
|
||
};
|
||
setDragging(true);
|
||
};
|
||
const moveDrag = (event) => {
|
||
if (!dragStart.current) return;
|
||
setPosition({
|
||
x: event.clientX - dragStart.current.x,
|
||
y: event.clientY - dragStart.current.y,
|
||
});
|
||
};
|
||
const endDrag = () => {
|
||
dragStart.current = null;
|
||
setDragging(false);
|
||
};
|
||
const closeViewer = () => {
|
||
setGallery([]);
|
||
setCurrentIndex(-1);
|
||
setFloatingPosition(null);
|
||
};
|
||
const showImage = (nextIndex) => {
|
||
if (nextIndex < 0 || nextIndex >= gallery.length) return;
|
||
setCurrentIndex(nextIndex);
|
||
};
|
||
const beginPanelDrag = (event) => {
|
||
if (event.button !== 0 || event.target.closest("button") || !panelRef.current) return;
|
||
const rect = panelRef.current.getBoundingClientRect();
|
||
event.currentTarget.setPointerCapture?.(event.pointerId);
|
||
panelDragStart.current = {
|
||
pointerX: event.clientX,
|
||
pointerY: event.clientY,
|
||
left: rect.left,
|
||
top: rect.top,
|
||
width: rect.width,
|
||
height: rect.height,
|
||
};
|
||
setPanelDragging(true);
|
||
};
|
||
const movePanelDrag = (event) => {
|
||
if (!panelDragStart.current) return;
|
||
const start = panelDragStart.current;
|
||
const margin = 8;
|
||
const left = Math.min(
|
||
window.innerWidth - start.width - margin,
|
||
Math.max(margin, start.left + event.clientX - start.pointerX),
|
||
);
|
||
const top = Math.min(
|
||
window.innerHeight - start.height - margin,
|
||
Math.max(margin, start.top + event.clientY - start.pointerY),
|
||
);
|
||
setFloatingPosition({ left, top, height: start.height });
|
||
};
|
||
const endPanelDrag = () => {
|
||
panelDragStart.current = null;
|
||
setPanelDragging(false);
|
||
};
|
||
const switchDockSide = () => {
|
||
setFloatingPosition(null);
|
||
setDockSide((current) => current === "right" ? "left" : "right");
|
||
};
|
||
return (
|
||
<aside
|
||
ref={panelRef}
|
||
className={`global-image-viewer ${dockSide === "left" ? "left" : ""}${panelDragging ? " dragging-window" : ""}`}
|
||
role="complementary"
|
||
aria-label="图片预览"
|
||
style={floatingPosition ? {
|
||
left: `${floatingPosition.left}px`,
|
||
top: `${floatingPosition.top}px`,
|
||
right: "auto",
|
||
bottom: "auto",
|
||
height: `${floatingPosition.height}px`,
|
||
} : undefined}
|
||
>
|
||
<header
|
||
className="global-image-viewer-header"
|
||
onPointerDown={beginPanelDrag}
|
||
onPointerMove={movePanelDrag}
|
||
onPointerUp={endPanelDrag}
|
||
onPointerCancel={endPanelDrag}
|
||
>
|
||
<div>
|
||
<strong>图片预览</strong>
|
||
<span>拖动标题栏可移动 · 页面仍可滚动</span>
|
||
</div>
|
||
<button
|
||
type="button"
|
||
className="global-image-viewer-dock"
|
||
aria-label={dockSide === "right" ? "将预览移到左侧" : "将预览移到右侧"}
|
||
title={dockSide === "right" ? "移到左侧" : "移到右侧"}
|
||
onClick={switchDockSide}
|
||
>
|
||
{dockSide === "right" ? "←" : "→"}
|
||
</button>
|
||
<button type="button" className="global-image-viewer-close" aria-label="关闭预览" onClick={closeViewer}>×</button>
|
||
</header>
|
||
<div
|
||
className="global-image-viewer-canvas"
|
||
onWheel={(event) => {
|
||
event.preventDefault();
|
||
changeScale(event.deltaY > 0 ? -0.15 : 0.15);
|
||
}}
|
||
>
|
||
<img
|
||
src={src}
|
||
alt="大图预览"
|
||
draggable={false}
|
||
className={dragging ? "dragging" : ""}
|
||
style={{ transform: `translate(${position.x}px, ${position.y}px) scale(${scale})` }}
|
||
onPointerDown={beginDrag}
|
||
onPointerMove={moveDrag}
|
||
onPointerUp={endDrag}
|
||
onPointerCancel={endDrag}
|
||
/>
|
||
</div>
|
||
<div className="global-image-viewer-tools">
|
||
<button
|
||
type="button"
|
||
className="gallery-nav"
|
||
disabled={currentIndex <= 0}
|
||
onClick={() => showImage(currentIndex - 1)}
|
||
>
|
||
← 上一张
|
||
</button>
|
||
<span className="gallery-count">{currentIndex + 1}/{gallery.length}</span>
|
||
<button
|
||
type="button"
|
||
className="gallery-nav"
|
||
disabled={currentIndex >= gallery.length - 1}
|
||
onClick={() => showImage(currentIndex + 1)}
|
||
>
|
||
下一张 →
|
||
</button>
|
||
<i aria-hidden="true" />
|
||
<button type="button" aria-label="缩小" onClick={() => changeScale(-0.25)}>−</button>
|
||
<span>{Math.round(scale * 100)}%</span>
|
||
<button type="button" aria-label="放大" onClick={() => changeScale(0.25)}>＋</button>
|
||
<button type="button" className="reset" onClick={resetView}>重置</button>
|
||
</div>
|
||
</aside>
|
||
);
|
||
}
|
||
|
||
function Dashboard({ user, onLogout }) {
|
||
const [active, setActive] = useState("assistant");
|
||
const [createMode, setCreateMode] = useState("ask");
|
||
const [reviewBadge, setReviewBadge] = useState(0);
|
||
const [librarySelection, setLibrarySelection] = useState([]);
|
||
useEffect(() => {
|
||
api("/api/admin/usage/enter", { method: "POST" }).catch(() => {});
|
||
}, [user.id]);
|
||
async function loadReviewBadge() {
|
||
try {
|
||
const result = await api("/api/admin/review-pending-count");
|
||
setReviewBadge(result.data.total || 0);
|
||
} catch {
|
||
// Keep navigation usable if the counter request temporarily fails.
|
||
}
|
||
}
|
||
useEffect(() => {
|
||
const handler = (event) => {
|
||
if (event.type === "open-task-board") {
|
||
clearTaskBoardCache();
|
||
if (event.detail?.status) window.__taskBoardInitialStatus = event.detail.status;
|
||
setActive("board");
|
||
}
|
||
if (event.type === "switch-create-answer") {
|
||
setActive("create");
|
||
setCreateMode("answer");
|
||
}
|
||
if (event.type === "switch-create-ask") {
|
||
setActive("create");
|
||
setCreateMode("ask");
|
||
window.__qaLibrarySelectionMode = false;
|
||
}
|
||
if (event.type === "open-qa-library-picker") {
|
||
setActive("library");
|
||
setCreateMode("ask");
|
||
window.__qaLibrarySelectionMode = true;
|
||
}
|
||
if (event.type === "qa-library-selected") {
|
||
setLibrarySelection(event.detail || []);
|
||
window.__qaLibrarySelectionMode = false;
|
||
setActive("create");
|
||
setCreateMode("ask");
|
||
}
|
||
};
|
||
document.addEventListener("click", handler);
|
||
window.addEventListener("open-task-board", handler);
|
||
window.addEventListener("open-qa-library-picker", handler);
|
||
window.addEventListener("qa-library-selected", handler);
|
||
window.addEventListener("switch-create-answer", handler);
|
||
window.addEventListener("switch-create-ask", handler);
|
||
window.addEventListener("review-count-changed", loadReviewBadge);
|
||
loadReviewBadge();
|
||
const reviewCountTimer = window.setInterval(loadReviewBadge, 30000);
|
||
return () => {
|
||
document.removeEventListener("click", handler);
|
||
window.removeEventListener("open-task-board", handler);
|
||
window.removeEventListener("open-qa-library-picker", handler);
|
||
window.removeEventListener("qa-library-selected", handler);
|
||
window.removeEventListener("switch-create-answer", handler);
|
||
window.removeEventListener("switch-create-ask", handler);
|
||
window.removeEventListener("review-count-changed", loadReviewBadge);
|
||
window.clearInterval(reviewCountTimer);
|
||
};
|
||
}, []);
|
||
const isAdminPage = ["usage", "users", "logs", "settings"].includes(active);
|
||
const selectPage = (next) => {
|
||
if (user.permissions.includes(next)) {
|
||
setActive(next);
|
||
if (next === "create") setCreateMode("ask");
|
||
if (next === "review") loadReviewBadge();
|
||
}
|
||
};
|
||
const askTaskOpen = active === "create" && createMode === "ask";
|
||
return (
|
||
<div className="app-shell">
|
||
<Sidebar
|
||
user={user}
|
||
active={active}
|
||
setActive={selectPage}
|
||
reviewBadge={reviewBadge}
|
||
/>
|
||
<section className="main-shell">
|
||
<Topbar user={user} onLogout={onLogout} />
|
||
<main
|
||
className={`dashboard${askTaskOpen ? " ask-task-dashboard" : ""}`}
|
||
>
|
||
{active === "create" ? (
|
||
createMode === "ask" ? (
|
||
<CreateAskTasksPage api={api} librarySelection={librarySelection} onLibrarySelectionConsumed={() => setLibrarySelection([])} />
|
||
) : (
|
||
<CreateAnswerTasksPageV2 api={api} user={user} />
|
||
)
|
||
) : active === "board" ? (
|
||
<TaskBoardPage api={api} user={user} />
|
||
) : active === "review" ? (
|
||
<ReviewCenterPage api={api} />
|
||
) : active === "library" ? (
|
||
<QALibraryPage selectionMode={Boolean(window.__qaLibrarySelectionMode)} />
|
||
) : isAdminPage ? (
|
||
<AdminPage type={active} />
|
||
) : (
|
||
<AssistantPageFinal />
|
||
)}
|
||
</main>
|
||
</section>
|
||
</div>
|
||
);
|
||
}
|
||
function TextDecoder() {
|
||
useEffect(() => {
|
||
const decode = (value) =>
|
||
value.replace(/\\u([0-9a-fA-F]{4})/g, (_, code) =>
|
||
String.fromCharCode(parseInt(code, 16)),
|
||
);
|
||
const scan = (root) => {
|
||
const walker = document.createTreeWalker(root, NodeFilter.SHOW_TEXT);
|
||
let node;
|
||
while ((node = walker.nextNode())) {
|
||
const decoded = decode(node.nodeValue);
|
||
if (decoded !== node.nodeValue) node.nodeValue = decoded;
|
||
}
|
||
root.querySelectorAll?.("[placeholder],[title]").forEach((element) => {
|
||
["placeholder", "title"].forEach((attribute) => {
|
||
const value = element.getAttribute(attribute);
|
||
if (value) element.setAttribute(attribute, decode(value));
|
||
});
|
||
});
|
||
};
|
||
const observer = new MutationObserver((records) =>
|
||
records.forEach((record) =>
|
||
record.addedNodes.forEach((node) => {
|
||
if (node.nodeType === Node.TEXT_NODE) {
|
||
const decoded = decode(node.nodeValue);
|
||
if (decoded !== node.nodeValue) node.nodeValue = decoded;
|
||
} else if (node.nodeType === Node.ELEMENT_NODE) scan(node);
|
||
}),
|
||
),
|
||
);
|
||
scan(document.body);
|
||
observer.observe(document.body, {
|
||
childList: true,
|
||
subtree: true,
|
||
characterData: true,
|
||
});
|
||
return () => observer.disconnect();
|
||
}, []);
|
||
return null;
|
||
}
|
||
function App() {
|
||
if (window.location.pathname.startsWith("/refund-upload/"))
|
||
return <RefundUploadPage api={api} />;
|
||
if (window.location.pathname === "/ask" || window.location.pathname.startsWith("/ask/"))
|
||
return <AskUserPortal api={api} />;
|
||
if (window.location.pathname.startsWith("/answer/"))
|
||
return <AnswerTaskPage />;
|
||
const [user, setUser] = useState(null);
|
||
const [checking, setChecking] = useState(true);
|
||
useEffect(() => {
|
||
api("/api/admin/auth/me")
|
||
.then((result) => setUser(result.data.user))
|
||
.catch(() => {})
|
||
.finally(() => setChecking(false));
|
||
}, []);
|
||
async function logout() {
|
||
await api("/api/admin/auth/logout", { method: "POST" }).catch(() => {});
|
||
clearTaskBoardCache();
|
||
setUser(null);
|
||
}
|
||
if (checking)
|
||
return (
|
||
<div className="loading-screen">{"\u6b63\u5728\u52a0\u8f7d\u2026"}</div>
|
||
);
|
||
return user ? (
|
||
<Dashboard user={user} onLogout={logout} />
|
||
) : (
|
||
<LoginPage onLogin={setUser} />
|
||
);
|
||
}
|
||
createRoot(document.getElementById("root")).render(
|
||
<React.StrictMode>
|
||
<TextDecoder />
|
||
<GlobalImageViewer />
|
||
<App />
|
||
</React.StrictMode>,
|
||
);
|