// ============================================================= // HomePage / Dashboard — live counter, anniversaries, recent feeds // ============================================================= const { daysSince, daysUntil, daysBetween, fmtDate, fmtDateCN, toDate, ymd } = window.xm.util; // ---- live timer (re-renders every second) ---- const useTick = (interval = 1000) => { const [, setT] = useState(0); useEffect(() => { const id = setInterval(() => setT(t => t + 1), interval); return () => clearInterval(id); }, [interval]); }; // ---- icon picker for "已经过去" cards (stable per story id) ---- const PAST_ICONS = ["heart", "sakura", "ribbon", "star", "cloud", "strawberry"]; const pickPastIcon = (id) => { let h = 0; for (let i = 0; i < (id || "").length; i++) h = (h * 31 + id.charCodeAt(i)) >>> 0; return PAST_ICONS[h % PAST_ICONS.length]; }; // ---- compute anniversary occurrences ---- // For each milestone-type anniversary we generate 3 candidate countdowns: // next month-anniversary, next 100-day milestone, next year-anniversary. // The home page merges all candidates across all anniversaries and picks the closest few. function nextMonthlyMilestone(anchor, title) { const a = toDate(anchor); const now = new Date(); const day = a.getDate(); let next = new Date(now.getFullYear(), now.getMonth(), day); if (next <= now) next = new Date(now.getFullYear(), now.getMonth() + 1, day); const months = (next.getFullYear() - a.getFullYear()) * 12 + (next.getMonth() - a.getMonth()); return { date: next, days: daysUntil(next), label: `${title} · 第 ${months} 个月` }; } function nextHundredDayMilestone(anchor, title) { const a = toDate(anchor); const now = new Date(); const elapsed = Math.max(0, daysBetween(a, now)); // floor of (now - anchor) in days const nextN = (Math.floor(elapsed / 100) + 1) * 100; const next = new Date(a); next.setDate(next.getDate() + nextN); return { date: next, days: daysUntil(next), label: `${title} · 第 ${nextN} 天` }; } function nextYearlyMilestone(anchor, title) { const a = toDate(anchor); const now = new Date(); let next = new Date(now.getFullYear(), a.getMonth(), a.getDate()); if (next <= now) next = new Date(now.getFullYear() + 1, a.getMonth(), a.getDate()); const years = next.getFullYear() - a.getFullYear(); return { date: next, days: daysUntil(next), label: `${title} · ${years} 周年` }; } // Anniversary -> list of candidate countdowns function candidatesFor(anniv) { if (anniv.kind === "countdown") { const days = daysUntil(anniv.date); if (days < 0) return []; // expired countdowns hide from the home page return [{ date: toDate(anniv.date), days, label: anniv.title, kind: "countdown" }]; } return [ nextMonthlyMilestone(anniv.date, anniv.title), nextHundredDayMilestone(anniv.date, anniv.title), nextYearlyMilestone(anniv.date, anniv.title), ]; } const LiveCounter = ({ togetherDate }) => { useTick(1000); const ms = Date.now() - toDate(togetherDate).getTime(); const d = Math.floor(ms / 86400000); const h = Math.floor((ms % 86400000) / 3600000); const m = Math.floor((ms % 3600000) / 60000); const s = Math.floor((ms % 60000) / 1000); const Cell = ({ n, label }) => (
{String(n).padStart(2, "0")} {label}
); return (
{d} 天 ♡
·
); }; const HomePage = ({ settings, photos, promises, stories, onNav, onPhotoOpen, onEditAnniversaries, onEditImportantEvents, onPetOpen }) => { // Implicit "在一起" anniversary (always present, derived from togetherDate) // + user-defined anniversaries from settings.anniversaries const upcoming = useMemo(() => { const implicit = { id: "_together", title: "在一起", date: settings.togetherDate, kind: "milestone" }; const all = [implicit, ...(settings.anniversaries || [])]; return all.flatMap(candidatesFor).sort((a,b) => a.days - b.days).slice(0, 5); }, [settings.togetherDate, settings.anniversaries]); // 已经过去 — driven by starred stories (重要事件) const importantEvents = useMemo(() => (stories || []) .filter(s => s.isAnniversary) .map(s => ({ ...s, days: daysSince(s.date) })) .sort((a,b) => a.days - b.days), [stories] ); // Today's pick const todayPick = useMemo(() => { if (!photos.length) return null; const seed = new Date().toISOString().slice(0,10).split("-").reduce((a,b) => a + parseInt(b), 0); return photos[seed % photos.length]; }, [photos]); const recentPhotos = useMemo(() => [...photos].sort((a,b) => b.date.localeCompare(a.date)).slice(0,3), [photos]); const todoCount = promises.filter(p => p.status === "todo" || p.status === "doing").length; return (
{/* Hero */}
{fmtDateCN(new Date())}

欢迎回来，{settings.nickname} 💕

我们已经在一起
 {/* Pixel pet preview — 电子宠物灰度开关 */} {(window.XM_FEATURES && window.XM_FEATURES.pet) && ( onPetOpen && onPetOpen()}/> )} {/* Today's pick */} {todayPick && (
onPhotoOpen(todayPick)} className="xm-home-hero" style={{ display: "flex", gap: 16, padding: 16 }}>
{todayPick.mood} {todayPick.album && {todayPick.album}}
{todayPick.title}
{todayPick.note}
{fmtDate(todayPick.date)} · {todayPick.place} · {daysSince(todayPick.date)} 天前
)} {/* Upcoming anniversaries */}
♡ 编辑}/> {upcoming.length === 0 ? 还没有纪念日，点上面的「♡ 编辑」加一个吧 :
{upcoming.map((a, i) => { const soon = a.days <= 7; const isCountdown = a.kind === "countdown"; return (
{fmtDate(a.date)} {isCountdown && ⏱ 倒数} {soon && ♡ 即将到来}
{a.label}
{a.days} 天后
); })}
}
{/* Important events (starred stories) */}
♡ 编辑}/> {importantEvents.length === 0 ? 还没有标记的重要事件，去故事里给一段打上 ★ 吧 :
{importantEvents.map((p) => (
{p.title}
已 {p.days} 天 · {fmtDate(p.date)}
 ))}
}
{/* Recent activity */}
onNav("album")}>去相册}/>
{recentPhotos.map(p => ( onPhotoOpen(p)} style={{ display: "flex", gap: 12, padding: 12 }}>
{p.title}
{p.note}
{fmtDate(p.date)}
 ))}
{todoCount}
个承诺还没兑现
onNav("stories")} style={{ textAlign: "center", padding: 18 }}>
写一段我们的故事 →
); }; // Tile used by Home + Album — displays uploaded image (data URL) or motif placeholder const PhotoTile = ({ photo, size = 80 }) => { if (photo.src) { return ; } return (
); }; Object.assign(window, { HomePage, PhotoTile, useTick });