feat: integrate icon park in dropdown

feat: use iconpark in base tabs

frontend_nuxt/components/BaseTabs.vue

@@ -8,7 +8,12 @@
           :class="['base-tabs-item', { selected: modelValue === tab.key }]"
           @click="$emit('update:modelValue', tab.key)"
         >
-          <i v-if="tab.icon" :class="tab.icon"></i>
+          <component
+            v-if="tab.icon && (typeof tab.icon !== 'string' || !tab.icon.includes(' '))"
+            :is="tab.icon"
+            class="base-tabs-item-icon"
+          />
+          <i v-else-if="tab.icon" :class="tab.icon"></i>
           <div class="base-tabs-item-label">{{ tab.label }}</div>
         </div>
       </div>
@@ -72,6 +77,7 @@ function onTouchEnd(e) {
   align-items: center;
 }
 
+.base-tabs-item-icon,
 .base-tabs-item i {
   margin-right: 6px;
 }

frontend_nuxt/components/Dropdown.vue

@@ -19,6 +19,12 @@
                     class="option-icon"
                     :alt="label.name"
                   />
+                  <component
+                    v-else-if="isIconComponent(label.icon)"
+                    :is="label.icon"
+                    class="option-icon"
+                    :size="16"
+                  />
                   <i v-else :class="['option-icon', label.icon]"></i>
                 </template>
                 <span>{{ label.name }}</span>
@@ -38,6 +44,12 @@
                   class="option-icon"
                   :alt="selectedLabels[0].name"
                 />
+                <component
+                  v-else-if="isIconComponent(selectedLabels[0].icon)"
+                  :is="selectedLabels[0].icon"
+                  class="option-icon"
+                  :size="16"
+                />
                 <i v-else :class="['option-icon', selectedLabels[0].icon]"></i>
               </template>
               <span>{{ selectedLabels[0].name }}</span>
@@ -45,7 +57,7 @@
           </span>
           <span v-else class="placeholder">{{ placeholder }}</span>
         </template>
-        <i class="fas fa-caret-down dropdown-caret"></i>
+        <down class="dropdown-caret" />
       </slot>
     </div>
     <div
@@ -54,7 +66,7 @@
       v-click-outside="close"
     >
       <div v-if="showSearch" class="dropdown-search">
-        <i class="fas fa-search search-icon"></i>
+        <search-icon class="search-icon" />
         <input type="text" v-model="search" placeholder="搜索" />
       </div>
       <div v-if="loading" class="dropdown-loading">
@@ -75,6 +87,12 @@
                 class="option-icon"
                 :alt="o.name"
               />
+              <component
+                v-else-if="isIconComponent(o.icon)"
+                :is="o.icon"
+                class="option-icon"
+                :size="16"
+              />
               <i v-else :class="['option-icon', o.icon]"></i>
             </template>
             <span>{{ o.name }}</span>
@@ -85,12 +103,12 @@
     <Teleport to="body">
       <div v-if="open && isMobile" class="dropdown-mobile-page">
         <div class="dropdown-mobile-header">
-          <i class="fas fa-arrow-left" @click="close"></i>
+          <next class="back-icon" @click="close" />
           <span class="mobile-title">{{ placeholder }}</span>
         </div>
         <div class="dropdown-mobile-menu">
           <div v-if="showSearch" class="dropdown-search">
-            <i class="fas fa-search search-icon"></i>
+            <search-icon class="search-icon" />
             <input type="text" v-model="search" placeholder="搜索" />
           </div>
           <div v-if="loading" class="dropdown-loading">
@@ -111,6 +129,12 @@
                     class="option-icon"
                     :alt="o.name"
                   />
+                  <component
+                    v-else-if="isIconComponent(o.icon)"
+                    :is="o.icon"
+                    class="option-icon"
+                    :size="16"
+                  />
                   <i v-else :class="['option-icon', o.icon]"></i>
                 </template>
                 <span>{{ o.name }}</span>
