2025年Claude Code对话框弹窗UI样式排行榜

2026-06-06阅读 0热度 0

Claude

好的，作为一位在该领域深耕多年的技术专家，我现在来为你重新讲述这篇关于会话对话框的深度解析。 --- 会话过程中的所有对话框都由一个叫 `focusedInputDialog` 的组件统一控制。它会根据一个严格的优先级列表，逐个弹出。下面就是这份完整的列表，也是我们这次要聊的核心。 ## 一、权限类对话框先来看几个最常遇到的权限请求。 ### 1. 工具权限确认 (tool-permission) **什么时候会出现？** 当Bash、Write、Read这些工具需要你点头同意才行的时候。这个对话框的UI设计得很有讲究。它实际上是一个分发器，会根据工具类型调用不同的子组件： * **BashPermissionRequest**：会展示待执行的 shell 命令、工作目录，以及一个以 `$` 开头让你一目了然的命令预览。 * **FileEditPermissionRequest**：会展示文件路径和用颜色标记的差异（`+11` 表示新增，`-22` 表示删除）。 * **WebFetchPermissionRequest**：会展示要访问的目标 URL。它们有几个通用的结构特点：一个覆盖层阻止你与主界面交互，一个工具名称标签，一个操作描述或预览区域。底部则是一个下拉选择框，选项是 "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) │ └──────────────────────────────────────────────────────────────────┘ ``` 它被包裹在 `` 组件里。主机名用 `dim` 颜色显示。选项包括允许、允许并记住该域名、拒绝并引导用户给出不同的指令。对应的组件是 `SandboxPermissionRequest.tsx`。 ### 3. Worker Sandbox 权限 (worker-sandbox-permission) **什么时候会出现？** 当 Swarm worker 子袋里的任务需要访问网络，等待主进程审批时。它的UI结构跟 `sandbox-permission` 完全一样，唯一的区别在于响应方式：它是通过 `sendSandboxPermissionResponseViaMailbox` 协议跨进程回复给 worker 的。使用的组件同样是 `SandboxPermissionRequest.tsx`。 ### 4. Worker 等待中指示器 (非阻塞) **什么时候会出现？** 当子袋里（Sub-agent）正在等待主进程批准权限时，你会看到这个提示。它的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 │ └──────────────────────────────────────────────────────────────────┘ ``` 顶部有一个旋转动画（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 │ └──────────────────────────────────────────────────────────────────┘ ``` 它被包裹在 `` 中。界面包含一个主标题和一个副标题（请求信息），右侧可能有一个用 `dim` 颜色显示的工具输入摘要。选项列表通过一个 `