From 9472b51811f419e9139de81c73f2c71d170700c2 Mon Sep 17 00:00:00 2001
From: Yanbowen <349952469@qq.com>
Date: Sat, 18 Dec 2021 16:34:25 +0800
Subject: [PATCH 1/2] =?UTF-8?q?feat(projects):=20=E5=A2=9E=E5=8A=A0Icon?=
 =?UTF-8?q?=E9=80=89=E6=8B=A9=E5=99=A8=E7=BB=84=E4=BB=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/common/IconSelect/index.vue | 75 ++++++++++++++++++++++
 src/components/common/index.ts             |  3 +-
 src/views/plugin/icon/icons.ts             | 32 +++++++++
 src/views/plugin/icon/index.vue            | 26 ++++----
 4 files changed, 121 insertions(+), 15 deletions(-)
 create mode 100644 src/components/common/IconSelect/index.vue
 create mode 100644 src/views/plugin/icon/icons.ts

diff --git a/src/components/common/IconSelect/index.vue b/src/components/common/IconSelect/index.vue
new file mode 100644
index 00000000..a79ce678
--- /dev/null
+++ b/src/components/common/IconSelect/index.vue
@@ -0,0 +1,75 @@
+<template>
+  <n-popover placement="bottom-end" trigger="click">
+    <template #trigger>
+      <n-input v-model:value="modelValue" readonly placeholder="点击选择图标">
+        <template #suffix>
+          <Icon :icon="modelValue ? modelValue : 'mdi:apps'" class="text-30px p-5px" />
+        </template>
+      </n-input>
+    </template>
+    <template #header>
+      <n-input v-model:value="searchValue" placeholder="搜索图标"></n-input>
+    </template>
+    <div v-if="iconsList.length > 0" class="grid grid-cols-9 h-auto overflow-auto">
+      <template v-for="iconItem in iconsList" :key="iconItem">
+        <Icon
+          :icon="iconItem"
+          class="border-1px border-[#d9d9d9] text-30px m-2px p-5px"
+          :style="{ 'border-color': modelValue === iconItem ? theme.themeColor : '' }"
+          @click="handleChange(iconItem)"
+        />
+      </template>
+    </div>
+    <n-empty v-else class="w-306px" description="你什么也找不到" />
+  </n-popover>
+</template>
+
+<script lang="ts" setup>
+import { ref, computed } from 'vue';
+import { NPopover, NInput, NEmpty } from 'naive-ui';
+import { Icon } from '@iconify/vue';
+import { useThemeStore } from '@/store';
+
+interface Props {
+  /** 绑定的图标 */
+  value: string;
+  /** 图标列表 */
+  icons?: string[];
+}
+
+interface Emits {
+  (e: 'update:value', val: string): void;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  icons: () => []
+});
+
+const emit = defineEmits<Emits>();
+
+const theme = useThemeStore();
+const searchValue = ref('');
+
+const modelValue = computed({
+  get() {
+    return props.value;
+  },
+  set(val: string) {
+    emit('update:value', val);
+  }
+});
+
+const iconsList = computed(() => props.icons.filter(v => v.includes(searchValue.value)));
+
+function handleChange(iconItem: string) {
+  modelValue.value = iconItem;
+}
+</script>
+<style lang="scss" scoped>
+:deep(.n-input-wrapper) {
+  padding-right: 0;
+}
+:deep(.n-input__suffix) {
+  border: 1px solid #d9d9d9;
+}
+</style>
diff --git a/src/components/common/index.ts b/src/components/common/index.ts
index dab980ff..4d3cf832 100644
--- a/src/components/common/index.ts
+++ b/src/components/common/index.ts
@@ -4,5 +4,6 @@ import LoginBg from './LoginBg/index.vue';
 import BannerSvg from './BannerSvg/index.vue';
 import HoverContainer from './HoverContainer/index.vue';
 import LoadingEmptyWrapper from './LoadingEmptyWrapper/index.vue';
+import IconSelect from './IconSelect/index.vue';
 
