From d195d2f6248b53e49ca4fd31ac345403d9b2698f Mon Sep 17 00:00:00 2001
From: Tim <nagisa12164@163.com>
Date: Tue, 12 Aug 2025 14:07:57 +0800
Subject: [PATCH] fix: basic ui

---
 frontend_nuxt/pages/message.vue | 817 +++++++++++++++++---------------
 1 file changed, 435 insertions(+), 382 deletions(-)

diff --git a/frontend_nuxt/pages/message.vue b/frontend_nuxt/pages/message.vue
index fb5d319c4..0864d5285 100644
--- a/frontend_nuxt/pages/message.vue
+++ b/frontend_nuxt/pages/message.vue
@@ -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;