重大重构：从字段替换切换到完整配置文件切换系统
- 实现基于文件重命名的供应商切换机制，支持完整settings.json配置切换 - 移除所有向后兼容代码，简化为纯JSON配置模式 - 添加导入当前配置功能，解决首次使用时配置丢失问题 - 移除描述字段，简化用户界面 - 完整的错误处理和回滚机制确保配置安全 - 清理所有调试代码，优化代码质量
This commit is contained in:
farion1231
@@ -1,6 +1,5 @@
|
||||
import React, { useState } from "react";
|
||||
import { Provider } from "../../shared/types";
|
||||
import { inferWebsiteUrl } from "../../shared/utils";
|
||||
import "./AddProviderModal.css";
|
||||
|
||||
interface AddProviderModalProps {
|
||||
@@ -14,89 +13,91 @@ const AddProviderModal: React.FC<AddProviderModalProps> = ({
|
||||
}) => {
|
||||
const [formData, setFormData] = useState({
|
||||
name: "",
|
||||
apiUrl: "",
|
||||
apiKey: "",
|
||||
websiteUrl: "",
|
||||
settingsConfig: ""
|
||||
});
|
||||
const [showPassword, setShowPassword] = useState(false);
|
||||
const [error, setError] = useState("");
|
||||
|
||||
// 预设的供应商配置模板
|
||||
const presets = [
|
||||
{
|
||||
name: "Anthropic 官方",
|
||||
websiteUrl: "https://console.anthropic.com",
|
||||
settingsConfig: {
|
||||
"env": {
|
||||
"ANTHROPIC_BASE_URL": "https://api.anthropic.com",
|
||||
"ANTHROPIC_AUTH_TOKEN": "sk-your-api-key-here"
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
name: "PackyCode",
|
||||
websiteUrl: "https://www.packycode.com",
|
||||
settingsConfig: {
|
||||
"env": {
|
||||
"ANTHROPIC_BASE_URL": "https://api.packycode.com",
|
||||
"ANTHROPIC_AUTH_TOKEN": "sk-your-api-key-here"
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
name: "YesCode",
|
||||
websiteUrl: "https://yes.vg",
|
||||
settingsConfig: {
|
||||
"env": {
|
||||
"ANTHROPIC_BASE_URL": "https://co.yes.vg",
|
||||
"ANTHROPIC_AUTH_TOKEN": "cr-your-api-key-here"
|
||||
}
|
||||
}
|
||||
}
|
||||
];
|
||||
|
||||
const handleSubmit = (e: React.FormEvent) => {
|
||||
e.preventDefault();
|
||||
setError("");
|
||||
|
||||
if (!formData.name || !formData.apiUrl || !formData.apiKey) {
|
||||
setError("请填写所有必填字段");
|
||||
if (!formData.name) {
|
||||
setError("请填写供应商名称");
|
||||
return;
|
||||
}
|
||||
|
||||
onAdd(formData);
|
||||
if (!formData.settingsConfig.trim()) {
|
||||
setError("请填写配置内容");
|
||||
return;
|
||||
}
|
||||
|
||||
let settingsConfig: object;
|
||||
|
||||
try {
|
||||
settingsConfig = JSON.parse(formData.settingsConfig);
|
||||
} catch (err) {
|
||||
setError("配置JSON格式错误，请检查语法");
|
||||
return;
|
||||
}
|
||||
|
||||
onAdd({
|
||||
name: formData.name,
|
||||
websiteUrl: formData.websiteUrl,
|
||||
settingsConfig
|
||||
});
|
||||
};
|
||||
|
||||
const handleChange = (
|
||||
e: React.ChangeEvent<HTMLInputElement | HTMLSelectElement>
|
||||
e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>
|
||||
) => {
|
||||
const { name, value } = e.target;
|
||||
const newFormData = {
|
||||
setFormData({
|
||||
...formData,
|
||||
[name]: value,
|
||||
};
|
||||
|
||||
// 如果修改的是API地址，自动推测网站地址
|
||||
if (name === "apiUrl") {
|
||||
newFormData.websiteUrl = inferWebsiteUrl(value);
|
||||
}
|
||||
|
||||
setFormData(newFormData);
|
||||
});
|
||||
};
|
||||
|
||||
const handleApiUrlBlur = (e: React.FocusEvent<HTMLInputElement>) => {
|
||||
const apiUrl = e.target.value.trim();
|
||||
if (apiUrl) {
|
||||
let normalizedApiUrl = apiUrl;
|
||||
|
||||
// 如果没有协议，添加 https://
|
||||
if (!normalizedApiUrl.match(/^https?:\/\//)) {
|
||||
normalizedApiUrl = "https://" + normalizedApiUrl;
|
||||
}
|
||||
|
||||
setFormData((prev) => ({
|
||||
...prev,
|
||||
apiUrl: normalizedApiUrl,
|
||||
websiteUrl: inferWebsiteUrl(normalizedApiUrl),
|
||||
}));
|
||||
}
|
||||
};
|
||||
|
||||
// 预设的供应商配置
|
||||
const presets = [
|
||||
{
|
||||
name: "Anthropic 官方",
|
||||
apiUrl: "https://api.anthropic.com",
|
||||
},
|
||||
{
|
||||
name: "PackyCode",
|
||||
apiUrl: "https://api.packycode.com",
|
||||
},
|
||||
{
|
||||
name: "YesCode",
|
||||
apiUrl: "https://co.yes.vg",
|
||||
},
|
||||
{
|
||||
name: "AnyRouter",
|
||||
apiUrl: "https://anyrouter.top",
|
||||
},
|
||||
];
|
||||
|
||||
const applyPreset = (preset: (typeof presets)[0]) => {
|
||||
const newFormData = {
|
||||
...formData,
|
||||
const applyPreset = (preset: typeof presets[0]) => {
|
||||
setFormData({
|
||||
name: preset.name,
|
||||
apiUrl: preset.apiUrl,
|
||||
};
|
||||
// 应用预设时也自动推测网站地址
|
||||
newFormData.websiteUrl = inferWebsiteUrl(preset.apiUrl);
|
||||
setFormData(newFormData);
|
||||
websiteUrl: preset.websiteUrl,
|
||||
settingsConfig: JSON.stringify(preset.settingsConfig, null, 2)
|
||||
});
|
||||
};
|
||||
|
||||
return (
|
||||
@@ -107,7 +108,7 @@ const AddProviderModal: React.FC<AddProviderModalProps> = ({
|
||||
{error && <div className="error-message">{error}</div>}
|
||||
|
||||
<div className="presets">
|
||||
<label>快速选择：</label>
|
||||
<label>快速选择模板：</label>
|
||||
<div className="preset-buttons">
|
||||
{presets.map((preset, index) => (
|
||||
<button
|
||||
@@ -131,84 +132,43 @@ const AddProviderModal: React.FC<AddProviderModalProps> = ({
|
||||
name="name"
|
||||
value={formData.name}
|
||||
onChange={handleChange}
|
||||
placeholder="例如：官方 Anthropic"
|
||||
placeholder="例如：Anthropic 官方"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="form-group">
|
||||
<label htmlFor="apiUrl">API 地址 *</label>
|
||||
<label htmlFor="websiteUrl">官网地址</label>
|
||||
<input
|
||||
type="url"
|
||||
id="apiUrl"
|
||||
name="apiUrl"
|
||||
value={formData.apiUrl}
|
||||
onChange={handleChange}
|
||||
onBlur={handleApiUrlBlur}
|
||||
placeholder="https://api.anthropic.com"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="form-group">
|
||||
<label htmlFor="websiteUrl">网站地址</label>
|
||||
<input
|
||||
type="text"
|
||||
id="websiteUrl"
|
||||
name="websiteUrl"
|
||||
value={formData.websiteUrl}
|
||||
onChange={handleChange}
|
||||
placeholder="https://example.com（可选）"
|
||||
/>
|
||||
<small className="field-hint">
|
||||
用于在面板中显示可访问的网站链接，留空则显示API地址
|
||||
</small>
|
||||
</div>
|
||||
|
||||
<div className="form-group">
|
||||
<label htmlFor="apiKey">API Key *</label>
|
||||
<div className="password-input-wrapper">
|
||||
<input
|
||||
type={showPassword ? "text" : "password"}
|
||||
id="apiKey"
|
||||
name="apiKey"
|
||||
value={formData.apiKey}
|
||||
onChange={handleChange}
|
||||
placeholder={formData.name === "YesCode" ? "cr_..." : "sk-..."}
|
||||
required
|
||||
/>
|
||||
<button
|
||||
type="button"
|
||||
className="password-toggle"
|
||||
onClick={() => setShowPassword(!showPassword)}
|
||||
tabIndex={-1}
|
||||
title={showPassword ? "隐藏密码" : "显示密码"}
|
||||
>
|
||||
{showPassword ? (
|
||||
<svg
|
||||
width="20"
|
||||
height="20"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
>
|
||||
<path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z" />
|
||||
<circle cx="12" cy="12" r="3" />
|
||||
</svg>
|
||||
) : (
|
||||
<svg
|
||||
width="20"
|
||||
height="20"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
>
|
||||
<path d="M17.94 17.94A10.07 10.07 0 0 1 12 20c-7 0-11-8-11-8a18.45 18.45 0 0 1 5.06-5.94M9.9 4.24A9.12 9.12 0 0 1 12 4c7 0 11 8 11 8a18.5 18.5 0 0 1-2.16 3.19m-6.72-1.07a3 3 0 1 1-4.24-4.24" />
|
||||
<line x1="1" y1="1" x2="23" y2="23" />
|
||||
</svg>
|
||||
)}
|
||||
</button>
|
||||
</div>
|
||||
<label htmlFor="settingsConfig">Claude Code 配置 (JSON) *</label>
|
||||
<textarea
|
||||
id="settingsConfig"
|
||||
name="settingsConfig"
|
||||
value={formData.settingsConfig}
|
||||
onChange={handleChange}
|
||||
placeholder={`{
|
||||
"env": {
|
||||
"ANTHROPIC_BASE_URL": "https://api.anthropic.com",
|
||||
"ANTHROPIC_AUTH_TOKEN": "sk-your-api-key-here"
|
||||
}
|
||||
}`}
|
||||
rows={12}
|
||||
style={{fontFamily: 'monospace', fontSize: '14px'}}
|
||||
required
|
||||
/>
|
||||
<small className="field-hint">
|
||||
完整的 Claude Code settings.json 配置内容
|
||||
</small>
|
||||
</div>
|
||||
|
||||
<div className="form-actions">
|
||||
|
||||
Reference in New Issue
Block a user