- feat(form): Support API Key ⇄ JSON two-way binding in edit modal

- feat(utils): Add helpers to read/write/detect API Key in config
- refactor(form): Reuse unified linking logic for preset and edit flows
- chore: Preserve website URL extraction and signature-disable behaviors
- build: Verify renderer build locally

src/components/ProviderForm.tsx

@@ -4,6 +4,9 @@ import {
   updateCoAuthoredSetting,
   checkCoAuthoredSetting,
   extractWebsiteUrl,
+  getApiKeyFromConfig,
+  hasApiKeyField,
+  setApiKeyInConfig,
 } from "../utils/providerConfigUtils";
 import { providerPresets } from "../config/providerPresets";
 import "./AddProviderModal.css";
@@ -89,6 +92,10 @@ const ProviderForm: React.FC<ProviderFormProps> = ({
       const hasCoAuthoredDisabled = checkCoAuthoredSetting(value);
       setDisableCoAuthored(hasCoAuthoredDisabled);
 
+      // 同步 API Key 输入框显示与值
+      const parsedKey = getApiKeyFromConfig(value);
+      setApiKey(parsedKey);
+
       setFormData({
         ...formData,
         [name]: value,
@@ -142,17 +149,11 @@ const ProviderForm: React.FC<ProviderFormProps> = ({
   const handleApiKeyChange = (key: string) => {
     setApiKey(key);
 
-    if (selectedPreset !== null && key.trim()) {
+    const configString = setApiKeyInConfig(
-      // 获取当前选中的预设配置
+      formData.settingsConfig,
-      const preset = providerPresets[selectedPreset];
+      key.trim(),
-      const updatedConfig = JSON.parse(JSON.stringify(preset.settingsConfig));
+      { createIfMissing: selectedPreset !== null }
-
+    );
-      // 替换配置中的 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) => ({
@@ -163,9 +164,23 @@ const ProviderForm: React.FC<ProviderFormProps> = ({
     // 同步选择框状态
     const hasCoAuthoredDisabled = checkCoAuthoredSetting(configString);
     setDisableCoAuthored(hasCoAuthoredDisabled);
-    }
   };
 
+  // 根据当前配置决定是否展示 API Key 输入框
+  const showApiKey =
+    selectedPreset !== null || hasApiKeyField(formData.settingsConfig);
+
+  // 初始时从配置中同步 API Key（编辑模式）
+  useEffect(() => {
+    if (initialData) {
+      const parsedKey = getApiKeyFromConfig(
+        JSON.stringify(initialData.settingsConfig)
+      );
+      if (parsedKey) setApiKey(parsedKey);
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
   return (
     <div className="modal-overlay">
       <div className="modal-content">
@@ -208,7 +223,7 @@ const ProviderForm: React.FC<ProviderFormProps> = ({
             />
           </div>
 
-          {selectedPreset !== null && (
+          {showApiKey && (
             <div className="form-group">
               <label htmlFor="apiKey">API Key *</label>
               <input

src/utils/providerConfigUtils.ts

@@ -45,3 +45,47 @@ export const extractWebsiteUrl = (jsonString: string): string => {
   }
   return ''
 }
+
+// 读取配置中的 API Key（env.ANTHROPIC_AUTH_TOKEN）
+export const getApiKeyFromConfig = (jsonString: string): string => {
+  try {
+    const config = JSON.parse(jsonString)
+    const key = config?.env?.ANTHROPIC_AUTH_TOKEN
+    return typeof key === 'string' ? key : ''
+  } catch (err) {
+    return ''
+  }
+}
+
+// 判断配置中是否存在 API Key 字段
+export const hasApiKeyField = (jsonString: string): boolean => {
+  try {
+    const config = JSON.parse(jsonString)
+    return Object.prototype.hasOwnProperty.call(config?.env ?? {}, 'ANTHROPIC_AUTH_TOKEN')
+  } catch (err) {
+    return false
+  }
+}
+
+// 写入/更新配置中的 API Key，默认不新增缺失字段
+export const setApiKeyInConfig = (
+  jsonString: string,
+  apiKey: string,
+  options: { createIfMissing?: boolean } = {}
+): string => {
+  const { createIfMissing = false } = options
+  try {
+    const config = JSON.parse(jsonString)
+    if (!config.env) {
+      if (!createIfMissing) return jsonString
+      config.env = {}
+    }
+    if (!('ANTHROPIC_AUTH_TOKEN' in config.env) && !createIfMissing) {
+      return jsonString
+    }
+    config.env.ANTHROPIC_AUTH_TOKEN = apiKey
+    return JSON.stringify(config, null, 2)
+  } catch (err) {
+    return jsonString
+  }
+}