feat(projects): 图标选择器增加扩展树形

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