feat: 添加快速选择模板按钮的选中状态

- 为模板选择按钮添加选中后保持深色的视觉反馈
- 选中状态与hover状态共享相同的样式
- 用户可以清楚地看到当前选中的模板
This commit is contained in:
farion1231
2025-08-21 21:46:48 +08:00
parent 3097894d30
commit 0c7043154a
2 changed files with 9 additions and 4 deletions

View File

@@ -69,7 +69,8 @@
transition: all 0.2s; transition: all 0.2s;
} }
.preset-btn:hover { .preset-btn:hover,
.preset-btn.selected {
background: #3498db; background: #3498db;
color: white; color: white;
} }

View File

@@ -28,6 +28,7 @@ const ProviderForm: React.FC<ProviderFormProps> = ({
}) })
const [error, setError] = useState('') const [error, setError] = useState('')
const [disableCoAuthored, setDisableCoAuthored] = useState(false) const [disableCoAuthored, setDisableCoAuthored] = useState(false)
const [selectedPreset, setSelectedPreset] = useState<number | null>(null)
// 初始化时检查禁用签名状态 // 初始化时检查禁用签名状态
useEffect(() => { useEffect(() => {
@@ -107,7 +108,7 @@ const ProviderForm: React.FC<ProviderFormProps> = ({
}) })
} }
const applyPreset = (preset: typeof providerPresets[0]) => { const applyPreset = (preset: typeof providerPresets[0], index: number) => {
const configString = JSON.stringify(preset.settingsConfig, null, 2) const configString = JSON.stringify(preset.settingsConfig, null, 2)
setFormData({ setFormData({
@@ -116,6 +117,9 @@ const ProviderForm: React.FC<ProviderFormProps> = ({
settingsConfig: configString settingsConfig: configString
}) })
// 设置选中的预设
setSelectedPreset(index)
// 同步选择框状态 // 同步选择框状态
const hasCoAuthoredDisabled = checkCoAuthoredSetting(configString) const hasCoAuthoredDisabled = checkCoAuthoredSetting(configString)
setDisableCoAuthored(hasCoAuthoredDisabled) setDisableCoAuthored(hasCoAuthoredDisabled)
@@ -136,8 +140,8 @@ const ProviderForm: React.FC<ProviderFormProps> = ({
<button <button
key={index} key={index}
type="button" type="button"
className="preset-btn" className={`preset-btn ${selectedPreset === index ? 'selected' : ''}`}
onClick={() => applyPreset(preset)} onClick={() => applyPreset(preset, index)}
> >
{preset.name} {preset.name}
</button> </button>