feat: 新增图标选择器组件及相关功能；更新路由配置和类型定义；修复依赖地址

src/views/home/index.vue

@@ -1,6 +1,7 @@
 <script setup lang="ts">
-import { computed } from 'vue';
+import { computed, ref } from 'vue';
 import { useAppStore } from '@/store/modules/app';
+import IconPicker from '@/components/custom/icon-picker.vue';
 import HeaderBanner from './modules/header-banner.vue';
 import CardData from './modules/card-data.vue';
 import LineChart from './modules/line-chart.vue';
@@ -11,10 +12,26 @@ import CreativityBanner from './modules/creativity-banner.vue';
 const appStore = useAppStore();
 
 const gap = computed(() => (appStore.isMobile ? 0 : 16));
+const selectedIcon = ref('');
 </script>
 
 <template>
   <NSpace vertical :size="16">
+    <!-- Icon Picker 测试区域 -->
+    <NCard title="Icon Picker 测试" :bordered="false" class="card-wrapper">
+      <NSpace vertical :size="12">
+        <div class="flex items-center gap-3">
+          <span class="text-sm">选择图标：</span>
+          <IconPicker v-model="selectedIcon" />
+        </div>
+        <div v-if="selectedIcon" class="flex items-center gap-3 rounded bg-gray-100 p-3 dark:bg-gray-800">
+          <SvgIcon :icon="selectedIcon" class="text-2xl" />
+          <code class="text-sm text-primary">{{ selectedIcon }}</code>
+        </div>
+        <div v-else class="text-sm text-gray-400">未选择图标</div>
+      </NSpace>
+    </NCard>
+
     <NAlert :title="$t('common.tip')" type="warning">
       {{ $t('page.home.branchDesc') }}
     </NAlert>

src/views/home/modules/icon-picker-example.vue