@@ -249,6 +273,10 @@ export default {
       return /^https?:\/\//.test(icon) || icon.startsWith('/')
     }
 
+    const isIconComponent = (icon) => {
+      return typeof icon === 'string' && !icon.includes(' ')
+    }
+
     expose({ toggle, close })
 
     return {
@@ -263,6 +291,7 @@ export default {
       isSelected,
       loading,
       isImageIcon,
+      isIconComponent,
       setSearch,
       isMobile,
     }
@@ -303,6 +332,10 @@ export default {
   overflow-y: auto;
 }
 
+.dropdown-caret {
+  margin-left: 5px;
+}
+
 .selected-label {
   display: inline-flex;
   align-items: center;
@@ -326,6 +359,10 @@ export default {
   color: var(--text-color);
 }
 
+.search-icon {
+  font-size: 14px;
+}
+
 .dropdown-option {
   display: flex;
   align-items: center;
@@ -376,6 +413,11 @@ 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/pages/users/[id].vue

@@ -18,7 +18,7 @@
               class="profile-page-header-subscribe-button"
               @click="subscribeUser"
             >
-              <i class="fas fa-user-plus"></i>
+              <add-user />
               关注
             </div>
             <div
@@ -26,11 +26,11 @@
               class="profile-page-header-unsubscribe-button"
               @click="unsubscribeUser"
             >
-              <i class="fas fa-user-minus"></i>
+              <reduce-user />
               取消关注
             </div>
             <div v-if="!isMine" class="profile-page-header-subscribe-button" @click="sendMessage">
-              <i class="fas fa-paper-plane"></i>
+              <message-one />
               发私信
             </div>
           </div>
@@ -45,7 +45,7 @@
               content="经验值可通过发帖、评论等操作获得，达到目标后即可提升等级，解锁更多功能。"
               placement="bottom"
             >
-              <i class="fas fa-info-circle profile-exp-info"></i>
+              <info class="profile-exp-info" />
             </ToolTip>
           </div>
         </div>
@@ -368,11 +368,11 @@ const selectedTab = ref(
     : 'summary',
 )
 const tabs = [
-  { key: 'summary', label: '总结', icon: 'fas fa-chart-line' },
+  { key: 'summary', label: '总结', icon: 'ChartLine' },
-  { key: 'timeline', label: '时间线', icon: 'fas fa-clock' },
+  { key: 'timeline', label: '时间线', icon: 'AlarmClock' },
-  { key: 'following', label: '关注', icon: 'fas fa-user-plus' },
+  { key: 'following', label: '关注', icon: 'AddUser' },
-  { key: 'favorites', label: '收藏', icon: 'fas fa-bookmark' },
+  { key: 'favorites', label: '收藏', icon: 'Bookmark' },
-  { key: 'achievements', label: '勋章', icon: 'fas fa-medal' },
+  { key: 'achievements', label: '勋章', icon: 'MedalOne' },
 ]
 const followTab = ref('followers')
 

frontend_nuxt/plugins/iconpark.client.ts

@@ -31,6 +31,11 @@ import {
   Loading,
   Rss,
   MessageEmoji,
+  AddUser,
+  ReduceUser,
+  MessageOne,
+  AlarmClock,
+  Bookmark,
 } from '@icon-park/vue-next'
 
 export default defineNuxtPlugin((nuxtApp) => {
@@ -65,4 +70,9 @@ export default defineNuxtPlugin((nuxtApp) => {
   nuxtApp.vueApp.component('Loading', Loading)
   nuxtApp.vueApp.component('Rss', Rss)
   nuxtApp.vueApp.component('MessageEmoji', MessageEmoji)
+  nuxtApp.vueApp.component('AddUser', AddUser)
+  nuxtApp.vueApp.component('ReduceUser', ReduceUser)
+  nuxtApp.vueApp.component('MessageOne', MessageOne)
+  nuxtApp.vueApp.component('AlarmClock', AlarmClock)
+  nuxtApp.vueApp.component('Bookmark', Bookmark)
 })