From 50a84220fe69fc8e85afc4952e436c1a8b191784 Mon Sep 17 00:00:00 2001
From: Tim <nagisa12164@163.com>
Date: Wed, 27 Aug 2025 12:25:44 +0800
Subject: [PATCH] Revert "feat: add reusable multi-tabs component"

This reverts commit e8a162d8599e306fe4d0052c57223d6c4c9f4ebb.
---
 frontend_nuxt/components/MultiTabs.vue    |   82 --
 frontend_nuxt/pages/about/index.vue       |   50 +-
 frontend_nuxt/pages/message-box/index.vue |  220 +++--
 frontend_nuxt/pages/message.vue           | 1060 +++++++++++----------
 frontend_nuxt/pages/points.vue            |  332 +++----
 5 files changed, 836 insertions(+), 908 deletions(-)
 delete mode 100644 frontend_nuxt/components/MultiTabs.vue

diff --git a/frontend_nuxt/components/MultiTabs.vue b/frontend_nuxt/components/MultiTabs.vue
deleted file mode 100644
index e67fc6994..000000000
--- a/frontend_nuxt/components/MultiTabs.vue
+++ /dev/null
@@ -1,82 +0,0 @@
-<template>
-  <div class="multi-tabs">
-    <div class="multi-tabs-header" :class="headerClass">
-      <div
-        v-for="tab in tabs"
-        :key="tab.name"
-        :class="[itemClass, { selected: current === tab.name }]"
-        @click="select(tab.name)"
-      >
-        <div :class="labelClass">
-          <i v-if="tab.icon" :class="tab.icon"></i>
-          {{ tab.label }}
-        </div>
-      </div>
-      <slot name="header-extra" />
-    </div>
-    <div class="multi-tabs-content" @touchstart="onTouchStart" @touchend="onTouchEnd">
-      <slot :selected="current" />
-    </div>
-  </div>
-</template>
-
-<script setup>
-import { computed, ref } from 'vue'
-
-const props = defineProps({
-  tabs: { type: Array, required: true },
-  modelValue: { type: String, required: true },
-  headerClass: { type: String, default: '' },
-  itemClass: { type: String, default: '' },
-  labelClass: { type: String, default: '' },
-})
-
-const emit = defineEmits(['update:modelValue'])
-
-const current = computed({
-  get: () => props.modelValue,
-  set: (val) => emit('update:modelValue', val),
-})
-
-const select = (name) => {
-  current.value = name
-}
-
-const startX = ref(0)
-const startY = ref(0)
-
-const onTouchStart = (e) => {
-  const t = e.touches[0]
-  startX.value = t.clientX
-  startY.value = t.clientY
-}
-
-const onTouchEnd = (e) => {
-  const t = e.changedTouches[0]
-  const dx = t.clientX - startX.value
-  const dy = t.clientY - startY.value
-  if (Math.abs(dx) > Math.abs(dy) && Math.abs(dx) > 50) {
-    const idx = props.tabs.findIndex((t) => t.name === current.value)
-    if (dx < 0 && idx < props.tabs.length - 1) {
-      current.value = props.tabs[idx + 1].name
-    } else if (dx > 0 && idx > 0) {
-      current.value = props.tabs[idx - 1].name
-    }
-  }
-}
-</script>
-
-<style scoped>
-.multi-tabs-header {
-  display: flex;
-  flex-direction: row;
-  overflow-x: auto;
-  scrollbar-width: none;
-}
-.multi-tabs-header::-webkit-scrollbar {
-  display: none;
-}
-.multi-tabs-content {
-  width: 100%;
-}
-</style>
diff --git a/frontend_nuxt/pages/about/index.vue b/frontend_nuxt/pages/about/index.vue
index 38da4c5a6..8d5aaa60f 100644
--- a/frontend_nuxt/pages/about/index.vue
+++ b/frontend_nuxt/pages/about/index.vue
@@ -1,29 +1,29 @@
 <template>
   <div class="about-page">
-    <MultiTabs
-      :tabs="tabs"
-      v-model="selectedTab"
-      header-class="about-tabs"
-      item-class="about-tabs-item"
-      label-class="about-tabs-item-label"
-    >
-      <template #default>
-        <div class="about-loading" v-if="isFetching">
-          <l-hatch-spinner size="100" stroke="10" speed="1" color="var(--primary-color)" />
-        </div>
-        <div
-          v-else
-          class="about-content"
-          v-html="renderMarkdown(content)"
-          @click="handleContentClick"
-        ></div>
-      </template>
-    </MultiTabs>
+    <div class="about-tabs">
+      <div
+        v-for="tab in tabs"
+        :key="tab.name"
+        :class="['about-tabs-item', { selected: selectedTab === tab.name }]"
+        @click="selectTab(tab.name)"
+      >
+        <div class="about-tabs-item-label">{{ tab.label }}</div>
+      </div>
+    </div>
+    <div class="about-loading" v-if="isFetching">
+      <l-hatch-spinner size="100" stroke="10" speed="1" color="var(--primary-color)" />
+    </div>
+    <div
+      v-else
+      class="about-content"
+      v-html="renderMarkdown(content)"
+      @click="handleContentClick"
+    ></div>
   </div>
 </template>
 
 <script>
-import { onMounted, ref, watch } from 'vue'
+import { onMounted, ref } from 'vue'
 import { handleMarkdownClick, renderMarkdown } from '~/utils/markdown'
 
 export default {
@@ -71,21 +71,21 @@ export default {
       }
     }
 
-    watch(selectedTab, (name) => {
+    const selectTab = (name) => {
+      selectedTab.value = name
       const tab = tabs.find((t) => t.name === name)
       if (tab) loadContent(tab.file)
-    })
+    }
 
     onMounted(() => {
-      const first = tabs[0]
-      if (first) loadContent(first.file)
+      loadContent(tabs[0].file)
     })
 
     const handleContentClick = (e) => {
       handleMarkdownClick(e)
     }
 
-    return { tabs, selectedTab, content, renderMarkdown, isFetching, handleContentClick }
+    return { tabs, selectedTab, content, renderMarkdown, selectTab, isFetching, handleContentClick }
   },
 }
 </script>
diff --git a/frontend_nuxt/pages/message-box/index.vue b/frontend_nuxt/pages/message-box/index.vue
index 523f03d45..ffb91ffb2 100644
--- a/frontend_nuxt/pages/message-box/index.vue
+++ b/frontend_nuxt/pages/message-box/index.vue
@@ -7,118 +7,116 @@
     <div v-if="!isFloatMode" class="float-control">
       <i class="fas fa-compress" @click="minimize" title="最小化"></i>
     </div>
-    <MultiTabs :tabs="tabs" v-model="activeTab" header-class="tabs" item-class="tab">
-      <template #default="{ selected }">
-        <div v-if="selected === 'messages'">
-          <div v-if="loading" class="loading-message">
-            <l-hatch size="28" stroke="4" speed="3.5" color="var(--primary-color)"></l-hatch>
+    <div class="tabs">
+      <div :class="['tab', { active: activeTab === 'messages' }]" @click="switchToMessage">
+        站内信
+      </div>
+      <div :class="['tab', { active: activeTab === 'channels' }]" @click="switchToChannels">
+        频道
+      </div>
+    </div>
+
+    <div v-if="activeTab === 'messages'">
+      <div v-if="loading" class="loading-message">
+        <l-hatch size="28" stroke="4" speed="3.5" color="var(--primary-color)"></l-hatch>
+      </div>
+
+      <div v-else-if="error" class="error-container">
+        <div class="error-text">{{ error }}</div>
+      </div>
+
+      <div v-if="!loading && !isFloatMode" class="search-container">
+        <SearchPersonDropdown />
+      </div>
+
+      <div v-if="!loading && conversations.length === 0" class="empty-container">
+        <BasePlaceholder v-if="conversations.length === 0" text="暂无会话" icon="fas fa-inbox" />
+      </div>
+
+      <div
+        v-if="!loading"
+        v-for="convo in conversations"
+        :key="convo.id"
+        class="conversation-item"
+        @click="goToConversation(convo.id)"
+      >
+        <div class="conversation-avatar">
+          <BaseImage
+            :src="getOtherParticipant(convo)?.avatar || '/default-avatar.svg'"
+            :alt="getOtherParticipant(convo)?.username || '用户'"
+            class="avatar-img"
+            @error="handleAvatarError"
+          />
+        </div>
+
+        <div class="conversation-content">
+          <div class="conversation-header">
+            <div class="participant-name">
+              {{ getOtherParticipant(convo)?.username || '未知用户' }}
+            </div>
+            <div class="message-time">
+              {{ formatTime(convo.lastMessage?.createdAt || convo.createdAt) }}
+            </div>
           </div>
 
