07 - components 模块源码分析

路径: src/components/ 根级文件数: 110+ 个 .tsx/.ts 文件子目录数: 31 个功能: React UI 组件库 — 终端界面的所有可视化组件

模块概述

components/ 是 Claude Code 中文件数量最多的模块。基于 Ink 框架，这些组件在终端中渲染富文本界面。

文件	说明
`AutoModeOptInDialog.tsx`	自动模式选择对话框
`BridgeDialog.tsx`	桥接对话框
`BypassPermissionsModeDialog.tsx`	权限绕过对话框
`CostThresholdDialog.tsx`	费用阈值对话框
`ExportDialog.tsx`	导出对话框
`GlobalSearchDialog.tsx`	全局搜索对话框
`HistorySearchDialog.tsx`	历史搜索对话框
`ModelPicker.tsx`	模型选择器
`ThemePicker.tsx`	主题选择器
`OutputStylePicker.tsx`	输出样式选择器

文件	说明
`App.tsx`	应用根组件
`FullscreenLayout.tsx`	全屏布局
`ScrollKeybindingHandler.tsx`	滚动快捷键处理
`TagTabs.tsx`	标签页
`SearchBox.tsx`	搜索框

文件	说明
`ToolUseLoader.tsx`	工具调用加载器
`FallbackToolUseErrorMessage.tsx`	工具错误回退消息
`FallbackToolUseRejectedMessage.tsx`	工具拒绝回退消息
`FileEditToolUpdatedMessage.tsx`	文件编辑更新消息

文件	说明
`TeleportProgress.tsx`	Teleport 进度
`TeleportError.tsx`	Teleport 错误
`RemoteCallout.tsx`	远程提示
`RemoteEnvironmentDialog.tsx`	远程环境对话框

最核心的交互组件目录：

文件	说明
`PromptInput.tsx`	主输入组件
`ShimmeredInput.tsx`	带闪烁效果的输入
`PromptInputFooter.tsx`	底部快捷键和状态
`PromptInputFooterLeftSide.tsx`	底部左侧
`PromptInputFooterSuggestions.tsx`	底部建议
`PromptInputHelpMenu.tsx`	帮助菜单
`PromptInputModeIndicator.tsx`	模式指示器
`PromptInputQueuedCommands.tsx`	排队命令
`PromptInputStashNotice.tsx`	Stash 通知
`VoiceIndicator.tsx`	语音指示器
`HistorySearchInput.tsx`	历史搜索输入
`IssueFlagBanner.tsx`	Issue 标记横幅
`Notifications.tsx`	通知
`SandboxPromptFooterHint.tsx`	沙箱提示
`inputModes.ts`	输入模式定义
`inputPaste.ts`	粘贴处理
`useMaybeTruncateInput.ts`	输入截断 Hook
`usePromptInputPlaceholder.ts`	占位符 Hook
`useShowFastIconHint.ts`	快速模式提示 Hook
`useSwarmBanner.ts`	Swarm 横幅 Hook
`utils.ts`	工具函数

子目录/文件	说明
`PermissionDialog.tsx`	基础权限对话框
`PermissionRequest.tsx`	权限请求组件
`PermissionPrompt.tsx`	权限提示
`PermissionRequestTitle.tsx`	请求标题
`PermissionExplanation.tsx`	权限解释
`PermissionRuleExplanation.tsx`	规则解释
`WorkerBadge.tsx`	Worker 标记
`BashPermissionRequest/`	Shell 命令审批
`FileEditPermissionRequest/`	文件编辑审批
`FileWritePermissionRequest/`	文件写入审批
`FilePermissionDialog/`	文件权限对话框
`WebFetchPermissionRequest/`	HTTP 请求审批
`AskUserQuestionPermissionRequest/`	用户提问审批
`EnterPlanModePermissionRequest/`	计划模式审批
`ExitPlanModePermissionRequest/`	退出计划审批
`ComputerUseApproval/`	计算机使用审批
`SandboxPermissionRequest.tsx`	沙箱权限
`SkillPermissionRequest/`	技能权限
ellPermissionRequest/`	PowerShell 权限
`NotebookEditPermissionRequest/`	Notebook 编辑权限
`SedEditPermissionRequest/`	Sed 编辑权限
`FilesystemPermissionRequest/`	文件系统权限
`rules/`	权限规则子目录

文件	说明
`UserPromptMessage.tsx`	用户输入消息
`UserTextMessage.tsx`	用户文本消息
`UserImageMessage.tsx`	用户图片消息
`UserBashInputMessage.tsx`	用户 Bash 输入
`UserBashOutputMessage.tsx`	用户 Bash 输出
`UserCommandMessage.tsx`	用户命令消息
`UserTeammateMessage.tsx`	用户队友消息
`UserChannelMessage.tsx`	用户频道消息
`AssistantTextMessage.tsx`	助手文本回复
`AssistantToolUseMessage.tsx`	助手工具调用
`AssistantThinkingMessage.tsx`	助手思考过程
`AssistantRedactedThinkingMessage.tsx`	助手编辑后思考
`AttachmentMessage.tsx`	附件消息
`SystemTextMessage.tsx`	系统文本消息
`SystemAPIErrorMessage.tsx`	API 错误消息
`RateLimitMessage.tsx`	速率限制消息
`CompactBoundaryMessage.tsx`	压缩边界消息
`HookProgressMessage.tsx`	钩子进度消息
`PlanApprovalMessage.tsx`	计划审批消息
`TaskAssignmentMessage.tsx`	任务分配消息
`ShutdownMessage.tsx`	关闭消息
`HighlightedThinkingText.tsx`	高亮思考文本
`GroupedToolUseContent.tsx`	分组工具调用内容
`CollapsedReadSeant.tsx`	折叠的读取/搜索内容
`AdvisorMessage.tsx`	顾问消息
`UserToolResultMessage/`	用户工具结果（子目录）

目录	说明
`agents/`	Agent 管理和创建向导
`teams/`	团队协作组件
`tasks/`	后台任务 UI
`mcp/`	MCP 服务器管理界面
`skills/`	技能相关组件
`memory/`	记忆管理组件
`sandbox/`	沙箱管理组件
`shell/`	Shell 相关组件
`hooks/`	组件级自定义 Hooks
`ui/`	通用 UI 工具组件
`design-system/`	设计系统（ThemedText、Dialog、Pane 等）
`w/`	向导流程组件
`grove/`	Grove 相关组件
`CustomSelect/`	自定义选择列表
`Settings/`	设置面板
`HelpV2/`	帮助界面 v2
`LogoV2/`	Logo 显示 v2
`Spinner/`	加载动画（子目录）
`StructuredDiff/`	结构化 diff（子目录）
`TrustDialog/`	项目信任对话框
`FeedbackSurvey/`	反馈调查
`Passes/`	通行证/推荐
`DesktopUpsell/`	桌面版推广
`ClaudeCodeHint/`	使用提示
`LspRecommendation/`	LSP 推荐
`HighlightedCode/`	代码高亮（子目录）
`ManagedSettingsSecurityDialog/`	托管设置安全对话框