From 7eaf2844003e79d475465e93c0db1469ee95e5b5 Mon Sep 17 00:00:00 2001
From: Jason <farion1231@gmail.com>
Date: Sun, 21 Sep 2025 23:09:53 +0800
Subject: [PATCH] feat: add dedicated API key URL support for third-party
 providers

- Add optional apiKeyUrl field to ProviderPreset interface for third-party providers
- Update ProviderForm to prioritize apiKeyUrl over websiteUrl for third-party category
- Make provider display name required in CodexConfigEditor with validation
- Configure PackyCode preset with affiliate API key URL

This allows third-party providers to have separate URLs for their service homepage
and API key acquisition, improving user experience when obtaining API keys.
---
 src/components/ProviderForm.tsx                  | 16 +++++++++++++---
 .../ProviderForm/CodexConfigEditor.tsx           | 10 ++++++++--
 src/config/providerPresets.ts                    |  3 +++
 3 files changed, 24 insertions(+), 5 deletions(-)

diff --git a/src/components/ProviderForm.tsx b/src/components/ProviderForm.tsx
index a1ebeea..8f0e784 100644
--- a/src/components/ProviderForm.tsx
+++ b/src/components/ProviderForm.tsx
@@ -847,7 +847,12 @@ const ProviderForm: React.FC<ProviderFormProps> = ({
   // 获取当前供应商的网址
   const getCurrentWebsiteUrl = () => {
     if (selectedPreset !== null && selectedPreset >= 0) {
-      return providerPresets[selectedPreset]?.websiteUrl || "";
+      const preset = providerPresets[selectedPreset];
+      if (!preset) return "";
+      // 仅第三方供应商使用专用 apiKeyUrl，其余使用官网地址
+      return preset.category === "third_party"
+        ? preset.apiKeyUrl || preset.websiteUrl || ""
+        : preset.websiteUrl || "";
     }
     return formData.websiteUrl || "";
   };
@@ -855,7 +860,12 @@ const ProviderForm: React.FC<ProviderFormProps> = ({
   // 获取 Codex 当前供应商的网址
   const getCurrentCodexWebsiteUrl = () => {
     if (selectedCodexPreset !== null && selectedCodexPreset >= 0) {
-      return codexProviderPresets[selectedCodexPreset]?.websiteUrl || "";
+      const preset = codexProviderPresets[selectedCodexPreset];
+      if (!preset) return "";
+      // 仅第三方供应商使用专用 apiKeyUrl，其余使用官网地址
+      return preset.category === "third_party"
+        ? preset.apiKeyUrl || preset.websiteUrl || ""
+        : preset.websiteUrl || "";
     }
     return formData.websiteUrl || "";
   };
@@ -884,7 +894,7 @@ const ProviderForm: React.FC<ProviderFormProps> = ({
         codexProviderPresets[selectedCodexPreset]?.category === "official")) ||
     category === "official";
 
-  // 判断是否显示 Codex 的"获取 API Key"链接
+  // 判断是否显示 Codex 的"获取 API Key"链接（国产官方、聚合站和第三方显示）
   const shouldShowCodexApiKeyLink =
     isCodex &&
     !isCodexOfficialPreset &&
diff --git a/src/components/ProviderForm/CodexConfigEditor.tsx b/src/components/ProviderForm/CodexConfigEditor.tsx
index dd907eb..177ba46 100644
--- a/src/components/ProviderForm/CodexConfigEditor.tsx
+++ b/src/components/ProviderForm/CodexConfigEditor.tsx
@@ -101,6 +101,7 @@ const CodexConfigEditor: React.FC<CodexConfigEditorProps> = ({
   const baseUrlInputRef = useRef<HTMLInputElement>(null);
 
   const modelNameInputRef = useRef<HTMLInputElement>(null);
+  const displayNameInputRef = useRef<HTMLInputElement>(null);
 
   // 移除自动填充逻辑，因为现在在点击自定义按钮时就已经填充
 
@@ -140,6 +141,7 @@ const CodexConfigEditor: React.FC<CodexConfigEditorProps> = ({
 
   const applyTemplate = () => {
     const requiredInputs = [
+      displayNameInputRef.current,
       apiKeyInputRef.current,
       baseUrlInputRef.current,
       modelNameInputRef.current,
@@ -389,12 +391,13 @@ const CodexConfigEditor: React.FC<CodexConfigEditorProps> = ({
 
                   <div>
                     <label className="mb-1 block text-sm font-medium text-gray-900 dark:text-gray-100">
-                      供应商名称
+                      供应商名称 *
                     </label>
 
                     <input
                       type="text"
                       value={templateDisplayName}
+                      ref={displayNameInputRef}
                       onChange={(e) => {
                         setTemplateDisplayName(e.target.value);
                         if (onNameChange) {
@@ -402,7 +405,10 @@ const CodexConfigEditor: React.FC<CodexConfigEditorProps> = ({
                         }
                       }}
                       onKeyDown={handleTemplateInputKeyDown}
-                      placeholder="例如：Codex 官方（可选）"
+                      placeholder="例如：Codex 官方"
+                      required
+                      pattern=".*\\S.*"
+                      title="请输入有效的内容"
                       className="w-full rounded-lg border border-gray-200 px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500/20 dark:border-gray-700 dark:bg-gray-800 dark:text-gray-100"
                     />
 
diff --git a/src/config/providerPresets.ts b/src/config/providerPresets.ts
index f1dc7e8..20669b1 100644
--- a/src/config/providerPresets.ts
+++ b/src/config/providerPresets.ts
@@ -6,6 +6,8 @@ import { ProviderCategory } from "../types";
 export interface ProviderPreset {
   name: string;
   websiteUrl: string;
+  // 新增：第三方/聚合等可单独配置获取 API Key 的链接
+  apiKeyUrl?: string;
   settingsConfig: object;
   isOfficial?: boolean; // 标识是否为官方预设
   category?: ProviderCategory; // 新增：分类
@@ -90,6 +92,7 @@ export const providerPresets: ProviderPreset[] = [
   {
     name: "PackyCode",
     websiteUrl: "https://www.packycode.com",
+    apiKeyUrl: "https://www.packycode.com/?aff=rlo54mgz",
     settingsConfig: {
       env: {
         ANTHROPIC_BASE_URL: "https://api.packycode.com",