跳到主要内容

UI 组件库

Claude Code 拥有 144 个 React 组件（389 文件），构成了终端 UI 的完整组件体系。

组件分类​

消息组件​

处理对话中各种消息的渲染：

组件功能
Message消息容器，区分用户/助手消息
MessageContent消息内容渲染（文本、代码、列表等）
ToolCallMessage工具调用消息
SystemMessage系统消息
ErrorMessage错误消息

工具展示组件​

展示工具调用的过程和结果：

组件功能
ToolCall工具调用展示容器
BashToolViewShell 命令执行过程
FileReadView文件读取结果
FileEditView文件编辑差异
SearchResultView搜索结果展示
AgentView子 Agent 运行状态

输入组件​

处理用户输入：

组件功能
TextInput文本输入框
PermissionPrompt权限确认提示
Autocomplete命令自动补全
VoiceInput语音输入指示器

布局组件​

页面布局和结构：

组件功能
StatusBar底部状态栏
Spinner加载动画
ProgressBar进度条
Divider分隔线
ScrollArea滚动区域

内容渲染组件​

Rich Content 渲染：

组件功能
CodeBlock语法高亮代码块
Diff代码差异对比
MarkdownMarkdown 渲染
Table表格渲染
List列表渲染

React Hooks (104 个)​

状态管理 Hooks​

useMessages()       // 管理消息列表
useTools()          // 管理工具状态
usePermission()     // 管理权限状态
useTheme()          // 主题切换

交互 Hooks​

useKeyboard()       // 键盘输入处理
useSuggestions()    // 命令建议
useAutocomplete()   // 自动补全
useFocus()          // 焦点管理

数据 Hooks​

useConfig()         // 配置数据
useHistory()        // 历史记录
useCost()           // 成本数据
useSession()        // 会话状态

组件通信模式​

App (根组件)
├── StatusBar           ← useSession, useCost
├── MessageList         ← useMessages
│   ├── Message
│   │   ├── MessageContent
│   │   └── ToolCallMessage
│   │       └── ToolView (动态选择)
│   └── ...
├── InputArea           ← useKeyboard
│   ├── TextInput
│   └── Autocomplete    ← useSuggestions
└── PermissionModal     ← usePermission

组件间通过 React Context 和 Hooks 共享状态，遵循 React 的单向数据流原则。