From a55ec3e330d1c4d247dba5fe49f62e90e230ae1d Mon Sep 17 00:00:00 2001
From: sim <sim@local>
Date: Mon, 3 Aug 2026 10:37:00 +0800
Subject: [PATCH] =?UTF-8?q?refactor(coding-agent):=20Less=20Computer=20?=
 =?UTF-8?q?=E5=90=8E=E7=AB=AF/=E6=9D=83=E9=99=90=E6=A8=A1=E5=BC=8F/?=
 =?UTF-8?q?=E6=A8=A1=E5=9E=8B=E9=80=89=E6=8B=A9=E6=94=B9=E7=94=A8=E5=AE=98?=
 =?UTF-8?q?=E6=96=B9=20SelectLite?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

统一三平台下拉观感，替换原生 <select>（issue #418 同类问题）；模型下拉保留
「默认」选项，可选回 CLI 默认模型
---
 .../src/pages/settings/CodingAgentSection.tsx | 70 ++++++++-----------
 1 file changed, 31 insertions(+), 39 deletions(-)

diff --git a/openless-all/app/src/pages/settings/CodingAgentSection.tsx b/openless-all/app/src/pages/settings/CodingAgentSection.tsx
index 0414a04e..90d8c474 100644
--- a/openless-all/app/src/pages/settings/CodingAgentSection.tsx
+++ b/openless-all/app/src/pages/settings/CodingAgentSection.tsx
@@ -8,6 +8,7 @@ import { detectOS } from '../../components/WindowChrome'
 import { codingAgentDetectOpencode, type OpenCodeDetection } from '../../lib/ipc'
 import type { CodingAgentPermissionMode, CodingAgentProviderId } from '../../lib/types'
 import { useHotkeySettings } from '../../state/HotkeySettingsContext'
+import { SelectLite } from '../../components/ui/SelectLite'
 import { Card } from '../_atoms'
 import { SectionDesc, SectionTitle, SettingRow, Toggle, inputStyle } from './shared'
 
@@ -69,19 +70,16 @@ export function CodingAgentSection() {
         <>
           {/* 「按住说话键」配置已挪到 通用 → 快捷键，避免和这里重复。本区只留后端/模型等高级项。 */}
           <SettingRow label={t('settings.codingAgent.provider')}>
-            <select
+            <SelectLite
               value={prefs.codingAgentProvider}
-              onChange={e =>
-                void savePrefs({
-                  ...prefs,
-                  codingAgentProvider: e.target.value as CodingAgentProviderId,
-                })
-              }
-              style={{ ...inputStyle, maxWidth: 240, cursor: 'pointer' }}
-            >
-              <option value="claude-code-cli">Claude Code</option>
-              <option value="opencode-cli">OpenCode</option>
-            </select>
+              onChange={v => void savePrefs({ ...prefs, codingAgentProvider: v as CodingAgentProviderId })}
+              options={[
+                { value: 'claude-code-cli', label: 'Claude Code' },
+                { value: 'opencode-cli', label: 'OpenCode' },
+              ]}
+              ariaLabel={t('settings.codingAgent.provider')}
+              style={{ ...inputStyle, maxWidth: 240 }}
+            />
           </SettingRow>
 
           {/* OpenCode 后端：提示安装/登录状态。issue #579。 */}
@@ -101,38 +99,32 @@ export function CodingAgentSection() {
           )}
 
           <SettingRow label={t('settings.codingConsole.permissionMode')}>
-            <select
+            <SelectLite
               value={prefs.codingAgentPermissionMode}
-              onChange={e =>
-                void savePrefs({
-                  ...prefs,
-                  codingAgentPermissionMode: e.target.value as CodingAgentPermissionMode,
-                })
-              }
-              style={{ ...inputStyle, maxWidth: 240, cursor: 'pointer' }}
-            >
-              {PERMISSION_MODES.map(m => (
-                <option key={m} value={m}>
-                  {t(`settings.codingConsole.mode.${m}`)}
-                </option>
-              ))}
-            </select>
+              onChange={v => void savePrefs({ ...prefs, codingAgentPermissionMode: v as CodingAgentPermissionMode })}
+              options={PERMISSION_MODES.map(m => ({
+                value: m,
+                label: t(`settings.codingConsole.mode.${m}`),
+              }))}
+              ariaLabel={t('settings.codingConsole.permissionMode')}
+              style={{ ...inputStyle, maxWidth: 240 }}
+            />
           </SettingRow>
 
           <SettingRow label={t('settings.codingAgent.model')} desc={t('settings.codingAgent.modelHint')}>
-            <select
+            <SelectLite
               value={prefs.codingAgentModel ?? ''}
-              onChange={e => {
-                const v = e.target.value
-                void savePrefs({ ...prefs, codingAgentModel: v === '' ? null : v })
-              }}
-              style={{ ...inputStyle, maxWidth: 240, cursor: 'pointer' }}
-            >
-              <option value="">{t('settings.codingAgent.modelDefault')}</option>
-              <option value="haiku">Haiku</option>
-              <option value="sonnet">Sonnet</option>
-              <option value="opus">Opus</option>
-            </select>
+              onChange={v => void savePrefs({ ...prefs, codingAgentModel: v === '' ? null : v })}
+              options={[
+                // 空值 = 使用 CLI 默认模型；放回选项里，避免选了具体模型后回不去默认。
+                { value: '', label: t('settings.codingAgent.modelDefault') },
+                { value: 'haiku', label: 'Haiku' },
+                { value: 'sonnet', label: 'Sonnet' },
+                { value: 'opus', label: 'Opus' },
+              ]}
+              ariaLabel={t('settings.codingAgent.model')}
+              style={{ ...inputStyle, maxWidth: 240 }}
+            />
           </SettingRow>
 
           <SettingRow label={t('settings.codingConsole.workdir')} desc={t('settings.codingConsole.workdirDesc')}>