From 8ec48945132ddee4973a19e7e6ff76e3d0909eb8 Mon Sep 17 00:00:00 2001
From: tim <nagisa12164@163.com>
Date: Mon, 14 Jul 2025 14:15:12 +0800
Subject: [PATCH] feat: mark as read button

---
 open-isle-cli/src/views/MessagePageView.vue | 148 +++++++++++++++++++-
 open-isle-cli/src/views/ProfileView.vue     |   3 +-
 2 files changed, 148 insertions(+), 3 deletions(-)

diff --git a/open-isle-cli/src/views/MessagePageView.vue b/open-isle-cli/src/views/MessagePageView.vue
index 7d1843a13..7f76627ab 100644
--- a/open-isle-cli/src/views/MessagePageView.vue
+++ b/open-isle-cli/src/views/MessagePageView.vue
@@ -13,6 +13,7 @@
           <span class="notif-type">
             <template v-if="item.type === 'COMMENT_REPLY' && item.parentComment">
               <div class="notif-content-container">
+                <div class="notif-content-container-item">
                 <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)"
@@ -24,10 +25,18 @@
                     {{ sanitizeDescription(item.comment.content) }}
                   </router-link>
                 </span>
+                </div>
+                <div v-if="!item.read" class="mark-read-button" @click="markRead(item.id)">
+                  标记为已读
+                </div>
+                <div v-else class="has-read-button">
+                  已读
+                </div>
               </div>
             </template>
             <template v-else-if="item.type === 'COMMENT_REPLY' && !item.parentComment">
               <div class="notif-content-container">
+                <div class="notif-content-container-item">
                 <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}`">
@@ -38,21 +47,37 @@
                     {{ sanitizeDescription(item.comment.content) }}
                   </router-link>
                 </span>
+                </div>
+                <div v-if="!item.read" class="mark-read-button" @click="markRead(item.id)">
+                  标记为已读
+                </div>
+                <div v-else class="has-read-button">
+                  已读
+                </div>
               </div>
             </template>
             <template v-else-if="item.type === 'REACTION' && item.post && !item.comment">
               <div class="notif-content-container">
+                <div class="notif-content-container-item">
                 <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>
-                进行了表态
+                  </span>
+                  进行了表态
+                </div>
+                <div v-if="!item.read" class="mark-read-button" @click="markRead(item.id)">
+                  标记为已读
+                </div>
+                <div v-else class="has-read-button">
+                  已读
+                </div>
               </div>
             </template>
             <template v-else-if="item.type === 'REACTION' && item.comment">
               <div class="notif-content-container">
+                <div class="notif-content-container-item">
                 <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}`">
@@ -60,10 +85,18 @@
                   </router-link>
                 </span>
                 进行了表态
+                </div>
+                <div v-if="!item.read" class="mark-read-button" @click="markRead(item.id)">
+                  标记为已读
+                </div>
+                <div v-else class="has-read-button">
+                  已读
+                </div>
               </div>
             </template>
             <template v-else-if="item.type === 'POST_VIEWED'">
               <div class="notif-content-container">
+                <div class="notif-content-container-item">
                 <router-link class="notif-content-text" @click="markRead(item.id)" :to="`/users/${item.fromUser.id}`">
                   {{ item.fromUser.username }}
                 </router-link>
@@ -71,10 +104,18 @@
                 <router-link class="notif-content-text" @click="markRead(item.id)" :to="`/posts/${item.post.id}`">
                   {{ sanitizeDescription(item.post.title) }}
                 </router-link>
+                </div>
+                <div v-if="!item.read" class="mark-read-button" @click="markRead(item.id)">
+                  标记为已读
+                </div>
+                <div v-else class="has-read-button">
+                  已读
+                </div>
               </div>
             </template>
             <template v-else-if="item.type === 'POST_UPDATED'">
               <div class="notif-content-container">
+                <div class="notif-content-container-item">
                 您关注的帖子
                 <router-link class="notif-content-text" @click="markRead(item.id)" :to="`/posts/${item.post.id}`">
                   {{ sanitizeDescription(item.post.title) }}
