feat: add unique icons and colors for preset providers
Add visual theme system for provider presets with custom icons and brand colors: - Add PresetTheme interface supporting icon type and custom colors - Claude Official: Claude brand icon + orange theme (#D97757) - Codex Official: Codex brand icon + dark gray theme (#1F2937) - Other presets: Default to theme blue (bg-blue-500) - Custom config: Uses theme blue for consistency Technical changes: - Extend ProviderPreset and CodexProviderPreset interfaces with optional theme field - Update ProviderPresetSelector to render icons and apply theme colors - Support both Tailwind classes and hex colors via inline styles - Remove unused Link import from ProviderCard This restores the unique visual identity for official providers while maintaining a unified theme color for third-party presets.
This commit is contained in:
@@ -2,6 +2,7 @@
|
||||
* Codex 预设供应商配置模板
|
||||
*/
|
||||
import { ProviderCategory } from "../types";
|
||||
import type { PresetTheme } from "./providerPresets";
|
||||
|
||||
export interface CodexProviderPreset {
|
||||
name: string;
|
||||
@@ -15,6 +16,8 @@ export interface CodexProviderPreset {
|
||||
isCustomTemplate?: boolean; // 标识是否为自定义模板
|
||||
// 新增:请求地址候选列表(用于地址管理/测速)
|
||||
endpointCandidates?: string[];
|
||||
// 新增:视觉主题配置
|
||||
theme?: PresetTheme;
|
||||
}
|
||||
|
||||
/**
|
||||
@@ -63,6 +66,11 @@ export const codexProviderPresets: CodexProviderPreset[] = [
|
||||
OPENAI_API_KEY: null,
|
||||
},
|
||||
config: ``,
|
||||
theme: {
|
||||
icon: "codex",
|
||||
backgroundColor: "#1F2937", // gray-800
|
||||
textColor: "#FFFFFF",
|
||||
},
|
||||
},
|
||||
{
|
||||
name: "PackyCode",
|
||||
|
||||
@@ -10,6 +10,18 @@ export interface TemplateValueConfig {
|
||||
editorValue: string;
|
||||
}
|
||||
|
||||
/**
|
||||
* 预设供应商的视觉主题配置
|
||||
*/
|
||||
export interface PresetTheme {
|
||||
/** 图标类型:'claude' | 'codex' | 'generic' */
|
||||
icon?: "claude" | "codex" | "generic";
|
||||
/** 背景色(选中状态),支持 Tailwind 类名或 hex 颜色 */
|
||||
backgroundColor?: string;
|
||||
/** 文字色(选中状态),支持 Tailwind 类名或 hex 颜色 */
|
||||
textColor?: string;
|
||||
}
|
||||
|
||||
export interface ProviderPreset {
|
||||
name: string;
|
||||
websiteUrl: string;
|
||||
@@ -22,6 +34,8 @@ export interface ProviderPreset {
|
||||
templateValues?: Record<string, TemplateValueConfig>; // editorValue 存储编辑器中的实时输入值
|
||||
// 新增:请求地址候选列表(用于地址管理/测速)
|
||||
endpointCandidates?: string[];
|
||||
// 新增:视觉主题配置
|
||||
theme?: PresetTheme;
|
||||
}
|
||||
|
||||
export const providerPresets: ProviderPreset[] = [
|
||||
@@ -33,6 +47,11 @@ export const providerPresets: ProviderPreset[] = [
|
||||
},
|
||||
isOfficial: true, // 明确标识为官方预设
|
||||
category: "official",
|
||||
theme: {
|
||||
icon: "claude",
|
||||
backgroundColor: "#D97757",
|
||||
textColor: "#FFFFFF",
|
||||
},
|
||||
},
|
||||
{
|
||||
name: "DeepSeek",
|
||||
|
||||
Reference in New Issue
Block a user