feat(ui): add icon picker, color picker and provider icon components

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
2026-08-03 11:01:22 +08:00 · 2025-11-21 23:20:39 +08:00
parent c582be265b
commit a56a578e91
49 changed files with 977 additions and 0 deletions
@@ -0,0 +1,81 @@
+import React, { useMemo } from "react";
+import { getIcon, hasIcon } from "@/icons/extracted";
+import { cn } from "@/lib/utils";
+
+interface ProviderIconProps {
+  icon?: string; // 图标名称
+  name: string; // 供应商名称（用于 fallback）
+  color?: string; // 自定义颜色 (Deprecated, kept for compatibility but ignored for SVG)
+  size?: number | string; // 尺寸
+  className?: string;
+  showFallback?: boolean; // 是否显示 fallback
+}
+
+export const ProviderIcon: React.FC<ProviderIconProps> = ({
+  icon,
+  name,
+  size = 32,
+  className,
+  showFallback = true,
+}) => {
+  // 获取图标 SVG
+  const iconSvg = useMemo(() => {
+    if (icon && hasIcon(icon)) {
+      return getIcon(icon);
+    }
+    return "";
+  }, [icon]);
+
+  // 计算尺寸样式
+  const sizeStyle = useMemo(() => {
+    const sizeValue = typeof size === "number" ? `${size}px` : size;
+    return {
+      width: sizeValue,
+      height: sizeValue,
+    };
+  }, [size]);
+
+  // 如果有图标，显示图标
+  if (iconSvg) {
+    return (
+      <span
+        className={cn(
+          "inline-flex items-center justify-center flex-shrink-0",
+          className,
+        )}
+        style={sizeStyle}
+        dangerouslySetInnerHTML={{ __html: iconSvg }}
+      />
+    );
+  }
+
+  // Fallback：显示首字母
+  if (showFallback) {
+    const initials = name
+      .split(" ")
+      .map((word) => word[0])
+      .join("")
+      .toUpperCase()
+      .slice(0, 2);
+    return (
+      <span
+        className={cn(
+          "inline-flex items-center justify-center flex-shrink-0 rounded-lg",
+          "bg-muted text-muted-foreground font-semibold",
+          className,
+        )}
+        style={sizeStyle}
+      >
+        <span
+          style={{
+            fontSize: `${typeof size === "number" ? size * 0.4 : 14}px`,
+          }}
+        >
+          {initials}
+        </span>
+      </span>
+    );
+  }
+
+  return null;
+};