const { useState, useEffect, useRef, useCallback, useMemo } = React; /* ============================================================ SVG 图标（管理后台用到的子集，与请柬页一致） ============================================================ */ const Icon = { lock: (), logout: (), barChart: (), message: (), musicNote: (), rotate: (), heart: (), users: (), eye: (), eyeOff: (), settings: (), edit: (), trash: (), pin: (), download: (), rsvp: (), external: (), plus: (), image: (), }; const RSVP_SUBMITTED_KEY = 'wedding_rsvp_submitted_v1'; /* ============================================================ Toast 提示动画：保存/修改等操作的成功与失败反馈 ============================================================ */ const Toast = { _push: null, // 由 ToastHost 挂载时注入 show(msg, type) { this._push && this._push(msg, type || 'success'); }, success(msg) { this.show(msg, 'success'); }, error(msg) { this.show(msg, 'error'); }, }; function ToastHost() { const [items, setItems] = useState([]); useEffect(() => { // 注入全局推送函数：新提示入栈，2.6s 后自动出栈 Toast._push = (msg, type) => { const id = Date.now() + Math.random(); setItems(list => [...list, { id, msg, type }]); setTimeout(() => setItems(list => list.filter(t => t.id !== id)), 2600); }; return () => { Toast._push = null; }; }, []); return (
{items.map(t => (
{t.type === 'success' ? ( ) : ( )} {t.msg}
))}
); } const NAV_ITEMS = [ { key: 'overview', label: '概览', icon: Icon.barChart }, { key: 'rsvp', label: 'RSVP管理', icon: Icon.rsvp }, { key: 'blessings', label: '留言管理', icon: Icon.message }, { key: 'content', label: '内容编辑', icon: Icon.edit }, { key: 'music', label: '背景音乐', icon: Icon.musicNote }, { key: 'settings', label: '设置', icon: Icon.settings }, ]; /* ============================================================ 登录卡片 ============================================================ */ function LoginCard({ onLogin }) { const [pwd, setPwd] = useState(''); const [error, setError] = useState(''); const [submitting, setSubmitting] = useState(false); const inputRef = useRef(null); useEffect(() => { inputRef.current?.focus(); }, []); const handleSubmit = async () => { if (!pwd || submitting) return; setSubmitting(true); try { const { token } = await WeddingAPI.login(pwd); WeddingAPI.setToken(token); onLogin && onLogin(); } catch (err) { setError(err.message); setSubmitting(false); } }; return (
{Icon.lock}
管理员登录
婚礼请柬管理后台
setPwd(e.target.value)} onKeyDown={(e) => e.key === 'Enter' && handleSubmit()} />
{error}
); } /* ============================================================ 请柬内容编辑表单（PC 表单，保存后所有访客生效） ============================================================ */ /* 图片裁剪弹窗：按小程序端实际展示形状（拱形/圆形/横幅）选取可见区域， 确认后在浏览器端用 canvas 裁切再上传，小程序端所见即所得 */ function CropModal({ src, mime, ratio, shape, label, rawFile, onCancel, onConfirm, onRaw }) { const boxW = ratio >= 1.5 ? 380 : ratio >= 1 ? 300 : 240; const boxH = Math.round(boxW / ratio); const [img, setImg] = useState(null); // { el, w, h } const [scale, setScale] = useState(0); const [minScale, setMinScale] = useState(1); const [pos, setPos] = useState({ x: 0, y: 0 }); const [exporting, setExporting] = useState(false); const stageRef = useRef(null); const drag = useRef(null); const live = useRef({}); // 供非 React 事件（wheel）读取的最新状态 // 加载图片并计算「恰好铺满裁剪框」的最小缩放 useEffect(() => { const el = new Image(); el.crossOrigin = 'anonymous'; el.onload = () => { const ms = Math.max(boxW / el.naturalWidth, boxH / el.naturalHeight); setImg({ el, w: el.naturalWidth, h: el.naturalHeight }); setMinScale(ms); setScale(ms); setPos({ x: (boxW - el.naturalWidth * ms) / 2, y: (boxH - el.naturalHeight * ms) / 2 }); }; el.onerror = () => { Toast.error('图片加载失败'); onCancel(); }; el.src = src; // eslint-disable-next-line react-hooks/exhaustive-deps }, [src]); const clampPos = (p, s) => ({ x: Math.min(0, Math.max(boxW - img.w * s, p.x)), y: Math.min(0, Math.max(boxH - img.h * s, p.y)), }); // 以裁剪框中心为锚点缩放 const zoomTo = (ns) => { if (!img) return; ns = Math.min(Math.max(ns, minScale), minScale * 5); const k = ns / scale; setPos(clampPos({ x: boxW / 2 - (boxW / 2 - pos.x) * k, y: boxH / 2 - (boxH / 2 - pos.y) * k }, ns)); setScale(ns); }; live.current = { scale, zoomTo }; // React 的 onWheel 是 passive 的，无法 preventDefault，改为手动挂非被动监听 useEffect(() => { const el = stageRef.current; if (!el) return; const handler = (e) => { e.preventDefault(); const { scale: s, zoomTo: z } = live.current; z && z(s * (e.deltaY < 0 ? 1.08 : 0.93)); }; el.addEventListener('wheel', handler, { passive: false }); return () => el.removeEventListener('wheel', handler); }, [img]); const onPointerDown = (e) => { drag.current = { x: e.clientX, y: e.clientY, pos }; e.currentTarget.setPointerCapture(e.pointerId); }; const onPointerMove = (e) => { if (!drag.current || !img) return; setPos(clampPos({ x: drag.current.pos.x + e.clientX - drag.current.x, y: drag.current.pos.y + e.clientY - drag.current.y, }, scale)); }; const onPointerUp = () => { drag.current = null; }; // canvas 按选区裁切导出（长边限制 1600px） const handleConfirm = () => { if (!img || exporting) return; setExporting(true); const cropW = boxW / scale; const cropH = boxH / scale; const k = Math.min(1, 1600 / Math.max(cropW, cropH)); const canvas = document.createElement('canvas'); canvas.width = Math.round(cropW * k); canvas.height = Math.round(cropH * k); canvas.getContext('2d').drawImage(img.el, -pos.x / scale, -pos.y / scale, cropW, cropH, 0, 0, canvas.width, canvas.height); const type = mime === 'image/png' ? 'image/png' : 'image/jpeg'; canvas.toBlob((blob) => { setExporting(false); if (blob) onConfirm(blob, type); else Toast.error('导出失败，请重试'); }, type, 0.92); }; return (
e.target === e.currentTarget && onCancel()}>
调整「{label || '图片'}」显示区域
{img && ( )}
缩放 zoomTo(parseFloat(e.target.value))} />
拖动图片调整位置，滚轮或滑杆缩放；框内即为小程序中的最终显示效果
{rawFile && }
); } /* 图片字段：传 ratio 时选择图片后先弹裁剪窗（按 ratio/shape 模拟小程序展示形状），确认后再上传； 不传 ratio 表示小程序端按原图比例自适应展示（widthFix），直接上传原图不裁剪 */ function ImageField({ label, value, onChange, ratio, shape, hint }) { const [uploading, setUploading] = useState(false); const [crop, setCrop] = useState(null); // { src, mime, file|null } const handleFile = (e) => { const file = e.target.files[0]; e.target.value = ''; if (!file) return; if (!/^image\//.test(file.type)) { Toast.error('请选择图片文件'); return; } if (ratio) setCrop({ src: URL.createObjectURL(file), mime: file.type, file }); else uploadRawFile(file); }; const closeCrop = () => { if (crop && crop.file) URL.revokeObjectURL(crop.src); setCrop(null); }; const doUpload = async (blob, mime) => { setUploading(true); try { const ext = mime === 'image/png' ? '.png' : '.jpg'; const { url } = await WeddingAPI.uploadFile(new File([blob], `crop-${Date.now()}${ext}`, { type: mime })); onChange(url); Toast.success('图片已上传'); } catch (err) { Toast.error('上传失败：' + err.message); } setUploading(false); }; // 不裁剪，直接上传原图 const uploadRawFile = async (file) => { setUploading(true); try { const { url } = await WeddingAPI.uploadFile(file); onChange(url); Toast.success('图片已上传'); } catch (err) { Toast.error('上传失败：' + err.message); } setUploading(false); }; const handleRaw = async () => { const file = crop.file; closeCrop(); uploadRawFile(file); }; return (
{value ? {label} : 未设置}
{value && ratio && ( )} {value && ( )}
{hint &&

{hint}

} {crop && ( { closeCrop(); doUpload(blob, mime); }} /> )}
); } /* 小程序效果实时预览：按 375px 屏宽 1:1 复刻小程序排版后整体缩放， 封面/头像 object-fit: cover 与小程序 aspectFill 居中裁剪效果一致，故事图按原比例（widthFix）显示 */ const PV_TABS = [ { key: 'cover', label: '封面' }, { key: 'couple', label: '新人' }, { key: 'story', label: '故事' }, ]; function PhonePreview({ form }) { const [tab, setTab] = useState('cover'); const parts = (form.date || '').split('-'); const year = parts[0] || ''; const monthDay = parts.length === 3 ? `${parts[1]}.${parts[2]}` : ''; return (
{PV_TABS.map(t => ( ))}
{tab === 'cover' && (
{form.coverPhoto ? :
Z & G
}
WEDDING INVITATION
{form.groom}
&
{form.bride}
{form.tagline}
{year}
{monthDay}
{form.lunarDate}
)} {tab === 'couple' && (
The Couple
新 人 介 绍
{form.groomAvatar ? : 'Z'}
{form.groom}
The Groom
{form.groomDesc}
&
{form.brideAvatar ? : 'G'}
{form.bride}
The Bride
{form.brideDesc}
)} {tab === 'story' && (
Our Story
爱 情 故 事
{(form.story || []).map((item, i) => (
{item.year}
{item.month}
{item.image &&
}
{item.title}
{item.desc}
))}
)}

小程序实时预览，封面/头像按居中裁剪、故事图按原比例显示
与真实小程序排版一致

); } function ContentForm({ config, onConfigChange }) { const [form, setForm] = useState(null); const [dirty, setDirty] = useState(false); const [saving, setSaving] = useState(false); // config 异步到位后初始化表单（只初始化一次） useEffect(() => { if (config && !form) setForm(config); }, [config, form]); if (!form) return
加载中…
; const set = (k, v) => { setForm(f => ({ ...f, [k]: v })); setDirty(true); }; const setStory = (i, patch) => { setForm(f => { const story = [...f.story]; story[i] = { ...story[i], ...patch }; return { ...f, story }; }); setDirty(true); }; const addStory = () => { setForm(f => ({ ...f, story: [...f.story, { year: '202X', month: 'XX月', title: '新节点', desc: '', image: '' }] })); setDirty(true); }; const removeStory = (i) => { if (form.story.length <= 1) return; if (!confirm('确定删除这个故事节点吗？')) return; setForm(f => ({ ...f, story: f.story.filter((_, idx) => idx !== i) })); setDirty(true); }; const handleSave = async () => { if (saving) return; setSaving(true); try { await WeddingAPI.saveConfig(form); onConfigChange(form); setDirty(false); Toast.success('已保存，所有访客刷新生效'); } catch (err) { Toast.error('保存失败：' + err.message); } setSaving(false); }; const F = ({ label, k, placeholder }) => (
set(k, e.target.value)} />
); return (

新人信息

婚礼信息

set('date', e.target.value)} />
set('time', e.target.value)} />

导航坐标用于小程序「导航到现场」按钮，可从腾讯地图/高德地图拾取；留空则使用内置默认坐标

封底文案