/* global React */ // Submissions: list + compare detail drawer. function SubmissionsPage({ toast, focusId, onClearFocus, role = 'super-admin' }) { const [filter, setFilter] = React.useState('pending'); const [search, setSearch] = React.useState(''); const [selected, setSelected] = React.useState(new Set()); const [openId, setOpenId] = React.useState(null); const [focused, setFocused] = React.useState(0); const [rejecting, setRejecting] = React.useState(null); const [rejectReason, setRejectReason] = React.useState(''); const [batchReject, setBatchReject] = React.useState(false); const [rows, setRows] = React.useState(window.MOCK.SUBMISSIONS); const [loading, setLoading] = React.useState(false); const [counts, setCounts] = React.useState({ pending: 0, approved: 0, rejected: 0, merged: 0 }); const isReviewer = role === 'reviewer'; const reload = React.useCallback(async () => { setLoading(true); try { const [r, s] = await Promise.all([ window.API.submissions(filter === 'all' ? 'pending' : filter, 200), window.API.stats().catch(() => ({ counts: {} })), ]); if (r?.items) setRows(r.items.map(window.normalizeSubmission)); if (s?.counts) setCounts({ pending: 0, approved: 0, rejected: 0, merged: 0, ...s.counts }); } catch (e) { // Demo mode fallback — keep MOCK } finally { setLoading(false); } }, [filter]); React.useEffect(() => { reload(); }, [reload]); const maskIp = (ip) => { if (!isReviewer) return ip; // submitter_short is like "198.51.x.42" — reduce further to "198.x.x.x" const parts = ip.split('.'); return parts.length >= 2 ? `${parts[0]}.x.x.x` : ip; }; React.useEffect(() => { if (focusId) { setOpenId(focusId); onClearFocus?.(); } }, [focusId]); const list = React.useMemo(() => { return rows.filter((s) => { if (filter !== 'all' && s.status !== filter) return false; if (search && !(`${s.id} ${s.area_code} ${s.npc} ${s.note || ''}`.toLowerCase().includes(search.toLowerCase()))) return false; return true; }); }, [filter, search, rows]); const doApprove = async (id) => { try { await window.API.approve(id); toast.push(`已通过 #${id}`); reload(); } catch (e) { toast.push(`操作失败:${e.message}`, 'err'); } }; const doReject = async (id, reason) => { try { await window.API.reject(id, reason); toast.push(`已驳回 #${id}`); reload(); } catch (e) { toast.push(`操作失败:${e.message}`, 'err'); } }; // Keyboard navigation React.useEffect(() => { if (openId || rejecting) return; const onKey = (e) => { if (e.target.tagName === 'INPUT' || e.target.tagName === 'TEXTAREA') return; if (e.key === 'j') { e.preventDefault(); setFocused((i) => Math.min(list.length - 1, i + 1)); } else if (e.key === 'k') { e.preventDefault(); setFocused((i) => Math.max(0, i - 1)); } else if (e.key === 'Enter') { e.preventDefault(); const item = list[focused]; if (item) setOpenId(item.id); } else if (e.key === ' ') { e.preventDefault(); const item = list[focused]; if (item) { const ns = new Set(selected); ns.has(item.id) ? ns.delete(item.id) : ns.add(item.id); setSelected(ns); } } else if (e.key === 'a') { const item = list[focused]; if (item && item.status === 'pending') doApprove(item.id); } else if (e.key === 'r') { const item = list[focused]; if (item && item.status === 'pending') setRejecting(item); } }; window.addEventListener('keydown', onKey); return () => window.removeEventListener('keydown', onKey); }, [list, focused, openId, rejecting, selected]); const open = openId ? rows.find((s) => s.id === openId) : null; const toggleAll = () => { if (selected.size === list.length) setSelected(new Set()); else setSelected(new Set(list.map((x) => x.id))); }; const toggle = (id) => { const ns = new Set(selected); ns.has(id) ? ns.delete(id) : ns.add(id); setSelected(ns); }; return (
日常/审核台

审核台 · {list.length}

按 J/K 上下移动 · ↵ 打开详情 · A 通过 · R 驳回 · Space 多选
{/* Toolbar */}
setSearch(e.target.value)} style={{ width: 240, paddingLeft: 32 }}/>
}>区域 · 全部 }>导出
{/* Batch bar */} {selected.size > 0 && (
已选 {selected.size} 条 · } onClick={async () => { const ids = Array.from(selected); await Promise.all(ids.map((id) => window.API.approve(id).catch(()=>null))); toast.push(`已批量通过 ${ids.length} 条`); setSelected(new Set()); reload(); }}> 批量通过 } onClick={() => setBatchReject(true)}> 批量驳回 合并到现有 NPC
)} {/* Table */}
{list.map((s, i) => ( setFocused(i)}> ))} {list.length === 0 && ( )}
0} onChange={toggleAll}/> ID 状态 区域 · NPC 阵容预览 元信息 备注 提交者 时间
e.stopPropagation()}> toggle(s.id)}/> #{s.id}
{s.npc}
{s.area_code}
{s.team.slice(0, 6).map((p, j) => ( ))}
速 {s.speed} {s.weather} {s.ding && 定} {s.lock && 锁} {s.chu && 初}
{s.note || —}
{maskIp(s.submitter_short)}
 {window.relTime(s.created_at)}
{s.status === 'pending' && ( <> } onClick={(e) => { e.stopPropagation(); doApprove(s.id); }}>通过 } onClick={(e) => { e.stopPropagation(); setRejecting(s); }}>驳回 )} } onClick={(e) => { e.stopPropagation(); setOpenId(s.id); }}>详情
{/* Detail drawer */} {open && ( <>
setOpenId(null)}/>
setOpenId(null)} onApprove={async () => { await doApprove(open.id); setOpenId(null); }} onReject={() => setRejecting(open)}/>
)} {/* Reject dialog */} {rejecting && (
setRejecting(null)} style={{ display:'grid', placeItems:'center' }}>
e.stopPropagation()} className="card" style={{ width: 480, animation: 'pop .14s ease' }}>
驳回 #{rejecting.id}