a56a578e91
Implement comprehensive icon selection system for provider customization: ## New Components ### ProviderIcon (src/components/ProviderIcon.tsx) - Render SVG icons by name with automatic fallback - Display provider initials when icon not found - Support custom sizing via size prop - Use dangerouslySetInnerHTML for inline SVG rendering ### IconPicker (src/components/IconPicker.tsx) - Grid-based icon selection with visual preview - Real-time search filtering by name and keywords - Integration with icon metadata for display names - Responsive grid layout (6-10 columns based on screen) ### ColorPicker (src/components/ColorPicker.tsx) - 12 preset colors for quick selection - Native color input for custom color picking - Hex input field for precise color entry - Visual feedback for selected color state ## Icon Assets (src/icons/extracted/) - 38 high-quality SVG icons for AI providers and platforms - Includes: OpenAI, Claude, DeepSeek, Qwen, Kimi, Gemini, etc. - Cloud platforms: AWS, Azure, Google Cloud, Cloudflare - Auto-generated index.ts with getIcon/hasIcon helpers - Metadata system with searchable keywords per icon ## Build Scripts - scripts/extract-icons.js: Extract icons from simple-icons - scripts/generate-icon-index.js: Generate TypeScript index file
86 lines
2.8 KiB
TypeScript
86 lines
2.8 KiB
TypeScript
import React, { useState, useMemo } from "react";
|
|
import { useTranslation } from "react-i18next";
|
|
import { Input } from "@/components/ui/input";
|
|
import { Label } from "@/components/ui/label";
|
|
import { ProviderIcon } from "./ProviderIcon";
|
|
import { iconList } from "@/icons/extracted";
|
|
import { searchIcons, getIconMetadata } from "@/icons/extracted/metadata";
|
|
import { cn } from "@/lib/utils";
|
|
|
|
interface IconPickerProps {
|
|
value?: string; // 当前选中的图标
|
|
onValueChange: (icon: string) => void; // 选择回调
|
|
color?: string; // 预览颜色
|
|
}
|
|
|
|
export const IconPicker: React.FC<IconPickerProps> = ({
|
|
value,
|
|
onValueChange,
|
|
}) => {
|
|
const { t } = useTranslation();
|
|
const [searchQuery, setSearchQuery] = useState("");
|
|
|
|
// 过滤图标列表
|
|
const filteredIcons = useMemo(() => {
|
|
if (!searchQuery) return iconList;
|
|
return searchIcons(searchQuery);
|
|
}, [searchQuery]);
|
|
|
|
return (
|
|
<div className="space-y-4">
|
|
<div>
|
|
<Label htmlFor="icon-search">
|
|
{t("iconPicker.search", { defaultValue: "搜索图标" })}
|
|
</Label>
|
|
<Input
|
|
id="icon-search"
|
|
type="text"
|
|
placeholder={t("iconPicker.searchPlaceholder", {
|
|
defaultValue: "输入图标名称...",
|
|
})}
|
|
value={searchQuery}
|
|
onChange={(e) => setSearchQuery(e.target.value)}
|
|
className="mt-2"
|
|
/>
|
|
</div>
|
|
|
|
<div className="max-h-[65vh] overflow-y-auto pr-1">
|
|
<div className="grid grid-cols-6 sm:grid-cols-8 lg:grid-cols-10 gap-2">
|
|
{filteredIcons.map((iconName) => {
|
|
const meta = getIconMetadata(iconName);
|
|
const isSelected = value === iconName;
|
|
|
|
return (
|
|
<button
|
|
key={iconName}
|
|
type="button"
|
|
onClick={() => onValueChange(iconName)}
|
|
className={cn(
|
|
"flex flex-col items-center gap-1 p-3 rounded-lg",
|
|
"border-2 transition-all duration-200",
|
|
"hover:bg-accent hover:border-primary/50",
|
|
isSelected
|
|
? "border-primary bg-primary/10"
|
|
: "border-transparent",
|
|
)}
|
|
title={meta?.displayName || iconName}
|
|
>
|
|
<ProviderIcon icon={iconName} name={iconName} size={32} />
|
|
<span className="text-xs text-muted-foreground truncate w-full text-center">
|
|
{meta?.displayName || iconName}
|
|
</span>
|
|
</button>
|
|
);
|
|
})}
|
|
</div>
|
|
</div>
|
|
|
|
{filteredIcons.length === 0 && (
|
|
<div className="text-center py-8 text-muted-foreground">
|
|
{t("iconPicker.noResults", { defaultValue: "未找到匹配的图标" })}
|
|
</div>
|
|
)}
|
|
</div>
|
|
);
|
|
};
|