-          <div v-else-if="error" class="error-container">
-            <div class="error-text">{{ error }}</div>
+          <div class="last-message-row">
+            <div class="last-message">
+              {{
+                convo.lastMessage ? stripMarkdownLength(convo.lastMessage.content, 100) : '暂无消息'
+              }}
+            </div>
+            <div v-if="convo.unreadCount > 0" class="unread-count-badge">
+              {{ convo.unreadCount }}
+            </div>
           </div>
+        </div>
+      </div>
+    </div>
 
-          <div v-if="!loading && !isFloatMode" class="search-container">
-            <SearchPersonDropdown />
-          </div>
-
-          <div v-if="!loading && conversations.length === 0" class="empty-container">
-            <BasePlaceholder
-              v-if="conversations.length === 0"
-              text="暂无会话"
-              icon="fas fa-inbox"
+    <div v-else>
+      <div v-if="loadingChannels" class="loading-message">
+        <l-hatch size="28" stroke="4" speed="3.5" color="var(--primary-color)"></l-hatch>
+      </div>
+      <div v-else>
+        <div v-if="channels.length === 0" class="empty-container">
+          <BasePlaceholder text="暂无频道" icon="fas fa-inbox" />
+        </div>
+        <div
+          v-for="ch in channels"
+          :key="ch.id"
+          class="conversation-item"
+          @click="goToChannel(ch.id)"
+        >
+          <div class="conversation-avatar">
+            <BaseImage
+              :src="ch.avatar || '/default-avatar.svg'"
+              :alt="ch.name"
+              class="avatar-img"
+              @error="handleAvatarError"
             />
           </div>
-
-          <div
-            v-if="!loading"
-            v-for="convo in conversations"
-            :key="convo.id"
-            class="conversation-item"
-            @click="goToConversation(convo.id)"
-          >
-            <div class="conversation-avatar">
-              <BaseImage
-                :src="getOtherParticipant(convo)?.avatar || '/default-avatar.svg'"
-                :alt="getOtherParticipant(convo)?.username || '用户'"
-                class="avatar-img"
-                @error="handleAvatarError"
-              />
+          <div class="conversation-content">
+            <div class="conversation-header">
+              <div class="participant-name">
+                {{ ch.name }}
+                <span v-if="ch.unreadCount > 0" class="unread-dot"></span>
+              </div>
+              <div class="message-time">
+                {{ formatTime(ch.lastMessage?.createdAt || ch.createdAt) }}
+              </div>
             </div>
-
-            <div class="conversation-content">
-              <div class="conversation-header">
-                <div class="participant-name">
-                  {{ getOtherParticipant(convo)?.username || '未知用户' }}
-                </div>
-                <div class="message-time">
-                  {{ formatTime(convo.lastMessage?.createdAt || convo.createdAt) }}
-                </div>
-              </div>
-
-              <div class="last-message-row">
-                <div class="last-message">
-                  {{
-                    convo.lastMessage
-                      ? stripMarkdownLength(convo.lastMessage.content, 100)
-                      : '暂无消息'
-                  }}
-                </div>
-                <div v-if="convo.unreadCount > 0" class="unread-count-badge">
-                  {{ convo.unreadCount }}
-                </div>
+            <div class="last-message-row">
+              <div class="last-message">
+                {{
+                  ch.lastMessage ? stripMarkdownLength(ch.lastMessage.content, 100) : ch.description
+                }}
               </div>
+              <div class="member-count">成员 {{ ch.memberCount }}</div>
             </div>
           </div>
         </div>
-        <div v-else>
-          <div v-if="loadingChannels" class="loading-message">
-            <l-hatch size="28" stroke="4" speed="3.5" color="var(--primary-color)"></l-hatch>
-          </div>
-          <div v-else>
-            <div v-if="channels.length === 0" class="empty-container">
-              <BasePlaceholder text="暂无频道" icon="fas fa-inbox" />
-            </div>
-            <div
-              v-for="ch in channels"
-              :key="ch.id"
-              class="conversation-item"
-              @click="goToChannel(ch.id)"
-            >
-              <div class="conversation-avatar">
-                <BaseImage
-                  :src="ch.avatar || '/default-avatar.svg'"
-                  :alt="ch.name"
-                  class="avatar-img"
-                  @error="handleAvatarError"
-                />
-              </div>
-              <div class="conversation-content">
-                <div class="conversation-header">
-                  <div class="participant-name">
-                    {{ ch.name }}
-                    <span v-if="ch.unreadCount > 0" class="unread-dot"></span>
-                  </div>
-                  <div class="message-time">
-                    {{ formatTime(ch.lastMessage?.createdAt || ch.createdAt) }}
-                  </div>
-                </div>
-                <div class="last-message-row">
-                  <div class="last-message">
-                    {{
-                      ch.lastMessage
-                        ? stripMarkdownLength(ch.lastMessage.content, 100)
-                        : ch.description
-                    }}
-                  </div>
-                  <div class="member-count">成员 {{ ch.memberCount }}</div>
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-      </template>
-    </MultiTabs>
+      </div>
+    </div>
   </div>
 </template>
 
@@ -149,10 +147,6 @@ const { fetchChannelUnread: refreshChannelUnread, setFromList: setChannelUnreadF
   useChannelsUnreadCount()
 let subscription = null
 
-const tabs = [
-  { name: 'messages', label: '站内信' },
-  { name: 'channels', label: '频道' },
-]
 const activeTab = ref('channels')
 const channels = ref([])
 const loadingChannels = ref(false)
@@ -222,13 +216,15 @@ async function fetchChannels() {
   }
 }
 
-watch(activeTab, (val) => {
-  if (val === 'messages') {
-    fetchConversations()
-  } else {
-    fetchChannels()
-  }
-})
+function switchToMessage() {
+  activeTab.value = 'messages'
+  fetchConversations()
+}
+
+function switchToChannels() {
+  activeTab.value = 'channels'
+  fetchChannels()
+}
 
 async function goToChannel(id) {
   const token = getToken()
diff --git a/frontend_nuxt/pages/message.vue b/frontend_nuxt/pages/message.vue
index ad4b6dbdb..d694b1b2d 100644
--- a/frontend_nuxt/pages/message.vue
+++ b/frontend_nuxt/pages/message.vue
@@ -1,529 +1,542 @@
 <template>
   <div class="message-page">
-    <MultiTabs
-      :tabs="tabs"
-      v-model="selectedTab"
-      header-class="message-page-header message-tabs"
-      item-class="message-tab-item"
-    >
-      <template #header-extra>
-        <div class="message-page-header-right" v-if="selectedTab !== 'control'">
-          <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 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 === 'control' }]"
+          @click="selectedTab = 'control'"
+        >
+          消息设置
+        </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="selectedTab === 'control'">
+      <div class="message-control-container">
+        <div class="message-control-title">通知设置</div>
+        <div class="message-control-item-container">
+          <div v-for="pref in notificationPrefs" :key="pref.type" class="message-control-item">
+            <div class="message-control-item-label">{{ formatType(pref.type) }}</div>
+            <BaseSwitch
+              :model-value="pref.enabled"
+              @update:modelValue="(val) => togglePref(pref, val)"
+            />
           </div>
         </div>
