重大重构：从字段替换切换到完整配置文件切换系统

- 实现基于文件重命名的供应商切换机制，支持完整settings.json配置切换
- 移除所有向后兼容代码，简化为纯JSON配置模式
- 添加导入当前配置功能，解决首次使用时配置丢失问题
- 移除描述字段，简化用户界面
- 完整的错误处理和回滚机制确保配置安全
- 清理所有调试代码，优化代码质量

src/renderer/components/AddProviderModal.css

@@ -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;

src/renderer/components/AddProviderModal.tsx

@@ -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">

src/renderer/components/EditProviderModal.tsx

@@ -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">

src/renderer/components/ImportConfigModal.tsx

@@ -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

src/renderer/components/ProviderList.tsx

@@ -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>