终端 UI 架构
Claude Code 使用 自研 Ink(React Reconciler + Yoga 布局)在终端渲染复杂界面:流式输出、diff、输入框、设置页、Vim 模式。
1. Ink 核心
| 能力 | 说明 |
|---|---|
| 组件树 | 与 React 一致,hooks 可用 |
| 布局 | Yoga flex,非纯逐行 print |
| 渲染 | 双缓冲 + 差分,目标 ~60fps |
| 输入 | 键盘、鼠标(终端支持时) |
2. 组件体系
components/ 体量最大:消息列表、工具卡片、权限弹窗、进度条等。REPL 为根容器。
3. PromptInput
多行输入、历史、@ 文件引用、粘贴大图策略;与 Vim 模式互斥或协作(见 12 专题 16)。
4. StructuredDiff
工具改文件后在终端渲染 结构化 diff,非裸 unified diff 字符串。
5. 快捷键与屏幕
- 全局快捷键注册表(可配置)。
- Screen 栈:主对话 / 设置 / 帮助 等全屏切换。
6. 总结
UI 层只 消费 query 事件流;不在组件内直接 callModel。性能问题查差分渲染与消息列表虚拟化。