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