mirror of
https://github.com/nagisa77/OpenIsle.git
synced 2026-02-22 06:50:53 +08:00
fix: basic ui
This commit is contained in:
Tim
@@ -14,6 +14,12 @@
|
||||
>
|
||||
未读
|
||||
</div>
|
||||
<div
|
||||
:class="['message-tab-item', { selected: selectedTab === 'control' }]"
|
||||
@click="selectedTab = 'control'"
|
||||
>
|
||||
消息设置
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="message-page-header-right">
|
||||
@@ -24,32 +30,188 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-if="isLoadingMessage" class="loading-message">
|
||||
<l-hatch size="28" stroke="4" speed="3.5" color="var(--primary-color)"></l-hatch>
|
||||
<div v-if="selectedTab === 'control'">
|
||||
<div class="message-control-container">
|
||||
<div class="message-control-title">通知设置</div>
|
||||
<div class="message-control-push-item-container">
|
||||
<div class="message-control-push-item">已读通知</div>
|
||||
<div class="message-control-push-item select">订阅者发帖通知</div>
|
||||
<div class="message-control-push-item">订阅者回复通知</div>
|
||||
<div class="message-control-push-item">关注者发帖通知</div>
|
||||
<div class="message-control-push-item">评论回复通知</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<BasePlaceholder
|
||||
v-else-if="filteredNotifications.length === 0"
|
||||
text="暂时没有消息 :)"
|
||||
icon="fas fa-inbox"
|
||||
/>
|
||||
<template v-else>
|
||||
<div v-if="isLoadingMessage" class="loading-message">
|
||||
<l-hatch size="28" stroke="4" speed="3.5" color="var(--primary-color)"></l-hatch>
|
||||
</div>
|
||||
|
||||
<div class="timeline-container" v-if="filteredNotifications.length > 0">
|
||||
<BaseTimeline :items="filteredNotifications">
|
||||
<template #item="{ item }">
|
||||
<div class="notif-content" :class="{ read: item.read }">
|
||||
<span v-if="!item.read" class="unread-dot"></span>
|
||||
<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>
|
||||
对我的评论
|
||||
<span>
|
||||
<BasePlaceholder
|
||||
v-else-if="filteredNotifications.length === 0"
|
||||
text="暂时没有消息 :)"
|
||||
icon="fas fa-inbox"
|
||||
/>
|
||||
|
||||
<div class="timeline-container" v-if="filteredNotifications.length > 0">
|
||||
<BaseTimeline :items="filteredNotifications">
|
||||
<template #item="{ item }">
|
||||
<div class="notif-content" :class="{ read: item.read }">
|
||||
<span v-if="!item.read" class="unread-dot"></span>
|
||||
<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>
|
||||
对我的评论
|
||||
<span>
|
||||
<router-link
|
||||
class="notif-content-text"
|
||||
@click="markRead(item.id)"
|
||||
:to="`/posts/${item.post.id}#comment-${item.parentComment.id}`"
|
||||
>
|
||||
{{ stripMarkdownLength(item.parentComment.content, 100) }}
|
||||
</router-link>
|
||||
</span>
|
||||
回复了
|
||||
<span>
|
||||
<router-link
|
||||
class="notif-content-text"
|
||||
@click="markRead(item.id)"
|
||||
:to="`/posts/${item.post.id}#comment-${item.comment.id}`"
|
||||
>
|
||||
{{ stripMarkdownLength(item.comment.content, 100) }}
|
||||
</router-link>
|
||||
</span>
|
||||
</NotificationContainer>
|
||||
</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>
|
||||
对我的文章
|
||||
<span>
|
||||
<router-link
|
||||
class="notif-content-text"
|
||||
@click="markRead(item.id)"
|
||||
:to="`/posts/${item.post.id}`"
|
||||
>
|
||||
{{ stripMarkdownLength(item.post.title, 100) }}
|
||||
</router-link>
|
||||
</span>
|
||||
回复了
|
||||
<span>
|
||||
<router-link
|
||||
class="notif-content-text"
|
||||
@click="markRead(item.id)"
|
||||
:to="`/posts/${item.post.id}#comment-${item.comment.id}`"
|
||||
>
|
||||
{{ stripMarkdownLength(item.comment.content, 100) }}
|
||||
</router-link>
|
||||
</span>
|
||||
</NotificationContainer>
|
||||
</template>
|
||||
<template v-else-if="item.type === 'ACTIVITY_REDEEM' && !item.parentComment">
|
||||
<NotificationContainer :item="item" :markRead="markRead">
|
||||
<span class="notif-user">{{ item.fromUser.username }} </span>
|
||||
申请进行奶茶兑换，联系方式是：{{ item.content }}
|
||||
</NotificationContainer>
|
||||
</template>
|
||||
<template v-else-if="item.type === 'REACTION' && item.post && !item.comment">
|
||||
<NotificationContainer :item="item" :markRead="markRead">
|
||||
<span class="notif-user">{{ item.fromUser.username }} </span> 对我的文章
|
||||
<span>
|
||||
<router-link
|
||||
class="notif-content-text"
|
||||
@click="markRead(item.id)"
|
||||
:to="`/posts/${item.post.id}`"
|
||||
>
|
||||
{{ stripMarkdownLength(item.post.title, 100) }}
|
||||
</router-link>
|
||||
</span>
|
||||
进行了表态
|
||||
</NotificationContainer>
|
||||
</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>
|
||||
对我的评论
|
||||
<span>
|
||||
<router-link
|
||||
class="notif-content-text"
|
||||
@click="markRead(item.id)"
|
||||
:to="`/posts/${item.post.id}#comment-${item.comment.id}`"
|
||||
>
|
||||
{{ stripMarkdownLength(item.comment.content, 100) }}
|
||||
</router-link>
|
||||
</span>
|
||||
进行了表态
|
||||
</NotificationContainer>
|
||||
</template>
|
||||
<template v-else-if="item.type === 'POST_VIEWED'">
|
||||
<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="`/posts/${item.post.id}`"
|
||||
>
|
||||
{{ stripMarkdownLength(item.post.title, 100) }}
|
||||
</router-link>
|
||||
</NotificationContainer>
|
||||
</template>
|
||||
<template v-else-if="item.type === 'POST_UPDATED'">
|
||||
<NotificationContainer :item="item" :markRead="markRead">
|
||||
您关注的帖子
|
||||
<router-link
|
||||
class="notif-content-text"
|
||||
@click="markRead(item.id)"
|
||||
:to="`/posts/${item.post.id}`"
|
||||
>
|
||||
{{ stripMarkdownLength(item.post.title, 100) }}
|
||||
</router-link>
|
||||
下面有新评论
|
||||
<router-link
|
||||
class="notif-content-text"
|
||||
@click="markRead(item.id)"
|
||||
:to="`/posts/${item.post.id}#comment-${item.comment.id}`"
|
||||
>
|
||||
{{ stripMarkdownLength(item.comment.content, 100) }}
|
||||
</router-link>
|
||||
</NotificationContainer>
|
||||
</template>
|
||||
<template v-else-if="item.type === 'USER_ACTIVITY' && 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)"
|
||||
@@ -57,9 +219,7 @@
|
||||
>
|
||||
{{ stripMarkdownLength(item.parentComment.content, 100) }}
|
||||
</router-link>
|
||||
</span>
|
||||
回复了
|
||||
<span>
|
||||
回复了
|
||||
<router-link
|
||||
class="notif-content-text"
|
||||
@click="markRead(item.id)"
|
||||
@@ -67,19 +227,19 @@
|
||||
>
|
||||
{{ stripMarkdownLength(item.comment.content, 100) }}
|
||||
</router-link>
|
||||
</span>
|
||||
</NotificationContainer>
|
||||
</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>
|
||||
对我的文章
|
||||
<span>
|
||||
</NotificationContainer>
|
||||
</template>
|
||||
<template v-else-if="item.type === 'USER_ACTIVITY'">
|
||||
<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)"
|
||||
@@ -87,9 +247,7 @@
|
||||
>
|
||||
{{ stripMarkdownLength(item.post.title, 100) }}
|
||||
</router-link>
|
||||
</span>
|
||||
回复了
|
||||
<span>
|
||||
下面评论了
|
||||
<router-link
|
||||
class="notif-content-text"
|
||||
@click="markRead(item.id)"
|
||||
@@ -97,19 +255,37 @@
|
||||
>
|
||||
{{ stripMarkdownLength(item.comment.content, 100) }}
|
||||
</router-link>
|
||||
</span>
|
||||
</NotificationContainer>
|
||||
</template>
|
||||
<template v-else-if="item.type === 'ACTIVITY_REDEEM' && !item.parentComment">
|
||||
<NotificationContainer :item="item" :markRead="markRead">
|
||||
<span class="notif-user">{{ item.fromUser.username }} </span>
|
||||
申请进行奶茶兑换，联系方式是：{{ item.content }}
|
||||
</NotificationContainer>
|
||||
</template>
|
||||
<template v-else-if="item.type === 'REACTION' && item.post && !item.comment">
|
||||
<NotificationContainer :item="item" :markRead="markRead">
|
||||
<span class="notif-user">{{ item.fromUser.username }} </span> 对我的文章
|
||||
<span>
|
||||
</NotificationContainer>
|
||||
</template>
|
||||
<template v-else-if="item.type === 'MENTION' && 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="`/posts/${item.post.id}#comment-${item.comment.id}`"
|
||||
>
|
||||
{{ stripMarkdownLength(item.comment.content, 100) }}
|
||||
</router-link>
|
||||
</NotificationContainer>
|
||||
</template>
|
||||
<template v-else-if="item.type === 'MENTION'">
|
||||
<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)"
|
||||
@@ -117,339 +293,184 @@
|
||||
>
|
||||
{{ stripMarkdownLength(item.post.title, 100) }}
|
||||
</router-link>
|
||||
</span>
|
||||
进行了表态
|
||||
</NotificationContainer>
|
||||
</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>
|
||||
对我的评论
|
||||
<span>
|
||||
中提到了你
|
||||
</NotificationContainer>
|
||||
</template>
|
||||
<template v-else-if="item.type === 'USER_FOLLOWED'">
|
||||
<NotificationContainer :item="item" :markRead="markRead">
|
||||
<router-link
|
||||
class="notif-content-text"
|
||||
@click="markRead(item.id)"
|
||||
:to="`/posts/${item.post.id}#comment-${item.comment.id}`"
|
||||
:to="`/users/${item.fromUser.id}`"
|
||||
>
|
||||
{{ stripMarkdownLength(item.comment.content, 100) }}
|
||||
{{ item.fromUser.username }}
|
||||
</router-link>
|
||||
</span>
|
||||
进行了表态
|
||||
</NotificationContainer>
|
||||
</template>
|
||||
<template v-else-if="item.type === 'POST_VIEWED'">
|
||||
<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="`/posts/${item.post.id}`"
|
||||
>
|
||||
{{ stripMarkdownLength(item.post.title, 100) }}
|
||||
</router-link>
|
||||
</NotificationContainer>
|
||||
</template>
|
||||
<template v-else-if="item.type === 'POST_UPDATED'">
|
||||
<NotificationContainer :item="item" :markRead="markRead">
|
||||
您关注的帖子
|
||||
<router-link
|
||||
class="notif-content-text"
|
||||
@click="markRead(item.id)"
|
||||
:to="`/posts/${item.post.id}`"
|
||||
>
|
||||
{{ stripMarkdownLength(item.post.title, 100) }}
|
||||
</router-link>
|
||||
下面有新评论
|
||||
<router-link
|
||||
class="notif-content-text"
|
||||
@click="markRead(item.id)"
|
||||
:to="`/posts/${item.post.id}#comment-${item.comment.id}`"
|
||||
>
|
||||
{{ stripMarkdownLength(item.comment.content, 100) }}
|
||||
</router-link>
|
||||
</NotificationContainer>
|
||||
</template>
|
||||
<template v-else-if="item.type === 'USER_ACTIVITY' && 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="`/posts/${item.post.id}#comment-${item.parentComment.id}`"
|
||||
>
|
||||
{{ stripMarkdownLength(item.parentComment.content, 100) }}
|
||||
</router-link>
|
||||
回复了
|
||||
<router-link
|
||||
class="notif-content-text"
|
||||
@click="markRead(item.id)"
|
||||
:to="`/posts/${item.post.id}#comment-${item.comment.id}`"
|
||||
>
|
||||
{{ stripMarkdownLength(item.comment.content, 100) }}
|
||||
</router-link>
|
||||
</NotificationContainer>
|
||||
</template>
|
||||
<template v-else-if="item.type === 'USER_ACTIVITY'">
|
||||
<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="`/posts/${item.post.id}`"
|
||||
>
|
||||
{{ stripMarkdownLength(item.post.title, 100) }}
|
||||
</router-link>
|
||||
下面评论了
|
||||
<router-link
|
||||
class="notif-content-text"
|
||||
@click="markRead(item.id)"
|
||||
:to="`/posts/${item.post.id}#comment-${item.comment.id}`"
|
||||
>
|
||||
{{ stripMarkdownLength(item.comment.content, 100) }}
|
||||
</router-link>
|
||||
</NotificationContainer>
|
||||
</template>
|
||||
<template v-else-if="item.type === 'MENTION' && 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="`/posts/${item.post.id}#comment-${item.comment.id}`"
|
||||
>
|
||||
{{ stripMarkdownLength(item.comment.content, 100) }}
|
||||
</router-link>
|
||||
</NotificationContainer>
|
||||
</template>
|
||||
<template v-else-if="item.type === 'MENTION'">
|
||||
<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="`/posts/${item.post.id}`"
|
||||
>
|
||||
{{ stripMarkdownLength(item.post.title, 100) }}
|
||||
</router-link>
|
||||
中提到了你
|
||||
</NotificationContainer>
|
||||
</template>
|
||||
<template v-else-if="item.type === 'USER_FOLLOWED'">
|
||||
<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>
|
||||
开始关注你了
|
||||
</NotificationContainer>
|
||||
</template>
|
||||
<template v-else-if="item.type === 'USER_UNFOLLOWED'">
|
||||
<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>
|
||||
取消关注你了
|
||||
</NotificationContainer>
|
||||
</template>
|
||||
<template v-else-if="item.type === 'FOLLOWED_POST'">
|
||||
<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="`/posts/${item.post.id}`"
|
||||
>
|
||||
{{ stripMarkdownLength(item.post.title, 100) }}
|
||||
</router-link>
|
||||
</NotificationContainer>
|
||||
</template>
|
||||
<template v-else-if="item.type === 'POST_SUBSCRIBED'">
|
||||
<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="`/posts/${item.post.id}`"
|
||||
>
|
||||
{{ stripMarkdownLength(item.post.title, 100) }}
|
||||
</router-link>
|
||||
</NotificationContainer>
|
||||
</template>
|
||||
<template v-else-if="item.type === 'POST_UNSUBSCRIBED'">
|
||||
<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="`/posts/${item.post.id}`"
|
||||
>
|
||||
{{ stripMarkdownLength(item.post.title, 100) }}
|
||||
</router-link>
|
||||
</NotificationContainer>
|
||||
</template>
|
||||
<template v-else-if="item.type === 'POST_REVIEW_REQUEST' && item.fromUser">
|
||||
<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="`/posts/${item.post.id}`"
|
||||
>
|
||||
{{ stripMarkdownLength(item.post.title, 100) }}
|
||||
</router-link>
|
||||
，请审核
|
||||
</NotificationContainer>
|
||||
</template>
|
||||
<template v-else-if="item.type === 'POST_REVIEW_REQUEST'">
|
||||
<NotificationContainer :item="item" :markRead="markRead">
|
||||
您发布的帖子
|
||||
<router-link
|
||||
class="notif-content-text"
|
||||
@click="markRead(item.id)"
|
||||
:to="`/posts/${item.post.id}`"
|
||||
>
|
||||
{{ stripMarkdownLength(item.post.title, 100) }}
|
||||
</router-link>
|
||||
已提交审核
|
||||
</NotificationContainer>
|
||||
</template>
|
||||
<template v-else-if="item.type === 'REGISTER_REQUEST'">
|
||||
<NotificationContainer :item="item" :markRead="markRead">
|
||||
{{ item.fromUser.username }} 希望注册为会员，理由是：{{ item.content }}
|
||||
<template #actions v-if="authState.role === 'ADMIN'">
|
||||
<div v-if="!item.read" class="optional-buttons">
|
||||
<div
|
||||
class="mark-approve-button-item"
|
||||
@click="approve(item.fromUser.id, item.id)"
|
||||
>
|
||||
同意
|
||||
开始关注你了
|
||||
</NotificationContainer>
|
||||
</template>
|
||||
<template v-else-if="item.type === 'USER_UNFOLLOWED'">
|
||||
<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>
|
||||
取消关注你了
|
||||
</NotificationContainer>
|
||||
</template>
|
||||
<template v-else-if="item.type === 'FOLLOWED_POST'">
|
||||
<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="`/posts/${item.post.id}`"
|
||||
>
|
||||
{{ stripMarkdownLength(item.post.title, 100) }}
|
||||
</router-link>
|
||||
</NotificationContainer>
|
||||
</template>
|
||||
<template v-else-if="item.type === 'POST_SUBSCRIBED'">
|
||||
<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="`/posts/${item.post.id}`"
|
||||
>
|
||||
{{ stripMarkdownLength(item.post.title, 100) }}
|
||||
</router-link>
|
||||
</NotificationContainer>
|
||||
</template>
|
||||
<template v-else-if="item.type === 'POST_UNSUBSCRIBED'">
|
||||
<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="`/posts/${item.post.id}`"
|
||||
>
|
||||
{{ stripMarkdownLength(item.post.title, 100) }}
|
||||
</router-link>
|
||||
</NotificationContainer>
|
||||
</template>
|
||||
<template v-else-if="item.type === 'POST_REVIEW_REQUEST' && item.fromUser">
|
||||
<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="`/posts/${item.post.id}`"
|
||||
>
|
||||
{{ stripMarkdownLength(item.post.title, 100) }}
|
||||
</router-link>
|
||||
，请审核
|
||||
</NotificationContainer>
|
||||
</template>
|
||||
<template v-else-if="item.type === 'POST_REVIEW_REQUEST'">
|
||||
<NotificationContainer :item="item" :markRead="markRead">
|
||||
您发布的帖子
|
||||
<router-link
|
||||
class="notif-content-text"
|
||||
@click="markRead(item.id)"
|
||||
:to="`/posts/${item.post.id}`"
|
||||
>
|
||||
{{ stripMarkdownLength(item.post.title, 100) }}
|
||||
</router-link>
|
||||
已提交审核
|
||||
</NotificationContainer>
|
||||
</template>
|
||||
<template v-else-if="item.type === 'REGISTER_REQUEST'">
|
||||
<NotificationContainer :item="item" :markRead="markRead">
|
||||
{{ item.fromUser.username }} 希望注册为会员，理由是：{{ item.content }}
|
||||
<template #actions v-if="authState.role === 'ADMIN'">
|
||||
<div v-if="!item.read" class="optional-buttons">
|
||||
<div
|
||||
class="mark-approve-button-item"
|
||||
@click="approve(item.fromUser.id, item.id)"
|
||||
>
|
||||
同意
|
||||
</div>
|
||||
<div
|
||||
class="mark-reject-button-item"
|
||||
@click="reject(item.fromUser.id, item.id)"
|
||||
>
|
||||
拒绝
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="mark-reject-button-item"
|
||||
@click="reject(item.fromUser.id, item.id)"
|
||||
>
|
||||
拒绝
|
||||
</div>
|
||||
</div>
|
||||
<div v-else class="has_read_button" @click="markRead(item.id)">已读</div>
|
||||
</template>
|
||||
</NotificationContainer>
|
||||
</template>
|
||||
<template v-else-if="item.type === 'POST_REVIEWED' && item.approved">
|
||||
<NotificationContainer :item="item" :markRead="markRead">
|
||||
您发布的帖子
|
||||
<router-link
|
||||
class="notif-content-text"
|
||||
@click="markRead(item.id)"
|
||||
:to="`/posts/${item.post.id}`"
|
||||
>
|
||||
{{ stripMarkdownLength(item.post.title, 100) }}
|
||||
</router-link>
|
||||
已审核通过
|
||||
</NotificationContainer>
|
||||
</template>
|
||||
<template v-else-if="item.type === 'POST_REVIEWED' && item.approved === false">
|
||||
<NotificationContainer :item="item" :markRead="markRead">
|
||||
您发布的帖子
|
||||
<router-link
|
||||
class="notif-content-text"
|
||||
@click="markRead(item.id)"
|
||||
:to="`/posts/${item.post.id}`"
|
||||
>
|
||||
{{ stripMarkdownLength(item.post.title, 100) }}
|
||||
</router-link>
|
||||
已被管理员拒绝
|
||||
</NotificationContainer>
|
||||
</template>
|
||||
<template v-else>
|
||||
<NotificationContainer :item="item" :markRead="markRead">
|
||||
{{ formatType(item.type) }}
|
||||
</NotificationContainer>
|
||||
</template>
|
||||
</span>
|
||||
<span class="notif-time">{{ TimeManager.format(item.createdAt) }}</span>
|
||||
</div>
|
||||
</template>
|
||||
</BaseTimeline>
|
||||
</div>
|
||||
<div v-else class="has_read_button" @click="markRead(item.id)">已读</div>
|
||||
</template>
|
||||
</NotificationContainer>
|
||||
</template>
|
||||
<template v-else-if="item.type === 'POST_REVIEWED' && item.approved">
|
||||
<NotificationContainer :item="item" :markRead="markRead">
|
||||
您发布的帖子
|
||||
<router-link
|
||||
class="notif-content-text"
|
||||
@click="markRead(item.id)"
|
||||
:to="`/posts/${item.post.id}`"
|
||||
>
|
||||
{{ stripMarkdownLength(item.post.title, 100) }}
|
||||
</router-link>
|
||||
已审核通过
|
||||
</NotificationContainer>
|
||||
</template>
|
||||
<template v-else-if="item.type === 'POST_REVIEWED' && item.approved === false">
|
||||
<NotificationContainer :item="item" :markRead="markRead">
|
||||
您发布的帖子
|
||||
<router-link
|
||||
class="notif-content-text"
|
||||
@click="markRead(item.id)"
|
||||
:to="`/posts/${item.post.id}`"
|
||||
>
|
||||
{{ stripMarkdownLength(item.post.title, 100) }}
|
||||
</router-link>
|
||||
已被管理员拒绝
|
||||
</NotificationContainer>
|
||||
</template>
|
||||
<template v-else>
|
||||
<NotificationContainer :item="item" :markRead="markRead">
|
||||
{{ formatType(item.type) }}
|
||||
</NotificationContainer>
|
||||
</template>
|
||||
</span>
|
||||
<span class="notif-time">{{ TimeManager.format(item.createdAt) }}</span>
|
||||
</div>
|
||||
</template>
|
||||
</BaseTimeline>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@@ -915,6 +936,38 @@ export default {
|
||||
border-bottom: 2px solid var(--primary-color);
|
||||
}
|
||||
|
||||
.message-control-title {
|
||||
font-size: 16px;
|
||||
font-weight: bold;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
.message-control-container {
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.message-control-push-item-container {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.message-control-push-item {
|
||||
font-size: 14px;
|
||||
margin-bottom: 5px;
|
||||
padding: 8px 16px;
|
||||
border: 1px solid var(--normal-border-color);
|
||||
border-radius: 10px;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.message-control-push-item.select {
|
||||
background-color: var(--primary-color);
|
||||
color: white;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.has_read_button {
|
||||
display: none;
|
||||
|
||||
Reference in New Issue
Block a user