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

src/components/ColorPicker.tsx

@@ -0,0 +1,76 @@
+import React from "react";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { cn } from "@/lib/utils";
+
+interface ColorPickerProps {
+  value?: string;
+  onValueChange: (color: string) => void;
+  label?: string;
+  presets?: string[];
+}
+
+const DEFAULT_PRESETS = [
+  "#00A67E",
+  "#D4915D",
+  "#4285F4",
+  "#FF6A00",
+  "#00A4FF",
+  "#FF9900",
+  "#0078D4",
+  "#FF0000",
+  "#1E88E5",
+  "#6366F1",
+  "#0F62FE",
+  "#2932E1",
+];
+
+export const ColorPicker: React.FC<ColorPickerProps> = ({
+  value = "#4285F4",
+  onValueChange,
+  label = "图标颜色",
+  presets = DEFAULT_PRESETS,
+}) => {
+  return (
+    <div className="space-y-3">
+      <Label>{label}</Label>
+
+      {/* 颜色预设 */}
+      <div className="grid grid-cols-6 gap-2">
+        {presets.map((color) => (
+          <button
+            key={color}
+            type="button"
+            onClick={() => onValueChange(color)}
+            className={cn(
+              "w-full aspect-square rounded-lg border-2 transition-all",
+              "hover:scale-110 hover:shadow-lg",
+              value === color
+                ? "border-primary ring-2 ring-primary/20"
+                : "border-border",
+            )}
+            style={{ backgroundColor: color }}
+            title={color}
+          />
+        ))}
+      </div>
+
+      {/* 自定义颜色输入 */}
+      <div className="flex items-center gap-2">
+        <Input
+          type="color"
+          value={value}
+          onChange={(e) => onValueChange(e.target.value)}
+          className="w-16 h-10 p-1 cursor-pointer"
+        />
+        <Input
+          type="text"
+          value={value}
+          onChange={(e) => onValueChange(e.target.value)}
+          placeholder="#4285F4"
+          className="flex-1 font-mono"
+        />
+      </div>
+    </div>
+  );
+};

src/components/IconPicker.tsx

@@ -0,0 +1,85 @@
+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>
+  );
+};

src/components/ProviderIcon.tsx

@@ -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;
+};