Merge branch 'feature/icon_park' into codex/migrate-components-to-iconpark

# Conflicts:
#	frontend_nuxt/plugins/iconpark.client.ts

frontend_nuxt/components/BaseInput.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="base-input">
-    <i v-if="icon" :class="['base-input-icon', icon]" />
+    <component v-if="icon" :is="icon" class="base-input-icon" size="14" />
 
     <!-- 普通输入框 -->
     <input
@@ -29,7 +29,7 @@ export default {
   inheritAttrs: false,
   props: {
     modelValue: { type: [String, Number], default: '' },
-    icon: { type: String, default: '' },
+    icon: { type: [String, Object], default: '' },
     type: { type: String, default: 'text' },
     textarea: { type: Boolean, default: false },
   },
@@ -66,7 +66,6 @@ export default {
 
 .base-input-icon {
   opacity: 0.5;
-  font-size: 14px;
 }
 
 .base-input-text {

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>

frontend_nuxt/components/BaseTabs.vue

@@ -8,7 +8,11 @@
           :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"
+          />
           <div class="base-tabs-item-label">{{ tab.label }}</div>
         </div>
       </div>
@@ -72,6 +76,7 @@ function onTouchEnd(e) {
   align-items: center;
 }
 
+.base-tabs-item-icon,
 .base-tabs-item i {
   margin-right: 6px;
 }

frontend_nuxt/components/CategorySelect.vue

@@ -15,7 +15,7 @@
               class="option-icon"
               :alt="option.name"
             />
-            <i v-else :class="['option-icon', option.icon]"></i>
+            <!-- <i v-else :class="['option-icon', option.icon]"></i> -->
           </template>
           <span>{{ option.name }}</span>
           <span class="option-count" v-if="option.count > 0"> x {{ option.count }}</span>

frontend_nuxt/components/CommentEditor.vue

@@ -7,7 +7,7 @@
     <div class="comment-bottom-container">
       <div class="comment-submit" :class="{ disabled: isDisabled }" @click="submit">
         <template v-if="!loading"> 发布评论 </template>
-        <template v-else> <i class="fa-solid fa-spinner fa-spin"></i> 发布中... </template>
+        <template v-else> <loading-four /> 发布中... </template>
       </div>
     </div>
   </div>

frontend_nuxt/components/CommentItem.vue

@@ -71,8 +71,8 @@
         />
       </div>
       <div v-if="replyCount && level < 2" class="reply-toggle" @click="toggleReplies">
-        <i v-if="showReplies" class="fas fa-chevron-up reply-toggle-icon"></i>
-        <i v-else class="fas fa-chevron-down reply-toggle-icon"></i>
+        <up v-if="showReplies" class="reply-toggle-icon" />
+        <down v-else class="reply-toggle-icon" />
         {{ replyCount }}条回复
       </div>
       <div v-if="showReplies && level < 2" class="reply-list">
@@ -375,7 +375,6 @@ const handleContentClick = (e) => {
 }
 
 .reply-toggle-icon {
-  margin-right: 5px;
 }
 
 .common-info-content-header {

frontend_nuxt/components/InviteCodeActivityComponent.vue

@@ -2,7 +2,7 @@
   <div class="invite-code-activity">
     <div class="invite-code-description">
       <div class="invite-code-description-title">
-        <i class="fas fa-info-circle"></i>
+        <info />
         <span class="invite-code-description-title-text">邀请规则说明</span>
       </div>
       <div class="invite-code-description-content">
@@ -17,7 +17,7 @@
     <div v-if="inviteLink" class="invite-code-link-content">
       <p class="invite-code-link-content-text">
         邀请链接：{{ inviteLink }}
-        <span @click="copyLink"><i class="fas fa-copy copy-icon"></i></span>
+        <span @click="copyLink"><copy class="copy-icon" /></span>
       </p>
     </div>
 

frontend_nuxt/components/LoginOverlay.vue

@@ -2,7 +2,7 @@
   <div class="login-overlay">
     <div class="login-overlay-blur"></div>
     <div class="login-overlay-content">
-      <i class="fa-solid fa-user login-overlay-icon"></i>
+      <user-icon class="login-overlay-icon" />
       <div class="login-overlay-text">请先登录，点击跳转到登录页面</div>
       <div class="login-overlay-button" @click="goLogin">登录</div>
     </div>

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">

frontend_nuxt/pages/forgot-password.vue

@@ -2,20 +2,20 @@
   <div class="forgot-page">
     <div class="forgot-content">
       <div class="forgot-title">找回密码</div>
- 
+
       <div v-if="step === 0" class="step-content">
-        <BaseInput icon="fas fa-envelope" v-model="email" placeholder="邮箱" />
+        <BaseInput icon="mail" v-model="email" placeholder="邮箱" />
         <div v-if="emailError" class="error-message">{{ emailError }}</div>
         <div class="primary-button" @click="sendCode" v-if="!isSending">发送验证码</div>
         <div class="primary-button disabled" v-else>发送中...</div>
       </div>
       <div v-else-if="step === 1" class="step-content">
-        <BaseInput icon="fas fa-envelope" v-model="code" placeholder="邮箱验证码" />
+        <BaseInput icon="mail" v-model="code" placeholder="邮箱验证码" />
         <div class="primary-button" @click="verifyCode" v-if="!isVerifying">验证</div>
         <div class="primary-button disabled" v-else>验证中...</div>
       </div>
       <div v-else class="step-content">
-        <BaseInput icon="fas fa-lock" v-model="password" type="password" placeholder="新密码" />
+        <BaseInput icon="lock" v-model="password" type="password" placeholder="新密码" />
         <div v-if="passwordError" class="error-message">{{ passwordError }}</div>
         <div class="primary-button" @click="resetPassword" v-if="!isResetting">重置密码</div>
         <div class="primary-button disabled" v-else>提交中...</div>

frontend_nuxt/pages/login.vue

@@ -6,9 +6,9 @@
       </div>
 
       <div class="email-login-page-content">
-        <BaseInput icon="fas fa-envelope" v-model="username" placeholder="邮箱/用户名" />
+        <BaseInput icon="mail" v-model="username" placeholder="邮箱/用户名" />
 
-        <BaseInput icon="fas fa-lock" v-model="password" type="password" placeholder="密码" />
+        <BaseInput icon="lock" v-model="password" type="password" placeholder="密码" />
 
         <div v-if="!isWaitingForLogin" class="login-page-button-primary" @click="submitLogin">
           <div class="login-page-button-text">登录</div>

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()

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()

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

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

frontend_nuxt/pages/settings.vue

@@ -23,7 +23,7 @@
         </div>
         <div class="form-row username-row">
           <BaseInput
-            icon="fas fa-user"
+            icon="user-icon"
             v-model="username"
             @input="usernameError = ''"
             placeholder="用户名"

frontend_nuxt/pages/signup.vue

@@ -6,16 +6,11 @@
       </div>
 
       <div v-if="emailStep === 0" class="email-signup-page-content">
-        <BaseInput
-          icon="fas fa-envelope"
-          v-model="email"
-          @input="emailError = ''"
-          placeholder="邮箱"
-        />
+        <BaseInput icon="mail" v-model="email" @input="emailError = ''" placeholder="邮箱" />
         <div v-if="emailError" class="error-message">{{ emailError }}</div>
 
         <BaseInput
-          icon="fas fa-user"
+          icon="user-icon"
           v-model="username"
           @input="usernameError = ''"
           placeholder="用户名"
@@ -23,7 +18,7 @@
         <div v-if="usernameError" class="error-message">{{ usernameError }}</div>
 
         <BaseInput
-          icon="fas fa-lock"
+          icon="lock"
           v-model="password"
           @input="passwordError = ''"
           type="password"
@@ -51,7 +46,7 @@
       </div>
 
       <div v-if="emailStep === 1" class="email-signup-page-content">
-        <BaseInput icon="fas fa-envelope" v-model="code" placeholder="邮箱验证码" />
+        <BaseInput icon="mail" v-model="code" placeholder="邮箱验证码" />
         <div
           v-if="!isWaitingForEmailVerified"
           class="signup-page-button-primary"

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>
@@ -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>
 
@@ -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

@@ -31,6 +31,16 @@ import {
   Loading,
   Rss,
   MessageEmoji,
+  AddUser,
+  ReduceUser,
+  MessageOne,
+  AlarmClock,
+  Bookmark,
+  Inbox,
+  LoadingFour,
+  Mail,
+  Lock,
+  User,
 } from '@icon-park/vue-next'
 
 export default defineNuxtPlugin((nuxtApp) => {
@@ -65,4 +75,14 @@ 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)
+  nuxtApp.vueApp.component('Inbox', Inbox)
+  nuxtApp.vueApp.component('LoadingFour', LoadingFour)
+  nuxtApp.vueApp.component('UserIcon', User)
+  nuxtApp.vueApp.component('Mail', Mail)
+  nuxtApp.vueApp.component('Lock', Lock)
 })