// ============================================================= // PromisesPage — 小本本 // ============================================================= const PROMISE_CATS = ["🍰小事", "🌟中等", "💎重大", "🎁惊喜", "🌍长期目标"]; const PromisesPage = ({ promises, onChange, onConfetti }) => { const [tab, setTab] = useState("todo"); // todo | done | all const [adding, setAdding] = useState(false); const [detail, setDetail] = useState(null); // mark overdue const today = new Date(); const list = useMemo(() => promises.map(p => { if (p.status !== "todo" && p.status !== "doing") return p; if (p.due && toDate(p.due) < today) return { ...p, _overdue: daysSince(p.due) }; return p; }), [promises]); const filtered = list.filter(p => tab === "all" ? true : tab === "done" ? p.status === "done" : (p.status === "todo" || p.status === "doing")); const sorted = [...filtered].sort((a,b) => b.created.localeCompare(a.created)); const totalDone = list.filter(p => p.status === "done").length; const rate = list.length ? Math.round((totalDone / list.length) * 100) : 0; const fastest = list.filter(p => p.status === "done" && p.completedAt).sort((a,b) => daysBetween(a.created, a.completedAt) - daysBetween(b.created, b.completedAt))[0]; const slowest = list.filter(p => p.status === "done" && p.completedAt).sort((a,b) => daysBetween(b.created, b.completedAt) - daysBetween(a.created, a.completedAt))[0]; const monthKey = new Date().toISOString().slice(0,7); const newThisMonth = list.filter(p => p.created.slice(0,7) === monthKey).length; const doneThisMonth = list.filter(p => p.completedAt && p.completedAt.slice(0,7) === monthKey).length; const update = (id, patch) => onChange(promises.map(p => p.id === id ? { ...p, ...patch } : p)); const complete = (id) => { update(id, { status: "done", completedAt: new Date().toISOString().slice(0,10) }); onConfetti(); }; const TabBtn = ({ k, label, n }) => ( ); return (
setAdding(true)}>＋ 画一个饼}/> {/* Stats */}
FULFILLMENT
已经实现的小宇宙
{totalDone}/{list.length}
{rate > 8 && ♡}
本月新画
{newThisMonth}
个新承诺
本月吃掉
{doneThisMonth}
个已兑现
{(fastest || slowest) && (
{fastest &&
最快兑现
{fastest.text}
{daysBetween(fastest.created, fastest.completedAt)} 天就实现啦
} {slowest &&
慢工出细活
{slowest.text}
等了 {daysBetween(slowest.created, slowest.completedAt)} 天
}
)}
p.status !== "done").length}/> p.status === "done").length}/>
{sorted.length === 0 ?
}/> :
{sorted.map(p => setDetail(p)}/>)}
} setAdding(false)} onSave={(np) => { onChange([np, ...promises]); setAdding(false); }}/> setDetail(null)} onSave={(u) => { update(u.id, u); setDetail(null); }} onComplete={(id) => { complete(id); setDetail(null); }} onDelete={(id) => { onChange(promises.filter(x => x.id !== id)); setDetail(null); }}/> ); }; const PromiseCard = ({ p, onComplete, onOpen }) => { const done = p.status === "done"; const overdue = !done && p._overdue; const daysLeft = !done && p.due ? daysUntil(p.due) : null; return ( {done &&
已兑现 ♡
}
{p.category} {Array.from({ length: p.importance || 1 }).map((_, i) => ♥)}
{p.text}
{p.note &&
{p.note}
}
{done ? `兑现于 ${fmtDate(p.completedAt)}` : overdue ? 逾期 {p._overdue} 天 : daysLeft != null ? `还有 ${daysLeft} 天` : `${fmtDate(p.created)}`}
{!done && }
); }; const PromiseEditor = ({ open, onClose, onSave, initial }) => { const blank = { id: window.xm.uid(), text: "", created: new Date().toISOString().slice(0,10), due: "", category: "🍰小事", importance: 3, status: "todo", note: "" }; const [d, setD] = useState(initial || blank); useEffect(() => { setD(initial || blank); }, [open]); return (
setD({ ...d, text: e.target.value })} placeholder="想给你做点什么呢…"/>
setD({ ...d, created: e.target.value })}/> setD({ ...d, due: e.target.value })}/>
类别
{PROMISE_CATS.map(c => setD({ ...d, category: c })}>{c})}
重要程度
{[1,2,3,4,5].map(n => ( ))}
setD({ ...d, note: e.target.value })} placeholder="一些细节…"/>
); }; const PromiseDetail = ({ p, onClose, onSave, onComplete, onDelete }) => { if (!p) return null; const done = p.status === "done"; return (
{p.category} {Array.from({ length: p.importance }).fill("♥").join("")} {done && 已兑现 ✨}
{p.text}
{p.note &&
📝 {p.note}
} {/* timeline */}
🥧
画饼于
{fmtDate(p.created)}
{done ? "✨" : "⏳"}
{done ? "兑现于" : "还在路上"}
{done ? `${fmtDate(p.completedAt)} · 等了 ${daysBetween(p.created, p.completedAt)} 天` : (p.due ? `截止 ${fmtDate(p.due)}` : "没设截止日")}
{!done && }
); }; Object.assign(window, { PromisesPage, PROMISE_CATS });