From 9372ecd3c68c97e40e6f0affe4a7dd0daea0a69f Mon Sep 17 00:00:00 2001
From: Jason <farion1231@gmail.com>
Date: Sat, 13 Sep 2025 17:04:46 +0800
Subject: [PATCH] feat(ui): enhance provider form with brand icons and colors

- Add Save icon to submit buttons in provider forms
- Replace generic Zap icon with brand-specific icons (ClaudeIcon, CodexIcon)
- Update selected state colors: Claude uses brand color #D97757, Codex uses black
- Maintain visual consistency with AppSwitcher component
---
 src/components/ProviderForm.tsx               |  5 +--
 .../ProviderForm/PresetSelector.tsx           | 32 ++++++++++++-------
 2 files changed, 24 insertions(+), 13 deletions(-)

diff --git a/src/components/ProviderForm.tsx b/src/components/ProviderForm.tsx
index 855ff02..5cea1a5 100644
--- a/src/components/ProviderForm.tsx
+++ b/src/components/ProviderForm.tsx
@@ -15,7 +15,7 @@ import ApiKeyInput from "./ProviderForm/ApiKeyInput";
 import ClaudeConfigEditor from "./ProviderForm/ClaudeConfigEditor";
 import CodexConfigEditor from "./ProviderForm/CodexConfigEditor";
 import KimiModelSelector from "./ProviderForm/KimiModelSelector";
-import { X, AlertCircle } from "lucide-react";
+import { X, AlertCircle, Save } from "lucide-react";
 // 分类仅用于控制少量交互（如官方禁用 API Key），不显示介绍组件
 
 interface ProviderFormProps {
@@ -936,8 +936,9 @@ const ProviderForm: React.FC<ProviderFormProps> = ({
             </button>
             <button
               type="submit"
-              className="px-4 py-2 bg-blue-500 text-white rounded-lg hover:bg-blue-600 transition-colors text-sm font-medium"
+              className="px-4 py-2 bg-blue-500 text-white rounded-lg hover:bg-blue-600 transition-colors text-sm font-medium flex items-center gap-2"
             >
+              <Save className="w-4 h-4" />
               {submitText}
             </button>
           </div>
diff --git a/src/components/ProviderForm/PresetSelector.tsx b/src/components/ProviderForm/PresetSelector.tsx
index e05e4b1..1d02c93 100644
--- a/src/components/ProviderForm/PresetSelector.tsx
+++ b/src/components/ProviderForm/PresetSelector.tsx
@@ -1,6 +1,7 @@
 import React from "react";
 import { Zap } from "lucide-react";
 import { ProviderCategory } from "../../types";
+import { ClaudeIcon, CodexIcon } from "../BrandIcons";
 
 interface Preset {
   name: string;
@@ -27,17 +28,22 @@ const PresetSelector: React.FC<PresetSelectorProps> = ({
 }) => {
   const getButtonClass = (
     index: number,
-    isOfficial?: boolean,
-    category?: ProviderCategory,
+    preset?: Preset,
   ) => {
     const isSelected = selectedIndex === index;
     const baseClass =
       "inline-flex items-center gap-2 px-4 py-2 rounded-lg text-sm font-medium transition-colors";
 
     if (isSelected) {
-      return isOfficial || category === "official"
-        ? `${baseClass} bg-amber-500 text-white`
-        : `${baseClass} bg-blue-500 text-white`;
+      if (preset?.isOfficial || preset?.category === "official") {
+        // Codex 官方使用黑色背景
+        if (preset?.name.includes("Codex")) {
+          return `${baseClass} bg-gray-900 text-white`;
+        }
+        // Claude 官方使用品牌色背景
+        return `${baseClass} bg-[#D97757] text-white`;
+      }
+      return `${baseClass} bg-blue-500 text-white`;
     }
 
     return `${baseClass} bg-gray-100 text-gray-500 hover:bg-gray-200`;
@@ -76,15 +82,19 @@ const PresetSelector: React.FC<PresetSelectorProps> = ({
             <button
               key={index}
               type="button"
-              className={getButtonClass(
-                index,
-                preset.isOfficial,
-                preset.category,
-              )}
+              className={getButtonClass(index, preset)}
               onClick={() => onSelectPreset(index)}
             >
               {(preset.isOfficial || preset.category === "official") && (
-                <Zap size={14} />
+                <>
+                  {preset.name.includes("Claude") ? (
+                    <ClaudeIcon size={14} />
+                  ) : preset.name.includes("Codex") ? (
+                    <CodexIcon size={14} />
+                  ) : (
+                    <Zap size={14} />
+                  )}
+                </>
               )}
               {preset.name}
             </button>