@@ -83,26 +124,50 @@
                 <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>
+                </div>
+                <div v-if="!item.read" class="mark-read-button" @click="markRead(item.id)">
+                  标记为已读
+                </div>
+                <div v-else class="has-read-button">
+                  已读
+                </div>
               </div>
             </template>
             <template v-else-if="item.type === 'USER_FOLLOWED'">
               <div class="notif-content-container">
+                <div class="notif-content-container-item">
                 <router-link class="notif-content-text" @click="markRead(item.id)" :to="`/users/${item.fromUser.id}`">
                   {{ item.fromUser.username }}
                 </router-link>
                 开始关注你了
+                </div>
+                <div v-if="!item.read" class="mark-read-button" @click="markRead(item.id)">
+                  标记为已读
+                </div>
+                <div v-else class="has-read-button">
+                  已读
+                </div>
               </div>
             </template>
             <template v-else-if="item.type === 'USER_UNFOLLOWED'">
               <div class="notif-content-container">
+                <div class="notif-content-container-item">
                 <router-link class="notif-content-text" @click="markRead(item.id)" :to="`/users/${item.fromUser.id}`">
                   {{ item.fromUser.username }}
                 </router-link>
                 取消关注你了
+                </div>
+                <div v-if="!item.read" class="mark-read-button" @click="markRead(item.id)">
+                  标记为已读
+                </div>
+                <div v-else class="has-read-button">
+                  已读
+                </div>
               </div>
             </template>
             <template v-else-if="item.type === 'FOLLOWED_POST'">
               <div class="notif-content-container">
+                <div class="notif-content-container-item">
                 你关注的
                 <router-link class="notif-content-text" @click="markRead(item.id)" :to="`/users/${item.fromUser.id}`">
                   {{ item.fromUser.username }}
@@ -111,10 +176,18 @@
                 <router-link class="notif-content-text" @click="markRead(item.id)" :to="`/posts/${item.post.id}`">
                   {{ sanitizeDescription(item.post.title) }}
                 </router-link>
+                </div>
+                <div v-if="!item.read" class="mark-read-button" @click="markRead(item.id)">
+                  标记为已读
+                </div>
+                <div v-else class="has-read-button">
+                  已读
+                </div>
               </div>
             </template>
             <template v-else-if="item.type === 'POST_SUBSCRIBED'">
               <div class="notif-content-container">
+                <div class="notif-content-container-item">  
                 <router-link class="notif-content-text" @click="markRead(item.id)" :to="`/users/${item.fromUser.id}`">
                   {{ item.fromUser.username }}
                 </router-link>
@@ -122,10 +195,18 @@
                 <router-link class="notif-content-text" @click="markRead(item.id)" :to="`/posts/${item.post.id}`">
                   {{ sanitizeDescription(item.post.title) }}
                 </router-link>
+                </div>
+                <div v-if="!item.read" class="mark-read-button" @click="markRead(item.id)">
+                  标记为已读
+                </div>
+                <div v-else class="has-read-button">
+                  已读
+                </div>
               </div>
             </template>
             <template v-else-if="item.type === 'POST_UNSUBSCRIBED'">
               <div class="notif-content-container">
+                <div class="notif-content-container-item">
                 <router-link class="notif-content-text" @click="markRead(item.id)" :to="`/users/${item.fromUser.id}`">
                   {{ item.fromUser.username }}
                 </router-link>
@@ -133,10 +214,18 @@
                 <router-link class="notif-content-text" @click="markRead(item.id)" :to="`/posts/${item.post.id}`">
                   {{ sanitizeDescription(item.post.title) }}
                 </router-link>
+                </div>
+                <div v-if="!item.read" class="mark-read-button" @click="markRead(item.id)">
+                  标记为已读
+                </div>
+                <div v-else class="has-read-button">
+                  已读
+                </div>
               </div>
             </template>
             <template v-else-if="item.type === 'POST_REVIEW_REQUEST' && item.fromUser">
               <div class="notif-content-container">
