// ============================================================= // AlbumPage — grid + timeline, upload, detail // ============================================================= const MOOD_TAGS = ["💕甜蜜", "🥰幸福", "😆搞笑", "🥺感动", "🌟特别", "🍦日常"]; const ALBUMS = ["全部", "日常", "第一次旅行", "节日", "收藏 ⭐"]; const AlbumPage = ({ photos, onChange, settings, onPhotoOpen }) => { const [view, setView] = useState("grid"); // grid | timeline | place const [filter, setFilter] = useState("全部"); const [adding, setAdding] = useState(false); const filtered = useMemo(() => { if (filter === "全部") return photos; if (filter === "收藏 ⭐") return photos.filter(p => p.fav); return photos.filter(p => p.album === filter); }, [photos, filter]); const sorted = useMemo(() => [...filtered].sort((a,b) => b.date.localeCompare(a.date)), [filtered]); const grouped = useMemo(() => { const m = {}; sorted.forEach(p => { const key = p.date.slice(0,7); (m[key] = m[key] || []).push(p); }); return m; }, [sorted]); const groupedByPlace = useMemo(() => { const m = {}; sorted.forEach(p => { const key = p.place || "未知地点"; (m[key] = m[key] || []).push(p); }); return m; }, [sorted]); const togglefav = (id) => onChange(photos.map(p => p.id === id ? { ...p, fav: !p.fav } : p)); return (
setAdding(true)}>＋ 上传照片}/> {/* Albums + view toggle */}
{ALBUMS.map(a => setFilter(a)}>{a})}
{[["grid", "🌸 网格"], ["timeline", "📜 时间轴"], ["place", "🗺 地点"]].map(([k, l]) => ( ))}
{sorted.length === 0 &&
}/>} {view === "grid" && Object.entries(grouped).map(([month, list]) => (
{month.replace("-", " 年 ")} 月 {list.length} 张
{list.map(p => ( onPhotoOpen(p)}> {p.fav && ⭐}
{p.mood}
{p.title}
{fmtDate(p.date)} · {p.place}
 ))}
))} {view === "timeline" && (
{sorted.map((p, i) => (
onPhotoOpen(p)} style={{ display: "flex", gap: 14, padding: 14 }}>
{p.mood} {p.fav && ⭐ 收藏}
{p.title}
{p.note}
{fmtDate(p.date)} · {p.place} · 在一起的第 {daysBetween(settings.togetherDate, p.date)} 天
))}
)} {view === "place" && Object.entries(groupedByPlace).map(([place, list]) => (
📍 {place} {list.length} 张
{list.map(p => ( onPhotoOpen(p)} style={{ padding: 10 }}>
{p.title}
 ))}
))} setAdding(false)} onSave={(arr) => { onChange([...arr, ...photos]); setAdding(false); }}/>
); }; // Upload modal — supports drag & drop, multi-file, then per-photo metadata const PhotoUploader = ({ open, onClose, onSave }) => { const [drafts, setDrafts] = useState([]); const [uploading, setUploading] = useState(false); const [uploadError, setUploadError] = useState(null); const inputRef = useRef(); useEffect(() => { if (!open) { setDrafts([]); setUploadError(null); } }, [open]); const handleFiles = (files) => { Array.from(files).forEach(f => { if (!f.type.startsWith("image/")) return; const reader = new FileReader(); reader.onload = (e) => { // Base64 preview only — the real File is stashed for upload at save time. setDrafts(d => [...d, { id: window.xm.uid(), src: e.target.result, // base64 preview (replaced with public URL after upload) _file: f, // File handle for Supabase upload (stripped before save) title: f.name.replace(/\.[^.]+$/, ""), date: new Date().toISOString().slice(0,10), place: "", mood: "💕甜蜜", note: "", album: "日常", fav: false, tone: "sakura", }]); }; reader.readAsDataURL(f); }); }; const update = (id, patch) => setDrafts(d => d.map(p => p.id === id ? { ...p, ...patch } : p)); const remove = (id) => setDrafts(d => d.filter(p => p.id !== id)); const handleSave = async () => { setUploading(true); setUploadError(null); try { // Upload all File objects in parallel; replace base64 src with the public URL. const finalDrafts = await Promise.all(drafts.map(async (d) => { if (!d._file) return { ...d, _file: undefined }; const { publicUrl } = await window.xm.store.uploadPhoto(d._file); const { _file, ...rest } = d; return { ...rest, src: publicUrl }; })); onSave(finalDrafts); } catch (err) { console.error(err); setUploadError("有照片上传失败了，再试一次？"); } finally { setUploading(false); } }; return ( {drafts.length === 0 ? (
{ e.preventDefault(); e.currentTarget.style.background = "#FFF1D4"; }} onDragLeave={(e) => { e.currentTarget.style.background = "#FFFDF6"; }} onDrop={(e) => { e.preventDefault(); e.currentTarget.style.background = "#FFFDF6"; handleFiles(e.dataTransfer.files); }} style={{ border: "2px dashed #E5BA75", borderRadius: 24, padding: 40, textAlign: "center", background: "#FFFDF6", cursor: "pointer", transition: "background 200ms", }} onClick={() => inputRef.current.click()} >
把照片轻轻放进来吧
支持拖拽 或 点击选择 · 可多张
handleFiles(e.target.files)}/>
) : (
{drafts.map(d => (
update(d.id, { title: e.target.value })}/>
update(d.id, { date: e.target.value })}/> update(d.id, { place: e.target.value })} placeholder="在哪呢"/>
心情
{MOOD_TAGS.map(m => update(d.id, { mood: m })}>{m})}
update(d.id, { note: e.target.value })} placeholder="想悄悄说的话…"/>
))} handleFiles(e.target.files)}/> {uploadError &&
{uploadError}
}
)} ); }; const PhotoDetail = ({ photo, photos, onClose, onChange, settings }) => { if (!photo) return null; const idx = photos.findIndex(p => p.id === photo.id); const [editing, setEditing] = useState(false); const [draft, setDraft] = useState(photo); useEffect(() => { setDraft(photo); setEditing(false); }, [photo?.id]); const nav = (delta) => { const next = photos[(idx + delta + photos.length) % photos.length]; onClose(next); }; const save = () => { onChange(photos.map(p => p.id === draft.id ? draft : p)); setEditing(false); }; const togglefav = () => { const u = { ...photo, fav: !photo.fav }; onChange(photos.map(p => p.id === u.id ? u : p)); setDraft(u); }; return ( onClose(null)} title={photo.title} wide>
{photo.src ? :
}
{!editing ? <>
{photo.mood} {photo.album} {photo.fav ? "⭐ 已收藏" : "☆ 收藏"}
{photo.note || "（还没有备注呀）"}
{fmtDateCN(photo.date)}
{photo.place &&
📍 {photo.place}
}
那一天
在一起的第 {daysBetween(settings.togetherDate, photo.date)} 天
距今 {daysSince(photo.date)} 天
: <> setDraft({ ...draft, title: e.target.value })}/> setDraft({ ...draft, date: e.target.value })}/> setDraft({ ...draft, place: e.target.value })}/>
心情
{MOOD_TAGS.map(m => setDraft({ ...draft, mood: m })}>{m})}
setDraft({ ...draft, note: e.target.value })}/>
}
); }; Object.assign(window, { AlbumPage, PhotoUploader, PhotoDetail, MOOD_TAGS });