feat: 添加 API Key 快速输入功能

- 选择预设模板后自动显示 API Key 输入框
- 输入 API Key 后自动更新 JSON 配置
- 简化用户配置流程，无需手动编辑 JSON
- 优化交互体验，API Key 输入框位于供应商名称下方

src/renderer/components/ProviderForm.tsx

@@ -1,16 +1,20 @@
-import React, { useState, useEffect } from 'react'
+import React, { useState, useEffect } from "react";
-import { Provider } from '../../shared/types'
+import { Provider } from "../../shared/types";
-import { updateCoAuthoredSetting, checkCoAuthoredSetting, extractWebsiteUrl } from '../utils/providerConfigUtils'
+import {
-import { providerPresets } from '../config/providerPresets'
+  updateCoAuthoredSetting,
-import './AddProviderModal.css'
+  checkCoAuthoredSetting,
+  extractWebsiteUrl,
+} from "../utils/providerConfigUtils";
+import { providerPresets } from "../config/providerPresets";
+import "./AddProviderModal.css";
 
 interface ProviderFormProps {
-  title: string
+  title: string;
-  submitText: string
+  submitText: string;
-  initialData?: Provider
+  initialData?: Provider;
-  showPresets?: boolean
+  showPresets?: boolean;
-  onSubmit: (data: Omit<Provider, 'id'>) => void
+  onSubmit: (data: Omit<Provider, "id">) => void;
-  onClose: () => void
+  onClose: () => void;
 }
 
 const ProviderForm: React.FC<ProviderFormProps> = ({
@@ -19,111 +23,148 @@ const ProviderForm: React.FC<ProviderFormProps> = ({
   initialData,
   showPresets = false,
   onSubmit,
-  onClose
+  onClose,
 }) => {
   const [formData, setFormData] = useState({
-    name: initialData?.name || '',
+    name: initialData?.name || "",
-    websiteUrl: initialData?.websiteUrl || '',
+    websiteUrl: initialData?.websiteUrl || "",
-    settingsConfig: initialData ? JSON.stringify(initialData.settingsConfig, null, 2) : ''
+    settingsConfig: initialData
-  })
+      ? JSON.stringify(initialData.settingsConfig, null, 2)
-  const [error, setError] = useState('')
+      : "",
-  const [disableCoAuthored, setDisableCoAuthored] = useState(false)
+  });
-  const [selectedPreset, setSelectedPreset] = useState<number | null>(null)
+  const [error, setError] = useState("");
+  const [disableCoAuthored, setDisableCoAuthored] = useState(false);
+  const [selectedPreset, setSelectedPreset] = useState<number | null>(null);
+  const [apiKey, setApiKey] = useState("");
 
   // 初始化时检查禁用签名状态
   useEffect(() => {
     if (initialData) {
-      const configString = JSON.stringify(initialData.settingsConfig, null, 2)
+      const configString = JSON.stringify(initialData.settingsConfig, null, 2);
-      const hasCoAuthoredDisabled = checkCoAuthoredSetting(configString)
+      const hasCoAuthoredDisabled = checkCoAuthoredSetting(configString);
-      setDisableCoAuthored(hasCoAuthoredDisabled)
+      setDisableCoAuthored(hasCoAuthoredDisabled);
     }
-  }, [initialData])
+  }, [initialData]);
 
   const handleSubmit = (e: React.FormEvent) => {
-    e.preventDefault()
+    e.preventDefault();
-    setError('')
+    setError("");
 
     if (!formData.name) {
-      setError('请填写供应商名称')
+      setError("请填写供应商名称");
-      return
+      return;
     }
 
     if (!formData.settingsConfig.trim()) {
-      setError('请填写配置内容')
+      setError("请填写配置内容");
-      return
+      return;
     }
 
-    let settingsConfig: Record<string, any>
+    let settingsConfig: Record<string, any>;
-    
+
     try {
-      settingsConfig = JSON.parse(formData.settingsConfig)
+      settingsConfig = JSON.parse(formData.settingsConfig);
     } catch (err) {
-      setError('配置JSON格式错误，请检查语法')
+      setError("配置JSON格式错误，请检查语法");
-      return
+      return;
     }
 
     onSubmit({
       name: formData.name,
       websiteUrl: formData.websiteUrl,
-      settingsConfig
+      settingsConfig,
-    })
+    });
-  }
+  };
 
   const handleChange = (
     e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>
   ) => {
-    const { name, value } = e.target
+    const { name, value } = e.target;
-    
+
-    if (name === 'settingsConfig') {
+    if (name === "settingsConfig") {
       // 当用户修改配置时，尝试自动提取官网地址
-      const extractedWebsiteUrl = extractWebsiteUrl(value)
+      const extractedWebsiteUrl = extractWebsiteUrl(value);
-      
+
       // 同时检查并同步选择框状态
-      const hasCoAuthoredDisabled = checkCoAuthoredSetting(value)
+      const hasCoAuthoredDisabled = checkCoAuthoredSetting(value);
-      setDisableCoAuthored(hasCoAuthoredDisabled)
+      setDisableCoAuthored(hasCoAuthoredDisabled);
-      
+
       setFormData({
         ...formData,
         [name]: value,
         // 只有在官网地址为空时才自动填入
         websiteUrl: formData.websiteUrl || extractedWebsiteUrl,
-      })
+      });
     } else {
       setFormData({
         ...formData,
         [name]: value,
-      })
+      });
     }
