feat: 新增已读所有消息

open-isle-cli/src/views/MessagePageView.vue

@@ -1,8 +1,20 @@
 <template>
   <div class="message-page">
+    <div class="message-page-header">
       <div class="message-tabs">
         <div :class="['message-tab-item', { selected: selectedTab === 'all' }]" @click="selectedTab = 'all'">消息</div>
-      <div :class="['message-tab-item', { selected: selectedTab === 'unread' }]" @click="selectedTab = 'unread'">未读</div>
+        <div :class="['message-tab-item', { selected: selectedTab === 'unread' }]" @click="selectedTab = 'unread'">未读
+        </div>
+      </div>
+
+      <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>
+          <span class="message-page-header-right-item-button-text">
+            已读所有消息
+          </span>
+        </div>
+      </div>
     </div>
 
     <div v-if="isLoadingMessage" class="loading-message">
@@ -19,14 +31,16 @@
             <span class="notif-type">
               <template v-if="item.type === 'COMMENT_REPLY' && item.parentComment">
                 <NotificationContainer :item="item" :markRead="markRead">
-                <router-link class="notif-content-text" @click="markRead(item.id)" :to="`/users/${item.comment.author.id}`">{{ item.comment.author.username }} </router-link> 对我的评论
+                  <router-link class="notif-content-text" @click="markRead(item.id)"
+                    :to="`/users/${item.comment.author.id}`">{{ item.comment.author.username }} </router-link> 对我的评论
                   <span>
                     <router-link class="notif-content-text" @click="markRead(item.id)"
                       :to="`/posts/${item.post.id}#comment-${item.parentComment.id}`">
                       {{ sanitizeDescription(item.parentComment.content) }}
                     </router-link>
                   </span> 回复了 <span>
-                  <router-link class="notif-content-text" @click="markRead(item.id)" :to="`/posts/${item.post.id}#comment-${item.comment.id}`">
+                    <router-link class="notif-content-text" @click="markRead(item.id)"
+                      :to="`/posts/${item.post.id}#comment-${item.comment.id}`">
                       {{ sanitizeDescription(item.comment.content) }}
                     </router-link>
                   </span>
@@ -34,13 +48,15 @@
               </template>
               <template v-else-if="item.type === 'COMMENT_REPLY' && !item.parentComment">
                 <NotificationContainer :item="item" :markRead="markRead">
-                <router-link class="notif-content-text" @click="markRead(item.id)" :to="`/users/${item.comment.author.id}`">{{ item.comment.author.username }} </router-link> 对我的文章
+                  <router-link class="notif-content-text" @click="markRead(item.id)"
+                    :to="`/users/${item.comment.author.id}`">{{ item.comment.author.username }} </router-link> 对我的文章
                   <span>
                     <router-link class="notif-content-text" @click="markRead(item.id)" :to="`/posts/${item.post.id}`">
                       {{ sanitizeDescription(item.post.title) }}
                     </router-link>
                   </span> 回复了 <span>
-                  <router-link class="notif-content-text" @click="markRead(item.id)" :to="`/posts/${item.post.id}#comment-${item.comment.id}`">
+                    <router-link class="notif-content-text" @click="markRead(item.id)"
+                      :to="`/posts/${item.post.id}#comment-${item.comment.id}`">
                       {{ sanitizeDescription(item.comment.content) }}
                     </router-link>
                   </span>
@@ -59,9 +75,11 @@
               </template>
               <template v-else-if="item.type === 'REACTION' && item.comment">
                 <NotificationContainer :item="item" :markRead="markRead">
-                <router-link class="notif-content-text" @click="markRead(item.id)" :to="`/users/${item.fromUser.id}`">{{ item.fromUser.username }} </router-link> 对我的评论
+                  <router-link class="notif-content-text" @click="markRead(item.id)"
+                    :to="`/users/${item.fromUser.id}`">{{ item.fromUser.username }} </router-link> 对我的评论
                   <span>
-                  <router-link class="notif-content-text" @click="markRead(item.id)" :to="`/posts/${item.post.id}#comment-${item.comment.id}`">
+                    <router-link class="notif-content-text" @click="markRead(item.id)"
+                      :to="`/posts/${item.post.id}#comment-${item.comment.id}`">
                       {{ sanitizeDescription(item.comment.content) }}
                     </router-link>
                   </span>
@@ -86,7 +104,8 @@
                     {{ sanitizeDescription(item.post.title) }}
                   </router-link>
                   下面有新评论
-                <router-link class="notif-content-text" @click="markRead(item.id)" :to="`/posts/${item.post.id}#comment-${item.comment.id}`">
+                  <router-link class="notif-content-text" @click="markRead(item.id)"
+                    :to="`/posts/${item.post.id}#comment-${item.comment.id}`">
                     {{ sanitizeDescription(item.comment.content) }}
                   </router-link>
                 </NotificationContainer>
@@ -238,6 +257,14 @@ export default {
       }
     }
 
+    const markAllRead = async () => {
+      const ok = await markNotificationsRead(notifications.value.map(n => n.id))
+      if (ok) {
+        notifications.value.forEach(n => n.read = true)
+        toast.success('已读所有消息')
+      }
+    }
+
     const iconMap = {
       POST_VIEWED: 'fas fa-eye',
       COMMENT_REPLY: 'fas fa-reply',
@@ -431,7 +458,8 @@ export default {
       markRead,
       TimeManager,
       selectedTab,
-      filteredNotifications
+      filteredNotifications,
+      markAllRead
     }
   }
 }
@@ -452,6 +480,41 @@ export default {
   overflow-y: auto;
 }
 
+.message-page-header {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.message-page-header-right {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+}
+
+.message-page-header-right-item {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  cursor: pointer;
+  color: var(--primary-color);
+  padding-right: 10px;
+  gap: 5px;
+}
+
+.message-page-header-right-item-button-icon {
+  font-size: 12px;
+}
+
+.message-page-header-right-item-button-text {
+  font-size: 12px;
+}
+
+.message-page-header-right-item-button-text:hover {
+  text-decoration: underline;
+}
+
 .timeline-container {
   padding: 10px 20px;
   height: 100%;
@@ -507,7 +570,6 @@ export default {
   display: flex;
   flex-direction: row;
   border-bottom: 1px solid #e0e0e0;
-  margin-bottom: 20px;
 }
 
 .message-tab-item {
@@ -519,6 +581,4 @@ export default {
   color: var(--primary-color);
   border-bottom: 2px solid var(--primary-color);
 }
-
-
 </style>