feat: simplify Claude provider configuration form

- Add optional model input fields (ANTHROPIC_MODEL, ANTHROPIC_SMALL_FAST_MODEL)
- Place model inputs in a single row for better space utilization
- Move website URL field above API configuration section
- Add JSON template for custom mode to guide users
- Simplify field labels and remove redundant descriptions
- Keep JSON editor for advanced configuration flexibility

src/components/ProviderForm.tsx

@@ -51,6 +51,10 @@ const ProviderForm: React.FC<ProviderFormProps> = ({
     initialData?.category,
   );
 
+  // Claude 模型配置状态
+  const [claudeModel, setClaudeModel] = useState("");
+  const [claudeSmallFastModel, setClaudeSmallFastModel] = useState("");
+
   // Codex 特有的状态
   const [codexAuth, setCodexAuth] = useState("");
   const [codexConfig, setCodexConfig] = useState("");
@@ -99,7 +103,7 @@ const ProviderForm: React.FC<ProviderFormProps> = ({
       const hasCoAuthoredDisabled = checkCoAuthoredSetting(configString);
       setDisableCoAuthored(hasCoAuthoredDisabled);
 
-      // 初始化 Kimi 模型选择（编辑模式）
+      // 初始化模型配置（编辑模式）
       if (
         initialData.settingsConfig &&
         typeof initialData.settingsConfig === "object"
@@ -108,6 +112,10 @@ const ProviderForm: React.FC<ProviderFormProps> = ({
           env?: Record<string, any>;
         };
         if (config.env) {
+          setClaudeModel(config.env.ANTHROPIC_MODEL || "");
+          setClaudeSmallFastModel(config.env.ANTHROPIC_SMALL_FAST_MODEL || "");
+          
+          // 初始化 Kimi 模型选择
           setKimiAnthropicModel(config.env.ANTHROPIC_MODEL || "");
           setKimiAnthropicSmallFastModel(
             config.env.ANTHROPIC_SMALL_FAST_MODEL || "",
@@ -268,35 +276,49 @@ const ProviderForm: React.FC<ProviderFormProps> = ({
     const hasCoAuthoredDisabled = checkCoAuthoredSetting(configString);
     setDisableCoAuthored(hasCoAuthoredDisabled);
 
-    // 如果是 Kimi 预设，初始化模型选择
+    // 如果预设包含模型配置，初始化模型输入框
-    if (
+    if (preset.settingsConfig && typeof preset.settingsConfig === "object") {
-      preset.name?.includes("Kimi") &&
-      preset.settingsConfig &&
-      typeof preset.settingsConfig === "object"
-    ) {
       const config = preset.settingsConfig as { env?: Record<string, any> };
       if (config.env) {
-        setKimiAnthropicModel(config.env.ANTHROPIC_MODEL || "");
+        setClaudeModel(config.env.ANTHROPIC_MODEL || "");
-        setKimiAnthropicSmallFastModel(
+        setClaudeSmallFastModel(config.env.ANTHROPIC_SMALL_FAST_MODEL || "");
-          config.env.ANTHROPIC_SMALL_FAST_MODEL || "",
+        
-        );
+        // 如果是 Kimi 预设，同步 Kimi 模型选择
+        if (preset.name?.includes("Kimi")) {
+          setKimiAnthropicModel(config.env.ANTHROPIC_MODEL || "");
+          setKimiAnthropicSmallFastModel(config.env.ANTHROPIC_SMALL_FAST_MODEL || "");
+        }
+      } else {
+        setClaudeModel("");
+        setClaudeSmallFastModel("");
       }
-    } else {
-      setKimiAnthropicModel("");
-      setKimiAnthropicSmallFastModel("");
     }
   };
 
   // 处理点击自定义按钮
   const handleCustomClick = () => {
     setSelectedPreset(-1);
+    
+    // 设置自定义模板
+    const customTemplate = {
+      env: {
+        ANTHROPIC_BASE_URL: "https://your-api-endpoint.com",
+        ANTHROPIC_AUTH_TOKEN: "your-api-key-here",
+        // 可选配置
+        // ANTHROPIC_MODEL: "your-model-name",
+        // ANTHROPIC_SMALL_FAST_MODEL: "your-fast-model-name"
+      }
+    };
+    
     setFormData({
       name: "",
       websiteUrl: "",
-      settingsConfig: "",
+      settingsConfig: JSON.stringify(customTemplate, null, 2),
     });
     setApiKey("");
     setDisableCoAuthored(false);
+    setClaudeModel("");
+    setClaudeSmallFastModel("");
     setKimiAnthropicModel("");
     setKimiAnthropicSmallFastModel("");
     setCategory("custom");
@@ -426,6 +448,34 @@ const ProviderForm: React.FC<ProviderFormProps> = ({
         codexProviderPresets[selectedCodexPreset]?.category === "official")) ||
     category === "official";
 
+  // 处理模型输入变化，自动更新 JSON 配置
+  const handleModelChange = (field: 'ANTHROPIC_MODEL' | 'ANTHROPIC_SMALL_FAST_MODEL', value: string) => {
+    if (field === 'ANTHROPIC_MODEL') {
+      setClaudeModel(value);
+    } else {
+      setClaudeSmallFastModel(value);
+    }
+
+    // 更新 JSON 配置
+    try {
+      const currentConfig = formData.settingsConfig ? JSON.parse(formData.settingsConfig) : { env: {} };
+      if (!currentConfig.env) currentConfig.env = {};
+      
+      if (value.trim()) {
+        currentConfig.env[field] = value.trim();
+      } else {
+        delete currentConfig.env[field];
+      }
+
+      setFormData(prev => ({
+        ...prev,
+        settingsConfig: JSON.stringify(currentConfig, null, 2),
+      }));
+    } catch (err) {
+      // 如果 JSON 解析失败，不做处理
+    }
+  };
+
   // Kimi 模型选择处理函数
   const handleKimiModelChange = (
     field: "ANTHROPIC_MODEL" | "ANTHROPIC_SMALL_FAST_MODEL",
@@ -557,6 +607,25 @@ const ProviderForm: React.FC<ProviderFormProps> = ({
               />
             </div>
 
+            <div className="space-y-2">
+              <label
+                htmlFor="websiteUrl"
+                className="block text-sm font-medium text-gray-900"
+              >
+                官网地址
+              </label>
+              <input
+                type="url"
+                id="websiteUrl"
+                name="websiteUrl"
+                value={formData.websiteUrl}
+                onChange={handleChange}
+                placeholder="https://example.com（可选）"
+                autoComplete="off"
+                className="w-full px-3 py-2 border border-gray-200 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-blue-500/20 focus:border-blue-500 transition-colors"
+              />
+            </div>
+
             {!isCodex && showApiKey && (
               <ApiKeyInput
                 value={apiKey}
@@ -602,25 +671,6 @@ const ProviderForm: React.FC<ProviderFormProps> = ({
               />
             )}
 
-            <div className="space-y-2">
-              <label
-                htmlFor="websiteUrl"
-                className="block text-sm font-medium text-gray-900"
-              >
-                官网地址
-              </label>
-              <input
-                type="url"
-                id="websiteUrl"
-                name="websiteUrl"
-                value={formData.websiteUrl}
-                onChange={handleChange}
-                placeholder="https://example.com（可选）"
-                autoComplete="off"
-                className="w-full px-3 py-2 border border-gray-200 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-blue-500/20 focus:border-blue-500 transition-colors"
-              />
-            </div>
-
             {/* Claude 或 Codex 的配置部分 */}
             {isCodex ? (
               <CodexConfigEditor
@@ -642,16 +692,59 @@ const ProviderForm: React.FC<ProviderFormProps> = ({
                 }}
               />
             ) : (
-              <ClaudeConfigEditor
+              <>
-                value={formData.settingsConfig}
+                {/* 可选的模型配置输入框 - 简化为一行 */}
-                onChange={(value) =>
+                {!isOfficialPreset && (
-                  handleChange({
+                  <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
-                    target: { name: "settingsConfig", value },
+                    <div className="space-y-2">
-                  } as React.ChangeEvent<HTMLTextAreaElement>)
+                      <label
-                }
+                        htmlFor="anthropicModel"
-                disableCoAuthored={disableCoAuthored}
+                        className="block text-sm font-medium text-gray-900"
-                onCoAuthoredToggle={handleCoAuthoredToggle}
+                      >
-              />
+                        主模型 (可选)
+                      </label>
+                      <input
+                        type="text"
+                        id="anthropicModel"
+                        value={claudeModel}
+                        onChange={(e) => handleModelChange('ANTHROPIC_MODEL', e.target.value)}
+                        placeholder="例如: deepseek-chat"
+                        autoComplete="off"
+                        className="w-full px-3 py-2 border border-gray-200 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-blue-500/20 focus:border-blue-500 transition-colors"
+                      />
+                    </div>
+                    
+                    <div className="space-y-2">
+                      <label
+                        htmlFor="anthropicSmallFastModel"
+                        className="block text-sm font-medium text-gray-900"
+                      >
+                        快速模型 (可选)
+                      </label>
+                      <input
+                        type="text"
+                        id="anthropicSmallFastModel"
+                        value={claudeSmallFastModel}
+                        onChange={(e) => handleModelChange('ANTHROPIC_SMALL_FAST_MODEL', e.target.value)}
+                        placeholder="例如: glm-4-flash"
+                        autoComplete="off"
+                        className="w-full px-3 py-2 border border-gray-200 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-blue-500/20 focus:border-blue-500 transition-colors"
+                      />
+                    </div>
+                  </div>
+                )}
+                
+                <ClaudeConfigEditor
+                  value={formData.settingsConfig}
+                  onChange={(value) =>
+                    handleChange({
+                      target: { name: "settingsConfig", value },
+                    } as React.ChangeEvent<HTMLTextAreaElement>)
+                  }
+                  disableCoAuthored={disableCoAuthored}
+                  onCoAuthoredToggle={handleCoAuthoredToggle}
+                />
+              </>
             )}
           </div>
 

src/components/ProviderForm/ClaudeConfigEditor.tsx

@@ -38,8 +38,8 @@ const ClaudeConfigEditor: React.FC<ClaudeConfigEditorProps> = ({
         onChange={onChange}
         placeholder={`{
   "env": {
-    "ANTHROPIC_BASE_URL": "https://api.anthropic.com",
+    "ANTHROPIC_BASE_URL": "https://your-api-endpoint.com",
-    "ANTHROPIC_AUTH_TOKEN": "sk-your-api-key-here"
+    "ANTHROPIC_AUTH_TOKEN": "your-api-key-here"
   }
 }`}
         rows={12}

src/config/providerPresets.ts

@@ -41,6 +41,8 @@ export const providerPresets: ProviderPreset[] = [
       env: {
         ANTHROPIC_BASE_URL: "https://open.bigmodel.cn/api/anthropic",
         ANTHROPIC_AUTH_TOKEN: "",
+        ANTHROPIC_MODEL: "glm-4-plus",
+        ANTHROPIC_SMALL_FAST_MODEL: "glm-4-flash",
       },
     },
     category: "cn_official",
@@ -50,9 +52,10 @@ export const providerPresets: ProviderPreset[] = [
     websiteUrl: "https://bailian.console.aliyun.com",
     settingsConfig: {
       env: {
-        ANTHROPIC_BASE_URL:
+        ANTHROPIC_BASE_URL: "https://dashscope.aliyuncs.com/api/v2/apps/claude-code-proxy",
-          "https://dashscope.aliyuncs.com/api/v2/apps/claude-code-proxy",
         ANTHROPIC_AUTH_TOKEN: "",
+        ANTHROPIC_MODEL: "qwen-coder-turbo",
+        ANTHROPIC_SMALL_FAST_MODEL: "qwen-coder-turbo",
       },
     },
     category: "cn_official",
@@ -75,8 +78,8 @@ export const providerPresets: ProviderPreset[] = [
     websiteUrl: "https://modelscope.cn",
     settingsConfig: {
       env: {
-        ANTHROPIC_AUTH_TOKEN: "ms-your-api-key",
         ANTHROPIC_BASE_URL: "https://api-inference.modelscope.cn",
+        ANTHROPIC_AUTH_TOKEN: "",
         ANTHROPIC_MODEL: "ZhipuAI/GLM-4.5",
         ANTHROPIC_SMALL_FAST_MODEL: "ZhipuAI/GLM-4.5",
       },