feat(icon): add icon type system and intelligent inference logic
Introduce a new icon system for provider customization: - Add IconMetadata and IconPreset interfaces in src/types/icon.ts - Define structure for icon name, display name, category, keywords - Support default color configuration per icon - Implement smart icon inference in src/config/iconInference.ts - Create iconMappings for 25+ AI providers and cloud platforms - Include Claude, DeepSeek, Qwen, Kimi, Google, AWS, Azure, etc. - inferIconForPreset(): match provider name to icon config - addIconsToPresets(): batch apply icons to preset arrays - Support fuzzy matching for flexible name recognition This foundation enables automatic icon assignment when users add providers, improving visual identification in the provider list.
This commit is contained in:
73
src/config/iconInference.ts
Normal file
73
src/config/iconInference.ts
Normal file
@@ -0,0 +1,73 @@
|
||||
/**
|
||||
* 根据供应商名称智能推断图标配置
|
||||
*/
|
||||
|
||||
const iconMappings = {
|
||||
// AI 服务商
|
||||
claude: { icon: "claude", iconColor: "#D4915D" },
|
||||
anthropic: { icon: "anthropic", iconColor: "#D4915D" },
|
||||
deepseek: { icon: "deepseek", iconColor: "#1E88E5" },
|
||||
zhipu: { icon: "zhipu", iconColor: "#0F62FE" },
|
||||
glm: { icon: "zhipu", iconColor: "#0F62FE" },
|
||||
qwen: { icon: "qwen", iconColor: "#FF6A00" },
|
||||
alibaba: { icon: "alibaba", iconColor: "#FF6A00" },
|
||||
aliyun: { icon: "alibaba", iconColor: "#FF6A00" },
|
||||
kimi: { icon: "kimi", iconColor: "#6366F1" },
|
||||
moonshot: { icon: "moonshot", iconColor: "#6366F1" },
|
||||
baidu: { icon: "baidu", iconColor: "#2932E1" },
|
||||
tencent: { icon: "tencent", iconColor: "#00A4FF" },
|
||||
hunyuan: { icon: "hunyuan", iconColor: "#00A4FF" },
|
||||
minimax: { icon: "minimax", iconColor: "#FF6B6B" },
|
||||
google: { icon: "google", iconColor: "#4285F4" },
|
||||
meta: { icon: "meta", iconColor: "#0081FB" },
|
||||
mistral: { icon: "mistral", iconColor: "#FF7000" },
|
||||
cohere: { icon: "cohere", iconColor: "#39594D" },
|
||||
perplexity: { icon: "perplexity", iconColor: "#20808D" },
|
||||
huggingface: { icon: "huggingface", iconColor: "#FFD21E" },
|
||||
|
||||
// 云平台
|
||||
aws: { icon: "aws", iconColor: "#FF9900" },
|
||||
azure: { icon: "azure", iconColor: "#0078D4" },
|
||||
huawei: { icon: "huawei", iconColor: "#FF0000" },
|
||||
cloudflare: { icon: "cloudflare", iconColor: "#F38020" },
|
||||
};
|
||||
|
||||
/**
|
||||
* 根据预设名称推断图标
|
||||
*/
|
||||
export function inferIconForPreset(presetName: string): {
|
||||
icon?: string;
|
||||
iconColor?: string;
|
||||
} {
|
||||
const nameLower = presetName.toLowerCase();
|
||||
|
||||
// 精确匹配或模糊匹配
|
||||
for (const [key, config] of Object.entries(iconMappings)) {
|
||||
if (nameLower.includes(key)) {
|
||||
return config;
|
||||
}
|
||||
}
|
||||
|
||||
return {};
|
||||
}
|
||||
|
||||
/**
|
||||
* 批量为预设添加图标配置
|
||||
*/
|
||||
export function addIconsToPresets<
|
||||
T extends { name: string; icon?: string; iconColor?: string },
|
||||
>(presets: T[]): T[] {
|
||||
return presets.map((preset) => {
|
||||
// 如果已经配置了图标,则保留原配置
|
||||
if (preset.icon) {
|
||||
return preset;
|
||||
}
|
||||
|
||||
// 否则根据名称推断
|
||||
const inferred = inferIconForPreset(preset.name);
|
||||
return {
|
||||
...preset,
|
||||
...inferred,
|
||||
};
|
||||
});
|
||||
}
|
||||
11
src/types/icon.ts
Normal file
11
src/types/icon.ts
Normal file
@@ -0,0 +1,11 @@
|
||||
export interface IconMetadata {
|
||||
name: string; // 图标名称(小写,如 "openai")
|
||||
displayName: string; // 显示名称(如 "OpenAI")
|
||||
category: string; // 分类(如 "ai-provider", "cloud", "tool")
|
||||
keywords: string[]; // 搜索关键词
|
||||
defaultColor?: string; // 默认颜色
|
||||
}
|
||||
|
||||
export interface IconPreset {
|
||||
[key: string]: IconMetadata;
|
||||
}
|
||||
Reference in New Issue
Block a user