From 2f02514a14f8f818bf28e8ecc7c559b93645a48a Mon Sep 17 00:00:00 2001
From: YoVinchen <gzh298255@gmail.com>
Date: Wed, 12 Nov 2025 22:41:26 +0800
Subject: [PATCH] feat(gemini): add Google Official branding with Gemini icon
 (#211)

Update Google Gemini preset to match Claude Official styling:
- Rename 'Google' to 'Google Official'
- Add GeminiIcon support in preset selector
- Add custom theme with Google blue (#4285F4) background
- Update PresetTheme type to support 'gemini' icon type

Changes:
- Add GeminiPresetTheme interface
- Add theme config to Google Official preset
- Import and render GeminiIcon in ProviderPresetSelector
- Update PresetTheme icon type to include 'gemini'
---
 .../forms/ProviderPresetSelector.tsx          | 15 +++++++++-----
 src/config/claudeProviderPresets.ts           |  4 ++--
 src/config/geminiProviderPresets.ts           | 20 ++++++++++++++++++-
 3 files changed, 31 insertions(+), 8 deletions(-)

diff --git a/src/components/providers/forms/ProviderPresetSelector.tsx b/src/components/providers/forms/ProviderPresetSelector.tsx
index 20a301b..59f1af3 100644
--- a/src/components/providers/forms/ProviderPresetSelector.tsx
+++ b/src/components/providers/forms/ProviderPresetSelector.tsx
@@ -1,15 +1,16 @@
 import { useTranslation } from "react-i18next";
 import { FormLabel } from "@/components/ui/form";
-import { ClaudeIcon, CodexIcon } from "@/components/BrandIcons";
+import { ClaudeIcon, CodexIcon, GeminiIcon } from "@/components/BrandIcons";
 import { Zap, Star } from "lucide-react";
 import type { ProviderPreset } from "@/config/claudeProviderPresets";
 import type { CodexProviderPreset } from "@/config/codexProviderPresets";
+import type { GeminiProviderPreset } from "@/config/geminiProviderPresets";
 import type { ProviderCategory } from "@/types";
 import type { AppId } from "@/lib/api";
 
 type PresetEntry = {
   id: string;
-  preset: ProviderPreset | CodexProviderPreset;
+  preset: ProviderPreset | CodexProviderPreset | GeminiProviderPreset;
 };
 
 interface ProviderPresetSelectorProps {
@@ -83,7 +84,9 @@ export function ProviderPresetSelector({
   };
 
   // 渲染预设按钮的图标
-  const renderPresetIcon = (preset: ProviderPreset | CodexProviderPreset) => {
+  const renderPresetIcon = (
+    preset: ProviderPreset | CodexProviderPreset | GeminiProviderPreset,
+  ) => {
     const iconType = preset.theme?.icon;
     if (!iconType) return null;
 
@@ -92,6 +95,8 @@ export function ProviderPresetSelector({
         return <ClaudeIcon size={14} />;
       case "codex":
         return <CodexIcon size={14} />;
+      case "gemini":
+        return <GeminiIcon size={14} />;
       case "generic":
         return <Zap size={14} />;
       default:
@@ -102,7 +107,7 @@ export function ProviderPresetSelector({
   // 获取预设按钮的样式类名
   const getPresetButtonClass = (
     isSelected: boolean,
-    preset: ProviderPreset | CodexProviderPreset,
+    preset: ProviderPreset | CodexProviderPreset | GeminiProviderPreset,
   ) => {
     const baseClass =
       "inline-flex items-center gap-2 px-4 py-2 rounded-lg text-sm font-medium transition-colors";
@@ -122,7 +127,7 @@ export function ProviderPresetSelector({
   // 获取预设按钮的内联样式（用于自定义背景色）
   const getPresetButtonStyle = (
     isSelected: boolean,
-    preset: ProviderPreset | CodexProviderPreset,
+    preset: ProviderPreset | CodexProviderPreset | GeminiProviderPreset,
   ) => {
     if (!isSelected || !preset.theme?.backgroundColor) {
       return undefined;
diff --git a/src/config/claudeProviderPresets.ts b/src/config/claudeProviderPresets.ts
index 28b0b0d..45ffbd6 100644
--- a/src/config/claudeProviderPresets.ts
+++ b/src/config/claudeProviderPresets.ts
@@ -14,8 +14,8 @@ export interface TemplateValueConfig {
  * 预设供应商的视觉主题配置
  */
 export interface PresetTheme {
-  /** 图标类型：'claude' | 'codex' | 'generic' */
-  icon?: "claude" | "codex" | "generic";
+  /** 图标类型：'claude' | 'codex' | 'gemini' | 'generic' */
+  icon?: "claude" | "codex" | "gemini" | "generic";
   /** 背景色（选中状态），支持 Tailwind 类名或 hex 颜色 */
   backgroundColor?: string;
   /** 文字色（选中状态），支持 Tailwind 类名或 hex 颜色 */
diff --git a/src/config/geminiProviderPresets.ts b/src/config/geminiProviderPresets.ts
index 195e876..1cb0709 100644
--- a/src/config/geminiProviderPresets.ts
+++ b/src/config/geminiProviderPresets.ts
@@ -1,5 +1,17 @@
 import type { ProviderCategory } from "@/types";
 
+/**
+ * Gemini 预设供应商的视觉主题配置
+ */
+export interface GeminiPresetTheme {
+  /** 图标类型：'gemini' | 'generic' */
+  icon?: "gemini" | "generic";
+  /** 背景色（选中状态），支持 hex 颜色 */
+  backgroundColor?: string;
+  /** 文字色（选中状态），支持 hex 颜色 */
+  textColor?: string;
+}
+
 export interface GeminiProviderPreset {
   name: string;
   websiteUrl: string;
@@ -12,11 +24,12 @@ export interface GeminiProviderPreset {
   isPartner?: boolean;
   partnerPromotionKey?: string;
   endpointCandidates?: string[];
+  theme?: GeminiPresetTheme;
 }
 
 export const geminiProviderPresets: GeminiProviderPreset[] = [
   {
-    name: "Google",
+    name: "Google Official",
     websiteUrl: "https://ai.google.dev/",
     apiKeyUrl: "https://aistudio.google.com/apikey",
     settingsConfig: {
@@ -28,6 +41,11 @@ export const geminiProviderPresets: GeminiProviderPreset[] = [
     category: "official",
     partnerPromotionKey: "google-official",
     model: "gemini-2.5-pro",
+    theme: {
+      icon: "gemini",
+      backgroundColor: "#4285F4",
+      textColor: "#FFFFFF",
+    },
   },
   {
     name: "PackyCode",