-      </template>
-      <template #default="{ selected }">
-        <div v-if="selected === 'control'">
-          <div class="message-control-container">
-            <div class="message-control-title">通知设置</div>
-            <div class="message-control-item-container">
-              <div v-for="pref in notificationPrefs" :key="pref.type" class="message-control-item">
-                <div class="message-control-item-label">{{ formatType(pref.type) }}</div>
-                <BaseSwitch
-                  :model-value="pref.enabled"
-                  @update:modelValue="(val) => togglePref(pref, val)"
-                />
-              </div>
+      </div>
+    </div>
+
+    <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>
+
+      <BasePlaceholder
+        v-else-if="notifications.length === 0"
+        text="暂时没有消息 :)"
+        icon="fas fa-inbox"
+      />
+
+      <div class="timeline-container" v-if="notifications.length > 0">
+        <BaseTimeline :items="notifications">
+          <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">
+                    <NuxtLink
+                      class="notif-content-text"
+                      @click="markRead(item.id)"
+                      :to="`/users/${item.comment.author.id}`"
+                      >{{ item.comment.author.username }}
+                    </NuxtLink>
+                    对我的评论
+                    <span>
+                      <NuxtLink
+                        class="notif-content-text"
+                        @click="markRead(item.id)"
+                        :to="`/posts/${item.post.id}#comment-${item.parentComment.id}`"
+                      >
+                        {{ stripMarkdownLength(item.parentComment.content, 100) }}
+                      </NuxtLink>
+                    </span>
+                    回复了
+                    <span>
+                      <NuxtLink
+                        class="notif-content-text"
+                        @click="markRead(item.id)"
+                        :to="`/posts/${item.post.id}#comment-${item.comment.id}`"
+                      >
+                        {{ stripMarkdownLength(item.comment.content, 100) }}
+                      </NuxtLink>
+                    </span>
+                  </NotificationContainer>
+                </template>
+                <template v-else-if="item.type === 'COMMENT_REPLY' && !item.parentComment">
+                  <NotificationContainer :item="item" :markRead="markRead">
+                    <NuxtLink
+                      class="notif-content-text"
+                      @click="markRead(item.id)"
+                      :to="`/users/${item.comment.author.id}`"
+                      >{{ item.comment.author.username }}
+                    </NuxtLink>
+                    对我的文章
+                    <span>
+                      <NuxtLink
+                        class="notif-content-text"
+                        @click="markRead(item.id)"
+                        :to="`/posts/${item.post.id}`"
+                      >
+                        {{ stripMarkdownLength(item.post.title, 100) }}
+                      </NuxtLink>
+                    </span>
+                    回复了
+                    <span>
+                      <NuxtLink
+                        class="notif-content-text"
+                        @click="markRead(item.id)"
+                        :to="`/posts/${item.post.id}#comment-${item.comment.id}`"
+                      >
+                        {{ stripMarkdownLength(item.comment.content, 100) }}
+                      </NuxtLink>
+                    </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 === 'POINT_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>
+                      <NuxtLink
+                        class="notif-content-text"
+                        @click="markRead(item.id)"
+                        :to="`/posts/${item.post.id}`"
+                      >
+                        {{ stripMarkdownLength(item.post.title, 100) }}
+                      </NuxtLink>
+                    </span>
+                    进行了表态
+                  </NotificationContainer>
+                </template>
+                <template v-else-if="item.type === 'REACTION' && item.comment">
+                  <NotificationContainer :item="item" :markRead="markRead">
+                    <NuxtLink
+                      class="notif-content-text"
+                      @click="markRead(item.id)"
+                      :to="`/users/${item.fromUser.id}`"
+                      >{{ item.fromUser.username }}
+                    </NuxtLink>
+                    对我的评论
+                    <span>
+                      <NuxtLink
+                        class="notif-content-text"
+                        @click="markRead(item.id)"
+                        :to="`/posts/${item.post.id}#comment-${item.comment.id}`"
+                      >
+                        {{ stripMarkdownLength(item.comment.content, 100) }}
+                      </NuxtLink>
+                    </span>
+                    进行了表态
+                  </NotificationContainer>
+                </template>
+                <template v-else-if="item.type === 'POST_VIEWED'">
+                  <NotificationContainer :item="item" :markRead="markRead">
+                    <NuxtLink
+                      class="notif-content-text"
+                      @click="markRead(item.id)"
+                      :to="`/users/${item.fromUser.id}`"
+                    >
+                      {{ item.fromUser.username }}
+                    </NuxtLink>
+                    查看了您的帖子
+                    <NuxtLink
+                      class="notif-content-text"
+                      @click="markRead(item.id)"
+                      :to="`/posts/${item.post.id}`"
+                    >
+                      {{ stripMarkdownLength(item.post.title, 100) }}
+                    </NuxtLink>
+                  </NotificationContainer>
+                </template>
+                <template v-else-if="item.type === 'LOTTERY_WIN'">
+                  <NotificationContainer :item="item" :markRead="markRead">
+                    恭喜你在抽奖贴
+                    <NuxtLink
+                      class="notif-content-text"
+                      @click="markRead(item.id)"
+                      :to="`/posts/${item.post.id}`"
+                    >
+                      {{ stripMarkdownLength(item.post.title, 100) }}
+                    </NuxtLink>
+                    中获奖
+                  </NotificationContainer>
+                </template>
+                <template v-else-if="item.type === 'LOTTERY_DRAW'">
+                  <NotificationContainer :item="item" :markRead="markRead">
+                    您的抽奖贴
+                    <NuxtLink
+                      class="notif-content-text"
+                      @click="markRead(item.id)"
+                      :to="`/posts/${item.post.id}`"
+                    >
+                      {{ stripMarkdownLength(item.post.title, 100) }}
+                    </NuxtLink>
+                    已开奖
+                  </NotificationContainer>
+                </template>
+                <template v-else-if="item.type === 'POST_UPDATED'">
+                  <NotificationContainer :item="item" :markRead="markRead">
+                    您关注的帖子
+                    <NuxtLink
+                      class="notif-content-text"
+                      @click="markRead(item.id)"
+                      :to="`/posts/${item.post.id}`"
+                    >
+                      {{ stripMarkdownLength(item.post.title, 100) }}
+                    </NuxtLink>
+                    下面有新评论
+                    <NuxtLink
+                      class="notif-content-text"
+                      @click="markRead(item.id)"
+                      :to="`/posts/${item.post.id}#comment-${item.comment.id}`"
+                    >
+                      {{ stripMarkdownLength(item.comment.content, 100) }}
+                    </NuxtLink>
+                  </NotificationContainer>
+                </template>
+                <template v-else-if="item.type === 'USER_ACTIVITY' && item.parentComment">
+                  <NotificationContainer :item="item" :markRead="markRead">
+                    你关注的
+                    <NuxtLink
+                      class="notif-content-text"
+                      @click="markRead(item.id)"
+                      :to="`/users/${item.comment.author.id}`"
+                    >
+                      {{ item.comment.author.username }}
+                    </NuxtLink>
+                    在 对评论
+                    <NuxtLink
+                      class="notif-content-text"
+                      @click="markRead(item.id)"
+                      :to="`/posts/${item.post.id}#comment-${item.parentComment.id}`"
+                    >
+                      {{ stripMarkdownLength(item.parentComment.content, 100) }}
+                    </NuxtLink>
+                    回复了
+                    <NuxtLink
+                      class="notif-content-text"
+                      @click="markRead(item.id)"
+                      :to="`/posts/${item.post.id}#comment-${item.comment.id}`"
+                    >
+                      {{ stripMarkdownLength(item.comment.content, 100) }}
+                    </NuxtLink>
+                  </NotificationContainer>
+                </template>
+                <template v-else-if="item.type === 'USER_ACTIVITY'">
+                  <NotificationContainer :item="item" :markRead="markRead">
+                    你关注的
+                    <NuxtLink
+                      class="notif-content-text"
+                      @click="markRead(item.id)"
+                      :to="`/users/${item.comment.author.id}`"
+                    >
+                      {{ item.comment.author.username }}
+                    </NuxtLink>
+                    在文章
+                    <NuxtLink
+                      class="notif-content-text"
+                      @click="markRead(item.id)"
+                      :to="`/posts/${item.post.id}`"
+                    >
+                      {{ stripMarkdownLength(item.post.title, 100) }}
+                    </NuxtLink>
+                    下面评论了
+                    <NuxtLink
+                      class="notif-content-text"
+                      @click="markRead(item.id)"
+                      :to="`/posts/${item.post.id}#comment-${item.comment.id}`"
+                    >
+                      {{ stripMarkdownLength(item.comment.content, 100) }}
+                    </NuxtLink>
+                  </NotificationContainer>
+                </template>
+                <template v-else-if="item.type === 'MENTION' && item.comment">
+                  <NotificationContainer :item="item" :markRead="markRead">
+                    <NuxtLink
+                      class="notif-content-text"
+                      @click="markRead(item.id)"
+                      :to="`/users/${item.fromUser.id}`"
+                    >
+                      {{ item.fromUser.username }}
+                    </NuxtLink>
+                    在评论中提到了你：
+                    <NuxtLink
+                      class="notif-content-text"
+                      @click="markRead(item.id)"
+                      :to="`/posts/${item.post.id}#comment-${item.comment.id}`"
+                    >
+                      {{ stripMarkdownLength(item.comment.content, 100) }}
+                    </NuxtLink>
+                  </NotificationContainer>
+                </template>
+                <template v-else-if="item.type === 'MENTION'">
+                  <NotificationContainer :item="item" :markRead="markRead">
+                    <NuxtLink
+                      class="notif-content-text"
+                      @click="markRead(item.id)"
+                      :to="`/users/${item.fromUser.id}`"
+                    >
+                      {{ item.fromUser.username }}
+                    </NuxtLink>
+                    在帖子
+                    <NuxtLink
+                      class="notif-content-text"
+                      @click="markRead(item.id)"
+                      :to="`/posts/${item.post.id}`"
+                    >
+                      {{ stripMarkdownLength(item.post.title, 100) }}
+                    </NuxtLink>
+                    中提到了你
+                  </NotificationContainer>
+                </template>
+                <template v-else-if="item.type === 'USER_FOLLOWED'">
+                  <NotificationContainer :item="item" :markRead="markRead">
+                    <NuxtLink
+                      class="notif-content-text"
+                      @click="markRead(item.id)"
+                      :to="`/users/${item.fromUser.id}`"
+                    >
+                      {{ item.fromUser.username }}
+                    </NuxtLink>
+                    开始关注你了
+                  </NotificationContainer>
+                </template>
+                <template v-else-if="item.type === 'USER_UNFOLLOWED'">
+                  <NotificationContainer :item="item" :markRead="markRead">
+                    <NuxtLink
+                      class="notif-content-text"
+                      @click="markRead(item.id)"
+                      :to="`/users/${item.fromUser.id}`"
+                    >
+                      {{ item.fromUser.username }}
+                    </NuxtLink>
+                    取消关注你了
+                  </NotificationContainer>
+                </template>
+                <template v-else-if="item.type === 'FOLLOWED_POST'">
+                  <NotificationContainer :item="item" :markRead="markRead">
+                    你关注的
+                    <NuxtLink
+                      class="notif-content-text"
+                      @click="markRead(item.id)"
+                      :to="`/users/${item.fromUser.id}`"
+                    >
+                      {{ item.fromUser.username }}
+                    </NuxtLink>
+                    发布了文章
+                    <NuxtLink
+                      class="notif-content-text"
+                      @click="markRead(item.id)"
+                      :to="`/posts/${item.post.id}`"
+                    >
+                      {{ stripMarkdownLength(item.post.title, 100) }}
+                    </NuxtLink>
+                  </NotificationContainer>
+                </template>
+                <template v-else-if="item.type === 'POST_SUBSCRIBED'">
+                  <NotificationContainer :item="item" :markRead="markRead">
+                    <NuxtLink
+                      class="notif-content-text"
+                      @click="markRead(item.id)"
+                      :to="`/users/${item.fromUser.id}`"
+                    >
+                      {{ item.fromUser.username }}
+                    </NuxtLink>
+                    订阅了你的文章
+                    <NuxtLink
+                      class="notif-content-text"
+                      @click="markRead(item.id)"
+                      :to="`/posts/${item.post.id}`"
+                    >
+                      {{ stripMarkdownLength(item.post.title, 100) }}
+                    </NuxtLink>
+                  </NotificationContainer>
+                </template>
+                <template v-else-if="item.type === 'POST_UNSUBSCRIBED'">
+                  <NotificationContainer :item="item" :markRead="markRead">
+                    <NuxtLink
+                      class="notif-content-text"
+                      @click="markRead(item.id)"
+                      :to="`/users/${item.fromUser.id}`"
+                    >
+                      {{ item.fromUser.username }}
+                    </NuxtLink>
+                    取消订阅了你的文章
+                    <NuxtLink
+                      class="notif-content-text"
+                      @click="markRead(item.id)"
+                      :to="`/posts/${item.post.id}`"
+                    >
+                      {{ stripMarkdownLength(item.post.title, 100) }}
+                    </NuxtLink>
+                  </NotificationContainer>
+                </template>
+                <template v-else-if="item.type === 'POST_REVIEW_REQUEST' && item.fromUser">
+                  <NotificationContainer :item="item" :markRead="markRead">
+                    <NuxtLink
+                      class="notif-content-text"
+                      @click="markRead(item.id)"
+                      :to="`/users/${item.fromUser.id}`"
+                    >
+                      {{ item.fromUser.username }}
+                    </NuxtLink>
+                    发布了帖子
+                    <NuxtLink
+                      class="notif-content-text"
+                      @click="markRead(item.id)"
+                      :to="`/posts/${item.post.id}`"
+                    >
+                      {{ stripMarkdownLength(item.post.title, 100) }}
+                    </NuxtLink>
+                    ，请审核
+                  </NotificationContainer>
+                </template>
+                <template v-else-if="item.type === 'POST_REVIEW_REQUEST'">
+                  <NotificationContainer :item="item" :markRead="markRead">
+                    您发布的帖子
+                    <NuxtLink
+                      class="notif-content-text"
+                      @click="markRead(item.id)"
+                      :to="`/posts/${item.post.id}`"
+                    >
+                      {{ stripMarkdownLength(item.post.title, 100) }}
+                    </NuxtLink>
+                    已提交审核
+                  </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 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">
+                    您发布的帖子
+                    <NuxtLink
+                      class="notif-content-text"
+                      @click="markRead(item.id)"
+                      :to="`/posts/${item.post.id}`"
+                    >
+                      {{ stripMarkdownLength(item.post.title, 100) }}
+                    </NuxtLink>
+                    已审核通过
+                  </NotificationContainer>
+                </template>
+                <template v-else-if="item.type === 'POST_REVIEWED' && item.approved === false">
+                  <NotificationContainer :item="item" :markRead="markRead">
+                    您发布的帖子
+                    <NuxtLink
+                      class="notif-content-text"
+                      @click="markRead(item.id)"
+                      :to="`/posts/${item.post.id}`"
+                    >
+                      {{ stripMarkdownLength(item.post.title, 100) }}
+                    </NuxtLink>
+                    已被管理员拒绝
+                  </NotificationContainer>
+                </template>
+                <template v-else-if="item.type === 'POST_FEATURED'">
+                  <NotificationContainer :item="item" :markRead="markRead">
+                    您的文章
+                    <NuxtLink
+                      class="notif-content-text"
+                      @click="markRead(item.id)"
+                      :to="`/posts/${item.post.id}`"
+                    >
+                      {{ stripMarkdownLength(item.post.title, 100) }}
+                    </NuxtLink>
+                    被收录为精选
+                  </NotificationContainer>
+                </template>
+                <template v-else-if="item.type === 'POST_DELETED'">
+                  <NotificationContainer :item="item" :markRead="markRead">
+                    管理员
+                    <template v-if="item.fromUser">
+                      <NuxtLink
+                        class="notif-content-text"
+                        @click="markRead(item.id)"
+                        :to="`/users/${item.fromUser.id}`"
+                      >
+                        {{ item.fromUser.username }}
+                      </NuxtLink>
+                    </template>
+                    删除了您的帖子
+                    <span class="notif-content-text">
+                      {{ stripMarkdownLength(item.content, 100) }}
+                    </span>
+                  </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>
-          </div>
-        </div>
-
-        <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>
-
-          <BasePlaceholder
-            v-else-if="notifications.length === 0"
-            text="暂时没有消息 :)"
-            icon="fas fa-inbox"
-          />
-
-          <div class="timeline-container" v-if="notifications.length > 0">
-            <BaseTimeline :items="notifications">
-              <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">
-                        <NuxtLink
-                          class="notif-content-text"
-                          @click="markRead(item.id)"
-                          :to="`/users/${item.comment.author.id}`"
-                          >{{ item.comment.author.username }}
-                        </NuxtLink>
-                        对我的评论
-                        <span>
-                          <NuxtLink
-                            class="notif-content-text"
-                            @click="markRead(item.id)"
-                            :to="`/posts/${item.post.id}#comment-${item.parentComment.id}`"
-                          >
-                            {{ stripMarkdownLength(item.parentComment.content, 100) }}
-                          </NuxtLink>
-                        </span>
-                        回复了
-                        <span>
-                          <NuxtLink
-                            class="notif-content-text"
-                            @click="markRead(item.id)"
-                            :to="`/posts/${item.post.id}#comment-${item.comment.id}`"
-                          >
-                            {{ stripMarkdownLength(item.comment.content, 100) }}
-                          </NuxtLink>
-                        </span>
-                      </NotificationContainer>
-                    </template>
-                    <template v-else-if="item.type === 'COMMENT_REPLY' && !item.parentComment">
-                      <NotificationContainer :item="item" :markRead="markRead">
-                        <NuxtLink
-                          class="notif-content-text"
-                          @click="markRead(item.id)"
-                          :to="`/users/${item.comment.author.id}`"
-                          >{{ item.comment.author.username }}
-                        </NuxtLink>
-                        对我的文章
-                        <span>
-                          <NuxtLink
-                            class="notif-content-text"
-                            @click="markRead(item.id)"
-                            :to="`/posts/${item.post.id}`"
-                          >
-                            {{ stripMarkdownLength(item.post.title, 100) }}
-                          </NuxtLink>
-                        </span>
-                        回复了
-                        <span>
-                          <NuxtLink
-                            class="notif-content-text"
-                            @click="markRead(item.id)"
-                            :to="`/posts/${item.post.id}#comment-${item.comment.id}`"
-                          >
-                            {{ stripMarkdownLength(item.comment.content, 100) }}
-                          </NuxtLink>
-                        </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 === 'POINT_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>
-                          <NuxtLink
-                            class="notif-content-text"
-                            @click="markRead(item.id)"
-                            :to="`/posts/${item.post.id}`"
-                          >
-                            {{ stripMarkdownLength(item.post.title, 100) }}
-                          </NuxtLink>
-                        </span>
-                        进行了表态
-                      </NotificationContainer>
-                    </template>
-                    <template v-else-if="item.type === 'REACTION' && item.comment">
-                      <NotificationContainer :item="item" :markRead="markRead">
-                        <NuxtLink
-                          class="notif-content-text"
-                          @click="markRead(item.id)"
-                          :to="`/users/${item.fromUser.id}`"
-                          >{{ item.fromUser.username }}
-                        </NuxtLink>
-                        对我的评论
-                        <span>
-                          <NuxtLink
-                            class="notif-content-text"
-                            @click="markRead(item.id)"
-                            :to="`/posts/${item.post.id}#comment-${item.comment.id}`"
-                          >
-                            {{ stripMarkdownLength(item.comment.content, 100) }}
-                          </NuxtLink>
-                        </span>
-                        进行了表态
-                      </NotificationContainer>
-                    </template>
-                    <template v-else-if="item.type === 'POST_VIEWED'">
-                      <NotificationContainer :item="item" :markRead="markRead">
-                        <NuxtLink
-                          class="notif-content-text"
-                          @click="markRead(item.id)"
-                          :to="`/users/${item.fromUser.id}`"
-                        >
-                          {{ item.fromUser.username }}
-                        </NuxtLink>
-                        查看了您的帖子
-                        <NuxtLink
-                          class="notif-content-text"
-                          @click="markRead(item.id)"
-                          :to="`/posts/${item.post.id}`"
-                        >
-                          {{ stripMarkdownLength(item.post.title, 100) }}
-                        </NuxtLink>
-                      </NotificationContainer>
-                    </template>
-                    <template v-else-if="item.type === 'LOTTERY_WIN'">
-                      <NotificationContainer :item="item" :markRead="markRead">
-                        恭喜你在抽奖贴
-                        <NuxtLink
-                          class="notif-content-text"
-                          @click="markRead(item.id)"
-                          :to="`/posts/${item.post.id}`"
-                        >
-                          {{ stripMarkdownLength(item.post.title, 100) }}
-                        </NuxtLink>
-                        中获奖
-                      </NotificationContainer>
-                    </template>
-                    <template v-else-if="item.type === 'LOTTERY_DRAW'">
-                      <NotificationContainer :item="item" :markRead="markRead">
-                        您的抽奖贴
-                        <NuxtLink
-                          class="notif-content-text"
-                          @click="markRead(item.id)"
-                          :to="`/posts/${item.post.id}`"
-                        >
-                          {{ stripMarkdownLength(item.post.title, 100) }}
-                        </NuxtLink>
-                        已开奖
-                      </NotificationContainer>
-                    </template>
-                    <template v-else-if="item.type === 'POST_UPDATED'">
-                      <NotificationContainer :item="item" :markRead="markRead">
-                        您关注的帖子
-                        <NuxtLink
-                          class="notif-content-text"
-                          @click="markRead(item.id)"
-                          :to="`/posts/${item.post.id}`"
-                        >
-                          {{ stripMarkdownLength(item.post.title, 100) }}
-                        </NuxtLink>
-                        下面有新评论
-                        <NuxtLink
-                          class="notif-content-text"
-                          @click="markRead(item.id)"
-                          :to="`/posts/${item.post.id}#comment-${item.comment.id}`"
-                        >
-                          {{ stripMarkdownLength(item.comment.content, 100) }}
-                        </NuxtLink>
-                      </NotificationContainer>
-                    </template>
-                    <template v-else-if="item.type === 'USER_ACTIVITY' && item.parentComment">
-                      <NotificationContainer :item="item" :markRead="markRead">
-                        你关注的
-                        <NuxtLink
-                          class="notif-content-text"
-                          @click="markRead(item.id)"
-                          :to="`/users/${item.comment.author.id}`"
-                        >
-                          {{ item.comment.author.username }}
-                        </NuxtLink>
-                        在 对评论
-                        <NuxtLink
-                          class="notif-content-text"
-                          @click="markRead(item.id)"
-                          :to="`/posts/${item.post.id}#comment-${item.parentComment.id}`"
-                        >
-                          {{ stripMarkdownLength(item.parentComment.content, 100) }}
-                        </NuxtLink>
-                        回复了
-                        <NuxtLink
-                          class="notif-content-text"
-                          @click="markRead(item.id)"
-                          :to="`/posts/${item.post.id}#comment-${item.comment.id}`"
-                        >
-                          {{ stripMarkdownLength(item.comment.content, 100) }}
-                        </NuxtLink>
-                      </NotificationContainer>
-                    </template>
-                    <template v-else-if="item.type === 'USER_ACTIVITY'">
-                      <NotificationContainer :item="item" :markRead="markRead">
-                        你关注的
-                        <NuxtLink
-                          class="notif-content-text"
-                          @click="markRead(item.id)"
-                          :to="`/users/${item.comment.author.id}`"
-                        >
-                          {{ item.comment.author.username }}
-                        </NuxtLink>
-                        在文章
-                        <NuxtLink
-                          class="notif-content-text"
-                          @click="markRead(item.id)"
-                          :to="`/posts/${item.post.id}`"
-                        >
-                          {{ stripMarkdownLength(item.post.title, 100) }}
-                        </NuxtLink>
-                        下面评论了
-                        <NuxtLink
-                          class="notif-content-text"
-                          @click="markRead(item.id)"
-                          :to="`/posts/${item.post.id}#comment-${item.comment.id}`"
-                        >
-                          {{ stripMarkdownLength(item.comment.content, 100) }}
-                        </NuxtLink>
-                      </NotificationContainer>
-                    </template>
-                    <template v-else-if="item.type === 'MENTION' && item.comment">
-                      <NotificationContainer :item="item" :markRead="markRead">
-                        <NuxtLink
-                          class="notif-content-text"
-                          @click="markRead(item.id)"
-                          :to="`/users/${item.fromUser.id}`"
-                        >
-                          {{ item.fromUser.username }}
-                        </NuxtLink>
-                        在评论中提到了你：
-                        <NuxtLink
-                          class="notif-content-text"
-                          @click="markRead(item.id)"
-                          :to="`/posts/${item.post.id}#comment-${item.comment.id}`"
-                        >
-                          {{ stripMarkdownLength(item.comment.content, 100) }}
-                        </NuxtLink>
-                      </NotificationContainer>
-                    </template>
-                    <template v-else-if="item.type === 'MENTION'">
-                      <NotificationContainer :item="item" :markRead="markRead">
-                        <NuxtLink
-                          class="notif-content-text"
-                          @click="markRead(item.id)"
-                          :to="`/users/${item.fromUser.id}`"
-                        >
-                          {{ item.fromUser.username }}
-                        </NuxtLink>
-                        在帖子
-                        <NuxtLink
-                          class="notif-content-text"
-                          @click="markRead(item.id)"
-                          :to="`/posts/${item.post.id}`"
-                        >
-                          {{ stripMarkdownLength(item.post.title, 100) }}
-                        </NuxtLink>
-                        中提到了你
-                      </NotificationContainer>
-                    </template>
-                    <template v-else-if="item.type === 'USER_FOLLOWED'">
-                      <NotificationContainer :item="item" :markRead="markRead">
-                        <NuxtLink
-                          class="notif-content-text"
-                          @click="markRead(item.id)"
-                          :to="`/users/${item.fromUser.id}`"
-                        >
-                          {{ item.fromUser.username }}
-                        </NuxtLink>
-                        开始关注你了
-                      </NotificationContainer>
-                    </template>
-                    <template v-else-if="item.type === 'USER_UNFOLLOWED'">
-                      <NotificationContainer :item="item" :markRead="markRead">
-                        <NuxtLink
-                          class="notif-content-text"
-                          @click="markRead(item.id)"
-                          :to="`/users/${item.fromUser.id}`"
-                        >
-                          {{ item.fromUser.username }}
-                        </NuxtLink>
-                        取消关注你了
-                      </NotificationContainer>
-                    </template>
-                    <template v-else-if="item.type === 'FOLLOWED_POST'">
-                      <NotificationContainer :item="item" :markRead="markRead">
-                        你关注的
-                        <NuxtLink
-                          class="notif-content-text"
-                          @click="markRead(item.id)"
-                          :to="`/users/${item.fromUser.id}`"
-                        >
-                          {{ item.fromUser.username }}
-                        </NuxtLink>
-                        发布了文章
-                        <NuxtLink
-                          class="notif-content-text"
-                          @click="markRead(item.id)"
-                          :to="`/posts/${item.post.id}`"
-                        >
-                          {{ stripMarkdownLength(item.post.title, 100) }}
-                        </NuxtLink>
-                      </NotificationContainer>
-                    </template>
-                    <template v-else-if="item.type === 'POST_SUBSCRIBED'">
-                      <NotificationContainer :item="item" :markRead="markRead">
-                        <NuxtLink
-                          class="notif-content-text"
-                          @click="markRead(item.id)"
-                          :to="`/users/${item.fromUser.id}`"
-                        >
-                          {{ item.fromUser.username }}
-                        </NuxtLink>
-                        订阅了你的文章
-                        <NuxtLink
-                          class="notif-content-text"
-                          @click="markRead(item.id)"
-                          :to="`/posts/${item.post.id}`"
-                        >
-                          {{ stripMarkdownLength(item.post.title, 100) }}
-                        </NuxtLink>
-                      </NotificationContainer>
-                    </template>
-                    <template v-else-if="item.type === 'POST_UNSUBSCRIBED'">
-                      <NotificationContainer :item="item" :markRead="markRead">
-                        <NuxtLink
-                          class="notif-content-text"
-                          @click="markRead(item.id)"
-                          :to="`/users/${item.fromUser.id}`"
-                        >
-                          {{ item.fromUser.username }}
-                        </NuxtLink>
-                        取消订阅了你的文章
-                        <NuxtLink
-                          class="notif-content-text"
-                          @click="markRead(item.id)"
-                          :to="`/posts/${item.post.id}`"
-                        >
-                          {{ stripMarkdownLength(item.post.title, 100) }}
-                        </NuxtLink>
-                      </NotificationContainer>
-                    </template>
-                    <template v-else-if="item.type === 'POST_REVIEW_REQUEST' && item.fromUser">
-                      <NotificationContainer :item="item" :markRead="markRead">
-                        <NuxtLink
-                          class="notif-content-text"
-                          @click="markRead(item.id)"
-                          :to="`/users/${item.fromUser.id}`"
-                        >
-                          {{ item.fromUser.username }}
-                        </NuxtLink>
-                        发布了帖子
-                        <NuxtLink
-                          class="notif-content-text"
-                          @click="markRead(item.id)"
-                          :to="`/posts/${item.post.id}`"
-                        >
-                          {{ stripMarkdownLength(item.post.title, 100) }}
-                        </NuxtLink>
-                        ，请审核
-                      </NotificationContainer>
-                    </template>
-                    <template v-else-if="item.type === 'POST_REVIEW_REQUEST'">
-                      <NotificationContainer :item="item" :markRead="markRead">
-                        您发布的帖子
-                        <NuxtLink
-                          class="notif-content-text"
-                          @click="markRead(item.id)"
-                          :to="`/posts/${item.post.id}`"
-                        >
-                          {{ stripMarkdownLength(item.post.title, 100) }}
-                        </NuxtLink>
-                        已提交审核
-                      </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 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">
-                        您发布的帖子
-                        <NuxtLink
-                          class="notif-content-text"
-                          @click="markRead(item.id)"
-                          :to="`/posts/${item.post.id}`"
-                        >
-                          {{ stripMarkdownLength(item.post.title, 100) }}
-                        </NuxtLink>
-                        已审核通过
-                      </NotificationContainer>
-                    </template>
-                    <template v-else-if="item.type === 'POST_REVIEWED' && item.approved === false">
-                      <NotificationContainer :item="item" :markRead="markRead">
-                        您发布的帖子
-                        <NuxtLink
-                          class="notif-content-text"
-                          @click="markRead(item.id)"
-                          :to="`/posts/${item.post.id}`"
-                        >
-                          {{ stripMarkdownLength(item.post.title, 100) }}
-                        </NuxtLink>
-                        已被管理员拒绝
-                      </NotificationContainer>
-                    </template>
-                    <template v-else-if="item.type === 'POST_FEATURED'">
-                      <NotificationContainer :item="item" :markRead="markRead">
-                        您的文章
-                        <NuxtLink
-                          class="notif-content-text"
-                          @click="markRead(item.id)"
-                          :to="`/posts/${item.post.id}`"
-                        >
-                          {{ stripMarkdownLength(item.post.title, 100) }}
-                        </NuxtLink>
-                        被收录为精选
-                      </NotificationContainer>
-                    </template>
-                    <template v-else-if="item.type === 'POST_DELETED'">
-                      <NotificationContainer :item="item" :markRead="markRead">
-                        管理员
-                        <template v-if="item.fromUser">
-                          <NuxtLink
-                            class="notif-content-text"
-                            @click="markRead(item.id)"
-                            :to="`/users/${item.fromUser.id}`"
-                          >
-                            {{ item.fromUser.username }}
-                          </NuxtLink>
-                        </template>
-                        删除了您的帖子
-                        <span class="notif-content-text">
-                          {{ stripMarkdownLength(item.content, 100) }}
-                        </span>
-                      </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>
-            <InfiniteLoadMore :key="selectedTab" :on-load="loadMore" :pause="isLoadingMessage" />
-          </div>
-        </template>
-      </template>
-    </MultiTabs>
+          </template>
+        </BaseTimeline>
+        <InfiniteLoadMore :key="selectedTab" :on-load="loadMore" :pause="isLoadingMessage" />
+      </div>
+    </template>
   </div>
 </template>
 
