// =============================================================
// 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]);
};
// ---- compute anniversary occurrences ----
function nextMonthlyAnniversary(anchor) {
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);
// monthly count
let months = (next.getFullYear() - a.getFullYear()) * 12 + (next.getMonth() - a.getMonth());
return { date: next, days: daysUntil(next), label: `第 ${months} 个月纪念日` };
}
function nextYearlyAnniversary(anchor) {
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: `${years} 周年纪念日` };
}
function nextYearlyOf(d, label) {
const a = toDate(d);
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());
return { date: next, days: daysUntil(next), label };
}
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 (
);
};
const HomePage = ({ settings, photos, promises, stories, onNav, onPhotoOpen }) => {
const monthly = useMemo(() => nextMonthlyAnniversary(settings.togetherDate), [settings.togetherDate]);
const yearly = useMemo(() => nextYearlyAnniversary(settings.togetherDate), [settings.togetherDate]);
const customs = useMemo(() => settings.keyDates.map(k => nextYearlyOf(k.date, k.title + "（每年）")), [settings.keyDates]);
const storyAnnivs = useMemo(() =>
stories.filter(s => s.isAnniversary).map(s => nextYearlyOf(s.date, s.title)),
[stories]
);
const upcoming = [monthly, yearly, ...customs, ...storyAnnivs].sort((a,b) => a.days - b.days).slice(0, 5);
// Past key milestones
const pastDates = settings.keyDates.map(k => ({ ...k, days: daysSince(k.date) })).sort((a,b) => a.days - b.days);
// 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} 💕
我们已经在一起
{/* Today's pick */}
{todayPick && (
onPhotoOpen(todayPick)} 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.map((a, i) => {
const soon = a.days <= 7;
return (
{fmtDate(a.date)}
{soon && ♡ 即将到来}
{a.label}
{a.days}
天后
);
})}
{/* Past milestones */}
{pastDates.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 }}>
写一段我们的故事 →
;
}
return (
);
};
Object.assign(window, { HomePage, PhotoTile, useTick });