模块: screens | Claude Code 源码分析

本章总览

src/screens/ 是 Claude Code 的「全屏 React 页面层」——仅 3 个源文件、约 5980 行，却承载三种截然不同的用户旅程：REPL 主会话、ResumeConversation 会话选择器、Doctor 安装诊断。本模块从 screens 视角讲解页面路由与 Screen 类型；REPL 内部的 query 循环、权限队列、Messages 传参等编排细节见 components/repl 子章节，避免重复。

总览图

渲染图表中…

学完本章你应该能

区分 screens/ 与 components/ 的职责：screens = 顶层路由页面，components = REPL 内可复用单元
理解 Screen 类型（prompt | transcript）仅存在于 REPL 内部，不是全局路由枚举
掌握 launchRepl / launchResumeChooser / Doctor 命令三条挂载路径
会从子章节进入 REPL 屏、ResumeConversation、Doctor 深度讲解

建议学习步骤

浏览下方 SourceTree，确认 screens 目录仅含 3 个 .tsx 文件
先读 repl-screen 子章节，建立 Screen 类型与 launcher 心智模型
再读 resume-conversation，理解 picker → REPL 的状态交接
最后读 doctor-screen，对照 /doctor 命令与 util.tsx 懒加载路径

模块在架构中的位置

screens 是 src/ 下的一级目录，共 3 个文件、5,980 行。建议结合「系统架构」章节理解它与其他层的调用关系。

概览

指标	数值
行数	5,980
文件	3

子章节导航

子章节	主题	核心路径	与 components 模块的分工
REPL 屏与 Screen 类型	`Screen` 枚举、prompt/transcript 切换、launcher 挂载	`screens/REPL.tsx`, `replLauncher.tsx`	components/repl 讲 REPL 内部编排；本章讲 screens 层路由与 Screen 类型
ResumeConversation	交互式会话恢复 picker	`screens/ResumeConversation.tsx`	picker 选中后渲染 `<REPL initialMessages={...} />`
Doctor 诊断屏	安装健康检查全屏 UI	`screens/Doctor.tsx`	由 `/doctor` 命令或 `claude doctor` 挂载

顶层路由简图（非 REPL 内部 Screen）：

main.tsx / dialogLaunchers.tsx
  ├─ launchRepl()           → <App><REPL /></App>
  ├─ launchResumeChooser()  → <App><ResumeConversation /></App>
  └─ /doctor 命令            → <Doctor onDone={...} />

ResumeConversation 选中会话后：
  ResumeConversation → <REPL initialMessages={resumeData.messages} ... />

注意：export type Screen = 'prompt' | 'transcript' 是 REPL 组件内部的视图模式，用于切换底部输入框 vs 全文 transcript 虚拟滚动，与上述三个顶层 screen 文件不是同一概念。

screens 与 components 的边界

Claude Code v2.1.88 反编译树中，screens/ 目录刻意保持精简：

文件	行数级	角色
`REPL.tsx`	~5000	主会话全屏页：挂载 Messages、PromptInput、权限 overlay
`ResumeConversation.tsx`	~400	会话列表 picker，成功后 delegate 给 REPL
`Doctor.tsx`	~575	一次性诊断报告，Enter 退出

components/ 则包含数百个叶子组件（messages/、permissions/、PromptInput/*）。REPL import 这些组件并传递状态；screens 文件不应再嵌套业务组件逻辑。

阅读策略：

改「用户从哪进入 REPL」→ screens + main.tsx + dialogLaunchers
改「REPL 内 prompt/transcript 切换」→ screens/REPL.tsx 的 screen state（repl-screen 章）
改「单条消息渲染」→ components/message-components

目录树仅 3 个文件。点击文件名跳转到对应子章节；REPL.tsx 内联源码锚点覆盖 Screen 类型、transcript 分支与 Props 导出。

本章小结与延伸

screens 是终端 UI 的顶层路由层。建议顺序：repl-screen → resume-conversation → doctor-screen。REPL 编排细节见 components 模块。 继续学习：

REPL 屏与 Screen 类型