feat: add few icons

frontend_nuxt/pages/activities.vue

@@ -18,7 +18,7 @@
           <div class="activity-list-page-card-content">{{ a.content }}</div>
           <div class="activity-list-page-card-footer">
             <div class="activity-list-page-card-footer-start-time">
-              <i class="fas fa-clock"></i>
+              <stopwatch />
               <span>开始于 {{ TimeManager.format(a.startTime) }}</span>
             </div>
           </div>

frontend_nuxt/pages/forgot-password.vue

@@ -21,7 +21,7 @@
         <div class="primary-button disabled" v-else>提交中...</div>
       </div>
       <div class="hint-message">
-        <i class="fas fa-info-circle"></i>
+        <info-icon />
         使用 Google 注册的用户可使用对应的邮箱进行找回密码
       </div>
     </div>

frontend_nuxt/pages/login.vue

@@ -16,7 +16,7 @@
 
         <div v-else class="login-page-button-primary disabled">
           <div class="login-page-button-text">
-            <i class="fas fa-spinner fa-spin"></i>
+            <loading-four />
             登录中...
           </div>
         </div>
@@ -28,7 +28,7 @@
           >
         </div>
         <div class="hint-message">
-          <i class="fas fa-info-circle"></i>
+          <info-icon />
           使用右侧第三方OAuth注册/登录的用户可使用对应的邮箱进行重设密码
         </div>
       </div>

frontend_nuxt/pages/message-box/[id].vue

@@ -3,14 +3,14 @@
     <div v-if="!loading" class="chat-header">
       <div class="header-main">
         <div class="back-button" @click="goBack">
-          <i class="fas fa-arrow-left"></i>
+          <arrow-left />
         </div>
         <h2 class="participant-name">
           {{ isChannel ? conversationName : otherParticipant?.username }}
         </h2>
       </div>
       <div v-if="!isFloatMode" class="float-control">
-        <i class="fas fa-compress" @click="minimize" title="最小化"></i>
+        <collapse-text-input class="float-control-icon" @click="minimize" title="最小化" />
       </div>
     </div>
 
@@ -48,7 +48,7 @@
               :content-id="item.id"
               @update:modelValue="(v) => (item.reactions = v)"
             >
-              <i class="fas fa-reply reply-btn" @click="setReply(item)"> 写个回复...</i>
+              <div class="reply-btn"><next @click="setReply(item)" /> 写个回复...</div>
             </ReactionsGroup>
           </template>
         </BaseTimeline>
@@ -66,7 +66,7 @@
       <div v-if="replyTo" class="active-reply">
         正在回复 {{ replyTo.sender.username }}:
         {{ stripMarkdownLength(replyTo.content, 50) }}
-        <i class="fas fa-times close-reply" @click="replyTo = null"></i>
+        <close-icon class="close-reply" @click="replyTo = null" />
       </div>
       <MessageEditor :loading="sending" @submit="sendMessage" />
     </div>

frontend_nuxt/pages/message-box/index.vue

@@ -1,11 +1,11 @@
 <template>
   <div class="messages-container">
     <div class="page-title">
-      <i class="fas fa-comments"></i>
+      <message-emoji />
       <span class="page-title-text">选择聊天</span>
     </div>
     <div v-if="!isFloatMode" class="float-control">
-      <i class="fas fa-compress" @click="minimize" title="最小化"></i>
+      <collapse-text-input class="float-control-icon" @click="minimize" title="最小化" />
     </div>
     <BaseTabs v-model="activeTab" :tabs="tabs">
       <div v-if="activeTab === 'messages'">

frontend_nuxt/pages/message.vue

@@ -4,7 +4,7 @@
       <template #right>
         <div class="message-page-header-right">
           <div class="message-page-header-right-item" @click="markAllRead">
-            <i class="fas fa-bolt message-page-header-right-item-button-icon"></i>
+            <check-correct class="message-page-header-right-item-button-icon" />
             <span class="message-page-header-right-item-button-text"> 已读所有消息 </span>
           </div>
         </div>

frontend_nuxt/pages/new-post.vue

@@ -13,13 +13,13 @@
           <PostTypeSelect v-model="postType" />
         </div>
         <div class="post-options-right">
-          <div class="post-clear" @click="clearPost"><i class="fa-solid fa-eraser"></i> 清空</div>
+          <div class="post-clear" @click="clearPost"><clear-icon /> 清空</div>
           <div class="ai-generate" @click="aiGenerate">
