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

代码重构：移除 any 类型并抽取共享表单组件

Browse Source 
- 移除所有 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
2025-08-08 15:03:38 +08:00
parent fe71373e7d
commit 482298411a
8 changed files with 250 additions and 364 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/main/index.ts
View File

@@ -223,7 +223,7 @@ ipcMain.handle("importCurrentConfigAsDefault", async () => {
}
return result;
} catch (error: any) {
} catch (error) {
console.error("导入默认配置失败:", error);
return { success: false };
}

2
src/main/services.ts
View File

@@ -159,7 +159,7 @@ export async function importCurrentConfigAsDefault(): Promise<{ success: boolean
console.log(`已导入当前配置为默认供应商，配置文件：settings-default.json`);
return { success: true, provider };
} catch (error: any) {
} catch (error) {
console.error("导入默认配置失败:", error);
return { success: false };
}

4
src/main/store.ts
View File

@@ -41,8 +41,8 @@ export class SimpleStore {
return value !== undefined ? value : (defaultValue as T)
}
async set<T>(key: keyof AppConfig, value: T): Promise<void> {
this.data[key] = value as any
async set<K extends keyof AppConfig>(key: K, value: AppConfig[K]): Promise<void> {
this.data[key] = value
await this.saveData()
}

198
src/renderer/components/AddProviderModal.tsx
View File

@@ -1,8 +1,6 @@
import React, { useState } from "react";
import React from "react";
import { Provider } from "../../shared/types";
import { updateCoAuthoredSetting, checkCoAuthoredSetting, extractWebsiteUrl } from "../utils/providerConfigUtils";
import { providerPresets } from "../config/providerPresets";
import "./AddProviderModal.css";
import ProviderForm from "./ProviderForm";
interface AddProviderModalProps {
onAdd: (provider: Omit<Provider, "id">) => void;
@@ -13,192 +11,14 @@ const AddProviderModal: React.FC<AddProviderModalProps> = ({
onAdd,
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 (
<div className="modal-overlay">
<div className="modal-content">
<h2>添加新供应商</h2>
{error && <div className="error-message">{error}</div>}
<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>
<ProviderForm
title="添加新供应商"
submitText="添加"
showPresets={true}
onSubmit={onAdd}
onClose={onClose}
/>
);
};

181
src/renderer/components/EditProviderModal.tsx
View File

@@ -1,7 +1,6 @@
import React, { useState, useEffect } from 'react'
import React from 'react'
import { Provider } from '../../shared/types'
import { updateCoAuthoredSetting, checkCoAuthoredSetting, extractWebsiteUrl } from '../utils/providerConfigUtils'
import './AddProviderModal.css'
import ProviderForm from './ProviderForm'
interface EditProviderModalProps {
provider: Provider
@@ -10,178 +9,22 @@ interface EditProviderModalProps {
}
const EditProviderModal: React.FC<EditProviderModalProps> = ({ provider, onSave, onClose }) => {
const [formData, setFormData] = useState({
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
}
const handleSubmit = (data: Omit<Provider, 'id'>) => {
onSave({
...provider,
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,
...data
})
}
return (
<div className="modal-overlay">
<div className="modal-content">
<h2>编辑供应商</h2>
{error && (
<div className="error-message">
{error}
</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>
<ProviderForm
title="编辑供应商"
submitText="保存"
initialData={provider}
showPresets={false}
onSubmit={handleSubmit}
onClose={onClose}
/>
)
}

223
src/renderer/components/ProviderForm.tsx Normal file
View 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

2
src/renderer/components/ProviderList.tsx
View File

@@ -20,7 +20,7 @@ const ProviderList: React.FC<ProviderListProps> = ({
// 提取API地址
const getApiUrl = (provider: Provider): string => {
try {
const config = provider.settingsConfig as any
const config = provider.settingsConfig
if (config?.env?.ANTHROPIC_BASE_URL) {
return config.env.ANTHROPIC_BASE_URL
}

2
src/shared/types.ts
View File

@@ -1,7 +1,7 @@
export interface Provider {
id: string
name: string
settingsConfig: object // 完整的Claude Code settings.json配置
settingsConfig: Record<string, any> // 完整的Claude Code settings.json配置
websiteUrl?: string
}