代码重构：移除 any 类型并抽取共享表单组件
- 移除所有 any 类型声明，提升类型安全性 - 简化 ClaudeCodeSettings 接口为通用的 Record<string, any>，支持任意供应商配置 - 创建 ProviderForm 共享组件，减少重复代码约 300 行 - 优化 Store 类型定义，使用泛型约束确保类型安全 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
farion1231
@@ -223,7 +223,7 @@ ipcMain.handle("importCurrentConfigAsDefault", async () => {
|
|||||||
}
|
}
|
||||||
|
|
||||||
return result;
|
return result;
|
||||||
} catch (error: any) {
|
} catch (error) {
|
||||||
console.error("导入默认配置失败:", error);
|
console.error("导入默认配置失败:", error);
|
||||||
return { success: false };
|
return { success: false };
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -159,7 +159,7 @@ export async function importCurrentConfigAsDefault(): Promise<{ success: boolean
|
|||||||
|
|
||||||
console.log(`已导入当前配置为默认供应商，配置文件：settings-default.json`);
|
console.log(`已导入当前配置为默认供应商，配置文件：settings-default.json`);
|
||||||
return { success: true, provider };
|
return { success: true, provider };
|
||||||
} catch (error: any) {
|
} catch (error) {
|
||||||
console.error("导入默认配置失败:", error);
|
console.error("导入默认配置失败:", error);
|
||||||
return { success: false };
|
return { success: false };
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -41,8 +41,8 @@ export class SimpleStore {
|
|||||||
return value !== undefined ? value : (defaultValue as T)
|
return value !== undefined ? value : (defaultValue as T)
|
||||||
}
|
}
|
||||||
|
|
||||||
async set<T>(key: keyof AppConfig, value: T): Promise<void> {
|
async set<K extends keyof AppConfig>(key: K, value: AppConfig[K]): Promise<void> {
|
||||||
this.data[key] = value as any
|
this.data[key] = value
|
||||||
await this.saveData()
|
await this.saveData()
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@@ -1,8 +1,6 @@
|
|||||||
import React, { useState } from "react";
|
import React from "react";
|
||||||
import { Provider } from "../../shared/types";
|
import { Provider } from "../../shared/types";
|
||||||
import { updateCoAuthoredSetting, checkCoAuthoredSetting, extractWebsiteUrl } from "../utils/providerConfigUtils";
|
import ProviderForm from "./ProviderForm";
|
||||||
import { providerPresets } from "../config/providerPresets";
|
|
||||||
import "./AddProviderModal.css";
|
|
||||||
|
|
||||||
interface AddProviderModalProps {
|
interface AddProviderModalProps {
|
||||||
onAdd: (provider: Omit<Provider, "id">) => void;
|
onAdd: (provider: Omit<Provider, "id">) => void;
|
||||||
@@ -13,192 +11,14 @@ const AddProviderModal: React.FC<AddProviderModalProps> = ({
|
|||||||
onAdd,
|
onAdd,
|
||||||
onClose,
|
onClose,
|
||||||
}) => {
|
}) => {
|
||||||
const [formData, setFormData] = useState({
|
|
||||||
name: "",
|
|
||||||
websiteUrl: "",
|
|
||||||
settingsConfig: ""
|
|
||||||
});
|
|
||||||
const [error, setError] = useState("");
|
|
||||||
const [disableCoAuthored, setDisableCoAuthored] = useState(false);
|
|
||||||
|
|
||||||
// 预设的供应商配置模板
|
|
||||||
const presets = providerPresets;
|
|
||||||
|
|
||||||
const handleSubmit = (e: React.FormEvent) => {
|
|
||||||
e.preventDefault();
|
|
||||||
setError("");
|
|
||||||
|
|
||||||
if (!formData.name) {
|
|
||||||
setError("请填写供应商名称");
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
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 | HTMLTextAreaElement>
|
|
||||||
) => {
|
|
||||||
const { name, value } = e.target;
|
|
||||||
|
|
||||||
if (name === 'settingsConfig') {
|
|
||||||
// 当用户修改配置时，尝试自动提取官网地址
|
|
||||||
const extractedWebsiteUrl = extractWebsiteUrl(value);
|
|
||||||
|
|
||||||
// 同时检查并同步选择框状态
|
|
||||||
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);
|
|
||||||
|
|
||||||
// 更新JSON配置
|
|
||||||
const updatedConfig = updateCoAuthoredSetting(formData.settingsConfig, checked);
|
|
||||||
setFormData({
|
|
||||||
...formData,
|
|
||||||
settingsConfig: updatedConfig,
|
|
||||||
});
|
|
||||||
};
|
|
||||||
|
|
||||||
const applyPreset = (preset: typeof presets[0]) => {
|
|
||||||
const configString = JSON.stringify(preset.settingsConfig, null, 2);
|
|
||||||
|
|
||||||
setFormData({
|
|
||||||
name: preset.name,
|
|
||||||
websiteUrl: preset.websiteUrl,
|
|
||||||
settingsConfig: configString
|
|
||||||
});
|
|
||||||
|
|
||||||
// 同步选择框状态
|
|
||||||
const hasCoAuthoredDisabled = checkCoAuthoredSetting(configString);
|
|
||||||
setDisableCoAuthored(hasCoAuthoredDisabled);
|
|
||||||
};
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="modal-overlay">
|
<ProviderForm
|
||||||
<div className="modal-content">
|
title="添加新供应商"
|
||||||
<h2>添加新供应商</h2>
|
submitText="添加"
|
||||||
|
showPresets={true}
|
||||||
{error && <div className="error-message">{error}</div>}
|
onSubmit={onAdd}
|
||||||
|
onClose={onClose}
|
||||||
<div className="presets">
|
/>
|
||||||
<label>快速选择模板：</label>
|
|
||||||
<div className="preset-buttons">
|
|
||||||
{presets.map((preset, index) => (
|
|
||||||
<button
|
|
||||||
key={index}
|
|
||||||
type="button"
|
|
||||||
className="preset-btn"
|
|
||||||
onClick={() => applyPreset(preset)}
|
|
||||||
>
|
|
||||||
{preset.name}
|
|
||||||
</button>
|
|
||||||
))}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<form onSubmit={handleSubmit}>
|
|
||||||
<div className="form-group">
|
|
||||||
<label htmlFor="name">供应商名称 *</label>
|
|
||||||
<input
|
|
||||||
type="text"
|
|
||||||
id="name"
|
|
||||||
name="name"
|
|
||||||
value={formData.name}
|
|
||||||
onChange={handleChange}
|
|
||||||
placeholder="例如：Anthropic 官方"
|
|
||||||
required
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="form-group">
|
|
||||||
<label htmlFor="websiteUrl">官网地址</label>
|
|
||||||
<input
|
|
||||||
type="url"
|
|
||||||
id="websiteUrl"
|
|
||||||
name="websiteUrl"
|
|
||||||
value={formData.websiteUrl}
|
|
||||||
onChange={handleChange}
|
|
||||||
placeholder="https://example.com（可选）"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="form-group">
|
|
||||||
<div className="label-with-checkbox">
|
|
||||||
<label htmlFor="settingsConfig">Claude Code 配置 (JSON) *</label>
|
|
||||||
<label className="checkbox-label">
|
|
||||||
<input
|
|
||||||
type="checkbox"
|
|
||||||
checked={disableCoAuthored}
|
|
||||||
onChange={(e) => handleCoAuthoredToggle(e.target.checked)}
|
|
||||||
/>
|
|
||||||
禁止 Claude Code 签名
|
|
||||||
</label>
|
|
||||||
</div>
|
|
||||||
<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">
|
|
||||||
<button type="button" className="cancel-btn" onClick={onClose}>
|
|
||||||
取消
|
|
||||||
</button>
|
|
||||||
<button type="submit" className="submit-btn">
|
|
||||||
添加
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</form>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|||||||
@@ -1,7 +1,6 @@
|
|||||||
import React, { useState, useEffect } from 'react'
|
import React from 'react'
|
||||||
import { Provider } from '../../shared/types'
|
import { Provider } from '../../shared/types'
|
||||||
import { updateCoAuthoredSetting, checkCoAuthoredSetting, extractWebsiteUrl } from '../utils/providerConfigUtils'
|
import ProviderForm from './ProviderForm'
|
||||||
import './AddProviderModal.css'
|
|
||||||
|
|
||||||
interface EditProviderModalProps {
|
interface EditProviderModalProps {
|
||||||
provider: Provider
|
provider: Provider
|
||||||
@@ -10,178 +9,22 @@ interface EditProviderModalProps {
|
|||||||
}
|
}
|
||||||
|
|
||||||
const EditProviderModal: React.FC<EditProviderModalProps> = ({ provider, onSave, onClose }) => {
|
const EditProviderModal: React.FC<EditProviderModalProps> = ({ provider, onSave, onClose }) => {
|
||||||
const [formData, setFormData] = useState({
|
const handleSubmit = (data: Omit<Provider, 'id'>) => {
|
||||||
name: provider.name,
|
|
||||||
websiteUrl: provider.websiteUrl || '',
|
|
||||||
settingsConfig: JSON.stringify(provider.settingsConfig, null, 2)
|
|
||||||
})
|
|
||||||
const [error, setError] = useState('')
|
|
||||||
const [disableCoAuthored, setDisableCoAuthored] = useState(false)
|
|
||||||
|
|
||||||
// 初始化时更新表单数据
|
|
||||||
useEffect(() => {
|
|
||||||
const configString = JSON.stringify(provider.settingsConfig, null, 2)
|
|
||||||
setFormData({
|
|
||||||
name: provider.name,
|
|
||||||
websiteUrl: provider.websiteUrl || '',
|
|
||||||
settingsConfig: configString
|
|
||||||
})
|
|
||||||
|
|
||||||
// 同步选择框状态
|
|
||||||
const hasCoAuthoredDisabled = checkCoAuthoredSetting(configString)
|
|
||||||
setDisableCoAuthored(hasCoAuthoredDisabled)
|
|
||||||
}, [provider])
|
|
||||||
|
|
||||||
const handleSubmit = (e: React.FormEvent) => {
|
|
||||||
e.preventDefault()
|
|
||||||
setError('')
|
|
||||||
|
|
||||||
if (!formData.name) {
|
|
||||||
setError('请填写供应商名称')
|
|
||||||
return
|
|
||||||
}
|
|
||||||
|
|
||||||
if (!formData.settingsConfig.trim()) {
|
|
||||||
setError('请填写配置内容')
|
|
||||||
return
|
|
||||||
}
|
|
||||||
|
|
||||||
let settingsConfig: object
|
|
||||||
|
|
||||||
try {
|
|
||||||
settingsConfig = JSON.parse(formData.settingsConfig)
|
|
||||||
} catch (err) {
|
|
||||||
setError('配置JSON格式错误，请检查语法')
|
|
||||||
return
|
|
||||||
}
|
|
||||||
|
|
||||||
onSave({
|
onSave({
|
||||||
...provider,
|
...provider,
|
||||||
name: formData.name,
|
...data
|
||||||
websiteUrl: formData.websiteUrl,
|
|
||||||
settingsConfig,
|
|
||||||
})
|
|
||||||
}
|
|
||||||
|
|
||||||
const handleChange = (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
|
|
||||||
const { name, value } = e.target
|
|
||||||
|
|
||||||
if (name === 'settingsConfig') {
|
|
||||||
// 当用户修改配置时，尝试自动提取官网地址
|
|
||||||
const extractedWebsiteUrl = extractWebsiteUrl(value)
|
|
||||||
|
|
||||||
// 同时检查并同步选择框状态
|
|
||||||
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)
|
|
||||||
|
|
||||||
// 更新JSON配置
|
|
||||||
const updatedConfig = updateCoAuthoredSetting(formData.settingsConfig, checked)
|
|
||||||
setFormData({
|
|
||||||
...formData,
|
|
||||||
settingsConfig: updatedConfig,
|
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="modal-overlay">
|
<ProviderForm
|
||||||
<div className="modal-content">
|
title="编辑供应商"
|
||||||
<h2>编辑供应商</h2>
|
submitText="保存"
|
||||||
|
initialData={provider}
|
||||||
{error && (
|
showPresets={false}
|
||||||
<div className="error-message">
|
onSubmit={handleSubmit}
|
||||||
{error}
|
onClose={onClose}
|
||||||
</div>
|
/>
|
||||||
)}
|
|
||||||
|
|
||||||
<form onSubmit={handleSubmit}>
|
|
||||||
<div className="form-group">
|
|
||||||
<label htmlFor="name">供应商名称 *</label>
|
|
||||||
<input
|
|
||||||
type="text"
|
|
||||||
id="name"
|
|
||||||
name="name"
|
|
||||||
value={formData.name}
|
|
||||||
onChange={handleChange}
|
|
||||||
placeholder="例如：Anthropic 官方"
|
|
||||||
required
|
|
||||||
autoComplete="off"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="form-group">
|
|
||||||
<label htmlFor="websiteUrl">官网地址</label>
|
|
||||||
<input
|
|
||||||
type="url"
|
|
||||||
id="websiteUrl"
|
|
||||||
name="websiteUrl"
|
|
||||||
value={formData.websiteUrl}
|
|
||||||
onChange={handleChange}
|
|
||||||
placeholder="https://example.com（可选）"
|
|
||||||
autoComplete="off"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="form-group">
|
|
||||||
<div className="label-with-checkbox">
|
|
||||||
<label htmlFor="settingsConfig">Claude Code 配置 (JSON) *</label>
|
|
||||||
<label className="checkbox-label">
|
|
||||||
<input
|
|
||||||
type="checkbox"
|
|
||||||
checked={disableCoAuthored}
|
|
||||||
onChange={(e) => handleCoAuthoredToggle(e.target.checked)}
|
|
||||||
/>
|
|
||||||
禁止 Claude Code 签名
|
|
||||||
</label>
|
|
||||||
</div>
|
|
||||||
<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">
|
|
||||||
<button type="button" className="cancel-btn" onClick={onClose}>
|
|
||||||
取消
|
|
||||||
</button>
|
|
||||||
<button type="submit" className="submit-btn">
|
|
||||||
保存
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</form>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
223
src/renderer/components/ProviderForm.tsx
Normal file
223
src/renderer/components/ProviderForm.tsx
Normal file
@@ -0,0 +1,223 @@
|
|||||||
|
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
|
||||||
|
}
|
||||||
|
|
||||||
|
const ProviderForm: React.FC<ProviderFormProps> = ({
|
||||||
|
title,
|
||||||
|
submitText,
|
||||||
|
initialData,
|
||||||
|
showPresets = false,
|
||||||
|
onSubmit,
|
||||||
|
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)
|
||||||
|
|
||||||
|
// 初始化时检查禁用签名状态
|
||||||
|
useEffect(() => {
|
||||||
|
if (initialData) {
|
||||||
|
const configString = JSON.stringify(initialData.settingsConfig, null, 2)
|
||||||
|
const hasCoAuthoredDisabled = checkCoAuthoredSetting(configString)
|
||||||
|
setDisableCoAuthored(hasCoAuthoredDisabled)
|
||||||
|
}
|
||||||
|
}, [initialData])
|
||||||
|
|
||||||
|
const handleSubmit = (e: React.FormEvent) => {
|
||||||
|
e.preventDefault()
|
||||||
|
setError('')
|
||||||
|
|
||||||
|
if (!formData.name) {
|
||||||
|
setError('请填写供应商名称')
|
||||||
|
return
|
||||||
|
}
|
||||||
|
|
||||||
|
if (!formData.settingsConfig.trim()) {
|
||||||
|
setError('请填写配置内容')
|
||||||
|
return
|
||||||
|
}
|
||||||
|
|
||||||
|
let settingsConfig: Record<string, any>
|
||||||
|
|
||||||
|
try {
|
||||||
|
settingsConfig = JSON.parse(formData.settingsConfig)
|
||||||
|
} catch (err) {
|
||||||
|
setError('配置JSON格式错误，请检查语法')
|
||||||
|
return
|
||||||
|
}
|
||||||
|
|
||||||
|
onSubmit({
|
||||||
|
name: formData.name,
|
||||||
|
websiteUrl: formData.websiteUrl,
|
||||||
|
settingsConfig
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
const handleChange = (
|
||||||
|
e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>
|
||||||
|
) => {
|
||||||
|
const { name, value } = e.target
|
||||||
|
|
||||||
|
if (name === 'settingsConfig') {
|
||||||
|
// 当用户修改配置时，尝试自动提取官网地址
|
||||||
|
const extractedWebsiteUrl = extractWebsiteUrl(value)
|
||||||
|
|
||||||
|
// 同时检查并同步选择框状态
|
||||||
|
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)
|
||||||
|
|
||||||
|
// 更新JSON配置
|
||||||
|
const updatedConfig = updateCoAuthoredSetting(formData.settingsConfig, checked)
|
||||||
|
setFormData({
|
||||||
|
...formData,
|
||||||
|
settingsConfig: updatedConfig,
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
const applyPreset = (preset: typeof providerPresets[0]) => {
|
||||||
|
const configString = JSON.stringify(preset.settingsConfig, null, 2)
|
||||||
|
|
||||||
|
setFormData({
|
||||||
|
name: preset.name,
|
||||||
|
websiteUrl: preset.websiteUrl,
|
||||||
|
settingsConfig: configString
|
||||||
|
})
|
||||||
|
|
||||||
|
// 同步选择框状态
|
||||||
|
const hasCoAuthoredDisabled = checkCoAuthoredSetting(configString)
|
||||||
|
setDisableCoAuthored(hasCoAuthoredDisabled)
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="modal-overlay">
|
||||||
|
<div className="modal-content">
|
||||||
|
<h2>{title}</h2>
|
||||||
|
|
||||||
|
{error && <div className="error-message">{error}</div>}
|
||||||
|
|
||||||
|
{showPresets && (
|
||||||
|
<div className="presets">
|
||||||
|
<label>快速选择模板：</label>
|
||||||
|
<div className="preset-buttons">
|
||||||
|
{providerPresets.map((preset, index) => (
|
||||||
|
<button
|
||||||
|
key={index}
|
||||||
|
type="button"
|
||||||
|
className="preset-btn"
|
||||||
|
onClick={() => applyPreset(preset)}
|
||||||
|
>
|
||||||
|
{preset.name}
|
||||||
|
</button>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
<form onSubmit={handleSubmit}>
|
||||||
|
<div className="form-group">
|
||||||
|
<label htmlFor="name">供应商名称 *</label>
|
||||||
|
<input
|
||||||
|
type="text"
|
||||||
|
id="name"
|
||||||
|
name="name"
|
||||||
|
value={formData.name}
|
||||||
|
onChange={handleChange}
|
||||||
|
placeholder="例如：Anthropic 官方"
|
||||||
|
required
|
||||||
|
autoComplete="off"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="form-group">
|
||||||
|
<label htmlFor="websiteUrl">官网地址</label>
|
||||||
|
<input
|
||||||
|
type="url"
|
||||||
|
id="websiteUrl"
|
||||||
|
name="websiteUrl"
|
||||||
|
value={formData.websiteUrl}
|
||||||
|
onChange={handleChange}
|
||||||
|
placeholder="https://example.com（可选）"
|
||||||
|
autoComplete="off"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="form-group">
|
||||||
|
<div className="label-with-checkbox">
|
||||||
|
<label htmlFor="settingsConfig">Claude Code 配置 (JSON) *</label>
|
||||||
|
<label className="checkbox-label">
|
||||||
|
<input
|
||||||
|
type="checkbox"
|
||||||
|
checked={disableCoAuthored}
|
||||||
|
onChange={(e) => handleCoAuthoredToggle(e.target.checked)}
|
||||||
|
/>
|
||||||
|
禁止 Claude Code 签名
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
|
<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">
|
||||||
|
<button type="button" className="cancel-btn" onClick={onClose}>
|
||||||
|
取消
|
||||||
|
</button>
|
||||||
|
<button type="submit" className="submit-btn">
|
||||||
|
{submitText}
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
export default ProviderForm
|
||||||
@@ -20,7 +20,7 @@ const ProviderList: React.FC<ProviderListProps> = ({
|
|||||||
// 提取API地址
|
// 提取API地址
|
||||||
const getApiUrl = (provider: Provider): string => {
|
const getApiUrl = (provider: Provider): string => {
|
||||||
try {
|
try {
|
||||||
const config = provider.settingsConfig as any
|
const config = provider.settingsConfig
|
||||||
if (config?.env?.ANTHROPIC_BASE_URL) {
|
if (config?.env?.ANTHROPIC_BASE_URL) {
|
||||||
return config.env.ANTHROPIC_BASE_URL
|
return config.env.ANTHROPIC_BASE_URL
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1,7 +1,7 @@
|
|||||||
export interface Provider {
|
export interface Provider {
|
||||||
id: string
|
id: string
|
||||||
name: string
|
name: string
|
||||||
settingsConfig: object // 完整的Claude Code settings.json配置
|
settingsConfig: Record<string, any> // 完整的Claude Code settings.json配置
|
||||||
websiteUrl?: string
|
websiteUrl?: string
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
Reference in New Issue
Block a user