From 48d64a24bf8e16eb70bf9d73b3fc246dd3cd48f1 Mon Sep 17 00:00:00 2001
From: "xiaohan.yuan" <hhhhyuan@outlook.com>
Date: Sun, 18 Oct 2026 19:23:11 +0800
Subject: [PATCH] refactor(settings): migrate unavailable selects to shared
 primitive

---
 .../src/components/GeneralSettingsPanel.tsx   | 38 +++++++------------
 1 file changed, 14 insertions(+), 24 deletions(-)

diff --git a/src/renderer/src/components/GeneralSettingsPanel.tsx b/src/renderer/src/components/GeneralSettingsPanel.tsx
index c11dde6..51b7e26 100644
--- a/src/renderer/src/components/GeneralSettingsPanel.tsx
+++ b/src/renderer/src/components/GeneralSettingsPanel.tsx
@@ -23,9 +23,10 @@ import type { ReactNode } from 'react'
 import type { GeneralSettingsView } from '@shared/types'
 import { Button } from '../ui/Button'
 import { Input } from '../ui/Input'
+import { StaticSelect } from '../ui/Select'
 import { Switch } from '../ui/Switch'
 import { IconTaskOpenFolder } from './task-menu-icons'
-import { IconNotificationAuthorize, IconSelectCaret } from './general-settings-icons'
+import { IconNotificationAuthorize } from './general-settings-icons'
 import './source-general-settings.css'
 
 const UNAVAILABLE_HINT = '暂未接入'
@@ -113,19 +114,6 @@ function Section({ title, desc, action, body, stacked, className }: SectionProps
   )
 }
 
