feat: 添加快速选择模板按钮的选中状态
- 为模板选择按钮添加选中后保持深色的视觉反馈 - 选中状态与hover状态共享相同的样式 - 用户可以清楚地看到当前选中的模板
This commit is contained in:
@@ -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;
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -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>
|
||||||
|
|||||||
Reference in New Issue
Block a user