// MiniPhone screens — real photo wallpaper, full iOS status bar, lock/home with dock. const APP_BG = 'linear-gradient(135deg, #1A75E0 0%, #0858C0 100%)'; const WALLPAPER = 'assets/wallpaper.jpg'; // ─── iOS status bar ───────────────────────────────────────────────── function StatusBar({ tint = '#fff' }) { const [now, setNow] = React.useState(new Date()); React.useEffect(() => { const id = setInterval(() => setNow(new Date()), 30000); return () => clearInterval(id); }, []); const h = now.getHours().toString().padStart(2, '0'); const m = now.getMinutes().toString().padStart(2, '0'); return (
{/* Time */}
{h}:{m}
{/* Dynamic Island */}
{/* Right: signal + wifi + battery */}
{/* signal bars */} {/* wifi */} {/* battery */}
); } function HomeIndicator({ tint = '#fff' }) { return (
); } function Wallpaper() { return ( <> {/* darken so white text reads cleanly on any wallpaper */}
); } // ─── Lock screen ───────────────────────────────────────────────────── function LockScreen({ onUnlock }) { const [now, setNow] = React.useState(new Date()); React.useEffect(() => { const id = setInterval(() => setNow(new Date()), 30000); return () => clearInterval(id); }, []); const h = now.getHours().toString().padStart(2, '0'); const m = now.getMinutes().toString().padStart(2, '0'); const weekdays = ['周日','周一','周二','周三','周四','周五','周六']; const dateStr = `${weekdays[now.getDay()]}, ${now.getMonth()+1}月${now.getDate()}日`; return (
{/* Lock icon */}
{/* Date + time */}
{dateStr}
{h}:{m}
点击屏幕解锁
{/* Flashlight + Camera */}
); } function QuickActionBtn({ children }) { return (
{children}
); } // ─── Home screen ────────────────────────────────────────────────────── function HomeScreen({ onAppLaunch }) { // onAppLaunch(target?) — target='mirrorAnswer' for 镜像回答, default 'feed' (知乎) return (
知} />
); } function AppIcon({ label, background, glyph, onClick }) { return (
{glyph}
{label}
); } function DockIcon({ kind }) { const map = { phone: { bg: 'linear-gradient(180deg, #4FE36E 0%, #1FA94D 100%)', svg: , }, messages: { bg: 'linear-gradient(180deg, #5BDF55 0%, #1AA84A 100%)', svg: , }, safari: { bg: 'radial-gradient(circle, #fff 0%, #fff 40%, #C8D4E2 100%)', svg: , }, music: { bg: 'linear-gradient(180deg, #FF7AAC 0%, #FF2856 100%)', svg: , }, }; const it = map[kind]; return (
{it.svg}
); } // ─── Phones ────────────────────────────────────────────────────────── function LeftPhone({ powered, onScreenChange, onMirrorAnswersReady, onLike, onQueryChange, onAskPublish, newRealAnswer, einsteinAnswer, leftBanner, onBannerDismiss, onSynthesisVisibilityChange }) { const [screen, setScreen] = React.useState('lock'); const [qid, setQid] = React.useState('q_w07'); const [authorId, setAuthorId] = React.useState(null); const [mirrorOn, setMirrorOn] = React.useState(false); const [askDraft, setAskDraft] = React.useState({ title: '', body: '', topics: [] }); const [showToast, setShowToast] = React.useState(false); const [mirrorQuery, setMirrorQuery] = React.useState(''); // QuestionCreatedPage 的"是否展开镜像 panel" 状态 — 提升到 LeftPhone, 这样 // 用户从 mirror 跳到问题详情再返回时, panel 保持展开 (跨屏 mount/unmount 也保留). const [mirrorPanelOpen, setMirrorPanelOpen] = React.useState(false); // 镜像回答的"已跑完结果 + 滚动位置 + tab" 缓存. 同样提升到 LeftPhone, // 用户跳到问题详情再返回时不重跑 pipeline, 也回到上次的滚动位置. // shape: { query, scenario, thoughts, activeTab, scrollTop } | null const [mirrorCache, setMirrorCache] = React.useState(null); // 记录用户进入 'question' 屏前是从哪儿来的 — 返回时回到原处. const [questionFrom, setQuestionFrom] = React.useState('feed'); // 同上, 记录用户进入 'authorProfile' 屏前是从哪儿来的 — 这样从镜像答案点头像跳过去后, // 返回时能回到 question-created (而不是默认 'question'). const [authorFrom, setAuthorFrom] = React.useState('question'); React.useEffect(() => { if (!powered) setScreen('lock'); }, [powered]); // tour 用 — 每次屏跳转后向外广播一下 React.useEffect(() => { if (onScreenChange) onScreenChange(screen); }, [screen, onScreenChange]); // 把当前 askDraft.title 向上广播 (用做 tour 后期 LLM 调用上下文) React.useEffect(() => { if (onQueryChange && askDraft.title) onQueryChange(askDraft.title); }, [askDraft.title, onQueryChange]); // 镜像 pipeline 跑完 → 把 { count, outOfScope } 报给父级, 由父级决定弹主线 P4 // ("点赞") 还是离题 P4_OFFTRACK ("数据库没这个, 看看推给了谁"). React.useEffect(() => { if (!onMirrorAnswersReady) return; const scenario = mirrorCache && mirrorCache.scenario; if (!scenario) return; const count = Array.isArray(scenario.qualifying) ? scenario.qualifying.length : 0; onMirrorAnswersReady({ count, outOfScope: !!scenario.outOfScope }); }, [mirrorCache, onMirrorAnswersReady]); if (!powered) return null; return ( <> {/* Splash appears AFTER tapping the 知乎 app icon, before the feed. 3-second countdown auto-advances to feed; tap to skip. */} {screen === 'splash' && setScreen('feed')}/>} {screen === 'lock' && setScreen('home')}/>} {screen === 'home' && setScreen('splash')}/>} {screen === 'mirrorAnswer' && setScreen('question-created')}/>} {/* "首页" 按钮在首页内点击应当无效(留在首页), 而不是回到 iOS 桌面 */} {screen === 'feed' && {/* already on feed — noop */}} onSearchTap={() => setScreen('search')} onCardTap={(id) => { setQid(id || 'q617301106'); setQuestionFrom('feed'); setScreen('question'); }} onDirectTap={() => setScreen('direct')} onMessageTap={() => setScreen('messages')} onProfileTap={() => setScreen('profile')} onPlusTap={() => setScreen('compose')}/>} {screen === 'compose' && setScreen('feed')} onAsk={() => setScreen('ask')}/>} {screen === 'ask' && setScreen('compose')} onPublish={async (t, b, topics) => { setAskDraft({ title: t, body: b, topics: topics || [] }); setShowToast(true); // 改成 await: 等 quickIsInScopeCheck 完成再切屏, 避免 race condition // (之前 1500ms 固定超时 + fire-and-forget, LLM 慢的时候 P3_OFFTRACK 来不及生效). // handleAskPublish 内部已经有 3s 超时兜底, 不会无限等. const start = Date.now(); try { if (onAskPublish) await onAskPublish(t); } catch {} // 保底 700ms toast 显示时间, 太快显得轻飘 const elapsed = Date.now() - start; if (elapsed < 700) await new Promise(r => setTimeout(r, 700 - elapsed)); setShowToast(false); setScreen('question-created'); }}/>} {screen === 'question-created' && { // 完全退出 ask 流程时清空缓存 (这是新一次提问) setMirrorPanelOpen(false); setMirrorCache(null); setScreen('feed'); }} onMirrorAnswer={(q) => { setMirrorQuery(q || askDraft.title || ''); setScreen('mirrorAnswer'); }} onSourceTap={(sourceQid) => { setQid(sourceQid); setQuestionFrom('question-created'); setScreen('question'); // 注意: 不 reset mirrorPanelOpen 也不清 mirrorCache, 返回时 panel 还展开, 结果还在 }} onAuthorTap={(authorIdFromMirror) => { setAuthorId(authorIdFromMirror); setAuthorFrom('question-created'); // 返回时回到镜像答案 setScreen('authorProfile'); }}/>} {showToast && } {screen === 'profile' && setScreen('compose')} onHomeTap={() => setScreen('feed')} onDirectTap={() => setScreen('direct')} onMessageTap={() => setScreen('messages')} onSettingsTap={() => setScreen('settings')}/>} {screen === 'settings' && setScreen('profile')} mirrorOn={mirrorOn} setMirrorOn={setMirrorOn}/>} {screen === 'search' && setScreen('feed')}/>} {screen === 'question' && setScreen(questionFrom || 'feed')} onAuthorTap={(id) => { setAuthorId(id); setAuthorFrom('question'); setScreen('authorProfile'); }}/>} {screen === 'authorProfile' && setScreen(authorFrom || 'question')} onQuestionTap={(targetQid) => { setQid(targetQid); setQuestionFrom('authorProfile'); setScreen('question'); }}/>} {screen === 'direct' && setScreen('feed')} onPlusTap={() => setScreen('compose')} onMessageTap={() => setScreen('messages')} onProfileTap={() => setScreen('profile')}/>} {screen === 'messages' && setScreen('feed')} onPlusTap={() => setScreen('compose')} onDirectTap={() => setScreen('direct')} onProfileTap={() => setScreen('profile')} onSubPage={(id) => setScreen('msg-' + id)}/>} {screen.startsWith('msg-') && setScreen('messages')}/>} ); } // RightPhone — tour 阶段 driven 渲染. // stage='dark' → 不渲染 (黑屏) // stage='lit' → LockScreen, 自动 unlock // stage='home' → 主屏 (知乎 app 高亮 + 自动启动) // stage='app-loading' → 知乎 splash // stage='messages' → 消息列表 (主线: "+1 通知"; 离题: "镜像邀请通知") // stage='plus-one' → 主线: 消息详情 "+1" + "现在去更新" 按钮 // stage='invite-push' → 离题: 推送通知卡, 无按钮, 自动进 typing // stage='typing' → 全屏 "正在打字中…" pixel 风格 // mode='liked' (主线) | 'invited' (离题). 决定 messages/详情卡的内容. function RightPhone({ powered, stage, mode = 'liked', likedAuthor, onUpdateAnswerClicked }) { if (!powered) return null; return ( <> {stage === 'lit' && {}}/>} {stage === 'home' && {}}/>} {stage === 'app-loading' && {}}/>} {(stage === 'messages' || stage === 'plus-one' || stage === 'invite-push') && ( )} {stage === 'typing' && } {!stage && {}}/>} ); } // 右屏消息页 — mode='liked' 走 +1 主线, mode='invited' 走镜像邀请离题分支 function RightMessagesAutoFlow({ stage, mode, likedAuthor, onUpdateAnswerClicked }) { const leftUserName = (typeof CURRENT_USER !== 'undefined' && CURRENT_USER.name) || '用户'; const isOffTrack = mode === 'invited'; return (
消息
99+
{stage === 'messages' ? ( isOffTrack ? (
📡
镜像系统召集
有一个边界外的问题, 只推给了你
NEW
) : (
△
赞同 +1
{leftUserName} 赞同了你的镜像回答
+1
) ) : stage === 'invite-push' ? ( ) : ( )}
); } // 离题分支右屏: "镜像系统给你推送了一个边界外的问题" 详情卡, 无按钮, // 父级 timeout 自动切到 typing. function RightInvitePushDetail() { return (
📡 知乎 · 镜像系统召集
镜像系统给你推送了一个问题
这是一道从来没有人答过的题, 有点超纲. 但只有像你这样的全能选手才接得住 — 要不要来露一手?
正在跳转回答页…
); } function RightPlusOneDetail({ leftUserName, onUpdateAnswerClicked }) { return (
知乎 · 镜像回答
{leftUserName} 给你的镜像回答点了赞
你过去关于该话题的一条长答, 在镜像回答里作为推荐内容展示给了新用户. 看起来这个话题还在被讨论.
现在去更新
); } function RightTypingOverlay() { const [dots, setDots] = React.useState(''); React.useEffect(() => { const t = setInterval(() => setDots(d => d.length >= 3 ? '' : d + '·'), 380); return () => clearInterval(t); }, []); return (
正在打字中
{dots || ' '}
); } Object.assign(window, { LeftPhone, RightPhone });