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:
Jason
2025-10-19 23:11:48 +08:00
parent 505fa47feb
commit 0de818b8b1
4 changed files with 104 additions and 22 deletions

View File

@@ -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",

View File

@@ -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",