@@ -0,0 +1,237 @@
+<script setup lang="ts">
+import { ref } from 'vue';
+import { NButton, NCard, NDescriptions, NDescriptionsItem, NInput, NSpace } from 'naive-ui';
+import IconPicker from '@/components/custom/icon-picker.vue';
+
+defineOptions({
+  name: 'IconPickerExample'
+});
+
+// 基础使用
+const selectedIcon1 = ref('');
+
+// 默认值
+const selectedIcon2 = ref('material-symbols:home');
+
+// 自定义配置
+const selectedIcon3 = ref('');
+
+// 单个图标集
+const selectedIcon4 = ref('material-icon-theme:folder-aws');
+
+// 表单集成示例
+interface FormData {
+  name: string;
+  icon: string;
+  description: string;
+}
+
+const formData = ref<FormData>({
+  name: '',
+  icon: '',
+  description: ''
+});
+
+function handleSubmit() {
+  // eslint-disable-next-line no-console
+  console.log('表单数据:', formData.value);
+  window.$message?.success(`提交成功！图标：${formData.value.icon}`);
+}
+
+function handleReset() {
+  formData.value = {
+    name: '',
+    icon: '',
+    description: ''
+  };
+}
+</script>
+
+<template>
+  <div class="p-4">
+    <NSpace vertical :size="24">
+      <!-- 标题 -->
+      <div>
+        <h1 class="mb-2 text-2xl font-bold">Icon Picker 图标选择器</h1>
+        <p class="text-gray-600 dark:text-gray-400">支持多个图标集切换，实时搜索和分页</p>
+      </div>
+
+      <!-- 基础使用 - 多图标集切换 -->
+      <NCard title="多图标集切换" :bordered="false" class="rounded-lg shadow">
+        <NSpace vertical :size="16">
+          <div>
+            <p class="mb-3 text-sm text-gray-600">通过 Tabs 在不同的图标集之间切换</p>
+            <IconPicker v-model="selectedIcon1" />
+          </div>
+          <NDescriptions :column="1" size="small" bordered>
+            <NDescriptionsItem label="选中的图标">
+              <code class="text-primary">{{ selectedIcon1 || '未选择' }}</code>
+            </NDescriptionsItem>
+          </NDescriptions>
+        </NSpace>
+      </NCard>
+
+      <!-- 带默认值 -->
+      <NCard title="带默认值" :bordered="false" class="rounded-lg shadow">
+        <NSpace vertical :size="16">
+          <div>
+            <p class="mb-3 text-sm text-gray-600">设置默认图标值</p>
+            <IconPicker v-model="selectedIcon2" />
+          </div>
+          <NDescriptions :column="1" size="small" bordered>
+            <NDescriptionsItem label="选中的图标">
+              <code class="text-primary">{{ selectedIcon2 }}</code>
+            </NDescriptionsItem>
+          </NDescriptions>
+        </NSpace>
+      </NCard>
+
+      <!-- 自定义配置 -->
+      <NCard title="自定义配置" :bordered="false" class="rounded-lg shadow">
+        <NSpace vertical :size="16">
+          <div>
+            <p class="mb-3 text-sm text-gray-600">自定义弹窗宽度、每页数量和图标尺寸</p>
+            <IconPicker v-model="selectedIcon3" :width="700" :page-size="80" icon-size="28px" />
+          </div>
+          <NDescriptions :column="1" size="small" bordered>
+            <NDescriptionsItem label="选中的图标">
+              <code class="text-primary">{{ selectedIcon3 || '未选择' }}</code>
+            </NDescriptionsItem>
+          </NDescriptions>
+        </NSpace>
+      </NCard>
+
+      <!-- 单个图标集 -->
+      <NCard title="单个图标集" :bordered="false" class="rounded-lg shadow">
+        <NSpace vertical :size="16">
+          <div>
+            <p class="mb-3 text-sm text-gray-600">只显示 Cryptocurrency Color 图标集</p>
+            <IconPicker v-model="selectedIcon4" prefix="cryptocurrency-color" :collections="['cryptocurrency-color']" />
+          </div>
+          <NDescriptions :column="1" size="small" bordered>
+            <NDescriptionsItem label="选中的图标">
+              <code class="text-primary">{{ selectedIcon4 }}</code>
+            </NDescriptionsItem>
+          </NDescriptions>
+        </NSpace>
+      </NCard>
+
+      <!-- 表单集成 -->
+      <NCard title="表单集成示例" :bordered="false" class="rounded-lg shadow">
+        <NSpace vertical :size="16">
+          <div class="grid grid-cols-1 gap-4">
+            <div>
+              <label class="mb-2 block text-sm font-medium">名称</label>
+              <NInput v-model:value="formData.name" placeholder="请输入名称" />
+            </div>
+
+            <div>
+              <label class="mb-2 block text-sm font-medium">图标</label>
+              <IconPicker v-model="formData.icon" />
+            </div>
+
+            <div>
+              <label class="mb-2 block text-sm font-medium">描述</label>
+              <NInput v-model:value="formData.description" type="textarea" placeholder="请输入描述" :rows="3" />
+            </div>
+          </div>
+
+          <NSpace>
+            <NButton type="primary" @click="handleSubmit">提交</NButton>
+            <NButton @click="handleReset">重置</NButton>
+          </NSpace>
+
+          <NDescriptions :column="1" size="small" bordered>
+            <NDescriptionsItem label="表单数据">
+              <code class="text-primary">{{ JSON.stringify(formData, null, 2) }}</code>
+            </NDescriptionsItem>
+          </NDescriptions>
+        </NSpace>
+      </NCard>
+
+      <!-- API 文档 -->
+      <NCard title="Props API" :bordered="false" class="rounded-lg shadow">
+        <div class="overflow-x-auto">
+          <table class="w-full text-sm">
+            <thead class="bg-gray-100 dark:bg-gray-800">
+              <tr>
+                <th class="px-4 py-2 text-left">属性</th>
+                <th class="px-4 py-2 text-left">类型</th>
+                <th class="px-4 py-2 text-left">默认值</th>
+                <th class="px-4 py-2 text-left">说明</th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="border-t dark:border-gray-700">
+                <td class="px-4 py-2"><code>modelValue</code></td>
+                <td class="px-4 py-2"><code>string</code></td>
+                <td class="px-4 py-2"><code>''</code></td>
+                <td class="px-4 py-2">选中的图标值（v-model）</td>
+              </tr>
+              <tr class="border-t dark:border-gray-700">
+                <td class="px-4 py-2"><code>prefix</code></td>
+                <td class="px-4 py-2"><code>IconCollection</code></td>
+                <td class="px-4 py-2"><code>'material-symbols'</code></td>
+                <td class="px-4 py-2">默认图标集前缀</td>
+              </tr>
+              <tr class="border-t dark:border-gray-700">
+                <td class="px-4 py-2"><code>collections</code></td>
+                <td class="px-4 py-2"><code>IconCollection[]</code></td>
+                <td class="px-4 py-2"><code>['material-symbols', 'material-icon-theme']</code></td>
+                <td class="px-4 py-2">可选的图标集列表</td>
+              </tr>
+              <tr class="border-t dark:border-gray-700">
+                <td class="px-4 py-2"><code>pageSize</code></td>
+                <td class="px-4 py-2"><code>number</code></td>
+                <td class="px-4 py-2"><code>60</code></td>
+                <td class="px-4 py-2">每页显示的图标数量</td>
+              </tr>
+              <tr class="border-t dark:border-gray-700">
+                <td class="px-4 py-2"><code>width</code></td>
+                <td class="px-4 py-2"><code>number</code></td>
+                <td class="px-4 py-2"><code>600</code></td>
+                <td class="px-4 py-2">弹窗宽度（px）</td>
+              </tr>
+              <tr class="border-t dark:border-gray-700">
+                <td class="px-4 py-2"><code>iconSize</code></td>
+                <td class="px-4 py-2"><code>string</code></td>
+                <td class="px-4 py-2"><code>'24px'</code></td>
+                <td class="px-4 py-2">图标显示尺寸</td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+      </NCard>
+
+      <!-- 功能特性 -->
+      <NCard title="功能特性" :bordered="false" class="rounded-lg shadow">
+        <ul class="list-disc list-inside text-sm space-y-2">
+          <li>✅ 支持多个图标集切换（Tabs）</li>
+          <li>✅ Material Symbols（3000+ 图标）</li>
+          <li>✅ Material Icon Theme（VSCode 文件图标）</li>
+          <li>✅ 支持实时搜索过滤</li>
+          <li>✅ 分页展示，避免一次性渲染大量图标</li>
+          <li>✅ 缓存机制，避免重复加载</li>
+          <li>✅ 响应式设计，支持深色模式</li>
+          <li>✅ TypeScript 类型支持</li>
+          <li>✅ 支持清除选择</li>
+          <li>✅ 图标预览和名称提示</li>
+        </ul>
+      </NCard>
+    </NSpace>
+  </div>
+</template>
+
+<style scoped>
+code {
+  @apply rounded bg-gray-100 px-1.5 py-0.5 text-xs font-mono dark:bg-gray-800;
+}
+
+table {
+  @apply border-collapse;
+}
+
+th {
+  @apply font-semibold;
+}
+</style>