Claude Code 对话框/弹窗 UI 样式汇总小结
发布时间：2026-06-04 10:48:30 作者：解决问题 
我要评论
我要评论本文主要介绍了Claude Code 对话框/弹窗 UI 样式汇总，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
会话过程中，所有对话框由 focusedInputDialog 控制，按优先级依次弹出。以下是完整列表。
一、权限类对话框
1. 工具权限确认 (tool-permission)
触发时机： 工具（Bash、Write、Read 等）需要用户批准时
UI 描述：
根据工具类型分发到不同的权限子组件：
- BashPermissionRequest — 显示待执行的 shell 命令、工作目录、以
$开头的命令预览 - FileEditPermissionRequest — 显示文件路径、diff 变更内容（
+11/-22颜色标记） - WebFetchPermissionRequest — 显示目标 URL
通用结构：
- 覆盖层（Overlay），阻止主交互
- 工具名称标签
- 操作描述/预览区域
- 底部分配
<Select>选项："Allow"、"Allow and don't ask again"、"Deny" - Escape 拒绝、Enter 确认
组件： PermissionRequest.tsx → 分发到 BashPermissionRequest / FileEditPermissionRequest 等
2. Sandbox 网络权限 (sandbox-permission)
触发时机： 工具（WebFetch 等）请求访问外部网络时
UI 描述：
┌──────────────────────────────────────────────────────────────────┐ │ Network request outside of sandbox │ │ │ │ Host: api.example.com │ (dim) │ │ │ Do you want to allow this connection? │ │ │ │ > Yes │ │ Yes, and don't ask again for api.example.com │ │ No, and tell Claude what to do differently (esc) │ └──────────────────────────────────────────────────────────────────┘
- 包裹在
<PermissionDialog>中 - 主机名以 dim 颜色显示
- 选项：Allow / Allow + 记住 / Deny + 引导
组件： SandboxPermissionRequest.tsx
3. Worker Sandbox 权限 (worker-sandbox-permission)
触发时机： Swarm worker 子代理请求网络访问，等待 leader 审批
UI 描述： 与 sandbox-permission 结构相同，但通过 mailbox 协议跨进程响应。选项通过 sendSandboxPermissionResponseViaMailbox 发送回 worker。
组件： SandboxPermissionRequest.tsx（同一组件）
4. Worker 等待中指示器 (非阻塞)
触发时机： Sub-agent 正在等待 leader 批准权限时显示
UI 描述：
┌──────────────────────────────────────────────────────────────────┐ │ ⠋ Waiting for team lead approval │ (warning, bold) │ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ │ │ Tool: WebFetchTool │ (dim) │ Action: Fetch https://api.example.com/data │ (dim) │ Permission request sent to team "my-team" leader │ └──────────────────────────────────────────────────────────────────┘
- 圆角边框 (
borderStyle="round",borderColor="warning") - 顶部 Spinner + 警告颜色粗体文字
- WorkerBadge（代理名称 + 颜色）
组件： WorkerPendingPermission.tsx
二、交互输入类对话框
5. Hook Prompt 对话框 (prompt)
触发时机： Hook 返回 type: "prompt" 需要用户选择
UI 描述：
┌──────────────────────────────────────────────────────────────────┐ │ [title] [info] │ │ │ │ Request message here... │ │ [tool summary] │ (dim) │ │ │ > Option 1 │ │ Option 2 │ │ Option 3 │ └──────────────────────────────────────────────────────────────────┘
- 包裹在
<PermissionDialog>中 - 标题 + 副标题（请求消息）
- 右侧可选的 toolInputSummary（dim 颜色）
<Select>选项列表，映射自 hook 返回的request.options- 支持
app:interrupt快捷键中止
组件： PromptDialog.tsx
6. MCP Elicitation 对话框 (elicitation)
触发时机： MCP 服务器请求用户输入（表单、URL 确认、等待完成）
UI 描述： 三种模式：
表单模式：
┌──────────────────────────────────────────────────────────────────┐ │ MCP server "serverName" requests your input │ │ │ │ ┌──────────────────────────────────────────────────────────┐ │ │ │ Text input field... │ │ │ └──────────────────────────────────────────────────────────┘ │ │ ○ Option A ○ Option B ○ Option C │ │ ☑ Checkbox option │ │ │ │ [Accept] [Decline] │ └──────────────────────────────────────────────────────────────────┘
- 动态表单字段：文本输入、单选/多选枚举、布尔值、日期/时间选择器
- 验证错误信息
- 内联快捷键提示
等待模式： 域名 + Spinner + "Reload / Open in Browser / Close"
URL 确认： "MCP server wants to open a URL" + Accept/Decline
组件： ElicitationDialog.tsx（~1169 行，大型表单引擎）
三、会话管理类对话框
7. 成本阈值对话框 (cost)
触发时机： 当前会话 API 费用达到阈值时
UI 描述：
┌──────────────────────────────────────────────────────────────────┐ │ You've spent $5 on the Anthropic API this session. │ │ │ │ Learn more about how to monitor your spending: │ │ code.claude.com/docs/en/costs │ (link) │ │ │ > Got it, thanks! │ └──────────────────────────────────────────────────────────────────┘
- 包裹在
<Dialog>中 - 显示当前会话消费金额
- 提供费用监控文档链接
- 单一确认选项，确认后设置
hasAcknowledgedCostThreshold: true
组件： CostThresholdDialog.tsx
8. 闲置返回对话框 (idle-return)
触发时机： 用户长时间离开后返回时
UI 描述：
┌──────────────────────────────────────────────────────────────────┐ │ You've been away 25m and this conversation is 45K tokens. │ │ │ │ If this is a new task, clearing context will save usage and │ │ be faster. │ │ │ │ > Continue this conversation │ │ Send message as a new conversation │ │ Don't ask me again │ └──────────────────────────────────────────────────────────────────┘
- 包裹在
<Dialog>中 - 显示离开时长 + 当前 token 数
- 三选一：继续 / 清空后发送 / 不再提示
组件： IdleReturnDialog.tsx
四、新功能引导类对话框
9. IDE 集成引导 (ide-onboarding)
触发时机： 首次检测到 IDE 扩展时
UI 描述：
┌──────────────────────────────────────────────────────────────────┐ │ ✻ Welcome to Claude Code for Visual Studio Code │ │ │ │ installed extension v1.2.3 │ (dim) │ │ │ • Claude has context about your open files and selected lines │ │ • View code diffs in your IDE +11 / -22 │ (diff colors) │ • Cmd+Esc to quickly launch │ │ • Cmd+Option+K to send selection │ │ │ │ Press Enter to continue │ └──────────────────────────────────────────────────────────────────┘
<Dialog>颜色 theme"ide"- 项目符号列表介绍 IDE 集成功能
- 差异标记颜色展示 diff 指示
- Enter/Escape 关闭
组件： IdeOnboardingDialog.tsx
10. Effort 选择引导 (effort-callout)
触发时机： 首次使用 Opus 模型时（新功能引导）
UI 描述：
┌──────────────────────────────────────────────────────────────────┐ │ Choose your effort level │ │ │ │ Description text explaining what effort level means... │ │ │ │ low · medium · high │ (effort indicators) │ │ │ > ● Medium (recommended) │ │ ●●● High │ │ ○ Low │ └──────────────────────────────────────────────────────────────────┘
- 包裹在
<PermissionDialog>中 - 30 秒自动消失计时器
- 三级 effort 选择
组件： EffortCallout.tsx
11. 远程控制引导 (remote-callout)
触发时机： 首次启用 Bridge/远程控制时
UI 描述：
┌──────────────────────────────────────────────────────────────────┐ │ Remote Control │ │ │ │ Description text explaining how remote control works... │ │ Your CLI session can be accessed from the web or other apps. │ │ │ │ > Enable Remote Control for this session │ │ Never mind │ └──────────────────────────────────────────────────────────────────┘
- 包裹在
<PermissionDialog>中 - 仅显示一次（选择自动持久化）
组件： RemoteCallout.tsx
12. Ultraplan 选择对话框 (ultraplan-choice)
触发时机： 生成执行计划后，询问用户是否继续
UI 描述： 显示远程执行计划内容供用户审查/批准。内置独立滚动（不与主 ScrollBox 联动）。接收 plan、sessionId、taskId 等回调。
组件： UltraplanChoiceDialog（非独立组件文件，REPL.tsx 内联使用）
13. Ultraplan 启动对话框 (ultraplan-launch)
触发时机： 用户确认后，启动 Ultraplan 远程执行前
UI 描述： 触发 ultraplan 命令，回声显示公告行，传递断开连接桥接选项，远程会话就绪时附加状态更新。
组件： UltraplanLaunchDialog（非独立组件文件，REPL.tsx 内联使用）
五、推荐/推广类对话框
14. LSP 插件推荐 (lsp-recommendation)
触发时机： 检测到未安装 LSP 的文件类型时
UI 描述：
┌──────────────────────────────────────────────────────────────────┐ │ LSP Plugin Recommendation │ │ │ │ LSP provides code intelligence like go-to-definition and error │ │ checking. │ │ │ │ Plugin: @anthropic/lsp-rust │ (dim) │ Triggered by: .rs files │ (dim) │ │ │ Would you like to install this LSP plugin? │ │ │ │ > Yes, install @anthropic/lsp-rust │ (bold) │ No, not now │ │ Never for @anthropic/lsp-rust │ │ Disable all LSP recommendations │ └──────────────────────────────────────────────────────────────────┘
- 包裹在
<PermissionDialog>中 - 30 秒自动消失（视为拒绝）
组件： LspRecommendationMenu.tsx
15. 插件提示 (plugin-hint)
触发时机： 外部命令建议安装插件时
UI 描述：
┌──────────────────────────────────────────────────────────────────┐ │ Plugin Recommendation │ │ │ │ The "my-command" command suggests installing a plugin. │ │ │ │ Plugin: my-plugin │ (dim) │ Marketplace: official │ (dim) │ │ │ Would you like to install it? │ │ │ │ > Yes, install my-plugin │ │ No │ │ No, and don't show plugin installation hints again │ └──────────────────────────────────────────────────────────────────┘
- 包裹在
<PermissionDialog>中 - 30 秒自动消失
组件： PluginHintMenu.tsx
16. Desktop 升级引导 (desktop-upsell)
触发时机： 最多 3 次启动时提示升级到桌面版
UI 描述：
┌──────────────────────────────────────────────────────────────────┐ │ Try Claude Code Desktop │ │ │ │ Same Claude Code with visual diffs, live app preview, parallel │ │ sessions, and more. │ │ │ │ > Open in Claude Code Desktop │ │ Not now │ │ Don't ask again │ └──────────────────────────────────────────────────────────────────┘
- 包裹在
<PermissionDialog>中 - 选择 "Open in Desktop" 后切换到
<DesktopHandoff>子组件
组件： DesktopUpsellStartup.tsx
六、消息操作类
17. 消息选择器 / Rewind (message-selector)
触发时机： 用户按 Ctrl+O 或选择回退消息时
UI 描述：
─── Rewind ────────────────────────────────────────────────────────── (color: suggestion)
> #1 "Add error handling to the login flow" +5 / -2 (file changes)
#2 "Fix the bug in user authentication" +3 / -1
#3 "Refactor the database schema" (no changes)
(code rollback warning)
Restore code and conversation
Restore conversation
Summarize from here: [____________________________]
Never mind
──────────────────────────────────────────────────────────────────────
- 非对话框包装器，内联选择器
- 标题 "Rewind"（
color="suggestion"） - 每个用户消息显示文件变更统计
- 代码回滚警告
- 底部恢复/摘要选项
- 确认模式显示差异统计
组件： MessageSelector.tsx
七、Ant 内部版（外部构建不可见）
18. 模型切换引导 (model-switch)
条件编译： "external" === 'ant' 时存在
- 提示用户切换模型
onDone(selection, modelAlias?)回调可用于切换mainLoopModel
组件： AntModelSwitchCallout
19. Undercover 模式引导 (undercover-callout)
条件编译： "external" === 'ant' 时存在
- 解释 Undercover 自动启用
- 简单解除回调
组件： UndercoverAutoCallout
优先级总结
对话框按以下优先级弹出（高→低）：
| 优先级 | 对话框 | 条件 |
|---|---|---|
| 🔴 最高 | message-selector | 用户主动打开 |
| 1 | sandbox-permission | 网络权限请求 |
| 2 | tool-permission | 工具权限请求 |
| 3 | prompt | Hook prompt 交互 |
| 4 | worker-sandbox-permission | Worker 网络权限 |
| 5 | elicitation | MCP 表单输入 |
| 6 | cost | 费用阈值提示 |
| 7 | idle-return | 闲置返回 |
| 8 | ultraplan-choice | Ultraplan 计划选择 |
| 9 | ultraplan-launch | Ultraplan 启动 |
| 10 | ide-onboarding | IDE 引导 |
| 11 | model-switch | 模型切换（ant-only） |
| 12 | undercover-callout | Undercover 引导（ant-only） |
| 13 | effort-callout | Effort 选择引导 |
| 14 | remote-callout | 远程控制引导 |
| 15 | lsp-recommendation | LSP 插件推荐 |
| 16 | plugin-hint | 插件建议 |
| 🔵 最低 | desktop-upsell | 桌面版推广 |
用户输入时高优先级对话框会暂缓弹出（hasSuppressedDialogs），输入完成后恢复。
到此这篇关于Claude Code 对话框/弹窗 UI 样式汇总小结的文章就介绍到这了,更多相关Claude Code 对话框/弹窗 内容请搜索脚本之家以前的文章或继续浏览下面的相关文章，希望大家以后多多支持脚本之家！
相关文章
本文总结 Claude Code / 本仓库恢复版 claude-code 中 hooks 的类型、触发时机、典型使用场景、配置方式与注意事项, 下面就来详细的介绍一下，感兴趣的可以了解2026-06-04
Hooks 是用户自定义的脚本/命令，在 Claude Code 的特定生命周期节点自动执行,支持 4 种类型、4 个生命周期事件,下面小编就和大家详细介绍一下Hook这四种类型的具体使用吧2026-06-04
Claude Code 作为 Anthropic 推出的 AI 编程助手，在提升开发效率的同时，也会在安装、配置、使用等多个环节遇到各类问题,本文整理了用户在使用过程中最常碰到的问题，按类2026-06-04
这篇文章记录如何在 Windows 上安装 Claude Code，并配置 MiniMax 的 Claude Code 兼容接口,以后自己重装，或者委托具备本机终端与文件操作能力的 AI Agent 代为部署时，可2026-06-03
边缘检测是计算机视觉领域最基础也最实用的技术之一,从人脸识别、自动驾驶的车道线检测，到工业产品的缺陷识别，边缘检测都是核心预处理环节,本文将分享我使用 Python + Op2026-06-03
其实 Claude Code 内置了很多斜杠命令，输入/就能看到完整的命令列表,这些命令覆盖了会话管理、上下文控制、并行协作等方方面面，用好了能省很多事，下面小编就和大家详细2026-06-03
Claudede Hooks实战指南,涵盖三级拦截体系,两脚本开箱即用,覆盖致命、高风险、警告三级操作,通过配置settings.json灵活定制拦截策略,支持PowerShell与原生Toast通知,适用于2026-06-03
Claude Code接入DeepSeek V4的两种方法完整配置指南(2026最新)
Claude Code 是目前最好用的 AI 编程 Agent，但它默认只用 Anthropic 的模型，价格不便宜，本文主要介绍了Claude Code接入DeepSeek V4的两种方法，有需要的小伙伴可以了解2026-06-03
Claude Code 是目前最强大的命令行 AI 编程助手之一，但从安装、配置到日常使用，尤其是在接入国内大模型 API 时，开发者总会遇到形形色色的报错,本文以阶段为线索，系统梳2026-06-02- Claude Code 每次调用工具、等待输入、结束会话，都会触发对应的Hook生命周期事件,Hook 脚本除了做判断和记录，还可以把事件转发到本地 socket，让一个常驻进程处理所有状2026-06-02
最新评论