重大重构：从字段替换切换到完整配置文件切换系统
- 实现基于文件重命名的供应商切换机制，支持完整settings.json配置切换 - 移除所有向后兼容代码，简化为纯JSON配置模式 - 添加导入当前配置功能，解决首次使用时配置丢失问题 - 移除描述字段，简化用户界面 - 完整的错误处理和回滚机制确保配置安全 - 清理所有调试代码，优化代码质量
This commit is contained in:
farion1231
@@ -1,7 +1,14 @@
|
||||
import { app, BrowserWindow, ipcMain, dialog, shell } from 'electron'
|
||||
import path from 'path'
|
||||
import { Provider } from '../shared/types'
|
||||
import { switchProvider, getClaudeCodeConfig } from './services'
|
||||
import {
|
||||
switchProvider,
|
||||
getClaudeCodeConfig,
|
||||
saveProviderConfig,
|
||||
deleteProviderConfig,
|
||||
sanitizeProviderName,
|
||||
importCurrentConfig
|
||||
} from './services'
|
||||
import { store } from './store'
|
||||
|
||||
let mainWindow: BrowserWindow | null = null
|
||||
@@ -57,49 +64,136 @@ ipcMain.handle('getCurrentProvider', () => {
|
||||
})
|
||||
|
||||
ipcMain.handle('addProvider', async (_, provider: Provider) => {
|
||||
const providers = store.get('providers', {} as Record<string, Provider>)
|
||||
providers[provider.id] = provider
|
||||
await store.set('providers', providers)
|
||||
return true
|
||||
try {
|
||||
// 1. 保存供应商配置到独立文件
|
||||
const saveSuccess = await saveProviderConfig(provider)
|
||||
if (!saveSuccess) {
|
||||
return false
|
||||
}
|
||||
|
||||
// 2. 更新应用配置
|
||||
const providers = store.get('providers', {} as Record<string, Provider>)
|
||||
providers[provider.id] = {
|
||||
...provider,
|
||||
createdAt: Date.now(),
|
||||
updatedAt: Date.now()
|
||||
}
|
||||
await store.set('providers', providers)
|
||||
|
||||
return true
|
||||
} catch (error) {
|
||||
console.error('添加供应商失败:', error)
|
||||
return false
|
||||
}
|
||||
})
|
||||
|
||||
ipcMain.handle('deleteProvider', async (_, id: string) => {
|
||||
const providers = store.get('providers', {} as Record<string, Provider>)
|
||||
delete providers[id]
|
||||
await store.set('providers', providers)
|
||||
return true
|
||||
try {
|
||||
// 1. 删除供应商配置文件
|
||||
const deleteSuccess = await deleteProviderConfig(id)
|
||||
if (!deleteSuccess) {
|
||||
console.error('删除供应商配置文件失败')
|
||||
// 仍然继续删除应用配置，避免配置不同步
|
||||
}
|
||||
|
||||
// 2. 更新应用配置
|
||||
const providers = store.get('providers', {} as Record<string, Provider>)
|
||||
delete providers[id]
|
||||
await store.set('providers', providers)
|
||||
|
||||
// 3. 如果删除的是当前供应商，清空当前选择
|
||||
const currentProviderId = store.get('current', '')
|
||||
if (currentProviderId === id) {
|
||||
await store.set('current', '')
|
||||
}
|
||||
|
||||
return true
|
||||
} catch (error) {
|
||||
console.error('删除供应商失败:', error)
|
||||
return false
|
||||
}
|
||||
})
|
||||
|
||||
ipcMain.handle('updateProvider', async (_, provider: Provider) => {
|
||||
const providers = store.get('providers', {} as Record<string, Provider>)
|
||||
const currentProviderId = store.get('current', '')
|
||||
|
||||
providers[provider.id] = provider
|
||||
await store.set('providers', providers)
|
||||
|
||||
// 如果编辑的是当前激活的供应商，同时更新Claude Code配置
|
||||
if (provider.id === currentProviderId) {
|
||||
const success = await switchProvider(provider)
|
||||
if (!success) {
|
||||
console.error('更新当前供应商的Claude Code配置失败')
|
||||
try {
|
||||
const providers = store.get('providers', {} as Record<string, Provider>)
|
||||
const currentProviderId = store.get('current', '')
|
||||
|
||||
// 1. 保存更新后的配置到文件
|
||||
const saveSuccess = await saveProviderConfig({
|
||||
...provider,
|
||||
updatedAt: Date.now()
|
||||
})
|
||||
if (!saveSuccess) {
|
||||
return false
|
||||
}
|
||||
|
||||
// 2. 更新应用配置
|
||||
providers[provider.id] = {
|
||||
...provider,
|
||||
updatedAt: Date.now()
|
||||
}
|
||||
await store.set('providers', providers)
|
||||
|
||||
// 3. 如果编辑的是当前激活的供应商，需要重新切换以应用更改
|
||||
if (provider.id === currentProviderId) {
|
||||
const switchSuccess = await switchProvider(provider, currentProviderId)
|
||||
if (!switchSuccess) {
|
||||
console.error('更新当前供应商的Claude Code配置失败')
|
||||
return false
|
||||
}
|
||||
}
|
||||
|
||||
return true
|
||||
} catch (error) {
|
||||
console.error('更新供应商失败:', error)
|
||||
return false
|
||||
}
|
||||
|
||||
return true
|
||||
})
|
||||
|
||||
ipcMain.handle('switchProvider', async (_, providerId: string) => {
|
||||
const providers = store.get('providers', {} as Record<string, Provider>)
|
||||
const provider = providers[providerId]
|
||||
if (provider) {
|
||||
const success = await switchProvider(provider)
|
||||
try {
|
||||
const providers = store.get('providers', {} as Record<string, Provider>)
|
||||
const provider = providers[providerId]
|
||||
const currentProviderId = store.get('current', '')
|
||||
|
||||
if (!provider) {
|
||||
console.error(`供应商不存在: ${providerId}`)
|
||||
return false
|
||||
}
|
||||
|
||||
// 执行切换
|
||||
const success = await switchProvider(provider, currentProviderId)
|
||||
if (success) {
|
||||
await store.set('current', providerId)
|
||||
console.log(`成功切换到供应商: ${provider.name}`)
|
||||
}
|
||||
|
||||
return success
|
||||
} catch (error) {
|
||||
console.error('切换供应商失败:', error)
|
||||
return false
|
||||
}
|
||||
})
|
||||
|
||||
ipcMain.handle('importCurrentConfig', async (_, name: string) => {
|
||||
try {
|
||||
const result = await importCurrentConfig(name)
|
||||
|
||||
if (result.success && result.provider) {
|
||||
// 将导入的供应商添加到store中
|
||||
const providers = store.get('providers', {} as Record<string, Provider>)
|
||||
providers[result.provider.id] = result.provider
|
||||
await store.set('providers', providers)
|
||||
|
||||
return { success: true, providerId: result.provider.id }
|
||||
}
|
||||
|
||||
return result
|
||||
} catch (error: any) {
|
||||
console.error('导入配置失败:', error)
|
||||
return { success: false }
|
||||
}
|
||||
return false
|
||||
})
|
||||
|
||||
ipcMain.handle('getClaudeCodeConfigPath', () => {
|
||||
|
||||
@@ -8,6 +8,7 @@ contextBridge.exposeInMainWorld('electronAPI', {
|
||||
deleteProvider: (id: string) => ipcRenderer.invoke('deleteProvider', id),
|
||||
updateProvider: (provider: Provider) => ipcRenderer.invoke('updateProvider', provider),
|
||||
switchProvider: (providerId: string) => ipcRenderer.invoke('switchProvider', providerId),
|
||||
importCurrentConfig: (name: string) => ipcRenderer.invoke('importCurrentConfig', name),
|
||||
getClaudeCodeConfigPath: () => ipcRenderer.invoke('getClaudeCodeConfigPath'),
|
||||
selectConfigFile: () => ipcRenderer.invoke('selectConfigFile'),
|
||||
openExternal: (url: string) => ipcRenderer.invoke('openExternal', url)
|
||||
|
||||
@@ -3,13 +3,11 @@ import path from 'path'
|
||||
import os from 'os'
|
||||
import { Provider } from '../shared/types'
|
||||
|
||||
interface ClaudeCodeConfig {
|
||||
env?: {
|
||||
ANTHROPIC_AUTH_TOKEN?: string
|
||||
ANTHROPIC_BASE_URL?: string
|
||||
[key: string]: string | undefined
|
||||
}
|
||||
[key: string]: any
|
||||
/**
|
||||
* 清理供应商名称，确保文件名安全
|
||||
*/
|
||||
export function sanitizeProviderName(name: string): string {
|
||||
return name.replace(/[<>:"/\\|?*]/g, '-').toLowerCase()
|
||||
}
|
||||
|
||||
export function getClaudeCodeConfig() {
|
||||
@@ -20,37 +18,157 @@ export function getClaudeCodeConfig() {
|
||||
return { path: configPath, dir: configDir }
|
||||
}
|
||||
|
||||
export async function switchProvider(provider: Provider): Promise<boolean> {
|
||||
try {
|
||||
const { path: configPath, dir: configDir } = getClaudeCodeConfig()
|
||||
/**
|
||||
* 获取供应商配置文件路径
|
||||
*/
|
||||
export function getProviderConfigPath(providerId: string): string {
|
||||
const { dir } = getClaudeCodeConfig()
|
||||
return path.join(dir, `settings-${sanitizeProviderName(providerId)}.json`)
|
||||
}
|
||||
|
||||
/**
|
||||
* 保存供应商配置到独立文件
|
||||
*/
|
||||
export async function saveProviderConfig(provider: Provider): Promise<boolean> {
|
||||
try {
|
||||
const { dir } = getClaudeCodeConfig()
|
||||
const providerConfigPath = getProviderConfigPath(provider.id)
|
||||
|
||||
// 确保目录存在
|
||||
await fs.mkdir(dir, { recursive: true })
|
||||
|
||||
// 保存配置到供应商专用文件
|
||||
await fs.writeFile(
|
||||
providerConfigPath,
|
||||
JSON.stringify(provider.settingsConfig, null, 2),
|
||||
'utf-8'
|
||||
)
|
||||
|
||||
return true
|
||||
} catch (error) {
|
||||
console.error('保存供应商配置失败:', error)
|
||||
return false
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 检查文件是否存在
|
||||
*/
|
||||
export async function fileExists(filePath: string): Promise<boolean> {
|
||||
try {
|
||||
await fs.access(filePath)
|
||||
return true
|
||||
} catch {
|
||||
return false
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 切换供应商配置（基于文件重命名）
|
||||
*/
|
||||
export async function switchProvider(provider: Provider, currentProviderId?: string): Promise<boolean> {
|
||||
try {
|
||||
const { path: settingsPath, dir: configDir } = getClaudeCodeConfig()
|
||||
const newSettingsPath = getProviderConfigPath(provider.id)
|
||||
|
||||
// 确保目录存在
|
||||
await fs.mkdir(configDir, { recursive: true })
|
||||
|
||||
// 读取现有配置
|
||||
let config: ClaudeCodeConfig = {}
|
||||
try {
|
||||
const content = await fs.readFile(configPath, 'utf-8')
|
||||
config = JSON.parse(content)
|
||||
} catch {
|
||||
// 文件不存在或解析失败，使用空配置
|
||||
|
||||
// 检查目标配置文件是否存在
|
||||
if (!(await fileExists(newSettingsPath))) {
|
||||
console.error(`供应商配置文件不存在: ${newSettingsPath}`)
|
||||
return false
|
||||
}
|
||||
|
||||
// 确保 env 对象存在
|
||||
if (!config.env) {
|
||||
config.env = {}
|
||||
|
||||
// 1. 如果当前存在settings.json，先备份到当前供应商的配置文件
|
||||
if (await fileExists(settingsPath)) {
|
||||
if (currentProviderId) {
|
||||
const currentProviderPath = getProviderConfigPath(currentProviderId)
|
||||
await fs.rename(settingsPath, currentProviderPath)
|
||||
} else {
|
||||
// 如果没有当前供应商ID，创建临时备份
|
||||
const backupPath = path.join(configDir, `settings-backup-${Date.now()}.json`)
|
||||
await fs.rename(settingsPath, backupPath)
|
||||
console.log(`已备份当前配置到: ${backupPath}`)
|
||||
}
|
||||
}
|
||||
|
||||
// 更新环境变量配置
|
||||
config.env.ANTHROPIC_AUTH_TOKEN = provider.apiKey
|
||||
config.env.ANTHROPIC_BASE_URL = provider.apiUrl
|
||||
|
||||
// 写回配置文件
|
||||
await fs.writeFile(configPath, JSON.stringify(config, null, 2))
|
||||
|
||||
|
||||
// 2. 将目标供应商配置重命名为settings.json
|
||||
await fs.rename(newSettingsPath, settingsPath)
|
||||
|
||||
console.log(`成功切换到供应商: ${provider.name}`)
|
||||
return true
|
||||
} catch (error) {
|
||||
console.error('切换供应商失败:', error)
|
||||
return false
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 导入当前 settings.json 配置为一个供应商
|
||||
*/
|
||||
export async function importCurrentConfig(name: string): Promise<{ success: boolean; provider?: Provider }> {
|
||||
try {
|
||||
const { path: settingsPath } = getClaudeCodeConfig()
|
||||
|
||||
// 检查当前配置是否存在
|
||||
if (!(await fileExists(settingsPath))) {
|
||||
return { success: false }
|
||||
}
|
||||
|
||||
// 读取当前配置
|
||||
const configContent = await fs.readFile(settingsPath, 'utf-8')
|
||||
const settingsConfig = JSON.parse(configContent)
|
||||
|
||||
// 生成唯一的供应商ID
|
||||
let providerId = name.toLowerCase().replace(/[^a-z0-9]/g, '-')
|
||||
let counter = 1
|
||||
|
||||
// 检查ID是否已存在，如果存在则添加数字后缀
|
||||
while (await fileExists(getProviderConfigPath(providerId))) {
|
||||
providerId = `${name.toLowerCase().replace(/[^a-z0-9]/g, '-')}-${counter}`
|
||||
counter++
|
||||
}
|
||||
|
||||
// 创建供应商对象
|
||||
const provider: Provider = {
|
||||
id: providerId,
|
||||
name: name,
|
||||
settingsConfig: settingsConfig,
|
||||
createdAt: Date.now(),
|
||||
updatedAt: Date.now()
|
||||
}
|
||||
|
||||
// 保存为供应商配置
|
||||
const success = await saveProviderConfig(provider)
|
||||
|
||||
if (success) {
|
||||
console.log(`已导入当前配置为供应商: ${name} (${providerId})`)
|
||||
return { success: true, provider }
|
||||
} else {
|
||||
return { success: false }
|
||||
}
|
||||
} catch (error: any) {
|
||||
console.error('导入当前配置失败:', error)
|
||||
return { success: false }
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 删除供应商配置文件
|
||||
*/
|
||||
export async function deleteProviderConfig(providerId: string): Promise<boolean> {
|
||||
try {
|
||||
const providerConfigPath = getProviderConfigPath(providerId)
|
||||
|
||||
if (await fileExists(providerConfigPath)) {
|
||||
await fs.unlink(providerConfigPath)
|
||||
console.log(`已删除供应商配置文件: ${providerConfigPath}`)
|
||||
}
|
||||
|
||||
return true
|
||||
} catch (error) {
|
||||
console.error('删除供应商配置失败:', error)
|
||||
return false
|
||||
}
|
||||
}
|
||||
@@ -47,9 +47,24 @@
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.import-btn {
|
||||
background: rgba(255, 255, 255, 0.2);
|
||||
color: white;
|
||||
border: 1px solid rgba(255, 255, 255, 0.3);
|
||||
}
|
||||
|
||||
.import-btn:hover {
|
||||
background: rgba(255, 255, 255, 0.3);
|
||||
}
|
||||
|
||||
.import-btn:focus {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.add-btn {
|
||||
background: #27ae60;
|
||||
color: white;
|
||||
border: none;
|
||||
}
|
||||
|
||||
.add-btn:hover {
|
||||
|
||||
@@ -3,6 +3,7 @@ import { Provider } from "../shared/types";
|
||||
import ProviderList from "./components/ProviderList";
|
||||
import AddProviderModal from "./components/AddProviderModal";
|
||||
import EditProviderModal from "./components/EditProviderModal";
|
||||
import ImportConfigModal from "./components/ImportConfigModal";
|
||||
import { ConfirmDialog } from "./components/ConfirmDialog";
|
||||
import "./App.css";
|
||||
|
||||
@@ -10,6 +11,7 @@ function App() {
|
||||
const [providers, setProviders] = useState<Record<string, Provider>>({});
|
||||
const [currentProviderId, setCurrentProviderId] = useState<string>("");
|
||||
const [isAddModalOpen, setIsAddModalOpen] = useState(false);
|
||||
const [isImportModalOpen, setIsImportModalOpen] = useState(false);
|
||||
const [configPath, setConfigPath] = useState<string>("");
|
||||
const [editingProviderId, setEditingProviderId] = useState<string | null>(
|
||||
null
|
||||
@@ -139,6 +141,23 @@ function App() {
|
||||
}
|
||||
};
|
||||
|
||||
const handleImportCurrentConfig = async (name: string) => {
|
||||
try {
|
||||
const result = await window.electronAPI.importCurrentConfig(name)
|
||||
|
||||
if (result.success) {
|
||||
await loadProviders()
|
||||
setIsImportModalOpen(false)
|
||||
showNotification(`成功导入当前配置为供应商: ${name}`, "success", 3000)
|
||||
} else {
|
||||
showNotification("导入失败，请检查当前是否有有效的配置文件", "error")
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('导入配置失败:', error)
|
||||
showNotification("导入配置时发生错误", "error")
|
||||
}
|
||||
}
|
||||
|
||||
const handleSelectConfigFile = async () => {
|
||||
const selectedPath = await window.electronAPI.selectConfigFile();
|
||||
if (selectedPath) {
|
||||
@@ -151,6 +170,9 @@ function App() {
|
||||
<header className="app-header">
|
||||
<h1>Claude Code 供应商切换器</h1>
|
||||
<div className="header-actions">
|
||||
<button className="import-btn" onClick={() => setIsImportModalOpen(true)}>
|
||||
导入当前配置
|
||||
</button>
|
||||
<button className="add-btn" onClick={() => setIsAddModalOpen(true)}>
|
||||
添加供应商
|
||||
</button>
|
||||
@@ -202,6 +224,13 @@ function App() {
|
||||
/>
|
||||
)}
|
||||
|
||||
{isImportModalOpen && (
|
||||
<ImportConfigModal
|
||||
onImport={handleImportCurrentConfig}
|
||||
onClose={() => setIsImportModalOpen(false)}
|
||||
/>
|
||||
)}
|
||||
|
||||
{editingProviderId && providers[editingProviderId] && (
|
||||
<EditProviderModal
|
||||
provider={providers[editingProviderId]}
|
||||
|
||||
@@ -16,7 +16,7 @@
|
||||
border-radius: 8px;
|
||||
padding: 2rem;
|
||||
width: 90%;
|
||||
max-width: 500px;
|
||||
max-width: 600px;
|
||||
max-height: 90vh;
|
||||
overflow-y: auto;
|
||||
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
|
||||
@@ -55,6 +55,7 @@
|
||||
.preset-buttons {
|
||||
display: flex;
|
||||
gap: 0.5rem;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.preset-btn {
|
||||
@@ -84,7 +85,8 @@
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.form-group input {
|
||||
.form-group input,
|
||||
.form-group textarea {
|
||||
width: 100%;
|
||||
padding: 0.625rem;
|
||||
border: 1px solid #ddd;
|
||||
@@ -92,9 +94,16 @@
|
||||
font-size: 0.95rem;
|
||||
transition: border-color 0.2s;
|
||||
background: white;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.form-group input:focus {
|
||||
.form-group textarea {
|
||||
resize: vertical;
|
||||
min-height: 200px;
|
||||
}
|
||||
|
||||
.form-group input:focus,
|
||||
.form-group textarea:focus {
|
||||
outline: none;
|
||||
border-color: #3498db;
|
||||
}
|
||||
@@ -134,48 +143,6 @@
|
||||
background: #229954;
|
||||
}
|
||||
|
||||
.password-input-wrapper {
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.password-input-wrapper input {
|
||||
padding-right: 2.5rem;
|
||||
}
|
||||
|
||||
.password-toggle {
|
||||
position: absolute;
|
||||
right: 0.5rem;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
padding: 0.375rem;
|
||||
background: none;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
color: #7f8c8d;
|
||||
transition: color 0.2s;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
}
|
||||
|
||||
.password-toggle svg {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
stroke-width: 2;
|
||||
}
|
||||
|
||||
.password-toggle:hover {
|
||||
color: #3498db;
|
||||
}
|
||||
|
||||
.password-toggle:focus {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.field-hint {
|
||||
display: block;
|
||||
margin-top: 0.25rem;
|
||||
|
||||
@@ -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">
|
||||
|
||||
@@ -1,6 +1,5 @@
|
||||
import React, { useState, useEffect } from 'react'
|
||||
import { Provider } from '../../shared/types'
|
||||
import { inferWebsiteUrl } from '../../shared/utils'
|
||||
import './AddProviderModal.css'
|
||||
|
||||
interface EditProviderModalProps {
|
||||
@@ -12,68 +11,58 @@ interface EditProviderModalProps {
|
||||
const EditProviderModal: React.FC<EditProviderModalProps> = ({ provider, onSave, onClose }) => {
|
||||
const [formData, setFormData] = useState({
|
||||
name: provider.name,
|
||||
apiUrl: provider.apiUrl,
|
||||
apiKey: provider.apiKey,
|
||||
websiteUrl: provider.websiteUrl || ''
|
||||
websiteUrl: provider.websiteUrl || '',
|
||||
settingsConfig: JSON.stringify(provider.settingsConfig, null, 2)
|
||||
})
|
||||
const [showPassword, setShowPassword] = useState(false)
|
||||
const [error, setError] = useState('')
|
||||
|
||||
// 初始化时更新表单数据
|
||||
useEffect(() => {
|
||||
setFormData({
|
||||
name: provider.name,
|
||||
apiUrl: provider.apiUrl,
|
||||
apiKey: provider.apiKey,
|
||||
websiteUrl: provider.websiteUrl || ''
|
||||
websiteUrl: provider.websiteUrl || '',
|
||||
settingsConfig: JSON.stringify(provider.settingsConfig, null, 2)
|
||||
})
|
||||
}, [provider.id, provider.name, provider.apiUrl, provider.apiKey, provider.websiteUrl])
|
||||
}, [provider])
|
||||
|
||||
const handleSubmit = (e: React.FormEvent) => {
|
||||
e.preventDefault()
|
||||
setError('')
|
||||
|
||||
if (!formData.name || !formData.apiUrl || !formData.apiKey) {
|
||||
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({
|
||||
...provider,
|
||||
...formData
|
||||
name: formData.name,
|
||||
websiteUrl: formData.websiteUrl,
|
||||
settingsConfig,
|
||||
updatedAt: Date.now()
|
||||
})
|
||||
}
|
||||
|
||||
const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
|
||||
const handleChange = (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)
|
||||
}))
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
return (
|
||||
@@ -96,31 +85,16 @@ const EditProviderModal: React.FC<EditProviderModalProps> = ({ provider, onSave,
|
||||
name="name"
|
||||
value={formData.name}
|
||||
onChange={handleChange}
|
||||
placeholder="例如：官方 Anthropic"
|
||||
placeholder="例如：Anthropic 官方"
|
||||
required
|
||||
autoComplete="off"
|
||||
/>
|
||||
</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
|
||||
autoComplete="off"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="form-group">
|
||||
<label htmlFor="websiteUrl">网站地址</label>
|
||||
<input
|
||||
type="text"
|
||||
id="websiteUrl"
|
||||
name="websiteUrl"
|
||||
value={formData.websiteUrl}
|
||||
@@ -128,42 +102,28 @@ const EditProviderModal: React.FC<EditProviderModalProps> = ({ provider, onSave,
|
||||
placeholder="https://example.com（可选）"
|
||||
autoComplete="off"
|
||||
/>
|
||||
<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 && formData.name.includes('YesCode') ? 'cr_...' : 'sk-...'}
|
||||
required
|
||||
autoComplete="off"
|
||||
/>
|
||||
<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">
|
||||
|
||||
67
src/renderer/components/ImportConfigModal.tsx
Normal file
67
src/renderer/components/ImportConfigModal.tsx
Normal file
@@ -0,0 +1,67 @@
|
||||
import React, { useState } from 'react'
|
||||
import './AddProviderModal.css'
|
||||
|
||||
interface ImportConfigModalProps {
|
||||
onImport: (name: string) => void
|
||||
onClose: () => void
|
||||
}
|
||||
|
||||
const ImportConfigModal: React.FC<ImportConfigModalProps> = ({ onImport, onClose }) => {
|
||||
const [name, setName] = useState('')
|
||||
const [error, setError] = useState('')
|
||||
|
||||
const handleSubmit = (e: React.FormEvent) => {
|
||||
e.preventDefault()
|
||||
setError('')
|
||||
|
||||
if (!name.trim()) {
|
||||
setError('请输入供应商名称')
|
||||
return
|
||||
}
|
||||
|
||||
onImport(name.trim())
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="modal-overlay">
|
||||
<div className="modal-content">
|
||||
<h2>导入当前配置</h2>
|
||||
|
||||
<p style={{marginBottom: '1.5rem', color: '#666', fontSize: '0.9rem'}}>
|
||||
将当前的 <code>~/.claude/settings.json</code> 配置文件导入为一个新的供应商。
|
||||
<br />
|
||||
<strong>注意：</strong>这不会修改您当前的配置文件。
|
||||
</p>
|
||||
|
||||
{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={name}
|
||||
onChange={(e) => setName(e.target.value)}
|
||||
placeholder="例如：我的当前配置"
|
||||
required
|
||||
autoFocus
|
||||
/>
|
||||
</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>
|
||||
)
|
||||
}
|
||||
|
||||
export default ImportConfigModal
|
||||
@@ -17,6 +17,19 @@ const ProviderList: React.FC<ProviderListProps> = ({
|
||||
onDelete,
|
||||
onEdit
|
||||
}) => {
|
||||
// 提取API地址
|
||||
const getApiUrl = (provider: Provider): string => {
|
||||
try {
|
||||
const config = provider.settingsConfig as any
|
||||
if (config?.env?.ANTHROPIC_BASE_URL) {
|
||||
return config.env.ANTHROPIC_BASE_URL
|
||||
}
|
||||
return '未设置'
|
||||
} catch {
|
||||
return '配置错误'
|
||||
}
|
||||
}
|
||||
|
||||
const handleUrlClick = async (url: string) => {
|
||||
try {
|
||||
await window.electronAPI.openExternal(url)
|
||||
@@ -61,8 +74,8 @@ const ProviderList: React.FC<ProviderListProps> = ({
|
||||
{provider.websiteUrl}
|
||||
</a>
|
||||
) : (
|
||||
<span className="api-url" title={provider.apiUrl}>
|
||||
{provider.apiUrl}
|
||||
<span className="api-url" title={getApiUrl(provider)}>
|
||||
{getApiUrl(provider)}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
|
||||
@@ -1,9 +1,10 @@
|
||||
export interface Provider {
|
||||
id: string
|
||||
name: string
|
||||
apiUrl: string
|
||||
apiKey: string
|
||||
settingsConfig: object // 完整的Claude Code settings.json配置
|
||||
websiteUrl?: string
|
||||
createdAt?: number
|
||||
updatedAt?: number
|
||||
}
|
||||
|
||||
export interface AppConfig {
|
||||
@@ -20,6 +21,7 @@ declare global {
|
||||
deleteProvider: (id: string) => Promise<boolean>
|
||||
updateProvider: (provider: Provider) => Promise<boolean>
|
||||
switchProvider: (providerId: string) => Promise<boolean>
|
||||
importCurrentConfig: (name: string) => Promise<{ success: boolean; providerId?: string }>
|
||||
getClaudeCodeConfigPath: () => Promise<string>
|
||||
selectConfigFile: () => Promise<string | null>
|
||||
openExternal: (url: string) => Promise<boolean>
|
||||
|
||||
@@ -1,42 +0,0 @@
|
||||
/**
|
||||
* 从API地址推测对应的网站地址
|
||||
* @param apiUrl API地址
|
||||
* @returns 推测的网站地址，如果无法推测则返回空字符串
|
||||
*/
|
||||
export function inferWebsiteUrl(apiUrl: string): string {
|
||||
if (!apiUrl || !apiUrl.trim()) {
|
||||
return ''
|
||||
}
|
||||
|
||||
let urlString = apiUrl.trim()
|
||||
|
||||
// 如果没有协议，默认添加 https://
|
||||
if (!urlString.match(/^https?:\/\//)) {
|
||||
urlString = 'https://' + urlString
|
||||
}
|
||||
|
||||
try {
|
||||
const url = new URL(urlString)
|
||||
|
||||
// 如果是localhost或IP地址，去掉路径部分
|
||||
if (url.hostname === 'localhost' || /^\d+\.\d+\.\d+\.\d+$/.test(url.hostname)) {
|
||||
return `${url.protocol}//${url.host}`
|
||||
}
|
||||
|
||||
// 处理域名，去掉api前缀
|
||||
let hostname = url.hostname
|
||||
|
||||
// 去掉 api. 前缀
|
||||
if (hostname.startsWith('api.')) {
|
||||
hostname = hostname.substring(4)
|
||||
}
|
||||
|
||||
// 构建推测的网站地址
|
||||
const port = url.port ? `:${url.port}` : ''
|
||||
return `${url.protocol}//${hostname}${port}`
|
||||
|
||||
} catch (error) {
|
||||
// URL解析失败，返回空字符串
|
||||
return ''
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user