{variant === "compact" && (

堆堆 · Admin

)}

{ setQuery(e.target.value); setSearchOpen(true); }} onFocus={() => setSearchOpen(true)} /> {searchOpen && query.trim().length >= 1 && (

{results.length > 0 ? results.map(item => ( )) : (

找不到符合的頁面

)}

{/* System status */}

系統正常

{/* Notifications */}

{notifOpen && }

{/* User */}

{userOpen && }

); }; const NotificationPanel = () => (

通知

目前沒有任何通知

); const ChangePasswordModal = ({ onClose, adminEmail = "" }) => { const { useState: uS, useRef } = React; const email = adminEmail; const [step, setStep] = uS("form"); // form | otp | done const [newPw, setNewPw] = uS(""); const [confirmPw, setConfirmPw] = uS(""); const [otp, setOtp] = uS(["","","","","",""]); const [loading, setLoading] = uS(false); const [error, setError] = uS(""); const [resendIn, setResendIn] = uS(0); const otpRefs = useRef([]); React.useEffect(() => { if (resendIn <= 0) return; const t = setTimeout(() => setResendIn(r => r - 1), 1000); return () => clearTimeout(t); }, [resendIn]); const sendOtp = async () => { setError(""); if (!newPw || newPw.length < 8) { setError("密碼至少需要 8 個字元"); return; } if (newPw !== confirmPw) { setError("兩次密碼不一致"); return; } setLoading(true); const res = await fetch("/api/admin/otp/send", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ email }), }); setLoading(false); if (!res.ok) { const d = await res.json().catch(()=>({})); setError(d.error || "發送失敗"); return; } setStep("otp"); setResendIn(30); setTimeout(() => otpRefs.current[0]?.focus(), 100); }; const submit = async () => { const code = otp.join(""); if (code.length < 6) { setError("請輸入完整驗證碼"); return; } setError(""); setLoading(true); const res = await fetch("/api/admin/auth/change-password", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ email, otp: code, newPassword: newPw }), }); setLoading(false); if (!res.ok) { const d = await res.json().catch(()=>({})); setError(d.error || "更新失敗"); return; } setStep("done"); }; const setDigit = (i, v) => { v = v.replace(/\D/g,"").slice(0,1); const next = [...otp]; next[i] = v; setOtp(next); if (v && i < 5) otpRefs.current[i+1]?.focus(); }; return (

{ if (e.target === e.currentTarget) onClose(); }}>

{step === "done" ? (<>

密碼已更新

下次登入請使用新密碼。

) : (<>

修改密碼

{step === "form" && (<>

新密碼 setNewPw(e.target.value)} placeholder="至少 8 個字元"/>

確認新密碼 setConfirmPw(e.target.value)} placeholder="再輸入一次"/>

{error &&

{error}

}

)} {step === "otp" && (<>

已將驗證碼發送至 {email}，5 分鐘內有效。

{otp.map((d,i) => ( otpRefs.current[i]=el} value={d} onChange={e=>setDigit(i,e.target.value)} onKeyDown={e=>{ if(e.key==="Backspace"&&!otp[i]&&i>0) otpRefs.current[i-1]?.focus(); }} inputMode="numeric" maxLength={1} style={{ width:48, height:56, fontSize:22, textAlign:"center", border:"1.5px solid "+(d?"var(--ink)":"var(--border-strong)"), borderRadius:10, fontFamily:"var(--font-mono)", fontWeight:600, outline:0, background:"var(--surface)", transition:"border-color .15s" }}/> ))}

{error &&

{error}

}

{resendIn > 0 ? 可於 {resendIn} 秒後重發 : ( )}

)} )}

); }; const UserMenu = ({ onLogout, adminEmail = "", adminAvatar = null, onAvatarChange }) => { const [changePwOpen, setChangePwOpen] = React.useState(false); const [uploading, setUploading] = React.useState(false); const fileInputRef = React.useRef(null); const email = adminEmail; const name = email.split("@")[0] || "admin"; const handleAvatarChange = async (e) => { const file = e.target.files?.[0]; if (!file) return; e.target.value = ""; setUploading(true); try { const fd = new FormData(); fd.append("file", file); const res = await fetch("/api/admin/profile/avatar", { method: "POST", body: fd }); const data = await res.json(); if (res.ok && data.url) onAvatarChange?.(data.url); } catch {} setUploading(false); }; return (<> {changePwOpen && setChangePwOpen(false)} adminEmail={email}/>}

{adminAvatar ?

{ e.target.style.display = "none"; }}/> : }

{name}

{email}

Super Admin MFA 已啟用

); }; const fmtChatTime = (iso) => { if (!iso) return ""; return new Date(iso).toLocaleTimeString("zh-TW", { hour: "2-digit", minute: "2-digit", hour12: false, timeZone: "Asia/Taipei", }); }; const AdminChatPanel = ({ adminEmail, onClose }) => { const [messages, setMessages] = React.useState([]); const [text, setText] = React.useState(""); const [sending, setSending] = React.useState(false); const [pendingImages, setPendingImages] = React.useState([]); const [uploading, setUploading] = React.useState(false); const bottomRef = React.useRef(null); const fileInputRef = React.useRef(null); const senderName = adminEmail.split("@")[0] || "admin"; const load = () => { fetch("/api/admin/chat") .then(r => r.ok ? r.json() : []) .then(d => Array.isArray(d) && setMessages(d)) .catch(() => {}); }; React.useEffect(() => { load(); const t = setInterval(load, 5000); return () => clearInterval(t); }, []); React.useEffect(() => { bottomRef.current?.scrollIntoView({ behavior: "smooth" }); }, [messages]); const handleFileChange = async (e) => { const file = e.target.files?.[0]; if (!file) return; e.target.value = ""; setUploading(true); try { const fd = new FormData(); fd.append("file", file); const res = await fetch("/api/admin/chat/upload", { method: "POST", body: fd }); const data = await res.json(); if (res.ok && data.url) { setPendingImages(prev => [...prev, data.url]); } } catch {} setUploading(false); }; const send = async () => { const msg = text.trim(); if ((!msg && pendingImages.length === 0) || sending) return; setSending(true); setText(""); const imgs = [...pendingImages]; setPendingImages([]); await fetch("/api/admin/chat", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ message: msg, images: imgs }), }).catch(() => {}); setSending(false); load(); }; const canSend = (text.trim() || pendingImages.length > 0) && !sending && !uploading; return (

{/* Header */}

內部頻道

管理員專用頻道

{/* Messages */}

{messages.length === 0 && (

目前沒有訊息

)} {messages.map(m => { const isMe = m.email === adminEmail; const imgs = m.images ?? []; return (

{!isMe && (

{m.name}

)} {imgs.length > 0 && (

{imgs.map((url, i) => (

{ e.target.style.display = "none"; }}/> ))}

)} {m.message && (

{m.message}

)}

{fmtChatTime(m.createdAt)}

); })}

{/* Pending image previews */} {pendingImages.length > 0 && (

{pendingImages.map((url, i) => (

))}

)} {/* Input */}

setText(e.target.value)} onKeyDown={e => { if (e.key === "Enter" && !e.shiftKey) { e.preventDefault(); send(); } }} placeholder="輸入訊息…" style={{ flex: 1, padding: "7px 10px", border: "1px solid var(--border)", borderRadius: 8, fontSize: 13, outline: "none", background: "var(--bg)", }} onFocus={e => e.target.style.borderColor = "var(--ink-3)"} onBlur={e => e.target.style.borderColor = "var(--border)"} />

); }; Object.assign(window, { Sidebar, TopBar, NAV_ITEMS });