Claude Code 對話框/彈窗 UI 樣式匯總小結(jié)
發(fā)布時間：2026-06-04 10:48:30 作者：解決問題 
我要評論
我要評論本文主要介紹了Claude Code 對話框/彈窗 UI 樣式匯總，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
會話過程中，所有對話框由 focusedInputDialog 控制，按優(yōu)先級依次彈出。以下是完整列表。
一、權(quán)限類對話框
1. 工具權(quán)限確認 (tool-permission)
觸發(fā)時機： 工具（Bash、Write、Read 等）需要用戶批準時
UI 描述：
根據(jù)工具類型分發(fā)到不同的權(quán)限子組件：
- BashPermissionRequest — 顯示待執(zhí)行的 shell 命令、工作目錄、以
$開頭的命令預(yù)覽 - FileEditPermissionRequest — 顯示文件路徑、diff 變更內(nèi)容（
+11/-22顏色標記） - WebFetchPermissionRequest — 顯示目標 URL
通用結(jié)構(gòu)：
- 覆蓋層（Overlay），阻止主交互
- 工具名稱標簽
- 操作描述/預(yù)覽區(qū)域
- 底部分配
<Select>選項："Allow"、"Allow and don't ask again"、"Deny" - Escape 拒絕、Enter 確認
組件： PermissionRequest.tsx → 分發(fā)到 BashPermissionRequest / FileEditPermissionRequest 等
2. Sandbox 網(wǎng)絡(luò)權(quán)限 (sandbox-permission)
觸發(fā)時機： 工具（WebFetch 等）請求訪問外部網(wǎng)絡(luò)時
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 + 引導(dǎo)
組件： SandboxPermissionRequest.tsx
3. Worker Sandbox 權(quán)限 (worker-sandbox-permission)
觸發(fā)時機： Swarm worker 子代理請求網(wǎng)絡(luò)訪問，等待 leader 審批
UI 描述： 與 sandbox-permission 結(jié)構(gòu)相同，但通過 mailbox 協(xié)議跨進程響應(yīng)。選項通過 sendSandboxPermissionResponseViaMailbox 發(fā)送回 worker。
組件： SandboxPermissionRequest.tsx（同一組件）
4. Worker 等待中指示器 (非阻塞)
觸發(fā)時機： Sub-agent 正在等待 leader 批準權(quán)限時顯示
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)
觸發(fā)時機： Hook 返回 type: "prompt" 需要用戶選擇
UI 描述：
┌──────────────────────────────────────────────────────────────────┐ │ [title] [info] │ │ │ │ Request message here... │ │ [tool summary] │ (dim) │ │ │ > Option 1 │ │ Option 2 │ │ Option 3 │ └──────────────────────────────────────────────────────────────────┘
- 包裹在
<PermissionDialog>中 - 標題 + 副標題（請求消息）
- 右側(cè)可選的 toolInputSummary（dim 顏色）
<Select>選項列表，映射自 hook 返回的request.options- 支持
app:interrupt快捷鍵中止
組件： PromptDialog.tsx
6. MCP Elicitation 對話框 (elicitation)
觸發(fā)時機： MCP 服務(wù)器請求用戶輸入（表單、URL 確認、等待完成）
UI 描述： 三種模式：
表單模式：
┌──────────────────────────────────────────────────────────────────┐ │ MCP server "serverName" requests your input │ │ │ │ ┌──────────────────────────────────────────────────────────┐ │ │ │ Text input field... │ │ │ └──────────────────────────────────────────────────────────┘ │ │ ○ Option A ○ Option B ○ Option C │ │ ? Checkbox option │ │ │ │ [Accept] [Decline] │ └──────────────────────────────────────────────────────────────────┘
- 動態(tài)表單字段：文本輸入、單選/多選枚舉、布爾值、日期/時間選擇器
- 驗證錯誤信息
- 內(nèi)聯(lián)快捷鍵提示
等待模式： 域名 + Spinner + "Reload / Open in Browser / Close"
URL 確認： "MCP server wants to open a URL" + Accept/Decline
組件： ElicitationDialog.tsx（~1169 行，大型表單引擎）
三、會話管理類對話框
7. 成本閾值對話框 (cost)
觸發(fā)時機： 當(dāng)前會話 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>中 - 顯示當(dāng)前會話消費金額
- 提供費用監(jiān)控文檔鏈接
- 單一確認選項，確認后設(shè)置
hasAcknowledgedCostThreshold: true
組件： CostThresholdDialog.tsx
8. 閑置返回對話框 (idle-return)
觸發(fā)時機： 用戶長時間離開后返回時
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>中 - 顯示離開時長 + 當(dāng)前 token 數(shù)
- 三選一：繼續(xù) / 清空后發(fā)送 / 不再提示
組件： IdleReturnDialog.tsx
四、新功能引導(dǎo)類對話框
9. IDE 集成引導(dǎo) (ide-onboarding)
觸發(fā)時機： 首次檢測到 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 關(guān)閉
組件： IdeOnboardingDialog.tsx
10. Effort 選擇引導(dǎo) (effort-callout)
觸發(fā)時機： 首次使用 Opus 模型時（新功能引導(dǎo)）
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. 遠程控制引導(dǎo) (remote-callout)
觸發(fā)時機： 首次啟用 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)
觸發(fā)時機： 生成執(zhí)行計劃后，詢問用戶是否繼續(xù)
UI 描述： 顯示遠程執(zhí)行計劃內(nèi)容供用戶審查/批準。內(nèi)置獨立滾動（不與主 ScrollBox 聯(lián)動）。接收 plan、sessionId、taskId 等回調(diào)。
組件： UltraplanChoiceDialog（非獨立組件文件，REPL.tsx 內(nèi)聯(lián)使用）
13. Ultraplan 啟動對話框 (ultraplan-launch)
觸發(fā)時機： 用戶確認后，啟動 Ultraplan 遠程執(zhí)行前
UI 描述： 觸發(fā) ultraplan 命令，回聲顯示公告行，傳遞斷開連接橋接選項，遠程會話就緒時附加狀態(tài)更新。
組件： UltraplanLaunchDialog（非獨立組件文件，REPL.tsx 內(nèi)聯(lián)使用）
五、推薦/推廣類對話框
14. LSP 插件推薦 (lsp-recommendation)
觸發(fā)時機： 檢測到未安裝 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)
觸發(fā)時機： 外部命令建議安裝插件時
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 升級引導(dǎo) (desktop-upsell)
觸發(fā)時機： 最多 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)
觸發(fā)時機： 用戶按 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
──────────────────────────────────────────────────────────────────────
- 非對話框包裝器，內(nèi)聯(lián)選擇器
- 標題 "Rewind"（
color="suggestion"） - 每個用戶消息顯示文件變更統(tǒng)計
- 代碼回滾警告
- 底部恢復(fù)/摘要選項
- 確認模式顯示差異統(tǒng)計
組件： MessageSelector.tsx
七、Ant 內(nèi)部版（外部構(gòu)建不可見）
18. 模型切換引導(dǎo) (model-switch)
條件編譯： "external" === 'ant' 時存在
- 提示用戶切換模型
onDone(selection, modelAlias?)回調(diào)可用于切換mainLoopModel
組件： AntModelSwitchCallout
19. Undercover 模式引導(dǎo) (undercover-callout)
條件編譯： "external" === 'ant' 時存在
- 解釋 Undercover 自動啟用
- 簡單解除回調(diào)
組件： UndercoverAutoCallout
優(yōu)先級總結(jié)
對話框按以下優(yōu)先級彈出（高→低）：
| 優(yōu)先級 | 對話框 | 條件 |
|---|---|---|
| ?? 最高 | message-selector | 用戶主動打開 |
| 1 | sandbox-permission | 網(wǎng)絡(luò)權(quán)限請求 |
| 2 | tool-permission | 工具權(quán)限請求 |
| 3 | prompt | Hook prompt 交互 |
| 4 | worker-sandbox-permission | Worker 網(wǎng)絡(luò)權(quán)限 |
| 5 | elicitation | MCP 表單輸入 |
| 6 | cost | 費用閾值提示 |
| 7 | idle-return | 閑置返回 |
| 8 | ultraplan-choice | Ultraplan 計劃選擇 |
| 9 | ultraplan-launch | Ultraplan 啟動 |
| 10 | ide-onboarding | IDE 引導(dǎo) |
| 11 | model-switch | 模型切換（ant-only） |
| 12 | undercover-callout | Undercover 引導(dǎo)（ant-only） |
| 13 | effort-callout | Effort 選擇引導(dǎo) |
| 14 | remote-callout | 遠程控制引導(dǎo) |
| 15 | lsp-recommendation | LSP 插件推薦 |
| 16 | plugin-hint | 插件建議 |
| ?? 最低 | desktop-upsell | 桌面版推廣 |
用戶輸入時高優(yōu)先級對話框會暫緩彈出（hasSuppressedDialogs），輸入完成后恢復(fù)。
到此這篇關(guān)于Claude Code 對話框/彈窗 UI 樣式匯總小結(jié)的文章就介紹到這了,更多相關(guān)Claude Code 對話框/彈窗 內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持腳本之家！
相關(guān)文章
本文總結(jié) Claude Code / 本倉庫恢復(fù)版 claude-code 中 hooks 的類型、觸發(fā)時機、典型使用場景、配置方式與注意事項, 下面就來詳細的介紹一下，感興趣的可以了解2026-06-04
Hooks 是用戶自定義的腳本/命令，在 Claude Code 的特定生命周期節(jié)點自動執(zhí)行,支持 4 種類型、4 個生命周期事件,下面小編就和大家詳細介紹一下Hook這四種類型的具體使用吧2026-06-04
一文總結(jié)Claude Code開發(fā)中的常見問題與解決方案
Claude Code 作為 Anthropic 推出的 AI 編程助手，在提升開發(fā)效率的同時，也會在安裝、配置、使用等多個環(huán)節(jié)遇到各類問題,本文整理了用戶在使用過程中最常碰到的問題，按類2026-06-04
這篇文章記錄如何在 Windows 上安裝 Claude Code，并配置 MiniMax 的 Claude Code 兼容接口,以后自己重裝，或者委托具備本機終端與文件操作能力的 AI Agent 代為部署時，可2026-06-03
使用Claude Code高效實現(xiàn)圖像邊緣檢測的實踐指南
邊緣檢測是計算機視覺領(lǐng)域最基礎(chǔ)也最實用的技術(shù)之一,從人臉識別、自動駕駛的車道線檢測，到工業(yè)產(chǎn)品的缺陷識別，邊緣檢測都是核心預(yù)處理環(huán)節(jié),本文將分享我使用 Python + Op2026-06-03
其實 Claude Code 內(nèi)置了很多斜杠命令，輸入/就能看到完整的命令列表,這些命令覆蓋了會話管理、上下文控制、并行協(xié)作等方方面面，用好了能省很多事，下面小編就和大家詳細2026-06-03
Claude Code Hooks 選裝實戰(zhàn)指南
Claudede Hooks實戰(zhàn)指南,涵蓋三級攔截體系,兩腳本開箱即用,覆蓋致命、高風(fēng)險、警告三級操作,通過配置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 編程助手之一，但從安裝、配置到日常使用，尤其是在接入國內(nèi)大模型 API 時，開發(fā)者總會遇到形形色色的報錯,本文以階段為線索，系統(tǒng)梳2026-06-02- Claude Code 每次調(diào)用工具、等待輸入、結(jié)束會話，都會觸發(fā)對應(yīng)的Hook生命周期事件,Hook 腳本除了做判斷和記錄，還可以把事件轉(zhuǎn)發(fā)到本地 socket，讓一個常駐進程處理所有狀2026-06-02