@@ -553,11 +566,6 @@ import BaseSwitch from '~/components/BaseSwitch.vue'
 const config = useRuntimeConfig()
 const API_BASE_URL = config.public.apiBaseUrl
 const route = useRoute()
-const tabs = [
-  { name: 'all', label: '消息' },
-  { name: 'unread', label: '未读' },
-  { name: 'control', label: '消息设置' },
-]
 const selectedTab = ref(
   ['all', 'unread', 'control'].includes(route.query.tab) ? route.query.tab : 'unread',
 )
diff --git a/frontend_nuxt/pages/points.vue b/frontend_nuxt/pages/points.vue
index 175507387..0c3e64616 100644
--- a/frontend_nuxt/pages/points.vue
+++ b/frontend_nuxt/pages/points.vue
@@ -1,166 +1,177 @@
 <template>
   <div class="point-mall-page">
-    <MultiTabs
-      :tabs="tabs"
-      v-model="selectedTab"
-      header-class="point-tabs"
-      item-class="point-tab-item"
-    >
-      <template #default="{ selected }">
-        <template v-if="selected === 'mall'">
-          <div class="point-mall-page-content">
-            <section class="rules">
-              <div class="section-title">🎉 积分规则</div>
-              <div class="section-content">
-                <div class="section-item" v-for="(rule, idx) in pointRules" :key="idx">
-                  {{ rule }}
-                </div>
-              </div>
-            </section>
-            <div class="loading-points-container" v-if="isLoading">
-              <l-hatch size="28" stroke="4" speed="3.5" color="var(--primary-color)"></l-hatch>
-            </div>
-            <div class="point-info">
-              <p v-if="authState.loggedIn && point !== null">
-                <span><i class="fas fa-coins coin-icon"></i></span>我的积分：<span
-                  class="point-value"
-                  >{{ point }}</span
-                >
-              </p>
-            </div>
-            <section class="goods">
-              <div class="goods-item" v-for="(good, idx) in goods" :key="idx">
-                <BaseImage class="goods-item-image" :src="good.image" alt="good.name" />
-                <div class="goods-item-name">{{ good.name }}</div>
-                <div class="goods-item-cost">
-                  <i class="fas fa-coins"></i>
-                  {{ good.cost }} 积分
-                </div>
-                <div
-                  class="goods-item-button"
-                  :class="{ disabled: !authState.loggedIn || point === null || point < good.cost }"
-                  @click="openRedeem(good)"
-                >
-                  兑换
-                </div>
-              </div>
-            </section>
-            <RedeemPopup
-              :visible="dialogVisible"
-              v-model="contact"
-              :loading="loading"
-              @close="closeRedeem"
-              @submit="submitRedeem"
-            />
+    <div class="point-tabs">
+      <div
+        :class="['point-tab-item', { selected: selectedTab === 'mall' }]"
+        @click="selectedTab = 'mall'"
+      >
+        积分兑换
+      </div>
+      <div
+        :class="['point-tab-item', { selected: selectedTab === 'history' }]"
+        @click="selectedTab = 'history'"
+      >
+        积分历史
+      </div>
+    </div>
+
+    <template v-if="selectedTab === 'mall'">
+      <div class="point-mall-page-content">
+        <section class="rules">
+          <div class="section-title">🎉 积分规则</div>
+          <div class="section-content">
+            <div class="section-item" v-for="(rule, idx) in pointRules" :key="idx">{{ rule }}</div>
           </div>
