# LucideIconSelect 组件

Lucide React 图标选择器组件，提供可视化的图标选择界面。

## 功能特性

- ✅ 支持所有 Lucide React 图标（1000+ 个）
- ✅ 搜索功能
- ✅ 分类浏览（12 个常用分类）
- ✅ 实时预览
- ✅ 响应式设计
- ✅ 完整的 TypeScript 类型支持

## 使用方法

### 基础用法

```tsx
import { useState } from 'react';
import LucideIconSelect from '@/components/LucideIconSelect';

function MyComponent() {
  const [iconName, setIconName] = useState('');
  const [open, setOpen] = useState(false);

  return (
    <>
      <button onClick={() => setOpen(true)}>
        选择图标
      </button>
      
      <LucideIconSelect
        open={open}
        onOpenChange={setOpen}
        value={iconName}
        onChange={setIconName}
      />
    </>
  );
}
```

### 在表单中使用

```tsx
import { useForm } from 'react-hook-form';
import LucideIconSelect from '@/components/LucideIconSelect';
import DynamicIcon from '@/components/DynamicIcon';

function FormExample() {
  const [iconSelectOpen, setIconSelectOpen] = useState(false);
  const form = useForm();

  return (
    <FormField
      control={form.control}
      name="icon"
      render={({ field }) => (
        <FormItem>
          <FormLabel>图标</FormLabel>
          <FormControl>
            <div className="flex items-center gap-2">
              <Input 
                placeholder="点击选择图标" 
                value={field.value}
                readOnly
                onClick={() => setIconSelectOpen(true)}
                className="cursor-pointer"
              />
              {field.value && (
                <div className="flex items-center justify-center w-10 h-10 border rounded-md">
                  <DynamicIcon name={field.value} className="h-5 w-5" />
                </div>
              )}
            </div>
          </FormControl>
          <LucideIconSelect
            open={iconSelectOpen}
            onOpenChange={setIconSelectOpen}
            value={field.value}
            onChange={field.onChange}
          />
        </FormItem>
      )}
    />
  );
}
```

### Props

| 属性 | 类型 | 必填 | 说明 |
|------|------|------|------|
| value | string | 否 | 当前选中的图标名称 |
| onChange | (iconName: string) => void | 否 | 图标变化回调 |
| open | boolean | 是 | 是否显示弹窗 |
| onOpenChange | (open: boolean) => void | 是 | 关闭弹窗回调 |

## 图标分类

组件内置了以下分类，每个分类都有代表性图标：

| 分类 | 图标 | 说明 |
|------|------|------|
| 全部 | 📐 | 显示所有可用图标 |
| 常用 | ✨ | 常用业务图标 |
| 文件与文档 | 📄 | 文件相关图标 |
| 用户与团队 | 👥 | 用户管理图标 |
| 开发与代码 | 💻 | 开发工具图标 |
| 数据与存储 | 💾 | 数据库、存储图标 |
| 网络与服务 | 🖥️ | 网络、服务器图标 |
| 时间与日历 | 📅 | 时间、日期图标 |
| 操作与控制 | 🎛️ | 操作按钮图标 |
| 通知与提醒 | 🔔 | 通知相关图标 |
| 编辑与格式 | ✏️ | 编辑工具图标 |
| 导航与箭头 | 🧭 | 导航、箭头图标 |
| 状态与标记 | ✅ | 状态指示图标 |

### 分类标签特性

- 🎨 每个分类都有代表性图标，视觉更直观
- 📱 响应式设计：移动端仅显示图标，桌面端显示图标+文字
- 🔄 自动布局：标签自动换行，左对齐排列
- ✨ 高亮显示：当前选中的分类会高亮显示

## 自定义配置

如需添加或修改分类，可编辑 `src/config/lucideIcons.ts` 文件：

```ts
export const ICON_CATEGORIES: Record<string, IconCategory> = {
  'custom': {
    name: '自定义分类',
    icon: 'Star',  // 分类的代表性图标
    icons: [
      'Icon1', 'Icon2', 'Icon3'
    ]
  },
  // ... 其他分类
};
```

## 示例截图

选择器提供：
- 🔍 搜索框 - 快速查找图标
- 📑 分类标签 - 按类别浏览
- 🎨 图标网格 - 可视化选择
- ✅ 当前选中 - 实时预览

## 相关组件

配合 `DynamicIcon` 组件使用效果更佳：

```tsx
import DynamicIcon from '@/components/DynamicIcon';
import LucideIconSelect from '@/components/LucideIconSelect';
```