+                <div class="notif-content-container-item">
                 <router-link class="notif-content-text" @click="markRead(item.id)" :to="`/users/${item.fromUser.id}`">
                   {{ item.fromUser.username }}
                 </router-link>
@@ -145,38 +234,75 @@
                   {{ sanitizeDescription(item.post.title) }}
                 </router-link>
                 ，请审核
+                </div>
+                <div v-if="!item.read" class="mark-read-button" @click="markRead(item.id)">
+                  标记为已读
+                </div>
+                <div v-else class="has-read-button">
+                  已读
+                </div>
               </div>
             </template>
             <template v-else-if="item.type === 'POST_REVIEW_REQUEST'">
               <div class="notif-content-container">
+                <div class="notif-content-container-item">
                 您发布的帖子
                 <router-link class="notif-content-text" @click="markRead(item.id)" :to="`/posts/${item.post.id}`">
                   {{ sanitizeDescription(item.post.title) }}
                 </router-link>
                 已提交审核
+                </div>
+                <div v-if="!item.read" class="mark-read-button" @click="markRead(item.id)">
+                  标记为已读
+                </div>
+                <div v-else class="has-read-button">
+                  已读
+                </div>
               </div>
             </template>
             <template v-else-if="item.type === 'POST_REVIEWED' && item.approved">
               <div class="notif-content-container">
+                <div class="notif-content-container-item">
                 您发布的帖子
                 <router-link class="notif-content-text" @click="markRead(item.id)" :to="`/posts/${item.post.id}`">
                   {{ sanitizeDescription(item.post.title) }}
                 </router-link>
                 已审核通过
+                </div>
+                <div class="mark-read-button">
+                  <button class="mark-read-button-item" v-if="!item.read" @click="markRead(item.id)">标记为已读</button>
+                  <button class="read-button-item" v-else @click="markRead(item.id)">已读</button>
+                </div>
               </div>
             </template>
             <template v-else-if="item.type === 'POST_REVIEWED' && item.approved === false">
               <div class="notif-content-container">
+                <div class="notif-content-container-item">
                 您发布的帖子
                 <router-link class="notif-content-text" @click="markRead(item.id)" :to="`/posts/${item.post.id}`">
                   {{ sanitizeDescription(item.post.title) }}
                 </router-link>
                 已被管理员拒绝
+                </div>
+                <div v-if="!item.read" class="mark-read-button" @click="markRead(item.id)">
+                  标记为已读
+                </div>
+                <div v-else class="has-read-button">
+                  已读
+                </div>
               </div>
             </template>
             <template v-else>
               <div class="notif-content-container">
+                <div class="notif-content-container-item">
                 {{ formatType(item.type) }}
+                </div>
+                <div v-if="!item.read" class="mark-read-button" @click="markRead(item.id)">
+                  标记为已读
+                </div>
+                <div v-else class="has-read-button">
+                  已读
+                </div>
               </div>
             </template>
           </span>
@@ -459,6 +585,9 @@ export default {
   font-weight: normal;
   font-size: 14px;
   opacity: 0.8;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
 }
 
 .notif-content-text {
@@ -476,4 +605,19 @@ export default {
   font-weight: bold;
   color: var(--text-color);
 }
+
+.mark-read-button {
+  color: var(--primary-color);
+  font-size: 12px;
+  cursor: pointer;
+}
+
+.mark-read-button:hover {
+  text-decoration: underline;
+}
+
+.has-read-button {
+  font-size: 12px;
+}
+
 </style>
diff --git a/open-isle-cli/src/views/ProfileView.vue b/open-isle-cli/src/views/ProfileView.vue
index 2a895f0c8..03ab772cf 100644
--- a/open-isle-cli/src/views/ProfileView.vue
+++ b/open-isle-cli/src/views/ProfileView.vue
@@ -622,12 +622,13 @@ export default {
   flex-direction: row;
   gap: 20px;
   width: 100%;
+  flex-wrap: wrap;
 }
 
 .hot-reply,
 .hot-topic,
 .hot-tag {
-  width: 33%;
+  width: 40%;
 }
 
 .profile-timeline {