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:
@@ -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;
|
||||||
|
|||||||
@@ -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 颜色 */
|
||||||
|
|||||||
@@ -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",
|
||||||
|
|||||||
Reference in New Issue
Block a user