refactor(settings): migrate unavailable selects to shared primitive
This commit is contained in:
xiaohan.yuan committed
1 parent
291cbee485
commit
48d64a24bf
1 file changed
+14
-24
@@ -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>
|
||||
|
||||
Reference in new issue
Block a user