feat: detailed reaction notifications

open-isle-cli/src/components/BaseTimeline.vue

@@ -8,6 +8,7 @@
       >
         <img v-if="item.src" :src="item.src" class="timeline-img" />
         <i v-else-if="item.icon" :class="item.icon"></i>
+        <span v-else-if="item.emoji" class="timeline-emoji">{{ item.emoji }}</span>
       </div>
       <div class="timeline-content">
         <slot name="item" :item="item">{{ item.content }}</slot>
@@ -63,6 +64,11 @@ export default {
   border-radius: 50%;
 }
 
+.timeline-emoji {
+  font-size: 20px;
+  line-height: 1;
+}
+
 .timeline-item::before {
   content: '';
   position: absolute;

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

@@ -45,6 +45,28 @@
                 </span>
               </div>
             </template>
+            <template v-else-if="item.type === 'REACTION' && item.post && !item.comment">
+              <div class="notif-content-container">
+                <span class="notif-user">{{ item.fromUser.username }} </span> 对我的文章
+                <span>
+                  <router-link class="notif-content-text" @click="markRead(item.id)" :to="`/posts/${item.post.id}`">
+                    {{ sanitizeDescription(item.post.title) }}
+                  </router-link>
+                </span>
+                表达了 "{{ item.emoji }}"
+              </div>
+            </template>
+            <template v-else-if="item.type === 'REACTION' && item.comment">
+              <div class="notif-content-container">
+                <span class="notif-user">{{ item.fromUser.username }} </span> 对我的评论
+                <span>
+                  <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>
+                表达了 "{{ item.emoji }}"
+              </div>
+            </template>
             <template v-else>
               <div class="notif-content-container">
                 {{ formatType(item.type) }}
@@ -91,12 +113,18 @@ export default {
     const iconMap = {
       POST_VIEWED: 'fas fa-eye',
       COMMENT_REPLY: 'fas fa-reply',
-      REACTION: 'fas fa-thumbs-up',
       POST_REVIEWED: 'fas fa-check',
       POST_UPDATED: 'fas fa-comment-dots',
       USER_ACTIVITY: 'fas fa-user'
     }
 
+    const reactionEmojiMap = {
+      LIKE: '❤️',
+      DISLIKE: '👎',
+      RECOMMEND: '👏',
+      ANGRY: '😡'
+    }
+
     const sanitizeDescription = (text) => {
       return stripMarkdown(text)
     }
@@ -131,6 +159,17 @@ export default {
                 router.push(`/users/${n.comment.author.id}`)
               }
             })
+          } else if (n.type === 'REACTION') {
+            notifications.value.push({
+              ...n,
+              emoji: reactionEmojiMap[n.reactionType],
+              iconClick: () => {
+                if (n.fromUser) {
+                  markRead(n.id)
+                  router.push(`/users/${n.fromUser.id}`)
+                }
+              }
+            })
           } else {
             notifications.value.push({
               ...n,