-        </template>
-        <template v-else>
-          <div class="loading-points-container" v-if="historyLoading">
-            <l-hatch size="28" stroke="4" speed="3.5" color="var(--primary-color)"></l-hatch>
+        </section>
+
+        <div class="loading-points-container" v-if="isLoading">
+          <l-hatch size="28" stroke="4" speed="3.5" color="var(--primary-color)"></l-hatch>
+        </div>
+
+        <div class="point-info">
+          <p v-if="authState.loggedIn && point !== null">
+            <span><i class="fas fa-coins coin-icon"></i></span>我的积分：<span
+              class="point-value"
+              >{{ point }}</span
+            >
+          </p>
+        </div>
+
+        <section class="goods">
+          <div class="goods-item" v-for="(good, idx) in goods" :key="idx">
+            <BaseImage class="goods-item-image" :src="good.image" alt="good.name" />
+            <div class="goods-item-name">{{ good.name }}</div>
+            <div class="goods-item-cost">
+              <i class="fas fa-coins"></i>
+              {{ good.cost }} 积分
+            </div>
+            <div
+              class="goods-item-button"
+              :class="{ disabled: !authState.loggedIn || point === null || point < good.cost }"
+              @click="openRedeem(good)"
+            >
+              兑换
+            </div>
           </div>
