{/* profile */}

喝啥_007

已打卡 34 天 · 目标 少糖派

{/* today log */}

今日打卡

目标 1800 kcal

{todayCal} kcal

{logEntries.length === 0 ? (

还没有打卡 · 去首页选一杯饮品试试

) : (

{logEntries.map((e, i) => (

{e.drink.name}

{e.drink.brand}

{e.totalCal}

))}

)}

{/* menu grid */}

{[ { icon: IconHeart, label: '我的收藏', n: 12, color: 'var(--data-match)' }, { icon: IconBookmark, label: '想喝清单', n: 4, color: 'var(--brand-purple)' }, { icon: IconSparkle, label: '口味档案', n: null, color: 'var(--brand-yellow)' }, ].map(({ icon: Ic, label, n, color }) => (

{label}

{n !== null && (

{n} 项

)}

))}

); } // ───── SEARCH OVERLAY ───── function SearchOverlay({ onClose, onOpenDrink }) { const [q, setQ] = React.useState(''); const results = q ? DRINKS.filter(d => d.name.includes(q) || d.brand.includes(q) || d.tags.some(t => t.includes(q)) ) : []; const hot = ['抹茶拿铁', '无糖', '0 卡', '生椰', '芋圆', '杨枝甘露']; return (

{/* custom top bar */}

setQ(e.target.value)} placeholder="饮品、品牌或配料" style={{ flex: 1, background: 'transparent', border: 'none', outline: 'none', fontSize: 14 }} /> {q && ( )}

{q === '' ? ( <>

热门搜索

{hot.map(h => ( ))}

) : (

{results.length} 个结果

{results.map(d => ( ))}

)}

); } // ───── 全部周边（首页 → 周边 → 查看全部入口） ───── // 不挂在 Brand tab 里，独立页面。左侧品牌锚点，右侧滚动到对应品牌区。 function CollabAllScreen({ onBack, onOpenCollab }) { // 只显示有周边的品牌；保持 BRANDS 中的顺序 const brandsWithCollabs = React.useMemo(() => { const ids = new Set(COLLAB_ITEMS.map(c => c.brandId)); return BRANDS.filter(b => ids.has(b.id)); }, []); const [activeBrandId, setActiveBrandId] = React.useState(brandsWithCollabs[0]?.id); const rightRef = React.useRef(null); const sectionRefs = React.useRef({}); const isProgrammaticScroll = React.useRef(false); const itemsByBrand = React.useMemo(() => { const map = new Map(); for (const c of COLLAB_ITEMS) { if (!map.has(c.brandId)) map.set(c.brandId, []); map.get(c.brandId).push(c); } return map; }, []); const onSelectBrand = (brandId) => { setActiveBrandId(brandId); const target = sectionRefs.current[brandId]; const container = rightRef.current; if (!target || !container) return; isProgrammaticScroll.current = true; const top = target.offsetTop - 8; container.scrollTo({ top, behavior: 'smooth' }); setTimeout(() => { isProgrammaticScroll.current = false; }, 500); }; // 右侧滚动时同步左侧高亮 const onRightScroll = () => { if (isProgrammaticScroll.current) return; const container = rightRef.current; if (!container) return; const threshold = container.scrollTop + 24; let current = brandsWithCollabs[0]?.id; for (const b of brandsWithCollabs) { const el = sectionRefs.current[b.id]; if (el && el.offsetTop <= threshold) current = b.id; } if (current && current !== activeBrandId) setActiveBrandId(current); }; return (

{/* 左侧：品牌锚点 */}

{brandsWithCollabs.map(b => { const isActive = b.id === activeBrandId; return ( ); })}

{/* 右侧：分组列表 */}

{brandsWithCollabs.map(b => { const items = itemsByBrand.get(b.id) ?? []; return (

{ sectionRefs.current[b.id] = el; }} style={{ paddingTop: 12, marginBottom: 8 }}>

{b.name} · {items.length} 件

{items.map(c => ( ))}

); })}

); } // ───── 周边详情 ───── function CollabDetailScreen({ collab, onBack, onOpenDrink }) { const linkedDrinks = (collab.drinkIds ?? []) .map(id => DRINKS.find(d => d.id === id)) .filter(Boolean); return (

{/* hero — image placeholder + badge, mirrors CMS image_url slot */}

[INSERT MERCH IMAGE]

{collab.badge}

{/* title + brand */}

{collab.brandName}

{collab.name}

{/* description */}

{collab.description}

{/* linked drinks */} {linkedDrinks.length > 0 && (

关联饮品

共 {linkedDrinks.length} 款

{linkedDrinks.map(d => ( ))}

)}

); } Object.assign(window, { LibraryScreen, FavoriteScreen, MeScreen, SearchOverlay, PickForMeScreen, ShuffleItScreen, AvoidMissesScreen, SameCheckScreen, CollabAllScreen, CollabDetailScreen, });