jiazhizhong/OpenIsle
1
0
Fork 0
mirror of https://github.com/nagisa77/OpenIsle.git synced 2026-05-11 21:27:31 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat: mark as read button

Browse Source
This commit is contained in:
tim
2025-07-14 14:15:12 +08:00
parent e26fcd982e
commit 8ec4894513
2 changed files with 148 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

148
open-isle-cli/src/views/MessagePageView.vue
View File

@@ -13,6 +13,7 @@
<span class="notif-type"> <span class="notif-type">
<template v-if="item.type === 'COMMENT_REPLY' && item.parentComment"> <template v-if="item.type === 'COMMENT_REPLY' && item.parentComment">
<div class="notif-content-container"> <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> 对我的评论 <router-link class="notif-content-text" @click="markRead(item.id)" :to="`/users/${item.comment.author.id}`">{{ item.comment.author.username }} </router-link> 对我的评论
<span> <span>
<router-link class="notif-content-text" @click="markRead(item.id)" <router-link class="notif-content-text" @click="markRead(item.id)"
@@ -24,10 +25,18 @@
{{ sanitizeDescription(item.comment.content) }} {{ sanitizeDescription(item.comment.content) }}
</router-link> </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> </div>
</template> </template>
<template v-else-if="item.type === 'COMMENT_REPLY' && !item.parentComment"> <template v-else-if="item.type === 'COMMENT_REPLY' && !item.parentComment">
<div class="notif-content-container"> <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> 对我的文章 <router-link class="notif-content-text" @click="markRead(item.id)" :to="`/users/${item.comment.author.id}`">{{ item.comment.author.username }} </router-link> 对我的文章
<span> <span>
<router-link class="notif-content-text" @click="markRead(item.id)" :to="`/posts/${item.post.id}`"> <router-link class="notif-content-text" @click="markRead(item.id)" :to="`/posts/${item.post.id}`">
@@ -38,21 +47,37 @@
{{ sanitizeDescription(item.comment.content) }} {{ sanitizeDescription(item.comment.content) }}
</router-link> </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> </div>
</template> </template>
<template v-else-if="item.type === 'REACTION' && item.post && !item.comment"> <template v-else-if="item.type === 'REACTION' && item.post && !item.comment">
<div class="notif-content-container"> <div class="notif-content-container">
<div class="notif-content-container-item">
<span class="notif-user">{{ item.fromUser.username }} </span> 对我的文章 <span class="notif-user">{{ item.fromUser.username }} </span> 对我的文章
<span> <span>
<router-link class="notif-content-text" @click="markRead(item.id)" :to="`/posts/${item.post.id}`"> <router-link class="notif-content-text" @click="markRead(item.id)" :to="`/posts/${item.post.id}`">
{{ sanitizeDescription(item.post.title) }} {{ sanitizeDescription(item.post.title) }}
</router-link> </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> </div>
</template> </template>
<template v-else-if="item.type === 'REACTION' && item.comment"> <template v-else-if="item.type === 'REACTION' && item.comment">
<div class="notif-content-container"> <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> 对我的评论 <router-link class="notif-content-text" @click="markRead(item.id)" :to="`/users/${item.fromUser.id}`">{{ item.fromUser.username }} </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}`">
@@ -60,10 +85,18 @@
</router-link> </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> </div>
</template> </template>
<template v-else-if="item.type === 'POST_VIEWED'"> <template v-else-if="item.type === 'POST_VIEWED'">
<div class="notif-content-container"> <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}`"> <router-link class="notif-content-text" @click="markRead(item.id)" :to="`/users/${item.fromUser.id}`">
{{ item.fromUser.username }} {{ item.fromUser.username }}
</router-link> </router-link>
@@ -71,10 +104,18 @@
<router-link class="notif-content-text" @click="markRead(item.id)" :to="`/posts/${item.post.id}`"> <router-link class="notif-content-text" @click="markRead(item.id)" :to="`/posts/${item.post.id}`">
{{ sanitizeDescription(item.post.title) }} {{ sanitizeDescription(item.post.title) }}
</router-link> </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> </div>
</template> </template>
<template v-else-if="item.type === 'POST_UPDATED'"> <template v-else-if="item.type === 'POST_UPDATED'">
<div class="notif-content-container"> <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}`"> <router-link class="notif-content-text" @click="markRead(item.id)" :to="`/posts/${item.post.id}`">
{{ sanitizeDescription(item.post.title) }} {{ 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}`"> <router-link class="notif-content-text" @click="markRead(item.id)" :to="`/posts/${item.post.id}#comment-${item.comment.id}`">
{{ sanitizeDescription(item.comment.content) }} {{ sanitizeDescription(item.comment.content) }}
</router-link> </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> </div>
</template> </template>
<template v-else-if="item.type === 'USER_FOLLOWED'"> <template v-else-if="item.type === 'USER_FOLLOWED'">
<div class="notif-content-container"> <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}`"> <router-link class="notif-content-text" @click="markRead(item.id)" :to="`/users/${item.fromUser.id}`">
{{ item.fromUser.username }} {{ item.fromUser.username }}
</router-link> </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> </div>
</template> </template>
<template v-else-if="item.type === 'USER_UNFOLLOWED'"> <template v-else-if="item.type === 'USER_UNFOLLOWED'">
<div class="notif-content-container"> <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}`"> <router-link class="notif-content-text" @click="markRead(item.id)" :to="`/users/${item.fromUser.id}`">
{{ item.fromUser.username }} {{ item.fromUser.username }}
</router-link> </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> </div>
</template> </template>
<template v-else-if="item.type === 'FOLLOWED_POST'"> <template v-else-if="item.type === 'FOLLOWED_POST'">
<div class="notif-content-container"> <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}`"> <router-link class="notif-content-text" @click="markRead(item.id)" :to="`/users/${item.fromUser.id}`">
{{ item.fromUser.username }} {{ item.fromUser.username }}
@@ -111,10 +176,18 @@
<router-link class="notif-content-text" @click="markRead(item.id)" :to="`/posts/${item.post.id}`"> <router-link class="notif-content-text" @click="markRead(item.id)" :to="`/posts/${item.post.id}`">
{{ sanitizeDescription(item.post.title) }} {{ sanitizeDescription(item.post.title) }}
</router-link> </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> </div>
</template> </template>
<template v-else-if="item.type === 'POST_SUBSCRIBED'"> <template v-else-if="item.type === 'POST_SUBSCRIBED'">
<div class="notif-content-container"> <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}`"> <router-link class="notif-content-text" @click="markRead(item.id)" :to="`/users/${item.fromUser.id}`">
{{ item.fromUser.username }} {{ item.fromUser.username }}
</router-link> </router-link>
@@ -122,10 +195,18 @@
<router-link class="notif-content-text" @click="markRead(item.id)" :to="`/posts/${item.post.id}`"> <router-link class="notif-content-text" @click="markRead(item.id)" :to="`/posts/${item.post.id}`">
{{ sanitizeDescription(item.post.title) }} {{ sanitizeDescription(item.post.title) }}
</router-link> </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> </div>
</template> </template>
<template v-else-if="item.type === 'POST_UNSUBSCRIBED'"> <template v-else-if="item.type === 'POST_UNSUBSCRIBED'">
<div class="notif-content-container"> <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}`"> <router-link class="notif-content-text" @click="markRead(item.id)" :to="`/users/${item.fromUser.id}`">
{{ item.fromUser.username }} {{ item.fromUser.username }}
</router-link> </router-link>
@@ -133,10 +214,18 @@
<router-link class="notif-content-text" @click="markRead(item.id)" :to="`/posts/${item.post.id}`"> <router-link class="notif-content-text" @click="markRead(item.id)" :to="`/posts/${item.post.id}`">
{{ sanitizeDescription(item.post.title) }} {{ sanitizeDescription(item.post.title) }}
</router-link> </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> </div>
</template> </template>
<template v-else-if="item.type === 'POST_REVIEW_REQUEST' && item.fromUser"> <template v-else-if="item.type === 'POST_REVIEW_REQUEST' && item.fromUser">
<div class="notif-content-container"> <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}`"> <router-link class="notif-content-text" @click="markRead(item.id)" :to="`/users/${item.fromUser.id}`">
{{ item.fromUser.username }} {{ item.fromUser.username }}
</router-link> </router-link>
@@ -145,38 +234,75 @@
{{ sanitizeDescription(item.post.title) }} {{ sanitizeDescription(item.post.title) }}
</router-link> </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> </div>
</template> </template>
<template v-else-if="item.type === 'POST_REVIEW_REQUEST'"> <template v-else-if="item.type === 'POST_REVIEW_REQUEST'">
<div class="notif-content-container"> <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}`"> <router-link class="notif-content-text" @click="markRead(item.id)" :to="`/posts/${item.post.id}`">
{{ sanitizeDescription(item.post.title) }} {{ sanitizeDescription(item.post.title) }}
</router-link> </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> </div>
</template> </template>
<template v-else-if="item.type === 'POST_REVIEWED' && item.approved"> <template v-else-if="item.type === 'POST_REVIEWED' && item.approved">
<div class="notif-content-container"> <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}`"> <router-link class="notif-content-text" @click="markRead(item.id)" :to="`/posts/${item.post.id}`">
{{ sanitizeDescription(item.post.title) }} {{ sanitizeDescription(item.post.title) }}
</router-link> </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> </div>
</template> </template>
<template v-else-if="item.type === 'POST_REVIEWED' && item.approved === false"> <template v-else-if="item.type === 'POST_REVIEWED' && item.approved === false">
<div class="notif-content-container"> <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}`"> <router-link class="notif-content-text" @click="markRead(item.id)" :to="`/posts/${item.post.id}`">
{{ sanitizeDescription(item.post.title) }} {{ sanitizeDescription(item.post.title) }}
</router-link> </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> </div>
</template> </template>
<template v-else> <template v-else>
<div class="notif-content-container"> <div class="notif-content-container">
<div class="notif-content-container-item">
{{ formatType(item.type) }} {{ 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> </div>
</template> </template>
</span> </span>
@@ -459,6 +585,9 @@ export default {
font-weight: normal; font-weight: normal;
font-size: 14px; font-size: 14px;
opacity: 0.8; opacity: 0.8;
display: flex;
justify-content: space-between;
align-items: center;
} }
.notif-content-text { .notif-content-text {
@@ -476,4 +605,19 @@ export default {
font-weight: bold; font-weight: bold;
color: var(--text-color); 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> </style>

3
open-isle-cli/src/views/ProfileView.vue
View File

@@ -622,12 +622,13 @@ export default {
flex-direction: row; flex-direction: row;
gap: 20px; gap: 20px;
width: 100%; width: 100%;
flex-wrap: wrap;
} }
.hot-reply, .hot-reply,
.hot-topic, .hot-topic,
.hot-tag { .hot-tag {
width: 33%; width: 40%;
} }
.profile-timeline { .profile-timeline {