-/** 未接入的下拉：原版 120×32 闭合态（value + caret），不可展开。 */
-function UnavailableSelect({ value, className, ariaLabel }: { value: string; className?: string; ariaLabel: string }): React.JSX.Element {
-  return (
-    <span className="source-select-host" data-settings-unavailable="true" aria-disabled="true" title={UNAVAILABLE_HINT}>
-      <button type="button" className={classNames('wb-select', 'wb-select--medium', className)} aria-label={ariaLabel}
-        aria-disabled="true" title={UNAVAILABLE_HINT} tabIndex={-1}>
-        <span className="wb-select__value">{value}</span>
-        <IconSelectCaret className="wb-icon wb-select__caret" />
-      </button>
-    </span>
-  )
-}
-
 /**
  * 未接入的字体大小滑块：原版 .font-size-slider 结构（224 宽、6 个刻度、2 个激活、thumb 位于
  * left 44.8px = 默认档，标签 小/默认/大）。
@@ -194,9 +182,10 @@ export default function GeneralSettingsPanel(): React.JSX.Element {
       <div className="general-settings-panel__group">
         <p className="general-settings-panel__group-label">常规</p>
         <div className="general-settings-panel__group-card">
-          <Section title="语言" action={<UnavailableSelect value="简体中文" ariaLabel="语言" />} />
+          <Section title="语言" action={<StaticSelect value="简体中文" aria-label="语言" hint={UNAVAILABLE_HINT} />} />
           <Section title="链接打开方式" desc="设置 YCode 对话中链接的默认打开策略。"
-            action={<UnavailableSelect value="智能打开" ariaLabel="链接打开方式" className="general-settings-panel__link-open-select" />}
+            action={<StaticSelect value="智能打开" aria-label="链接打开方式" hint={UNAVAILABLE_HINT}
+              className="general-settings-panel__link-open-select" />}
             className="general-settings-panel__link-open-section" />
           <Section title="字体大小" action={<UnavailableFontSizeSlider />} />
         </div>
@@ -206,7 +195,8 @@ export default function GeneralSettingsPanel(): React.JSX.Element {
         <p className="general-settings-panel__group-label">权限</p>
         <div className="general-settings-panel__group-card">
           <Section title="允许锁屏运行" desc="选择锁屏后的运行方式，保障远程控制与后台 Agent 任务持续执行。"
-            action={<UnavailableSelect value="关闭" ariaLabel="允许锁屏运行" className="power-save-blocker-settings__select" />} />
+            action={<StaticSelect value="关闭" aria-label="允许锁屏运行" hint={UNAVAILABLE_HINT}
+              className="power-save-blocker-settings__select" />} />
           <Section title="运行时防止系统休眠" desc="在 YCode 运行任务时，让电脑保持唤醒状态。"
             action={<Switch checked={view?.preventSleep ?? true} aria-label="运行时防止系统休眠" disabled={busy || !view} size="lg"
               onCheckedChange={(checked) => update({ preventSleep: checked })} />} />
@@ -215,19 +205,19 @@ export default function GeneralSettingsPanel(): React.JSX.Element {
               onCheckedChange={(checked) => update({ autoLaunch: checked })} />} />
           <Section title="网络代理" desc="网络异常时可切换连接方式，修改后立即生效" stacked
             className="general-settings-panel__section--proxy"
-            action={<UnavailableSelect value="直接连接" ariaLabel="网络代理" />}
+            action={<StaticSelect value="直接连接" aria-label="网络代理" hint={UNAVAILABLE_HINT} />}
             body={<div className="proxy-section" />} />
           <Section title="自动安装可信技能" desc="安全检测通过后自动安装，高风险项始终要求手动确认。"
             action={<div className="general-settings-panel__switch-wrap" data-settings-unavailable="true" aria-disabled="true" title={UNAVAILABLE_HINT}>
-              <Switch checked={false} readOnly aria-label="自动安装可信技能" size="lg" />
+              <Switch checked={false} readOnly tabIndex={-1} aria-label="自动安装可信技能" size="lg" />
             </div>} />
           <Section title="技能自动更新" desc="开启后将自动更新已安装的技能为最新版本，不会更新你在 YCode 中编辑过的技能"
             action={<div className="general-settings-panel__switch-wrap" data-settings-unavailable="true" aria-disabled="true" title={UNAVAILABLE_HINT}>
-              <Switch checked readOnly aria-label="技能自动更新" size="lg" />
+              <Switch checked readOnly tabIndex={-1} aria-label="技能自动更新" size="lg" />
             </div>} />
           <Section title="套件自动更新" desc="开启后将自动更新已安装的套件为最新版本。"
             action={<div className="general-settings-panel__switch-wrap" data-settings-unavailable="true" aria-disabled="true" title={UNAVAILABLE_HINT}>
-              <Switch checked readOnly aria-label="套件自动更新" size="lg" />
+              <Switch checked readOnly tabIndex={-1} aria-label="套件自动更新" size="lg" />
             </div>} />
         </div>
       </div>
@@ -299,10 +289,10 @@ export default function GeneralSettingsPanel(): React.JSX.Element {
             action={<Button variant="secondary" size="md" iconRight={<IconNotificationAuthorize />}
               onClick={openNotificationSettings}>前往系统设置</Button>} />
           <Section title="通知提示音" desc="收到桌面或应用内通知时播放的提示音。"
-            action={<UnavailableSelect value="无音效" ariaLabel="通知提示音" />} />
+            action={<StaticSelect value="无音效" aria-label="通知提示音" hint={UNAVAILABLE_HINT} />} />
           <Section title="定时任务产物通知" desc="定时任务的产物生成后，将会通过系统弹窗提醒你。"
             action={<div className="general-settings-panel__switch-wrap" data-settings-unavailable="true" aria-disabled="true" title={UNAVAILABLE_HINT}>
-              <Switch checked readOnly aria-label="定时任务产物通知" size="lg" />
+              <Switch checked readOnly tabIndex={-1} aria-label="定时任务产物通知" size="lg" />
             </div>} />
         </div>
       </div>
@@ -317,7 +307,7 @@ export default function GeneralSettingsPanel(): React.JSX.Element {
                 onClick={(event) => event.preventDefault()}>了解更多</a>
             </>}
             action={<div className="general-settings-panel__switch-wrap" data-settings-unavailable="true" aria-disabled="true" title={UNAVAILABLE_HINT}>
-              <Switch checked readOnly aria-label="体验优化计划" size="lg" />
+              <Switch checked readOnly tabIndex={-1} aria-label="体验优化计划" size="lg" />
             </div>} />
         </div>
       </div>