feat(project): 增加图标选择器

mock/module/user.ts

@@ -223,6 +223,15 @@ const userRoutes = [
           icon: 'icon-park-outline:clipboard',
         },
       },
+      {
+        name: 'plugin_icons',
+        path: '/plugin/icons',
+        meta: {
+          title: '图标',
+          requiresAuth: true,
+          icon: 'icon-park-outline:winking-face-with-open-eyes',
+        },
+      },
     ],
   },
   {

src/components/custom/IconSelect/icons.ts

@@ -0,0 +1,35 @@
+export const icons = [
+  'icon-park-outline:ad-product',
+  'icon-park-outline:all-application',
+  'icon-park-outline:hamburger-button',
+  'icon-park-outline:setting',
+  'icon-park-outline:add-one',
+  'icon-park-outline:reduce-one',
+  'icon-park-outline:close-one',
+  'icon-park-outline:help',
+  'icon-park-outline:info',
+  'icon-park-outline:grid-four',
+  'icon-park-outline:key-two',
+  'icon-park-outline:write',
+  'icon-park-outline:fire',
+  'icon-park-outline:memory-card-one',
+  'icon-park-outline:coupon',
+  'icon-park-outline:ticket-one',
+  'icon-park-outline:pay-code-two',
+  'icon-park-outline:wallet-one',
+  'icon-park-outline:gift',
+  'icon-park-outline:mail',
+  'icon-park-outline:log',
+  'icon-park-outline:people',
+  'icon-park-outline:alarm-clock',
+  'ic:baseline-filter-1',
+  'ic:baseline-filter-2',
+  'ic:baseline-filter-3',
+  'ic:baseline-filter-4',
+  'ic:baseline-filter-5',
+  'ic:baseline-filter-6',
+  'ic:baseline-filter-7',
+  'ic:baseline-filter-8',
+  'ic:baseline-filter-9',
+  'ic:baseline-filter-9-plus',
+];

src/components/custom/IconSelect/index.vue

@@ -0,0 +1,43 @@
+<template>
+  <n-popover v-model:show="showPopover" placement="bottom" trigger="click">
+    <template #trigger>
+      <n-input v-model:value="currentIcon" readonly placeholder="选择目标图标">
+        <template #suffix><e-icon :icon="currentIcon || 'icon-park-outline:all-application'" /></template>
+      </n-input>
+    </template>
+    <template #header>
+      <n-input v-model:value="searchValue" type="text" placeholder="搜索图标" />
+    </template>
+    <div class="w-400px">
+      <div v-if="iconList.length > 0" class="grid grid-cols-9 h-auto overflow-auto gap-1">
+        <div
+          v-for="(item, index) in iconList"
+          :key="index"
+          class="border border-gray-200 m-2px p-5px flex-center"
+          @click="handleSelectIcon(item)"
+        >
+          <e-icon :icon="item" :size="24" />
+        </div>
+      </div>
+      <n-empty v-else class="w-full" description="没有符合条件的图标" />
+    </div>
+  </n-popover>
+</template>
+
+<script setup lang="ts">
+import { ref, computed } from 'vue';
+import { icons } from './icons';
+
+const currentIcon = ref('');
+const searchValue = ref('');
+const showPopover = ref(false);
+
+const iconList = computed(() => icons.filter((item) => item.includes(searchValue.value)));
+
+function handleSelectIcon(icon: string) {
+  currentIcon.value = icon;
+  showPopover.value = false;
+}
+</script>
+
+<style scoped></style>

src/views/plugin/clipboard/index.vue

@@ -1,7 +1,7 @@
 <template>
   <n-card>
     <n-input-group>
-      <n-input v-model:value="text" />
+      <n-input v-model:value="text" placeholder="请输入要复制的内容" />
       <n-button type="primary" @click="handleCopy">复制</n-button>
     </n-input-group>
   </n-card>

src/views/plugin/icons/index.vue

@@ -0,0 +1,13 @@
+<template>
+  <n-card>
+    <icon-select></icon-select>
+  </n-card>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue';
+
+const text = ref('Hello Clipboard');
+</script>
+
+<style scoped></style>