refactor: use iconpark in dropdown

frontend_nuxt/components/Dropdown.vue

@@ -23,7 +23,9 @@
                     v-else-if="isIconComponent(label.icon)"
                     :is="label.icon"
                     class="option-icon"
-                    :size="16"
+                    theme="outline"
+                    size="16"
+                    fill="currentColor"
                   />
                   <i v-else :class="['option-icon', label.icon]"></i>
                 </template>
@@ -48,7 +50,9 @@
                   v-else-if="isIconComponent(selectedLabels[0].icon)"
                   :is="selectedLabels[0].icon"
                   class="option-icon"
-                  :size="16"
+                  theme="outline"
+                  size="16"
+                  fill="currentColor"
                 />
                 <i v-else :class="['option-icon', selectedLabels[0].icon]"></i>
               </template>
@@ -57,7 +61,7 @@
           </span>
           <span v-else class="placeholder">{{ placeholder }}</span>
         </template>
-        <down class="dropdown-caret" />
+        <Down class="dropdown-caret" theme="outline" size="16" fill="currentColor" />
       </slot>
     </div>
     <div
@@ -66,7 +70,7 @@
       v-click-outside="close"
     >
       <div v-if="showSearch" class="dropdown-search">
-        <search-icon class="search-icon" />
+        <SearchIcon class="search-icon" theme="outline" size="16" fill="currentColor" />
         <input type="text" v-model="search" placeholder="搜索" />
       </div>
       <div v-if="loading" class="dropdown-loading">
@@ -91,7 +95,9 @@
                 v-else-if="isIconComponent(o.icon)"
                 :is="o.icon"
                 class="option-icon"
-                :size="16"
+                theme="outline"
+                size="16"
+                fill="currentColor"
               />
               <i v-else :class="['option-icon', o.icon]"></i>
             </template>
@@ -103,12 +109,12 @@
     <Teleport to="body">
       <div v-if="open && isMobile" class="dropdown-mobile-page">
         <div class="dropdown-mobile-header">
-          <next class="back-icon" @click="close" />
+          <ArrowLeft @click="close" theme="outline" size="16" fill="currentColor" />
           <span class="mobile-title">{{ placeholder }}</span>
         </div>
         <div class="dropdown-mobile-menu">
           <div v-if="showSearch" class="dropdown-search">
-            <search-icon class="search-icon" />
+            <SearchIcon class="search-icon" theme="outline" size="16" fill="currentColor" />
             <input type="text" v-model="search" placeholder="搜索" />
           </div>
           <div v-if="loading" class="dropdown-loading">
@@ -133,7 +139,9 @@
                     v-else-if="isIconComponent(o.icon)"
                     :is="o.icon"
                     class="option-icon"
-                    :size="16"
+                    theme="outline"
+                    size="16"
+                    fill="currentColor"
                   />
                   <i v-else :class="['option-icon', o.icon]"></i>
                 </template>
@@ -274,7 +282,8 @@ export default {
     }
 
     const isIconComponent = (icon) => {
-      return typeof icon === 'string' && !icon.includes(' ')
+      if (!icon) return false
+      return !icon.includes(' ')
     }
 
     expose({ toggle, close })
@@ -332,10 +341,6 @@ export default {
   overflow-y: auto;
 }
 
-.dropdown-caret {
-  margin-left: 5px;
-}
-
 .selected-label {
   display: inline-flex;
   align-items: center;
@@ -359,10 +364,6 @@ export default {
   color: var(--text-color);
 }
 
-.search-icon {
-  font-size: 14px;
-}
-
 .dropdown-option {
   display: flex;
   align-items: center;
@@ -413,11 +414,6 @@ export default {
   border-bottom: 1px solid var(--normal-border-color);
 }
 
-.back-icon {
-  transform: rotate(180deg);
-  cursor: pointer;
-}
-
 .dropdown-mobile-menu {
   flex: 1;
   overflow-y: auto;

frontend_nuxt/plugins/iconpark.client.ts

@@ -36,6 +36,7 @@ import {
   MessageOne,
   AlarmClock,
   Bookmark,
+  ArrowLeft,
 } from '@icon-park/vue-next'
 
 export default defineNuxtPlugin((nuxtApp) => {
@@ -75,4 +76,5 @@ export default defineNuxtPlugin((nuxtApp) => {
   nuxtApp.vueApp.component('MessageOne', MessageOne)
   nuxtApp.vueApp.component('AlarmClock', AlarmClock)
   nuxtApp.vueApp.component('Bookmark', Bookmark)
+  nuxtApp.vueApp.component('ArrowLeft', ArrowLeft)
 })