✨ feat(vscode): 用自定义 SelectMenu 替换原生 select 修复暗色样式

vscode/webview-ui/src/components/SettingsModal.tsx

@@ -11,6 +11,7 @@ import type { ReactElement } from 'react'
 import type { ClaudeProfile } from '../hooks/useIssues'
 import { X } from 'lucide-react'
 import { useEffect, useState } from 'react'
+import { SelectMenu } from './ui/select-menu'
 
 type GroupKey = 'auth' | 'network' | 'youtrack' | 'prompts' | 'hooks'
 
@@ -487,22 +488,20 @@ export function SettingsModal({
                     </>
                   )}
                 >
-                  <select
+                  <SelectMenu
                     value={conflictResolutionProfilePath}
-                    onChange={e => setConflictResolutionProfilePath(e.target.value)}
+                    onChange={setConflictResolutionProfilePath}
+                    variant="input"
                     className={inputClass}
-                  >
-                    <option value="">（默认）</option>
-                    {profiles.map(p => (
-                      <option key={p.path} value={p.path}>{p.name}</option>
-                    ))}
-                    {conflictResolutionProfilePath
-                      && !profiles.some(p => p.path === conflictResolutionProfilePath) && (
-                      <option value={conflictResolutionProfilePath}>
-                        {`自定义：${conflictResolutionProfilePath}`}
-                      </option>
-                    )}
-                  </select>
+                    options={[
+                      { value: '', label: '（默认）' },
+                      ...profiles.map(p => ({ value: p.path, label: p.name })),
+                      ...(conflictResolutionProfilePath
+                        && !profiles.some(p => p.path === conflictResolutionProfilePath)
+                        ? [{ value: conflictResolutionProfilePath, label: `自定义：${conflictResolutionProfilePath}` }]
+                        : []),
+                    ]}
+                  />
                 </Field>
 
                 <Field
@@ -513,22 +512,20 @@ export function SettingsModal({
                     </>
                   )}
                 >
-                  <select
+                  <SelectMenu
                     value={commitProfilePath}
-                    onChange={e => setCommitProfilePath(e.target.value)}
+                    onChange={setCommitProfilePath}
+                    variant="input"
                     className={inputClass}
-                  >
-                    <option value="">（未配置）</option>
-                    {profiles.map(p => (
-                      <option key={p.path} value={p.path}>{p.name}</option>
-                    ))}
-                    {commitProfilePath
-                      && !profiles.some(p => p.path === commitProfilePath) && (
-                      <option value={commitProfilePath}>
-                        {`自定义：${commitProfilePath}`}
-                      </option>
-                    )}
-                  </select>
+                    options={[
+                      { value: '', label: '（未配置）' },
+                      ...profiles.map(p => ({ value: p.path, label: p.name })),
+                      ...(commitProfilePath
+                        && !profiles.some(p => p.path === commitProfilePath)
+                        ? [{ value: commitProfilePath, label: `自定义：${commitProfilePath}` }]
+                        : []),
+                    ]}
+                  />
                 </Field>
 
                 <Field
@@ -728,20 +725,19 @@ export function SettingsModal({
                     </button>
                   </div>
                   {youtrackProjects.status === 'ready' && youtrackProjects.projects.length > 0 && (
-                    <select
+                    <SelectMenu
                       value={youtrackProjectShortName}
-                      onChange={e => setYoutrackProjectShortName(e.target.value)}
+                      onChange={setYoutrackProjectShortName}
                       className={`${inputClass} mt-2`}
-                    >
-                      <option value="">— 选择项目 —</option>
-                      {youtrackProjects.projects.map(p => (
-                        <option key={p.id} value={p.shortName}>
-                          {p.shortName}
-                          {' · '}
-                          {p.name}
-                        </option>
-                      ))}
-                    </select>
+                      variant="input"
+                      options={[
+                        { value: '', label: '— 选择项目 —' },
+                        ...youtrackProjects.projects.map(p => ({
+                          value: p.shortName,
+                          label: `${p.shortName} · ${p.name}`,
+                        })),
+                      ]}
+                    />
                   )}
                   {youtrackProjects.status === 'error' && (
                     <span className="mt-1 block text-[10px] text-state-red">
@@ -891,14 +887,16 @@ export function SettingsModal({
                     </>
                   )}
                 >
-                  <select
+                  <SelectMenu
                     value={worktreeOpenWith}
-                    onChange={e => setWorktreeOpenWith(e.target.value as 'vscode' | 'pycharm')}
+                    onChange={v => setWorktreeOpenWith(v as 'vscode' | 'pycharm')}
                     className={inputClass}
-                  >
-                    <option value="vscode">VS Code</option>
-                    <option value="pycharm">PyCharm</option>
-                  </select>
+                    variant="input"
+                    options={[
+                      { value: 'vscode', label: 'VS Code' },
+                      { value: 'pycharm', label: 'PyCharm' },
+                    ]}
+                  />
                 </Field>
 
                 {worktreeOpenWith === 'pycharm' && (