-export { NaiveProvider, SystemLogo, LoginBg, BannerSvg, HoverContainer, LoadingEmptyWrapper };
+export { NaiveProvider, SystemLogo, LoginBg, BannerSvg, HoverContainer, LoadingEmptyWrapper, IconSelect };
diff --git a/src/views/plugin/icon/icons.ts b/src/views/plugin/icon/icons.ts
new file mode 100644
index 00000000..1af75741
--- /dev/null
+++ b/src/views/plugin/icon/icons.ts
@@ -0,0 +1,32 @@
+export const icons = [
+  'mdi:emoticon',
+  'mdi:ab-testing',
+  'ph:alarm',
+  'ph:android-logo',
+  'ph:align-bottom',
+  'ph:archive-box-light',
+  'uil:basketball',
+  'uil:brightness-plus',
+  'uil:capture',
+  'mdi:apps-box',
+  'mdi:alert',
+  'mdi:airballoon',
+  'mdi:airplane-edit',
+  'mdi:alpha-f-box-outline',
+  'mdi:arm-flex-outline',
+  'ic:baseline-10mp',
+  'ic:baseline-access-time',
+  'ic:baseline-brightness-4',
+  'ic:baseline-brightness-5',
+  'ic:baseline-credit-card',
+  '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'
+];
diff --git a/src/views/plugin/icon/index.vue b/src/views/plugin/icon/index.vue
index 0d719b9f..446b6d8c 100644
--- a/src/views/plugin/icon/index.vue
+++ b/src/views/plugin/icon/index.vue
@@ -1,11 +1,17 @@
 <template>
   <div>
     <n-card title="Icon组件示例" class="shadow-sm rounded-16px">
-      <div class="flex justify-around">
+      <div class="grid grid-cols-10">
         <template v-for="item in icons" :key="item">
-          <Icon :icon="item" class="text-30px" />
+          <div class="mt-5px flex-x-center">
+            <Icon :icon="item" class="text-30px" />
+          </div>
         </template>
       </div>
+      <div class="mt-50px">
+        <h1 class="mb-20px text-18px font-500">Icon图标选择器</h1>
+        <icon-select v-model:value="selectVal" :icons="icons" />
+      </div>
       <template #footer>
         <web-site-link label="iconify地址：" link="https://icones.js.org/" class="mt-10px" />
       </template>
@@ -14,20 +20,12 @@
 </template>
 
 <script lang="ts" setup>
+import { ref } from 'vue';
 import { NCard } from 'naive-ui';
 import { Icon } from '@iconify/vue';
-import { WebSiteLink } from '@/components';
+import { IconSelect, WebSiteLink } from '@/components';
+import { icons } from './icons';
 
-const icons = [
-  'mdi:emoticon',
-  'mdi:ab-testing',
-  'ph:alarm',
-  'ph:android-logo',
-  'ph:align-bottom',
-  'ph:archive-box-light',
-  'uil:basketball',
-  'uil:brightness-plus',
-  'uil:capture'
-];
+const selectVal = ref('');
 </script>
 <style scoped></style>

From 041012b3ee04d960c1e38895839225613f7af377 Mon Sep 17 00:00:00 2001
From: Yanbowen <349952469@qq.com>
Date: Sat, 18 Dec 2021 16:50:20 +0800
Subject: [PATCH 2/2] =?UTF-8?q?feat(projects):=20=E5=9B=BE=E6=A0=87?=
 =?UTF-8?q?=E9=80=89=E6=8B=A9=E5=99=A8=E5=A2=9E=E5=8A=A0=E6=89=A9=E5=B1=95?=
 =?UTF-8?q?=E6=A0=91=E5=BD=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/common/IconSelect/index.vue | 14 +++++++-------
 1 file changed, 7 insertions(+), 7 deletions(-)

diff --git a/src/components/common/IconSelect/index.vue b/src/components/common/IconSelect/index.vue
index a79ce678..42f33435 100644
--- a/src/components/common/IconSelect/index.vue
+++ b/src/components/common/IconSelect/index.vue
@@ -3,7 +3,7 @@
     <template #trigger>
       <n-input v-model:value="modelValue" readonly placeholder="点击选择图标">
         <template #suffix>
-          <Icon :icon="modelValue ? modelValue : 'mdi:apps'" class="text-30px p-5px" />
+          <Icon :icon="modelValue ? modelValue : emptyIcon" class="text-30px p-5px" />
         </template>
       </n-input>
     </template>
@@ -31,10 +31,12 @@ import { Icon } from '@iconify/vue';
 import { useThemeStore } from '@/store';
 
 interface Props {
-  /** 绑定的图标 */
+  /** 选中的图标 */
   value: string;
   /** 图标列表 */
-  icons?: string[];
+  icons: string[];
+  /** 未选中图标 */
+  emptyIcon?: string;
 }
 
 interface Emits {
@@ -42,14 +44,14 @@ interface Emits {
 }
 
 const props = withDefaults(defineProps<Props>(), {
-  icons: () => []
+  emptyIcon: 'mdi:apps'
 });
 
 const emit = defineEmits<Emits>();
 
 const theme = useThemeStore();
 const searchValue = ref('');
-
+const iconsList = computed(() => props.icons.filter(v => v.includes(searchValue.value)));
 const modelValue = computed({
   get() {
     return props.value;
@@ -59,8 +61,6 @@ const modelValue = computed({
   }
 });
 
-const iconsList = computed(() => props.icons.filter(v => v.includes(searchValue.value)));
-
 function handleChange(iconItem: string) {
   modelValue.value = iconItem;
 }