{/* 星星（夜晚）*/} {stars.map((s, i) => (

))} {/* 日/月 */}

{/* 云 */} {cfg.clouds.map((c, i) => (

))} {/* 问候 */}

{tag}的天空

{greet}

); } // ── 首页：今日天空 ─────────────────────────────────────── function HomeScreen({ state, level, daypart, onCapture, onOpenCloud, goTab }) { const poem = React.useMemo(() => window.CY_POEMS[new Date().getDate() % window.CY_POEMS.length], []); const recent = state.collected.slice().reverse().slice(0, 8).map(id => window.CY_CLOUDS.find(c => c.id === id)).filter(Boolean); const total = window.CY_CLOUDS.length, got = state.collected.length; const dateStr = `${new Date().getMonth()+1}月${new Date().getDate()}日`; const hour = new Date().getHours(); const part = (daypart && daypart !== 'auto') ? daypart : dayPartFor(hour); const slotTags = { earlyMorning:'清晨', morning:'上午', noon:'正午', afternoon:'午后', evening:'傍晚', night:'夜晚', lateNight:'深夜' }; const tag = slotTags[greetSlot(hour)]; // 每次进页随机一条，刷新会换 const greet = React.useMemo(() => pickGreeting(hour), []); return (

{/* 顶栏 */}

彩云间

{dateStr} · 宜抬头观云

{/* 诗句 */}

{poem.text}

— {poem.from}

{/* 今日天空 hero（随时间变天色）*/}

{/* 拍云 CTA */}

{/* 收集进度 */}

{level.title} Lv.{level.index}

已收集 {got} / {total} 种

{level.next ? <>再收集 {level.next.min - got} 种，解锁称号「{level.next.title}」 : '已集齐天空所有的云，了不起的云间隐者。'}

{/* 最近收集 */}

最近收集

{recent.length === 0 && (

还没有收集到云，去拍下第一朵吧。

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

); } // ── 云图鉴 ────────────────────────────────────────────── function GalleryScreen({ state, onOpenCloud }) { const [cat, setCat] = React.useState('all'); const total = window.CY_CLOUDS.length, got = state.collected.length; const cats = window.CY_CATEGORIES; const shown = cats.filter(c => cat === 'all' || c.id === cat); return (

云图鉴

{got} / {total}

{/* 分类筛选 */}

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

{shown.map(c => { const list = window.CY_CLOUDS.filter(x => x.cat === c.id); const gotN = list.filter(x => state.collected.includes(x.id)).length; return (

{c.name} {c.sub} {gotN}/{list.length}

{c.hint}

{list.map(cl => { const locked = !state.collected.includes(cl.id); return !locked && onOpenCloud(cl.id)}/>; })}

); })}

); } // ── 我的 ──────────────────────────────────────────────── function badges(state) { const has = id => state.collected.includes(id); const cat = id => window.CY_CLOUDS.filter(c => c.cat === id); const allCat = id => cat(id).every(c => has(c.id)); const anyRare = window.CY_CLOUDS.some(c => c.rarity === 'rare' && has(c.id)); return [ { id:'first', name:'拾云之始', desc:'收集第一朵云', on: state.collected.length >= 1, tone:'white', shape:'puff' }, { id:'storm', name:'风暴追逐者', desc:'收集积雨云', on: has('cb'), tone:'storm', shape:'anvil' }, { id:'high', name:'高云收藏家', desc:'集齐所有高云', on: allCat('high'), tone:'ice', shape:'wisp' }, { id:'rare', name:'稀客来访', desc:'收集任意稀有云', on: anyRare, tone:'pearl', shape:'iris' }, { id:'sunset',name:'追霞人', desc:'收集火烧云', on: has('sun'), tone:'sunset',shape:'sunset' }, { id:'all', name:'云间隐者', desc:'集齐全部 24 种云', on: state.collected.length >= window.CY_CLOUDS.length, tone:'night', shape:'wisp' }, ]; } function ProfileScreen({ state, level, onOpenCloud, onOpenJournal, onPickAvatar }) { const total = window.CY_CLOUDS.length, got = state.collected.length; const pct = level.next ? (got-level.min)/(level.next.min-level.min) : 1; const recent = state.collected.slice().reverse().slice(0,4).map(id => window.CY_CLOUDS.find(c=>c.id===id)).filter(Boolean); const bdg = badges(state); return (

{/* 身份卡 */}

{level.title}

{level.blurb}

{level.next ? <>距「{level.next.title}」还差 {level.next.min - got} 种 : '已抵达观云之路的尽头'}

{/* 数据 */}

{[ { icon:'book', n:`${got}/${total}`, l:'收集种类' }, { icon:'eye', n:state.captures, l:'拍云次数' }, { icon:'flame',n:state.streak, l:'连续观云' }, ].map((s,i) => (

{s.n}

{s.l}

))}

{/* 观云记录入口 */}

{/* 称号之路 */}

称号之路

{window.CY_LEVELS.map((lv, i) => { const reached = got >= lv.min, current = lv.title === level.title; return (

{reached ? : {i}}

{lv.title} {current && · 当前}

{lv.blurb}

{lv.min === 0 ? '起点' : `${lv.min} 种`}

); })}

{/* 徽章 */}

我的徽章

{bdg.map(b => (

{b.name}

{b.on ? '已获得' : b.desc}

))}

); } // ── 头像选择器 ────────────────────────────────────────── function AvatarPicker({ current = 0, onPick, onClose }) { return (

选择头像

挑一片云做你的样子

{window.CY_AVATARS.map(a => { const on = a.id === current; return ( ); })}

); } Object.assign(window, { HomeScreen, GalleryScreen, ProfileScreen, AvatarPicker });