-            <i class="fa-solid fa-robot"></i>
+            <smart-optimization />
             MD 格式优化
           </div>
           <div class="post-draft" @click="saveDraft">
-            <i class="fa-solid fa-floppy-disk"></i>
+            <save-icon />
             存草稿
           </div>
           <div
@@ -30,9 +30,7 @@
           >
             发布
           </div>
-          <div v-else class="post-submit-loading">
-            <i class="fa-solid fa-spinner fa-spin"></i> 发布中...
-          </div>
+          <div v-else class="post-submit-loading"><loading-four /> 发布中...</div>
         </div>
       </div>
       <LotteryForm v-if="postType === 'LOTTERY'" :data="lottery" />

frontend_nuxt/pages/points.vue

@@ -25,7 +25,7 @@
 
           <div class="point-info">
             <p v-if="authState.loggedIn && point !== null">
-              <span><i class="fas fa-coins coin-icon"></i></span>我的积分：<span
+              <span><paper-money-two class="coin-icon" /></span>我的积分：<span
                 class="point-value"
                 >{{ point }}</span
               >
@@ -37,7 +37,7 @@
               <BaseImage class="goods-item-image" :src="good.image" alt="good.name" />
               <div class="goods-item-name">{{ good.name }}</div>
               <div class="goods-item-cost">
-                <i class="fas fa-coins"></i>
+                <paper-money-two />
                 {{ good.cost }} 积分
               </div>
               <div
@@ -185,7 +185,7 @@
                   参与，获得 {{ item.amount }} 积分
                 </template>
                 <template v-else-if="item.type === 'SYSTEM_ONLINE'"> 积分历史系统上线 </template>
-                <i class="fas fa-coins"></i> 你目前的积分是 {{ item.balance }}
+                <paper-money-two /> 你目前的积分是 {{ item.balance }}
               </div>
               <div class="history-time">{{ TimeManager.format(item.createdAt) }}</div>
             </template>

frontend_nuxt/pages/posts/[id]/edit.vue

@@ -12,9 +12,9 @@
           <TagSelect v-model="selectedTags" creatable />
         </div>
         <div class="post-options-right">
-          <div class="post-clear" @click="clearPost"><i class="fa-solid fa-eraser"></i> 清空</div>
+          <div class="post-clear" @click="clearPost"><clear-icon /> 清空</div>
           <div class="ai-generate" @click="aiGenerate">
-            <i class="fa-solid fa-robot"></i>
+            <smart-optimization />
             MD 格式优化
           </div>
           <div class="post-cancel" @click="cancelEdit">取消</div>
@@ -26,9 +26,7 @@
           >
             更新
           </div>
-          <div v-else class="post-submit-loading">
-            <i class="fa-solid fa-spinner fa-spin"></i> 更新中...
-          </div>
+          <div v-else class="post-submit-loading"><loading-four /> 更新中...</div>
         </div>
       </div>
     </div>

frontend_nuxt/pages/posts/[id]/index.vue

@@ -22,7 +22,7 @@
             class="article-subscribe-button"
             @click="subscribePost"
           >
-            <i class="fas fa-user-plus"></i>
+            <people-plus />
             <div class="article-subscribe-button-text">
               {{ isMobile ? '订阅' : '订阅文章' }}
             </div>
@@ -32,14 +32,14 @@
             class="article-unsubscribe-button"
             @click="unsubscribePost"
           >
-            <i class="fas fa-user-minus"></i>
+            <people-minus-one />
             <div class="article-unsubscribe-button-text">
               {{ isMobile ? '退订' : '取消订阅' }}
             </div>
           </div>
           <DropdownMenu v-if="articleMenuItems.length > 0" :items="articleMenuItems">
             <template #trigger>
-              <i class="fas fa-ellipsis-vertical action-menu-icon"></i>
+              <more-one class="action-menu-icon" />
             </template>
           </DropdownMenu>
         </div>
@@ -53,7 +53,7 @@
           <div v-if="isMobile" class="info-content-header">
             <div class="user-name">
               {{ author.username }}
-              <i class="fas fa-medal medal-icon"></i>
+              <medal-one class="medal-icon" />
               <NuxtLink
                 v-if="author.displayMedal"
                 class="user-medal"
