fix: basic ui

This commit is contained in:
Tim
2025-08-12 14:07:57 +08:00
parent 8b12402e89
commit d195d2f624

View File

@@ -14,6 +14,12 @@
> >
未读 未读
</div> </div>
<div
:class="['message-tab-item', { selected: selectedTab === 'control' }]"
@click="selectedTab = 'control'"
>
消息设置
</div>
</div> </div>
<div class="message-page-header-right"> <div class="message-page-header-right">
@@ -24,32 +30,188 @@
</div> </div>
</div> </div>
<div v-if="isLoadingMessage" class="loading-message"> <div v-if="selectedTab === 'control'">
<l-hatch size="28" stroke="4" speed="3.5" color="var(--primary-color)"></l-hatch> <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> </div>
<BasePlaceholder <template v-else>
v-else-if="filteredNotifications.length === 0" <div v-if="isLoadingMessage" class="loading-message">
text="暂时没有消息 :)" <l-hatch size="28" stroke="4" speed="3.5" color="var(--primary-color)"></l-hatch>
icon="fas fa-inbox" </div>
/>
<div class="timeline-container" v-if="filteredNotifications.length > 0"> <BasePlaceholder
<BaseTimeline :items="filteredNotifications"> v-else-if="filteredNotifications.length === 0"
<template #item="{ item }"> text="暂时没有消息 :)"
<div class="notif-content" :class="{ read: item.read }"> icon="fas fa-inbox"
<span v-if="!item.read" class="unread-dot"></span> />
<span class="notif-type">
<template v-if="item.type === 'COMMENT_REPLY' && item.parentComment"> <div class="timeline-container" v-if="filteredNotifications.length > 0">
<NotificationContainer :item="item" :markRead="markRead"> <BaseTimeline :items="filteredNotifications">
<router-link <template #item="{ item }">
class="notif-content-text" <div class="notif-content" :class="{ read: item.read }">
@click="markRead(item.id)" <span v-if="!item.read" class="unread-dot"></span>
:to="`/users/${item.comment.author.id}`" <span class="notif-type">
>{{ item.comment.author.username }} <template v-if="item.type === 'COMMENT_REPLY' && item.parentComment">
</router-link> <NotificationContainer :item="item" :markRead="markRead">
对我的评论 <router-link
<span> 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 <router-link
class="notif-content-text" class="notif-content-text"
@click="markRead(item.id)" @click="markRead(item.id)"
@@ -57,9 +219,7 @@
> >
{{ stripMarkdownLength(item.parentComment.content, 100) }} {{ stripMarkdownLength(item.parentComment.content, 100) }}
</router-link> </router-link>
</span> 回复了
回复了
<span>
<router-link <router-link
class="notif-content-text" class="notif-content-text"
@click="markRead(item.id)" @click="markRead(item.id)"
@@ -67,19 +227,19 @@
> >
{{ stripMarkdownLength(item.comment.content, 100) }} {{ stripMarkdownLength(item.comment.content, 100) }}
</router-link> </router-link>
</span> </NotificationContainer>
</NotificationContainer> </template>
</template> <template v-else-if="item.type === 'USER_ACTIVITY'">
<template v-else-if="item.type === 'COMMENT_REPLY' && !item.parentComment"> <NotificationContainer :item="item" :markRead="markRead">
<NotificationContainer :item="item" :markRead="markRead"> 你关注的
<router-link <router-link
class="notif-content-text" class="notif-content-text"
@click="markRead(item.id)" @click="markRead(item.id)"
:to="`/users/${item.comment.author.id}`" :to="`/users/${item.comment.author.id}`"
>{{ item.comment.author.username }} >
</router-link> {{ item.comment.author.username }}
对我的文章 </router-link>
<span> 在文章
<router-link <router-link
class="notif-content-text" class="notif-content-text"
@click="markRead(item.id)" @click="markRead(item.id)"
@@ -87,9 +247,7 @@
> >
{{ stripMarkdownLength(item.post.title, 100) }} {{ stripMarkdownLength(item.post.title, 100) }}
</router-link> </router-link>
</span> 下面评论了
回复了
<span>
<router-link <router-link
class="notif-content-text" class="notif-content-text"
@click="markRead(item.id)" @click="markRead(item.id)"
@@ -97,19 +255,37 @@
> >
{{ stripMarkdownLength(item.comment.content, 100) }} {{ stripMarkdownLength(item.comment.content, 100) }}
</router-link> </router-link>
</span> </NotificationContainer>
</NotificationContainer> </template>
</template> <template v-else-if="item.type === 'MENTION' && item.comment">
<template v-else-if="item.type === 'ACTIVITY_REDEEM' && !item.parentComment"> <NotificationContainer :item="item" :markRead="markRead">
<NotificationContainer :item="item" :markRead="markRead"> <router-link
<span class="notif-user">{{ item.fromUser.username }} </span> class="notif-content-text"
申请进行奶茶兑换联系方式是{{ item.content }} @click="markRead(item.id)"
</NotificationContainer> :to="`/users/${item.fromUser.id}`"
</template> >
<template v-else-if="item.type === 'REACTION' && item.post && !item.comment"> {{ item.fromUser.username }}
<NotificationContainer :item="item" :markRead="markRead"> </router-link>
<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}`"
>
{{ 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 <router-link
class="notif-content-text" class="notif-content-text"
@click="markRead(item.id)" @click="markRead(item.id)"
@@ -117,339 +293,184 @@
> >
{{ stripMarkdownLength(item.post.title, 100) }} {{ stripMarkdownLength(item.post.title, 100) }}
</router-link> </router-link>
</span> 中提到了你
进行了表态 </NotificationContainer>
</NotificationContainer> </template>
</template> <template v-else-if="item.type === 'USER_FOLLOWED'">
<template v-else-if="item.type === 'REACTION' && item.comment"> <NotificationContainer :item="item" :markRead="markRead">
<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 <router-link
class="notif-content-text" class="notif-content-text"
@click="markRead(item.id)" @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> </router-link>
</span> 开始关注你了
进行了表态 </NotificationContainer>
</NotificationContainer> </template>
</template> <template v-else-if="item.type === 'USER_UNFOLLOWED'">
<template v-else-if="item.type === 'POST_VIEWED'"> <NotificationContainer :item="item" :markRead="markRead">
<NotificationContainer :item="item" :markRead="markRead"> <router-link
<router-link class="notif-content-text"
class="notif-content-text" @click="markRead(item.id)"
@click="markRead(item.id)" :to="`/users/${item.fromUser.id}`"
:to="`/users/${item.fromUser.id}`" >
> {{ item.fromUser.username }}
{{ item.fromUser.username }} </router-link>
</router-link> 取消关注你了
查看了您的帖子 </NotificationContainer>
<router-link </template>
class="notif-content-text" <template v-else-if="item.type === 'FOLLOWED_POST'">
@click="markRead(item.id)" <NotificationContainer :item="item" :markRead="markRead">
:to="`/posts/${item.post.id}`" 你关注的
> <router-link
{{ stripMarkdownLength(item.post.title, 100) }} class="notif-content-text"
</router-link> @click="markRead(item.id)"
</NotificationContainer> :to="`/users/${item.fromUser.id}`"
</template> >
<template v-else-if="item.type === 'POST_UPDATED'"> {{ item.fromUser.username }}
<NotificationContainer :item="item" :markRead="markRead"> </router-link>
您关注的帖子 发布了文章
<router-link <router-link
class="notif-content-text" class="notif-content-text"
@click="markRead(item.id)" @click="markRead(item.id)"
:to="`/posts/${item.post.id}`" :to="`/posts/${item.post.id}`"
> >
{{ stripMarkdownLength(item.post.title, 100) }} {{ stripMarkdownLength(item.post.title, 100) }}
</router-link> </router-link>
下面有新评论 </NotificationContainer>
<router-link </template>
class="notif-content-text" <template v-else-if="item.type === 'POST_SUBSCRIBED'">
@click="markRead(item.id)" <NotificationContainer :item="item" :markRead="markRead">
:to="`/posts/${item.post.id}#comment-${item.comment.id}`" <router-link
> class="notif-content-text"
{{ stripMarkdownLength(item.comment.content, 100) }} @click="markRead(item.id)"
</router-link> :to="`/users/${item.fromUser.id}`"
</NotificationContainer> >
</template> {{ item.fromUser.username }}
<template v-else-if="item.type === 'USER_ACTIVITY' && item.parentComment"> </router-link>
<NotificationContainer :item="item" :markRead="markRead"> 订阅了你的文章
你关注的 <router-link
<router-link class="notif-content-text"
class="notif-content-text" @click="markRead(item.id)"
@click="markRead(item.id)" :to="`/posts/${item.post.id}`"
:to="`/users/${item.comment.author.id}`" >
> {{ stripMarkdownLength(item.post.title, 100) }}
{{ item.comment.author.username }} </router-link>
</router-link> </NotificationContainer>
对评论 </template>
<router-link <template v-else-if="item.type === 'POST_UNSUBSCRIBED'">
class="notif-content-text" <NotificationContainer :item="item" :markRead="markRead">
@click="markRead(item.id)" <router-link
:to="`/posts/${item.post.id}#comment-${item.parentComment.id}`" class="notif-content-text"
> @click="markRead(item.id)"
{{ stripMarkdownLength(item.parentComment.content, 100) }} :to="`/users/${item.fromUser.id}`"
</router-link> >
回复了 {{ item.fromUser.username }}
<router-link </router-link>
class="notif-content-text" 取消订阅了你的文章
@click="markRead(item.id)" <router-link
:to="`/posts/${item.post.id}#comment-${item.comment.id}`" class="notif-content-text"
> @click="markRead(item.id)"
{{ stripMarkdownLength(item.comment.content, 100) }} :to="`/posts/${item.post.id}`"
</router-link> >
</NotificationContainer> {{ stripMarkdownLength(item.post.title, 100) }}
</template> </router-link>
<template v-else-if="item.type === 'USER_ACTIVITY'"> </NotificationContainer>
<NotificationContainer :item="item" :markRead="markRead"> </template>
你关注的 <template v-else-if="item.type === 'POST_REVIEW_REQUEST' && item.fromUser">
<router-link <NotificationContainer :item="item" :markRead="markRead">
class="notif-content-text" <router-link
@click="markRead(item.id)" class="notif-content-text"
:to="`/users/${item.comment.author.id}`" @click="markRead(item.id)"
> :to="`/users/${item.fromUser.id}`"
{{ item.comment.author.username }} >
</router-link> {{ item.fromUser.username }}
在文章 </router-link>
<router-link 发布了帖子
class="notif-content-text" <router-link
@click="markRead(item.id)" class="notif-content-text"
:to="`/posts/${item.post.id}`" @click="markRead(item.id)"
> :to="`/posts/${item.post.id}`"
{{ stripMarkdownLength(item.post.title, 100) }} >
</router-link> {{ stripMarkdownLength(item.post.title, 100) }}
下面评论了 </router-link>
<router-link 请审核
class="notif-content-text" </NotificationContainer>
@click="markRead(item.id)" </template>
:to="`/posts/${item.post.id}#comment-${item.comment.id}`" <template v-else-if="item.type === 'POST_REVIEW_REQUEST'">
> <NotificationContainer :item="item" :markRead="markRead">
{{ stripMarkdownLength(item.comment.content, 100) }} 您发布的帖子
</router-link> <router-link
</NotificationContainer> class="notif-content-text"
</template> @click="markRead(item.id)"
<template v-else-if="item.type === 'MENTION' && item.comment"> :to="`/posts/${item.post.id}`"
<NotificationContainer :item="item" :markRead="markRead"> >
<router-link {{ stripMarkdownLength(item.post.title, 100) }}
class="notif-content-text" </router-link>
@click="markRead(item.id)" 已提交审核
:to="`/users/${item.fromUser.id}`" </NotificationContainer>
> </template>
{{ item.fromUser.username }} <template v-else-if="item.type === 'REGISTER_REQUEST'">
</router-link> <NotificationContainer :item="item" :markRead="markRead">
在评论中提到了你 {{ item.fromUser.username }} 希望注册为会员理由是{{ item.content }}
<router-link <template #actions v-if="authState.role === 'ADMIN'">
class="notif-content-text" <div v-if="!item.read" class="optional-buttons">
@click="markRead(item.id)" <div
:to="`/posts/${item.post.id}#comment-${item.comment.id}`" class="mark-approve-button-item"
> @click="approve(item.fromUser.id, item.id)"
{{ stripMarkdownLength(item.comment.content, 100) }} >
</router-link> 同意
</NotificationContainer> </div>
</template> <div
<template v-else-if="item.type === 'MENTION'"> class="mark-reject-button-item"
<NotificationContainer :item="item" :markRead="markRead"> @click="reject(item.fromUser.id, item.id)"
<router-link >
class="notif-content-text" 拒绝
@click="markRead(item.id)" </div>
: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)"
>
同意
</div> </div>
<div <div v-else class="has_read_button" @click="markRead(item.id)">已读</div>
class="mark-reject-button-item" </template>
@click="reject(item.fromUser.id, item.id)" </NotificationContainer>
> </template>
拒绝 <template v-else-if="item.type === 'POST_REVIEWED' && item.approved">
</div> <NotificationContainer :item="item" :markRead="markRead">
</div> 您发布的帖子
<div v-else class="has_read_button" @click="markRead(item.id)">已读</div> <router-link
</template> class="notif-content-text"
</NotificationContainer> @click="markRead(item.id)"
</template> :to="`/posts/${item.post.id}`"
<template v-else-if="item.type === 'POST_REVIEWED' && item.approved"> >
<NotificationContainer :item="item" :markRead="markRead"> {{ stripMarkdownLength(item.post.title, 100) }}
您发布的帖子 </router-link>
<router-link 已审核通过
class="notif-content-text" </NotificationContainer>
@click="markRead(item.id)" </template>
:to="`/posts/${item.post.id}`" <template v-else-if="item.type === 'POST_REVIEWED' && item.approved === false">
> <NotificationContainer :item="item" :markRead="markRead">
{{ stripMarkdownLength(item.post.title, 100) }} 您发布的帖子
</router-link> <router-link
已审核通过 class="notif-content-text"
</NotificationContainer> @click="markRead(item.id)"
</template> :to="`/posts/${item.post.id}`"
<template v-else-if="item.type === 'POST_REVIEWED' && item.approved === false"> >
<NotificationContainer :item="item" :markRead="markRead"> {{ stripMarkdownLength(item.post.title, 100) }}
您发布的帖子 </router-link>
<router-link 已被管理员拒绝
class="notif-content-text" </NotificationContainer>
@click="markRead(item.id)" </template>
:to="`/posts/${item.post.id}`" <template v-else>
> <NotificationContainer :item="item" :markRead="markRead">
{{ stripMarkdownLength(item.post.title, 100) }} {{ formatType(item.type) }}
</router-link> </NotificationContainer>
已被管理员拒绝 </template>
</NotificationContainer> </span>
</template> <span class="notif-time">{{ TimeManager.format(item.createdAt) }}</span>
<template v-else> </div>
<NotificationContainer :item="item" :markRead="markRead"> </template>
{{ formatType(item.type) }} </BaseTimeline>
</NotificationContainer> </div>
</template> </template>
</span>
<span class="notif-time">{{ TimeManager.format(item.createdAt) }}</span>
</div>
</template>
</BaseTimeline>
</div>
</div> </div>
</template> </template>
@@ -915,6 +936,38 @@ export default {
border-bottom: 2px solid var(--primary-color); 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) { @media (max-width: 768px) {
.has_read_button { .has_read_button {
display: none; display: none;