-          <BasePlaceholder
-            v-else-if="histories.length === 0"
-            text="暂无积分记录"
-            icon="fas fa-inbox"
-          />
-          <div class="timeline-container" v-else>
-            <BaseTimeline :items="histories">
-              <template #item="{ item }">
-                <div class="history-content">
-                  <template v-if="item.type === 'POST'">
-                    发送帖子
-                    <NuxtLink :to="`/posts/${item.postId}`" class="timeline-link">{{
-                      item.postTitle
-                    }}</NuxtLink>
-                    ，获得{{ item.amount }}积分
-                  </template>
-                  <template v-else-if="item.type === 'COMMENT'">
-                    在文章
-                    <NuxtLink :to="`/posts/${item.postId}`" class="timeline-link">{{
-                      item.postTitle
-                    }}</NuxtLink>
-                    中
-                    <template v-if="!item.fromUserId">
-                      发送评论
-                      <NuxtLink
-                        :to="`/posts/${item.postId}#comment-${item.commentId}`"
-                        class="timeline-link"
-                        >{{ stripMarkdownLength(item.commentContent, 100) }}</NuxtLink
-                      >
-                      ，获得{{ item.amount }}积分
-                    </template>
-                    <template v-else>
-                      被评论
-                      <NuxtLink
-                        :to="`/posts/${item.postId}#comment-${item.commentId}`"
-                        class="timeline-link"
-                        >{{ stripMarkdownLength(item.commentContent, 100) }}</NuxtLink
-                      >
-                      ，获得{{ item.amount }}积分
-                    </template>
-                  </template>
-                  <template v-else-if="item.type === 'POST_LIKED' && item.fromUserId">
-                    帖子
-                    <NuxtLink :to="`/posts/${item.postId}`" class="timeline-link">{{
-                      item.postTitle
-                    }}</NuxtLink>
-                    被
-                    <NuxtLink :to="`/users/${item.fromUserId}`" class="timeline-link">{{
-                      item.fromUserName
-                    }}</NuxtLink>
-                    按赞，获得{{ item.amount }}积分
-                  </template>
-                  <template v-else-if="item.type === 'COMMENT_LIKED' && item.fromUserId">
-                    评论
-                    <NuxtLink
-                      :to="`/posts/${item.postId}#comment-${item.commentId}`"
-                      class="timeline-link"
-                      >{{ stripMarkdownLength(item.commentContent, 100) }}</NuxtLink
-                    >
-                    被
-                    <NuxtLink :to="`/users/${item.fromUserId}`" class="timeline-link">{{
-                      item.fromUserName
-                    }}</NuxtLink>
-                    按赞，获得{{ item.amount }}积分
-                  </template>
-                  <template v-else-if="item.type === 'INVITE' && item.fromUserId">
-                    邀请了好友
-                    <NuxtLink :to="`/users/${item.fromUserId}`" class="timeline-link">{{
-                      item.fromUserName
-                    }}</NuxtLink>
-                    加入社区 🎉，获得 {{ item.amount }} 积分
-                  </template>
-                  <template v-else-if="item.type === 'FEATURE'">
-                    文章
-                    <NuxtLink :to="`/posts/${item.postId}`" class="timeline-link">{{
-                      item.postTitle
-                    }}</NuxtLink>
-                    被收录为精选，获得 {{ item.amount }} 积分
-                  </template>
-                  <template v-else-if="item.type === 'REDEEM'">
-                    兑换商品，消耗 {{ -item.amount }} 积分
-                  </template>
-                  <template v-else-if="item.type === 'LOTTERY_JOIN'">
-                    参与抽奖帖
-                    <NuxtLink :to="`/posts/${item.postId}`" class="timeline-link">{{
-                      item.postTitle
-                    }}</NuxtLink>
-                    ，消耗 {{ -item.amount }} 积分
-                  </template>
-                  <template v-else-if="item.type === 'LOTTERY_REWARD'">
-                    你的抽奖帖
-                    <NuxtLink :to="`/posts/${item.postId}`" class="timeline-link">{{
-                      item.postTitle
-                    }}</NuxtLink>
-                    被抽中，消耗 {{ -item.amount }} 积分
-                  </template>
-                </div>
+        </section>
+        <RedeemPopup
+          :visible="dialogVisible"
+          v-model="contact"
+          :loading="loading"
+          @close="closeRedeem"
+          @submit="submitRedeem"
+        />
+      </div>
+    </template>
+
+    <template v-else>
+      <div class="loading-points-container" v-if="historyLoading">
+        <l-hatch size="28" stroke="4" speed="3.5" color="var(--primary-color)"></l-hatch>
+      </div>
+      <BasePlaceholder v-else-if="histories.length === 0" text="暂无积分记录" icon="fas fa-inbox" />
+      <div class="timeline-container" v-else>
+        <BaseTimeline :items="histories">
+          <template #item="{ item }">
+            <div class="history-content">
+              <template v-if="item.type === 'POST'">
+                发送帖子
+                <NuxtLink :to="`/posts/${item.postId}`" class="timeline-link">{{
+                  item.postTitle
+                }}</NuxtLink>
+                ，获得{{ item.amount }}积分
               </template>
