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'
This commit is contained in:
YoVinchen
2025-11-12 22:41:26 +08:00
committed by GitHub
parent 75866044bd
commit 2f02514a14
3 changed files with 31 additions and 8 deletions

View File

@@ -1,15 +1,16 @@
import { useTranslation } from "react-i18next"; import { useTranslation } from "react-i18next";
import { FormLabel } from "@/components/ui/form"; 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 { Zap, Star } from "lucide-react";
import type { ProviderPreset } from "@/config/claudeProviderPresets"; import type { ProviderPreset } from "@/config/claudeProviderPresets";
import type { CodexProviderPreset } from "@/config/codexProviderPresets"; import type { CodexProviderPreset } from "@/config/codexProviderPresets";
import type { GeminiProviderPreset } from "@/config/geminiProviderPresets";
import type { ProviderCategory } from "@/types"; import type { ProviderCategory } from "@/types";
import type { AppId } from "@/lib/api"; import type { AppId } from "@/lib/api";
type PresetEntry = { type PresetEntry = {
id: string; id: string;
preset: ProviderPreset | CodexProviderPreset; preset: ProviderPreset | CodexProviderPreset | GeminiProviderPreset;
}; };
interface ProviderPresetSelectorProps { 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; const iconType = preset.theme?.icon;
if (!iconType) return null; if (!iconType) return null;
@@ -92,6 +95,8 @@ export function ProviderPresetSelector({
return <ClaudeIcon size={14} />; return <ClaudeIcon size={14} />;
case "codex": case "codex":
return <CodexIcon size={14} />; return <CodexIcon size={14} />;
case "gemini":
return <GeminiIcon size={14} />;
case "generic": case "generic":
return <Zap size={14} />; return <Zap size={14} />;
default: default:
@@ -102,7 +107,7 @@ export function ProviderPresetSelector({
// 获取预设按钮的样式类名 // 获取预设按钮的样式类名
const getPresetButtonClass = ( const getPresetButtonClass = (
isSelected: boolean, isSelected: boolean,
preset: ProviderPreset | CodexProviderPreset, preset: ProviderPreset | CodexProviderPreset | GeminiProviderPreset,
) => { ) => {
const baseClass = const baseClass =
"inline-flex items-center gap-2 px-4 py-2 rounded-lg text-sm font-medium transition-colors"; "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 = ( const getPresetButtonStyle = (
isSelected: boolean, isSelected: boolean,
preset: ProviderPreset | CodexProviderPreset, preset: ProviderPreset | CodexProviderPreset | GeminiProviderPreset,
) => { ) => {
if (!isSelected || !preset.theme?.backgroundColor) { if (!isSelected || !preset.theme?.backgroundColor) {
return undefined; return undefined;

View File

@@ -14,8 +14,8 @@ export interface TemplateValueConfig {
* 预设供应商的视觉主题配置 * 预设供应商的视觉主题配置
*/ */
export interface PresetTheme { export interface PresetTheme {
/** 图标类型:'claude' | 'codex' | 'generic' */ /** 图标类型:'claude' | 'codex' | 'gemini' | 'generic' */
icon?: "claude" | "codex" | "generic"; icon?: "claude" | "codex" | "gemini" | "generic";
/** 背景色(选中状态),支持 Tailwind 类名或 hex 颜色 */ /** 背景色(选中状态),支持 Tailwind 类名或 hex 颜色 */
backgroundColor?: string; backgroundColor?: string;
/** 文字色(选中状态),支持 Tailwind 类名或 hex 颜色 */ /** 文字色(选中状态),支持 Tailwind 类名或 hex 颜色 */

View File

@@ -1,5 +1,17 @@
import type { ProviderCategory } from "@/types"; import type { ProviderCategory } from "@/types";
/**
* Gemini 预设供应商的视觉主题配置
*/
export interface GeminiPresetTheme {
/** 图标类型:'gemini' | 'generic' */
icon?: "gemini" | "generic";
/** 背景色(选中状态),支持 hex 颜色 */
backgroundColor?: string;
/** 文字色(选中状态),支持 hex 颜色 */
textColor?: string;
}
export interface GeminiProviderPreset { export interface GeminiProviderPreset {
name: string; name: string;
websiteUrl: string; websiteUrl: string;
@@ -12,11 +24,12 @@ export interface GeminiProviderPreset {
isPartner?: boolean; isPartner?: boolean;
partnerPromotionKey?: string; partnerPromotionKey?: string;
endpointCandidates?: string[]; endpointCandidates?: string[];
theme?: GeminiPresetTheme;
} }
export const geminiProviderPresets: GeminiProviderPreset[] = [ export const geminiProviderPresets: GeminiProviderPreset[] = [
{ {
name: "Google", name: "Google Official",
websiteUrl: "https://ai.google.dev/", websiteUrl: "https://ai.google.dev/",
apiKeyUrl: "https://aistudio.google.com/apikey", apiKeyUrl: "https://aistudio.google.com/apikey",
settingsConfig: { settingsConfig: {
@@ -28,6 +41,11 @@ export const geminiProviderPresets: GeminiProviderPreset[] = [
category: "official", category: "official",
partnerPromotionKey: "google-official", partnerPromotionKey: "google-official",
model: "gemini-2.5-pro", model: "gemini-2.5-pro",
theme: {
icon: "gemini",
backgroundColor: "#4285F4",
textColor: "#FFFFFF",
},
}, },
{ {
name: "PackyCode", name: "PackyCode",