/* ============================================================ 谁是天眼 · 共享 UI 组件 → window ============================================================ */ const { useState, useEffect, useRef } = React; /* ---------- 图标 ---------- */ const Icon = { eye: (p = {}) => ( ), search: (p = {}) => ( ), plus: (p = {}) => ( ), arrow: (p = {}) => ( ), shield: (p = {}) => ( ), warn: (p = {}) => ( ), lock: (p = {}) => ( ), file: (p = {}) => ( ), bell: (p = {}) => ( ), gavel: (p = {}) => ( ), trash: (p = {}) => ( ), check: (p = {}) => ( ), x: (p = {}) => ( ), camera: (p = {}) => ( ), pin: (p = {}) => ( ) }; /* ---------- 天眼标识 ---------- */ function Brand({ onClick, big }) { return (
谁是天眼Tianyan Doc
); } /* ---------- 日期格式 ---------- */ function fmtDate(ts) { const d = new Date(ts); return d.getFullYear() + "." + String(d.getMonth() + 1).padStart(2, "0") + "." + String(d.getDate()).padStart(2, "0"); } function fmtAgo(ts) { const diff = Date.now() - ts; const h = Math.floor(diff / 3600000); if (h < 1) return "刚刚"; if (h < 24) return h + " 小时前"; return Math.floor(h / 24) + " 天前"; } /* ---------- 状态徽标 ---------- */ function StatusPill({ status }) { const map = { active: ["pill-red", "已记录 · 生效中"], appealing: ["pill-warn", "申诉处理中"], cleared: ["pill-safe", "申诉通过 · 已撤档"] }; const [cls, label] = map[status] || map.active; return {label}; } /* ---------- 档案卡 (dossier) ---------- */ function Dossier({ rec, onAppeal, redact }) { const stampLabel = rec.status === "cleared" ? "已撤档" : rec.status === "appealing" ? "申诉中" : "已记录"; const stampCls = rec.status === "cleared" ? "cleared" : rec.status === "appealing" ? "appealing" : ""; // redact: 是否对部分敏感信息打码（查询结果可选） const mask = (s) => { if (!redact || !s) return s; if (s.length <= 2) return s[0] + "*"; return s.slice(0, 2) + "*".repeat(Math.max(1, s.length - 3)) + s.slice(-1); }; return (
{stampLabel}
档案编号 {rec.id}
{rec.nickname}
涉及剧本
{rec.script}
发生店铺
{rec.shop}
{rec.region &&
城市
{rec.region}
}
微信号
{rec.wechat ? mask(rec.wechat) : "—"}
特征信息
{rec.features.length === 0 ? "—" : (
{rec.features.map((f, i) => ( {f.type} {mask(f.value)} ))}
)}
{rec.note && (
情况说明 {rec.note}
)} {rec.evidence && rec.evidence.length > 0 && (
证据照片 · {rec.evidence.length}
{rec.evidence.map((src, i) => (
证据 openLightbox(src)} />
))}
)}
登记 {fmtDate(rec.createdAt)} · 来源 {rec.registrant} {rec.appeals.length > 0 && · 已有 {rec.appeals.length} 条申诉}
{rec.status === "cleared" ? 已撤档 : }
); } /* ---------- Toast ---------- */ const ToastCtx = React.createContext(() => {}); function ToastProvider({ children }) { const [toasts, setToasts] = useState([]); const push = (msg, kind = "ok") => { const id = Date.now() + Math.random(); setToasts(t => [...t, { id, msg, kind }]); setTimeout(() => setToasts(t => t.filter(x => x.id !== id)), 3200); }; return ( {children}
{toasts.map(t => (
{t.kind === "ok" ? Icon.check({ s: 16 }) : t.kind === "err" ? Icon.warn({ s: 16 }) : Icon.bell({ s: 16 })} {t.msg}
))}
); } function useToast() { return React.useContext(ToastCtx); } /* ---------- 模态 ---------- */ function Modal({ title, sub, onClose, children, foot }) { useEffect(() => { const h = (e) => { if (e.key === "Escape") onClose(); }; window.addEventListener("keydown", h); return () => window.removeEventListener("keydown", h); }, []); return (
{ if (e.target === e.currentTarget) onClose(); }}>
e.stopPropagation()}>

{title}

{sub &&
{sub}
}
{children}
{foot &&
{foot}
}
); } /* ---------- 图片：压缩为 dataURL（控制上传体积）---------- */ function fileToDataUrl(file, maxW = 900, quality = 0.72) { return new Promise((resolve, reject) => { const reader = new FileReader(); reader.onload = () => { const img = new Image(); img.onload = () => { const scale = Math.min(1, maxW / img.width); const w = Math.round(img.width * scale); const h = Math.round(img.height * scale); const c = document.createElement("canvas"); c.width = w; c.height = h; c.getContext("2d").drawImage(img, 0, 0, w, h); resolve(c.toDataURL("image/jpeg", quality)); }; img.onerror = reject; img.src = reader.result; }; reader.onerror = reject; reader.readAsDataURL(file); }); } /* ---------- 灯箱（点击放大证据图）---------- */ function openLightbox(src) { window.dispatchEvent(new CustomEvent("open-lightbox", { detail: src })); } function Lightbox() { const [src, setSrc] = useState(null); useEffect(() => { const h = (e) => setSrc(e.detail); const k = (e) => { if (e.key === "Escape") setSrc(null); }; window.addEventListener("open-lightbox", h); window.addEventListener("keydown", k); return () => { window.removeEventListener("open-lightbox", h); window.removeEventListener("keydown", k); }; }, []); if (!src) return null; return (
setSrc(null)}> 证据
); } /* ---------- 证据上传 ---------- */ function EvidenceUploader({ value, onChange, max = 4 }) { const inputRef = useRef(null); const [busy, setBusy] = useState(false); const pick = async (e) => { const files = Array.from(e.target.files || []); if (!files.length) return; setBusy(true); const room = max - value.length; const out = []; for (const f of files.slice(0, room)) { if (!f.type.startsWith("image/")) continue; try { out.push(await fileToDataUrl(f)); } catch (err) {} } onChange([...value, ...out]); setBusy(false); if (inputRef.current) inputRef.current.value = ""; }; return (
{value.map((src, i) => (
证据 openLightbox(src)} />
))} {value.length < max && ( )}
); } Object.assign(window, { Icon, Brand, fmtDate, fmtAgo, StatusPill, Dossier, ToastProvider, useToast, Modal, fileToDataUrl, openLightbox, Lightbox, EvidenceUploader });