-            </BaseTimeline>
-          </div>
-        </template>
-      </template>
-    </MultiTabs>
+              <template v-else-if="item.type === 'COMMENT'">
+                在文章
+                <NuxtLink :to="`/posts/${item.postId}`" class="timeline-link">{{
+                  item.postTitle
+                }}</NuxtLink>
+                中
+                <template v-if="!item.fromUserId">
+                  发送评论
+                  <NuxtLink
+                    :to="`/posts/${item.postId}#comment-${item.commentId}`"
+                    class="timeline-link"
+                    >{{ stripMarkdownLength(item.commentContent, 100) }}</NuxtLink
+                  >
+                  ，获得{{ item.amount }}积分
+                </template>
+                <template v-else>
+                  被评论
+                  <NuxtLink
+                    :to="`/posts/${item.postId}#comment-${item.commentId}`"
+                    class="timeline-link"
+                    >{{ stripMarkdownLength(item.commentContent, 100) }}</NuxtLink
+                  >
+                  ，获得{{ item.amount }}积分
+                </template>
+              </template>
+              <template v-else-if="item.type === 'POST_LIKED' && item.fromUserId">
+                帖子
+                <NuxtLink :to="`/posts/${item.postId}`" class="timeline-link">{{
+                  item.postTitle
+                }}</NuxtLink>
+                被
+                <NuxtLink :to="`/users/${item.fromUserId}`" class="timeline-link">{{
+                  item.fromUserName
+                }}</NuxtLink>
+                按赞，获得{{ item.amount }}积分
+              </template>
+              <template v-else-if="item.type === 'COMMENT_LIKED' && item.fromUserId">
+                评论
+                <NuxtLink
+                  :to="`/posts/${item.postId}#comment-${item.commentId}`"
+                  class="timeline-link"
+                  >{{ stripMarkdownLength(item.commentContent, 100) }}</NuxtLink
+                >
+                被
+                <NuxtLink :to="`/users/${item.fromUserId}`" class="timeline-link">{{
+                  item.fromUserName
+                }}</NuxtLink>
+                按赞，获得{{ item.amount }}积分
+              </template>
+              <template v-else-if="item.type === 'INVITE' && item.fromUserId">
+                邀请了好友
+                <NuxtLink :to="`/users/${item.fromUserId}`" class="timeline-link">{{
+                  item.fromUserName
+                }}</NuxtLink>
+                加入社区 🎉，获得 {{ item.amount }} 积分
+              </template>
+              <template v-else-if="item.type === 'FEATURE'">
+                文章
+                <NuxtLink :to="`/posts/${item.postId}`" class="timeline-link">{{
+                  item.postTitle
+                }}</NuxtLink>
+                被收录为精选，获得 {{ item.amount }} 积分
+              </template>
+              <template v-else-if="item.type === 'REDEEM'">
+                兑换商品，消耗 {{ -item.amount }} 积分
+              </template>
+              <template v-else-if="item.type === 'LOTTERY_JOIN'">
+                参与抽奖帖
+                <NuxtLink :to="`/posts/${item.postId}`" class="timeline-link">{{
+                  item.postTitle
+                }}</NuxtLink>
+                ，消耗 {{ -item.amount }} 积分
+              </template>
+              <template v-else-if="item.type === 'LOTTERY_REWARD'">
+                你的抽奖帖
+                <NuxtLink :to="`/posts/${item.postId}`" class="timeline-link">{{
+                  item.postTitle
+                }}</NuxtLink>
+                被
+                <NuxtLink :to="`/users/${item.fromUserId}`" class="timeline-link">{{
+                  item.fromUserName
+                }}</NuxtLink>
+                参与，获得 {{ item.amount }} 积分
+              </template>
+              <template v-else-if="item.type === 'SYSTEM_ONLINE'"> 积分历史系统上线 </template>
+              <i class="fas fa-coins"></i> 你目前的积分是 {{ item.balance }}
+            </div>
+            <div class="history-time">{{ TimeManager.format(item.createdAt) }}</div>
+          </template>
+        </BaseTimeline>
+      </div>
+    </template>
   </div>
 </template>
 
@@ -177,11 +188,6 @@ import TimeManager from '~/utils/time'
 const config = useRuntimeConfig()
 const API_BASE_URL = config.public.apiBaseUrl
 
-const tabs = [
-  { name: 'mall', label: '积分兑换' },
-  { name: 'history', label: '积分历史' },
-]
-
 const selectedTab = ref('mall')
 const point = ref(null)
 const isLoading = ref(false)