From 78498c0ac38cb236722d139ccc886a7de755b226 Mon Sep 17 00:00:00 2001
From: Tim <135014430+nagisa77@users.noreply.github.com>
Date: Sat, 6 Sep 2025 02:02:02 +0800
Subject: [PATCH] refactor: migrate placeholders to IconPark

---
 frontend_nuxt/components/BasePlaceholder.vue |  4 ++--
 frontend_nuxt/components/UserList.vue        |  2 +-
 frontend_nuxt/pages/message-box/[id].vue     | 12 ++++++------
 frontend_nuxt/pages/message-box/index.vue    |  8 ++++----
 frontend_nuxt/pages/message.vue              | 17 +++++++++++++----
 frontend_nuxt/pages/points.vue               |  6 +-----
 frontend_nuxt/pages/users/[id].vue           |  4 ++--
 frontend_nuxt/plugins/iconpark.client.ts     |  2 ++
 8 files changed, 31 insertions(+), 24 deletions(-)

diff --git a/frontend_nuxt/components/BasePlaceholder.vue b/frontend_nuxt/components/BasePlaceholder.vue
index 166663a10..4b6514937 100644
--- a/frontend_nuxt/components/BasePlaceholder.vue
+++ b/frontend_nuxt/components/BasePlaceholder.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="base-placeholder">
-    <i :class="['base-placeholder-icon', icon]" />
+    <component :is="icon" class="base-placeholder-icon" theme="outline" size="48" />
     <div class="base-placeholder-text">
       <slot>{{ text }}</slot>
     </div>
@@ -12,7 +12,7 @@ export default {
   name: 'BasePlaceholder',
   props: {
     text: { type: String, default: '' },
-    icon: { type: String, default: 'fas fa-inbox' },
+    icon: { type: String, default: 'Inbox' },
   },
 }
 </script>
diff --git a/frontend_nuxt/components/UserList.vue b/frontend_nuxt/components/UserList.vue
index 9126b6bac..9c7313035 100644
--- a/frontend_nuxt/components/UserList.vue
+++ b/frontend_nuxt/components/UserList.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="user-list">
-    <BasePlaceholder v-if="users.length === 0" text="暂无用户" icon="fas fa-inbox" />
+    <BasePlaceholder v-if="users.length === 0" text="暂无用户" icon="Inbox" />
     <div v-for="u in users" :key="u.id" class="user-item" @click="handleUserClick(u)">
       <BaseImage :src="u.avatar" alt="avatar" class="user-avatar" />
       <div class="user-info">
diff --git a/frontend_nuxt/pages/message-box/[id].vue b/frontend_nuxt/pages/message-box/[id].vue
index a6a8f5d14..d58c9dba5 100644
--- a/frontend_nuxt/pages/message-box/[id].vue
+++ b/frontend_nuxt/pages/message-box/[id].vue
@@ -56,7 +56,7 @@
           <BasePlaceholder
             v-if="messages.length === 0"
             text="暂无会话，发送消息试试 🎉"
-            icon="fas fa-inbox"
+            icon="Inbox"
           />
         </div>
       </template>
