jiazhizhong/OpenIsle
1
0
Fork 0
mirror of https://github.com/nagisa77/OpenIsle.git synced 2026-04-21 19:37:29 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat: 新增已读所有消息

Browse Source
This commit is contained in:
tim
2025-07-14 17:11:08 +08:00
parent b9a79b5e23
commit e69a2213fa
1 changed files with 330 additions and 270 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -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>