-  }
+  };
 
   // 处理选择框变化
   const handleCoAuthoredToggle = (checked: boolean) => {
-    setDisableCoAuthored(checked)
+    setDisableCoAuthored(checked);
-    
+
     // 更新JSON配置
-    const updatedConfig = updateCoAuthoredSetting(formData.settingsConfig, checked)
+    const updatedConfig = updateCoAuthoredSetting(
+      formData.settingsConfig,
+      checked
+    );
     setFormData({
       ...formData,
       settingsConfig: updatedConfig,
-    })
+    });
-  }
+  };
+
+  const applyPreset = (preset: (typeof providerPresets)[0], index: number) => {
+    const configString = JSON.stringify(preset.settingsConfig, null, 2);
 
-  const applyPreset = (preset: typeof providerPresets[0], index: number) => {
-    const configString = JSON.stringify(preset.settingsConfig, null, 2)
-    
     setFormData({
       name: preset.name,
       websiteUrl: preset.websiteUrl,
-      settingsConfig: configString
+      settingsConfig: configString,
-    })
+    });
-    
+
     // 设置选中的预设
-    setSelectedPreset(index)
+    setSelectedPreset(index);
-    
+
+    // 清空 API Key 输入框，让用户重新输入
+    setApiKey("");
+
     // 同步选择框状态
-    const hasCoAuthoredDisabled = checkCoAuthoredSetting(configString)
+    const hasCoAuthoredDisabled = checkCoAuthoredSetting(configString);
-    setDisableCoAuthored(hasCoAuthoredDisabled)
+    setDisableCoAuthored(hasCoAuthoredDisabled);
-  }
+  };
+
+  // 处理 API Key 输入并自动更新配置
+  const handleApiKeyChange = (key: string) => {
+    setApiKey(key);
+
+    if (selectedPreset !== null && key.trim()) {
+      // 获取当前选中的预设配置
+      const preset = providerPresets[selectedPreset];
+      const updatedConfig = JSON.parse(JSON.stringify(preset.settingsConfig));
+
+      // 替换配置中的 API Key
+      if (updatedConfig.env && updatedConfig.env.ANTHROPIC_AUTH_TOKEN) {
+        updatedConfig.env.ANTHROPIC_AUTH_TOKEN = key.trim();
+      }
+
+      const configString = JSON.stringify(updatedConfig, null, 2);
+
+      // 更新表单配置
+      setFormData((prev) => ({
+        ...prev,
+        settingsConfig: configString,
+      }));
+
+      // 同步选择框状态
+      const hasCoAuthoredDisabled = checkCoAuthoredSetting(configString);
+      setDisableCoAuthored(hasCoAuthoredDisabled);
+    }
+  };
 
   return (
     <div className="modal-overlay">
@@ -140,7 +181,9 @@ const ProviderForm: React.FC<ProviderFormProps> = ({
                 <button
                   key={index}
                   type="button"
-                  className={`preset-btn ${selectedPreset === index ? 'selected' : ''}`}
+                  className={`preset-btn ${
+                    selectedPreset === index ? "selected" : ""
+                  }`}
                   onClick={() => applyPreset(preset, index)}
                 >
                   {preset.name}
@@ -165,6 +208,20 @@ const ProviderForm: React.FC<ProviderFormProps> = ({
             />
           </div>
 
+          {selectedPreset !== null && (
+            <div className="form-group">
+              <label htmlFor="apiKey">API Key *</label>
+              <input
+                type="text"
+                id="apiKey"
+                value={apiKey}
+                onChange={(e) => handleApiKeyChange(e.target.value)}
+                placeholder="只需要填这里，下方配置会自动填充"
+                autoComplete="off"
+              />
+            </div>
+          )}
+
           <div className="form-group">
             <label htmlFor="websiteUrl">官网地址</label>
             <input
@@ -202,7 +259,7 @@ const ProviderForm: React.FC<ProviderFormProps> = ({
   }
 }`}
               rows={12}
-              style={{fontFamily: 'monospace', fontSize: '14px'}}
+              style={{ fontFamily: "monospace", fontSize: "14px" }}
               required
             />
             <small className="field-hint">
@@ -221,7 +278,7 @@ const ProviderForm: React.FC<ProviderFormProps> = ({
         </form>
       </div>
     </div>
-  )
+  );
-}
+};
 
-export default ProviderForm
+export default ProviderForm;