@@ -351,9 +351,9 @@ onMounted(async () => {
 })
 
 const subscribeToConversation = () => {
-  if (!currentUser.value) return;
+  if (!currentUser.value) return
   const destination = `/topic/conversation/${conversationId}`
-  
+
   subscribe(destination, async (message) => {
     try {
       const parsedMessage = JSON.parse(message.body)
@@ -370,12 +370,12 @@ const subscribeToConversation = () => {
 
       await markConversationAsRead()
       await nextTick()
-      
+
       if (isUserNearBottom.value) {
         scrollToBottomSmooth()
       }
     } catch (e) {
-      console.error("Failed to parse websocket message", e)
+      console.error('Failed to parse websocket message', e)
     }
   })
 }
@@ -394,7 +394,7 @@ onActivated(async () => {
     await nextTick()
     scrollToBottomSmooth()
     updateNearBottom()
-    
+
     if (isConnected.value) {
       // 如果已连接，重新订阅
       subscribeToConversation()
diff --git a/frontend_nuxt/pages/message-box/index.vue b/frontend_nuxt/pages/message-box/index.vue
index 735a5597b..aacae370d 100644
--- a/frontend_nuxt/pages/message-box/index.vue
+++ b/frontend_nuxt/pages/message-box/index.vue
@@ -22,7 +22,7 @@
         </div>
 
         <div v-if="!loading && conversations.length === 0" class="empty-container">
-          <BasePlaceholder v-if="conversations.length === 0" text="暂无会话" icon="fas fa-inbox" />
+          <BasePlaceholder v-if="conversations.length === 0" text="暂无会话" icon="Inbox" />
         </div>
 
         <div
@@ -73,7 +73,7 @@
         </div>
         <div v-else>
           <div v-if="channels.length === 0" class="empty-container">
-            <BasePlaceholder text="暂无频道" icon="fas fa-inbox" />
+            <BasePlaceholder text="暂无频道" icon="Inbox" />
           </div>
           <div
             v-for="ch in channels"
@@ -273,9 +273,9 @@ onActivated(async () => {
 })
 
 const subscribeToUserMessages = () => {
-  if (!currentUser.value) return;
+  if (!currentUser.value) return
   const destination = `/topic/user/${currentUser.value.id}/messages`
-  
+
   subscribe(destination, (message) => {
     if (activeTab.value === 'messages') {
       fetchConversations()
diff --git a/frontend_nuxt/pages/message.vue b/frontend_nuxt/pages/message.vue
index 9cccbebe3..41bc865fc 100644
--- a/frontend_nuxt/pages/message.vue
+++ b/frontend_nuxt/pages/message.vue
@@ -14,8 +14,12 @@
         <div class="message-control-container">
           <div class="message-control-title">通知设置</div>
           <div class="message-control-item-container">
-            <template v-for="pref in notificationPrefs"> 
-              <div v-if="canShowNotification(pref.type)" :key="pref.type" class="message-control-item">
+            <template v-for="pref in notificationPrefs">
+              <div
+                v-if="canShowNotification(pref.type)"
+                :key="pref.type"
+                class="message-control-item"
+              >
                 <div class="message-control-item-label">{{ formatType(pref.type) }}</div>
                 <BaseSwitch
                   :model-value="pref.enabled"
@@ -47,7 +51,7 @@
         <BasePlaceholder
           v-else-if="notifications.length === 0"
           text="暂时没有消息 :)"
-          icon="fas fa-inbox"
+          icon="Inbox"
         />
 
         <div class="timeline-container" v-if="notifications.length > 0">
@@ -757,7 +761,12 @@ const formatType = (t) => {
 
 const isAdmin = computed(() => authState.role === 'ADMIN')
 
-const needAdminSet = new Set(['POST_REVIEW_REQUEST','REGISTER_REQUEST', 'POINT_REDEEM', 'ACTIVITY_REDEEM'])
+const needAdminSet = new Set([
+  'POST_REVIEW_REQUEST',
+  'REGISTER_REQUEST',
+  'POINT_REDEEM',
+  'ACTIVITY_REDEEM',
+])
 
 const canShowNotification = (type) => {
   return !needAdminSet.has(type) || isAdmin.value
diff --git a/frontend_nuxt/pages/points.vue b/frontend_nuxt/pages/points.vue
index 325777cb7..95be7224c 100644
--- a/frontend_nuxt/pages/points.vue
+++ b/frontend_nuxt/pages/points.vue
@@ -63,11 +63,7 @@
         <div class="loading-points-container" v-if="historyLoading">
           <l-hatch size="28" stroke="4" speed="3.5" color="var(--primary-color)"></l-hatch>
         </div>
-        <BasePlaceholder
-          v-else-if="histories.length === 0"
-          text="暂无积分记录"
-          icon="fas fa-inbox"
-        />
+        <BasePlaceholder v-else-if="histories.length === 0" text="暂无积分记录" icon="Inbox" />
         <div class="timeline-container" v-else>
           <BaseTimeline :items="histories">
             <template #item="{ item }">
diff --git a/frontend_nuxt/pages/users/[id].vue b/frontend_nuxt/pages/users/[id].vue
index f8f613f76..9b5580ac5 100644
--- a/frontend_nuxt/pages/users/[id].vue
+++ b/frontend_nuxt/pages/users/[id].vue
@@ -207,7 +207,7 @@
             <BasePlaceholder
               v-if="filteredTimelineItems.length === 0"
               text="暂无时间线"
-              icon="fas fa-inbox"
+              icon="Inbox"
             />
             <div class="timeline-list">
               <BaseTimeline :items="filteredTimelineItems">
@@ -305,7 +305,7 @@
               </BaseTimeline>
             </div>
             <div v-else>
-              <BasePlaceholder text="暂无收藏文章" icon="fas fa-inbox" />
+              <BasePlaceholder text="暂无收藏文章" icon="Inbox" />
             </div>
           </div>
 
diff --git a/frontend_nuxt/plugins/iconpark.client.ts b/frontend_nuxt/plugins/iconpark.client.ts
index 72c6bc176..f13f0e32c 100644
--- a/frontend_nuxt/plugins/iconpark.client.ts
+++ b/frontend_nuxt/plugins/iconpark.client.ts
@@ -36,6 +36,7 @@ import {
   MessageOne,
   AlarmClock,
   Bookmark,
+  Inbox,
 } 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('Inbox', Inbox)
 })