/* page-home.jsx — （2）Home：问候语 + 个人卡片 + Memory in use 两张卡片结构一致：标题行（图标 + 标题 + 说明 + More ›）；中部「左内容、右大号数字」，下半部分列表占满卡片宽度； 右列宽度一致，保证两个数字上下对齐 */ /* global React */ window.P21 = window.P21 || {}; (() => { const { C, SERIF, useP, Label, More, Av, Tip, Ico, D } = window.P21; const NUM_COL = 170; // 右侧大号数字列宽，两张卡片共用 /* 问候语：5–12 morning，12–18 afternoon，18–次日 5 evening */ function greetingOf(mode) { if (mode && mode !== 'auto') return { morning: 'Good morning', afternoon: 'Good afternoon', evening: 'Good evening' }[mode]; const h = new Date().getHours(); return h >= 5 && h < 12 ? 'Good morning' : h >= 12 && h < 18 ? 'Good afternoon' : 'Good evening'; } /* 卡片标题行：48px 圆形图标 + 20px 粗体标题 + 灰色说明，两张卡片同一结构 */ function Head({ icon, title, meta }) { return (
{icon} {title} {meta}
); } /* 卡片：标题行（右侧 More ›，垂直居中）；中部左右分栏（左内容 / 右数字）；bottom 占满整张卡片宽度 */ function Card({ head, left, right, bottom, more }) { return (
{head}{more}
{left}
{right}
{bottom}
); } /* 右侧大号数字：浅灰底块，高度拉满上半部分；数字在上，标签和今日增量沉底 */ function BigNum({ n, label, sub, onEnter, onLeave, children }) { return (
{n}
{label}
{sub}
{children}
); } function ListRow({ left, right, onClick }) { return (
{left} {right}
); } function HomePage() { const { s, set, go, openModal } = useP(); const [hoverReads, setHoverReads] = React.useState(false); const u = D.user; return (
{greetingOf(s.greet)}, @{u.name}
{/* ── 个人卡片 ── */} } title="About you" meta={`Known since ${u.knownSince}`} />} left={<>
{D.summary}
{D.counts.map(c => ( go('You', { youTab: c.key, graph: false, scrollTo: 'world' })} className="p21-h-chip" style={{ padding: '3px 10px', borderRadius: 999, background: C.soft, fontSize: 12.5, color: C.muted, cursor: 'pointer' }}> {c.n} {c.label} ))} go('Playbook', { pbView: 'mine', mineTab: 'Installed', mineFilter: 'All' })} className="p21-h-chip" style={{ padding: '3px 10px', borderRadius: 999, background: C.soft, fontSize: 12.5, color: C.muted, cursor: 'pointer' }}> {s.skills.length} Skills
} right={ } more={ go('You', { graph: false })} />} bottom={<> {D.recentMemories.map(m => ( go('Timeline', { day: 30, tlFilter: 'All', highlight: m.id })} /> ))} } /> {/* ── Memory in use ── */} a.connected).length} of ${D.agents.length} connected`} icon={} />} left={<>
{D.agents.map(a => ( {a.name} ))}
} right={ setHoverReads(true)} onLeave={() => setHoverReads(false)}> {hoverReads && ( {D.agents.map(a => (
{a.name}{a.reads}
))} )} } more={ openModal({ type: 'connections' })} />} bottom={<> {D.recentReads.map((r, i) => ( {r.agent} read {r.what}} right={r.ago} /> ))} } />
); } Object.assign(window.P21, { HomePage, greetingOf }); })();