@@ -69,7 +69,7 @@
           <div v-if="!isMobile" class="info-content-header">
             <div class="user-name">
               {{ author.username }}
-              <i class="fas fa-medal medal-icon"></i>
+              <medal-one class="medal-icon" />
               <NuxtLink
                 v-if="author.displayMedal"
                 class="user-medal"
@@ -88,7 +88,7 @@
           <div class="article-footer-container">
             <ReactionsGroup v-model="postReactions" content-type="post" :content-id="postId">
               <div class="make-reaction-item copy-link" @click="copyPostLink">
-                <i class="fas fa-link"></i>
+                <link-icon />
               </div>
             </ReactionsGroup>
           </div>
@@ -707,8 +707,8 @@ const unsubscribePost = async () => {
 
 const fetchCommentSorts = () => {
   return Promise.resolve([
-    { id: 'NEWEST', name: '最新', icon: 'fas fa-clock' },
-    { id: 'OLDEST', name: '最旧', icon: 'fas fa-hourglass-start' },
+    { id: 'NEWEST', name: '最新', icon: 'lightning' },
+    { id: 'OLDEST', name: '最旧', icon: 'history-icon' },
     // { id: 'MOST_INTERACTIONS', name: '最多互动', icon: 'fas fa-fire' }
   ])
 }

frontend_nuxt/pages/settings.vue

@@ -7,7 +7,7 @@
       @crop="onCropped"
     />
     <div v-if="isLoadingPage" class="loading-page">
-      <l-hatch size="20" stroke="4" speed="3.5" color="var(--primary-color)"></l-hatch>
+      <l-hatch size="28" stroke="4" speed="3.5" color="var(--primary-color)"></l-hatch>
     </div>
     <div v-else>
       <div class="settings-title">个人资料设置</div>
@@ -133,15 +133,15 @@ const onCropped = ({ file, url }) => {
 }
 const fetchPublishModes = () => {
   return Promise.resolve([
-    { id: 'DIRECT', name: '直接发布', icon: 'fas fa-bolt' },
-    { id: 'REVIEW', name: '审核后发布', icon: 'fas fa-search' },
+    { id: 'DIRECT', name: '直接发布', icon: 'send-icon' },
+    { id: 'REVIEW', name: '审核后发布', icon: 'search-icon' },
   ])
 }
 const fetchPasswordStrengths = () => {
   return Promise.resolve([
-    { id: 'LOW', name: '低', icon: 'fas fa-lock-open' },
-    { id: 'MEDIUM', name: '中', icon: 'fas fa-lock' },
-    { id: 'HIGH', name: '高', icon: 'fas fa-user-shield' },
+    { id: 'LOW', name: '低', icon: 'unlock' },
+    { id: 'MEDIUM', name: '中', icon: 'lock-one' },
+    { id: 'HIGH', name: '高', icon: 'lock' },
   ])
 }
 const fetchAiLimits = () => {
@@ -154,8 +154,8 @@ const fetchAiLimits = () => {
 }
 const fetchRegisterModes = () => {
   return Promise.resolve([
-    { id: 'DIRECT', name: '直接注册', icon: 'fas fa-user-check' },
-    { id: 'WHITELIST', name: '白名单邀请制', icon: 'fas fa-envelope' },
+    { id: 'DIRECT', name: '直接注册', icon: 'send-icon' },
+    { id: 'WHITELIST', name: '白名单邀请制', icon: 'search-icon' },
   ])
 }
 const loadAdminConfig = async () => {

frontend_nuxt/pages/signup.vue

@@ -35,7 +35,7 @@
         </div>
         <div v-else class="signup-page-button-primary disabled">
           <div class="signup-page-button-text">
-            <i class="fas fa-spinner fa-spin"></i>
+            <loading-four />
             发送中...
           </div>
         </div>
@@ -56,7 +56,7 @@
         </div>
         <div v-else class="signup-page-button-primary disabled">
           <div class="signup-page-button-text">
-            <i class="fas fa-spinner fa-spin"></i>
+            <loading-four />
             验证中...
           </div>
         </div>

frontend_nuxt/pages/users/[id].vue

@@ -45,7 +45,7 @@
               content="经验值可通过发帖、评论等操作获得，达到目标后即可提升等级，解锁更多功能。"
               placement="bottom"
             >
-              <info class="profile-exp-info" />
+              <info-icon class="profile-exp-info" />
             </ToolTip>
           </div>
         </div>