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/pages/users/[id].vue

@@ -368,11 +368,11 @@ const selectedTab = ref(
     : 'summary',
 )
 const tabs = [
-  { key: 'summary', label: '总结', icon: 'fas fa-chart-line' },
-  { key: 'timeline', label: '时间线', icon: 'fas fa-clock' },
-  { key: 'following', label: '关注', icon: 'fas fa-user-plus' },
-  { key: 'favorites', label: '收藏', icon: 'fas fa-bookmark' },
-  { key: 'achievements', label: '勋章', icon: 'fas fa-medal' },
+  { key: 'summary', label: '总结', icon: 'ChartLine' },
+  { key: 'timeline', label: '时间线', icon: 'AlarmClock' },
+  { key: 'following', label: '关注', icon: 'AddUser' },
+  { key: 'favorites', label: '收藏', icon: 'Bookmark' },
+  { key: 'achievements', label: '勋章', icon: 'MedalOne' },
 ]
 const followTab = ref('followers')
 

frontend_nuxt/plugins/iconpark.client.ts

@@ -34,6 +34,8 @@ import {
   AddUser,
   ReduceUser,
   MessageOne,
+  AlarmClock,
+  Bookmark,
 } from '@icon-park/vue-next'
 
 export default defineNuxtPlugin((nuxtApp) => {
@@ -71,4 +73,6 @@ export default defineNuxtPlugin((nuxtApp) => {
   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)
 })