组件体系

概述

Claude Code 的 UI 由 React 组件构成，通过 Ink 渲染到终端。组件体系分为应用组件、设计系统组件和权限组件三层。

组件层次结构

App.tsx — 根提供者

Source: src/components/App.tsx (56 行)

const App = ({ getFpsMetrics, stats, initialState, children }) => {
  return (
    <FpsMetricsProvider getFpsMetrics={getFpsMetrics}>
      <StatsProvider stats={stats}>
        <AppStateProvider initialState={initialState}>
          <MailboxProvider>
            {children}
          </MailboxProvider>
        </AppStateProvider>
      </StatsProvider>
    </FpsMetricsProvider>
  );
};

React Compiler 输出：const $ = _c(9) — 9 个记忆化缓存槽。

PromptInput 组件

Source: src/components/PromptInput/PromptInput.tsx

用户输入区域，包含多个子组件：

子组件	功能
TextInput / VimTextInput	文本编辑控件
PromptInputFooter	底部导航栏
PromptInputFooterLeftSide	Token 数、费用、头像
PromptInputFooterSuggestions	命令/文件补全建议
PromptInputModeIndicator	当前模式指示器
PromptInputQueuedCommands	多轮批处理队列

关键 Props

type PromptInputProps = {
  input: string
  onInputChange: (value: string) => void
  mode: PromptInputMode
  isLoading: boolean
  messages: Message[]
  commands: Command[]
  agents: AgentDefinition[]
  onSubmit: (input, helpers, speculation?) => void
  vimMode: VimMode
  // ...
}

权限组件

Source: src/components/permissions/

每种工具都有专用的权限请求组件：

permissions/
├── PermissionRequest.tsx      # 主权限对话框
├── PermissionPrompt.tsx       # 通用提示
├── FallbackPermissionRequest/ # 通用降级
├── BashPermissionRequest/     # Bash 命令
├── FileEditPermissionRequest/ # 文件编辑
├── FileWritePermissionRequest/ # 文件创建
├── WebFetchPermissionRequest/ # URL 抓取
├── AgentPermissionRequest/    # 子代理
└── rules/                     # 规则引擎

权限对话框显示工具调用的详细信息，并提供操作选项：

┌─ Bash ──────────────────────────────┐
│ git push origin main                │
│                                     │
│ [y] Allow  [n] Deny  [a] Always    │
└─────────────────────────────────────┘

设计系统组件

Source: src/components/design-system/

组件	功能
ThemedBox	带主题颜色的 Box
ThemedText	带主题颜色的 Text
ThemeProvider	主题上下文提供者
Dialog	模态对话框
FuzzyPicker	可搜索列表选择器
Tabs	标签导航
ProgressBar	进度条
LoadingState	加载旋转器
Divider	分隔线
KeyboardShortcutHint	快捷键提示

主题系统

// ThemeProvider 通过 Context 注入主题
<ThemeProvider>
  <ThemedBox borderColor="primary">
    <ThemedText color="accent">Hello</ThemedText>
  </ThemedBox>
</ThemeProvider>

React Compiler 模式

反编译的组件包含 React Compiler 的记忆化输出：

// 典型的 React Compiler 输出
const $ = _c(13);  // 13 个缓存槽

// 槽 0-2：记忆化 createStore 调用
if ($[0] !== initialState || $[1] !== onChangeAppState) {
  t1 = () => createStore(initialState, onChangeAppState);
  $[0] = initialState;
  $[1] = onChangeAppState;
  $[2] = t1;
} else {
  t1 = $[2];
}

这是 React 19 Compiler 的自动优化输出，等价于手写的 useMemo/useCallback，但由编译器自动管理依赖追踪。

下一步

• AppState 全局状态 — 状态管理架构