admin/cc-switch
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: 添加 API Key 快速输入功能

Browse Source 
- 选择预设模板后自动显示 API Key 输入框
- 输入 API Key 后自动更新 JSON 配置
- 简化用户配置流程，无需手动编辑 JSON
- 优化交互体验，API Key 输入框位于供应商名称下方
This commit is contained in:
farion1231
2025-08-21 22:20:57 +08:00
parent 0c7043154a
commit 654a4745d5
1 changed files with 126 additions and 69 deletions
Download Patch File Download Diff File Expand all files Collapse all files

195
src/renderer/components/ProviderForm.tsx
View File

@@ -1,16 +1,20 @@
import React, { useState, useEffect } from 'react'
import { Provider } from '../../shared/types'
import { updateCoAuthoredSetting, checkCoAuthoredSetting, extractWebsiteUrl } from '../utils/providerConfigUtils'
import { providerPresets } from '../config/providerPresets'
import './AddProviderModal.css'
import React, { useState, useEffect } from "react";
import { Provider } from "../../shared/types";
import {
updateCoAuthoredSetting,
checkCoAuthoredSetting,
extractWebsiteUrl,
} from "../utils/providerConfigUtils";
import { providerPresets } from "../config/providerPresets";
import "./AddProviderModal.css";
interface ProviderFormProps {
title: string
submitText: string
initialData?: Provider
showPresets?: boolean
onSubmit: (data: Omit<Provider, 'id'>) => void
onClose: () => void
title: string;
submitText: string;
initialData?: Provider;
showPresets?: boolean;
onSubmit: (data: Omit<Provider, "id">) => void;
onClose: () => void;
}
const ProviderForm: React.FC<ProviderFormProps> = ({
@@ -19,111 +23,148 @@ const ProviderForm: React.FC<ProviderFormProps> = ({
initialData,
showPresets = false,
onSubmit,
onClose
onClose,
}) => {
const [formData, setFormData] = useState({
name: initialData?.name || '',
websiteUrl: initialData?.websiteUrl || '',
settingsConfig: initialData ? JSON.stringify(initialData.settingsConfig, null, 2) : ''
})
const [error, setError] = useState('')
const [disableCoAuthored, setDisableCoAuthored] = useState(false)
const [selectedPreset, setSelectedPreset] = useState<number | null>(null)
name: initialData?.name || "",
websiteUrl: initialData?.websiteUrl || "",
settingsConfig: initialData
? JSON.stringify(initialData.settingsConfig, null, 2)
: "",
});
const [error, setError] = useState("");
const [disableCoAuthored, setDisableCoAuthored] = useState(false);
const [selectedPreset, setSelectedPreset] = useState<number | null>(null);
const [apiKey, setApiKey] = useState("");
// 初始化时检查禁用签名状态
useEffect(() => {
if (initialData) {
const configString = JSON.stringify(initialData.settingsConfig, null, 2)
const hasCoAuthoredDisabled = checkCoAuthoredSetting(configString)
setDisableCoAuthored(hasCoAuthoredDisabled)
const configString = JSON.stringify(initialData.settingsConfig, null, 2);
const hasCoAuthoredDisabled = checkCoAuthoredSetting(configString);
setDisableCoAuthored(hasCoAuthoredDisabled);
}
}, [initialData])
}, [initialData]);
const handleSubmit = (e: React.FormEvent) => {
e.preventDefault()
setError('')
e.preventDefault();
setError("");
if (!formData.name) {
setError('请填写供应商名称')
return
setError("请填写供应商名称");
return;
}
if (!formData.settingsConfig.trim()) {
setError('请填写配置内容')
return
setError("请填写配置内容");
return;
}
let settingsConfig: Record<string, any>
let settingsConfig: Record<string, any>;
try {
settingsConfig = JSON.parse(formData.settingsConfig)
settingsConfig = JSON.parse(formData.settingsConfig);
} catch (err) {
setError('配置JSON格式错误，请检查语法')
return
setError("配置JSON格式错误，请检查语法");
return;
}
onSubmit({
name: formData.name,
websiteUrl: formData.websiteUrl,
settingsConfig
})
}
settingsConfig,
});
};
const handleChange = (
e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>
) => {
const { name, value } = e.target
if (name === 'settingsConfig') {
const { name, value } = e.target;
if (name === "settingsConfig") {
// 当用户修改配置时，尝试自动提取官网地址
const extractedWebsiteUrl = extractWebsiteUrl(value)
const extractedWebsiteUrl = extractWebsiteUrl(value);
// 同时检查并同步选择框状态
const hasCoAuthoredDisabled = checkCoAuthoredSetting(value)
setDisableCoAuthored(hasCoAuthoredDisabled)
const hasCoAuthoredDisabled = checkCoAuthoredSetting(value);
setDisableCoAuthored(hasCoAuthoredDisabled);
setFormData({
...formData,
[name]: value,
// 只有在官网地址为空时才自动填入
websiteUrl: formData.websiteUrl || extractedWebsiteUrl,
})
});
} else {
setFormData({
...formData,
[name]: value,
})
});
}
}
};
// 处理选择框变化
const handleCoAuthoredToggle = (checked: boolean) => {
setDisableCoAuthored(checked)
setDisableCoAuthored(checked);
// 更新JSON配置
const updatedConfig = updateCoAuthoredSetting(formData.settingsConfig, checked)
const updatedConfig = updateCoAuthoredSetting(
formData.settingsConfig,
checked
);
setFormData({
...formData,
settingsConfig: updatedConfig,
})
}
});
};
const applyPreset = (preset: (typeof providerPresets)[0], index: number) => {
const configString = JSON.stringify(preset.settingsConfig, null, 2);
const applyPreset = (preset: typeof providerPresets[0], index: number) => {
const configString = JSON.stringify(preset.settingsConfig, null, 2)
setFormData({
name: preset.name,
websiteUrl: preset.websiteUrl,
settingsConfig: configString
})
settingsConfig: configString,
});
// 设置选中的预设
setSelectedPreset(index)
setSelectedPreset(index);
// 清空 API Key 输入框，让用户重新输入
setApiKey("");
// 同步选择框状态
const hasCoAuthoredDisabled = checkCoAuthoredSetting(configString)
setDisableCoAuthored(hasCoAuthoredDisabled)
}
const hasCoAuthoredDisabled = checkCoAuthoredSetting(configString);
setDisableCoAuthored(hasCoAuthoredDisabled);
};
// 处理 API Key 输入并自动更新配置
const handleApiKeyChange = (key: string) => {
setApiKey(key);
if (selectedPreset !== null && key.trim()) {
// 获取当前选中的预设配置
const preset = providerPresets[selectedPreset];
const updatedConfig = JSON.parse(JSON.stringify(preset.settingsConfig));
// 替换配置中的 API Key
if (updatedConfig.env && updatedConfig.env.ANTHROPIC_AUTH_TOKEN) {
updatedConfig.env.ANTHROPIC_AUTH_TOKEN = key.trim();
}
const configString = JSON.stringify(updatedConfig, null, 2);
// 更新表单配置
setFormData((prev) => ({
...prev,
settingsConfig: configString,
}));
// 同步选择框状态
const hasCoAuthoredDisabled = checkCoAuthoredSetting(configString);
setDisableCoAuthored(hasCoAuthoredDisabled);
}
};
return (
<div className="modal-overlay">
@@ -140,7 +181,9 @@ const ProviderForm: React.FC<ProviderFormProps> = ({
<button
key={index}
type="button"
className={`preset-btn ${selectedPreset === index ? 'selected' : ''}`}
className={`preset-btn ${
selectedPreset === index ? "selected" : ""
}`}
onClick={() => applyPreset(preset, index)}
>
{preset.name}
@@ -165,6 +208,20 @@ const ProviderForm: React.FC<ProviderFormProps> = ({
/>
</div>
{selectedPreset !== null && (
<div className="form-group">
<label htmlFor="apiKey">API Key *</label>
<input
type="text"
id="apiKey"
value={apiKey}
onChange={(e) => handleApiKeyChange(e.target.value)}
placeholder="只需要填这里，下方配置会自动填充"
autoComplete="off"
/>
</div>
)}
<div className="form-group">
<label htmlFor="websiteUrl">官网地址</label>
<input
@@ -202,7 +259,7 @@ const ProviderForm: React.FC<ProviderFormProps> = ({
}
}`}
rows={12}
style={{fontFamily: 'monospace', fontSize: '14px'}}
style={{ fontFamily: "monospace", fontSize: "14px" }}
required
/>
<small className="field-hint">
@@ -221,7 +278,7 @@ const ProviderForm: React.FC<ProviderFormProps> = ({
</form>
</div>
</div>
)
}
);
};
export default ProviderForm
export default ProviderForm;