From 82cbdee3b4946117175542a76652ac909dceafd3 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=88=98=E4=BC=9F=E5=85=89?=
 <liuweiguang@U-60N73YH4-0009.local>
Date: Thu, 8 Jan 2026 15:35:17 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E6=81=A2=E5=A4=8D=E7=BB=84=E4=BB=B6?=
 =?UTF-8?q?=E4=BD=BF=E7=94=A8=E4=BF=AE=E6=94=B9=E9=BB=98=E8=AE=A4=E5=80=BC?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/ui/components/ApprovalModeDialog.tsx  | 29 +++++--------------
 1 file changed, 8 insertions(+), 21 deletions(-)

diff --git a/packages/cli/src/ui/components/ApprovalModeDialog.tsx b/packages/cli/src/ui/components/ApprovalModeDialog.tsx
index 985375997..d81b6f4c0 100644
--- a/packages/cli/src/ui/components/ApprovalModeDialog.tsx
+++ b/packages/cli/src/ui/components/ApprovalModeDialog.tsx
@@ -14,6 +14,7 @@ import type { LoadedSettings } from '../../config/settings.js';
 import { SettingScope } from '../../config/settings.js';
 import { getScopeMessageForSetting } from '../../utils/dialogScopeUtils.js';
 import { useKeypress } from '../hooks/useKeypress.js';
+import { ScopeSelector } from './shared/ScopeSelector.js';
 import { t } from '../../i18n/index.js';
 
 interface ApprovalModeDialogProps {
@@ -56,23 +57,6 @@ export function ApprovalModeDialog({
     SettingScope.Workspace,
   );
 
-  const scopeItems = [
-    {
-      get label() {
-        return t('Workspace Settings');
-      },
-      value: SettingScope.Workspace,
-      key: SettingScope.Workspace,
-    },
-    {
-      get label() {
-        return t('User Settings');
-      },
-      value: SettingScope.User,
-      key: SettingScope.User,
-    },
-  ];
-
   // Track the currently highlighted approval mode
   const [highlightedMode, setHighlightedMode] = useState<ApprovalMode>(
     currentMode || ApprovalMode.DEFAULT,
@@ -102,10 +86,13 @@ export function ApprovalModeDialog({
     setHighlightedMode(mode);
   };
 
+  const handleScopeHighlight = useCallback((scope: SettingScope) => {
+    setSelectedScope(scope);
+  }, []);
+
   const handleScopeSelect = useCallback(
     (scope: SettingScope) => {
       onSelect(highlightedMode, scope);
-      setSelectedScope(scope);
     },
     [onSelect, highlightedMode],
   );
@@ -168,11 +155,11 @@ export function ApprovalModeDialog({
 
         {/* Scope Selection */}
         <Box marginTop={1}>
-          <RadioButtonSelect
-            items={scopeItems}
-            initialIndex={0}
+          <ScopeSelector
             onSelect={handleScopeSelect}
+            onHighlight={handleScopeHighlight}
             isFocused={focusSection === 'scope'}
+            initialScope={selectedScope}
           />
         </Box>