diff --git a/frontend_nuxt/components/BaseTabs.vue b/frontend_nuxt/components/BaseTabs.vue
new file mode 100644
index 000000000..062ee0eef
--- /dev/null
+++ b/frontend_nuxt/components/BaseTabs.vue
@@ -0,0 +1,91 @@
+<template>
+  <div class="base-tabs">
+    <div class="base-tabs-header">
+      <div class="base-tabs-items">
+        <div
+          v-for="tab in tabs"
+          :key="tab.key"
+          :class="['base-tabs-item', { selected: modelValue === tab.key }]"
+          @click="$emit('update:modelValue', tab.key)"
+        >
+          <i v-if="tab.icon" :class="tab.icon"></i>
+          <div class="base-tabs-item-label">{{ tab.label }}</div>
+        </div>
+      </div>
+      <div class="base-tabs-header-right">
+        <slot name="right"></slot>
+      </div>
+    </div>
+    <div class="base-tabs-content" @touchstart="onTouchStart" @touchend="onTouchEnd">
+      <slot></slot>
+    </div>
+  </div>
+</template>
+
+<script setup>
+const props = defineProps({
+  modelValue: { type: String, required: true },
+  tabs: { type: Array, default: () => [] },
+})
+
+const emit = defineEmits(['update:modelValue'])
+
+let touchStartX = 0
+
+function onTouchStart(e) {
+  touchStartX = e.touches[0].clientX
+}
+
+function onTouchEnd(e) {
+  const diffX = e.changedTouches[0].clientX - touchStartX
+  if (Math.abs(diffX) > 50) {
+    const index = props.tabs.findIndex((t) => t.key === props.modelValue)
+    if (diffX < 0 && index < props.tabs.length - 1) {
+      emit('update:modelValue', props.tabs[index + 1].key)
+    } else if (diffX > 0 && index > 0) {
+      emit('update:modelValue', props.tabs[index - 1].key)
+    }
+  }
+}
+</script>
+
+<style scoped>
+.base-tabs-header {
+  display: flex;
+  border-bottom: 1px solid var(--normal-border-color);
+  align-items: center;
+}
+
+.base-tabs-items {
+  display: flex;
+  overflow-x: auto;
+  scrollbar-width: none;
+  flex: 1;
+}
+
+.base-tabs-item {
+  padding: 10px 20px;
+  cursor: pointer;
+  white-space: nowrap;
+  display: flex;
+  align-items: center;
+}
+
+.base-tabs-item i {
+  margin-right: 6px;
+}
+
+.base-tabs-item.selected {
+  color: var(--primary-color);
+  border-bottom: 2px solid var(--primary-color);
+}
+
+.base-tabs-header-right {
+  display: flex;
+  flex-shrink: 0;
+}
+
+.base-tabs-content {
+  width: 100%;
+}
+</style>
diff --git a/frontend_nuxt/pages/about/index.vue b/frontend_nuxt/pages/about/index.vue
index 8d5aaa60f..ea60f0946 100644
--- a/frontend_nuxt/pages/about/index.vue
+++ b/frontend_nuxt/pages/about/index.vue
@@ -1,30 +1,23 @@
 <template>
   <div class="about-page">
-    <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>
+    <BaseTabs v-model="selectedTab" :tabs="tabs">
+      <div class="about-loading" v-if="isFetching">
+        <l-hatch-spinner size="100" stroke="10" speed="1" color="var(--primary-color)" />
       </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
+        v-else
+        class="about-content"
+        v-html="renderMarkdown(content)"
+        @click="handleContentClick"
+      ></div>
+    </BaseTabs>
   </div>
 </template>
 
 <script>
-import { onMounted, ref } from 'vue'
+import { onMounted, ref, watch } from 'vue'
 import { handleMarkdownClick, renderMarkdown } from '~/utils/markdown'
+import BaseTabs from '~/components/BaseTabs.vue'
 
 export default {
   name: 'AboutPageView',
@@ -32,27 +25,27 @@ export default {
     const isFetching = ref(false)
     const tabs = [
       {
-        name: 'about',
+        key: 'about',
         label: '关于',
         file: 'https://openisle-1307107697.cos.ap-guangzhou.myqcloud.com/assert/about/about.md',
       },
       {
-        name: 'agreement',
+        key: 'agreement',
         label: '用户协议',
         file: 'https://openisle-1307107697.cos.ap-guangzhou.myqcloud.com/assert/about/agreement.md',
       },
       {
-        name: 'guideline',
+        key: 'guideline',
         label: '创作准则',
         file: 'https://openisle-1307107697.cos.ap-guangzhou.myqcloud.com/assert/about/guideline.md',
       },
       {
-        name: 'privacy',
+        key: 'privacy',
         label: '隐私政策',
         file: 'https://openisle-1307107697.cos.ap-guangzhou.myqcloud.com/assert/about/privacy.md',
       },
     ]
-    const selectedTab = ref(tabs[0].name)
+    const selectedTab = ref(tabs[0].key)
     const content = ref('')
 
     const loadContent = async (file) => {
@@ -71,21 +64,20 @@ export default {
       }
     }
 
-    const selectTab = (name) => {
-      selectedTab.value = name
-      const tab = tabs.find((t) => t.name === name)
-      if (tab) loadContent(tab.file)
-    }
-
     onMounted(() => {
       loadContent(tabs[0].file)
     })
 
+    watch(selectedTab, (name) => {
+      const tab = tabs.find((t) => t.key === name)
+      if (tab) loadContent(tab.file)
+    })
+
     const handleContentClick = (e) => {
       handleMarkdownClick(e)
     }
 
-    return { tabs, selectedTab, content, renderMarkdown, selectTab, isFetching, handleContentClick }
+    return { tabs, selectedTab, content, renderMarkdown, isFetching, handleContentClick }
   },
 }
 </script>
@@ -97,7 +89,7 @@ export default {
   margin: 0 auto;
 }
 
-.about-tabs {
+:deep(.base-tabs-header) {
   top: calc(var(--header-height) + 1px);
   background-color: var(--background-color-blur);
   display: flex;
@@ -108,13 +100,13 @@ export default {
   scrollbar-width: none;
 }
 
-.about-tabs-item {
+:deep(.base-tabs-item) {
   padding: 10px 20px;
   cursor: pointer;
   white-space: nowrap;
 }
 
-.about-tabs-item.selected {
+:deep(.base-tabs-item.selected) {
   color: var(--primary-color);
   border-bottom: 2px solid var(--primary-color);
 }
diff --git a/frontend_nuxt/pages/message-box/index.vue b/frontend_nuxt/pages/message-box/index.vue
index ffb91ffb2..4c52f9d86 100644
--- a/frontend_nuxt/pages/message-box/index.vue
+++ b/frontend_nuxt/pages/message-box/index.vue
@@ -7,116 +7,113 @@
     <div v-if="!isFloatMode" class="float-control">
       <i class="fas fa-compress" @click="minimize" title="最小化"></i>
     </div>
-    <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"
-          />
+    <BaseTabs v-model="activeTab" :tabs="tabs">
+      <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 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>
+        <div v-else-if="error" class="error-container">
+          <div class="error-text">{{ error }}</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 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-for="ch in channels"
-          :key="ch.id"
+          v-if="!loading"
+          v-for="convo in conversations"
+          :key="convo.id"
           class="conversation-item"
-          @click="goToChannel(ch.id)"
+          @click="goToConversation(convo.id)"
         >
           <div class="conversation-avatar">
             <BaseImage
-              :src="ch.avatar || '/default-avatar.svg'"
-              :alt="ch.name"
+              :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">
-                {{ ch.name }}
-                <span v-if="ch.unreadCount > 0" class="unread-dot"></span>
+                {{ getOtherParticipant(convo)?.username || '未知用户' }}
               </div>
               <div class="message-time">
-                {{ formatTime(ch.lastMessage?.createdAt || ch.createdAt) }}
+                {{ formatTime(convo.lastMessage?.createdAt || convo.createdAt) }}
               </div>
             </div>
+
             <div class="last-message-row">
               <div class="last-message">
                 {{
-                  ch.lastMessage ? stripMarkdownLength(ch.lastMessage.content, 100) : ch.description
+                  convo.lastMessage
+                    ? stripMarkdownLength(convo.lastMessage.content, 100)
+                    : '暂无消息'
                 }}
               </div>
-              <div class="member-count">成员 {{ ch.memberCount }}</div>
+              <div v-if="convo.unreadCount > 0" class="unread-count-badge">
+                {{ convo.unreadCount }}
+              </div>
             </div>
           </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>
+    </BaseTabs>
   </div>
 </template>
 
@@ -132,6 +129,7 @@ import TimeManager from '~/utils/time'
 import { stripMarkdownLength } from '~/utils/markdown'
 import SearchPersonDropdown from '~/components/SearchPersonDropdown.vue'
 import BasePlaceholder from '~/components/BasePlaceholder.vue'
+import BaseTabs from '~/components/BaseTabs.vue'
 
 const config = useRuntimeConfig()
 const conversations = ref([])
@@ -148,6 +146,10 @@ const { fetchChannelUnread: refreshChannelUnread, setFromList: setChannelUnreadF
 let subscription = null
 
 const activeTab = ref('channels')
+const tabs = [
+  { key: 'messages', label: '站内信' },
+  { key: 'channels', label: '频道' },
+]
 const channels = ref([])
 const loadingChannels = ref(false)
 const isFloatMode = computed(() => route.query.float === '1')
@@ -216,15 +218,13 @@ async function fetchChannels() {
   }
 }
 
-function switchToMessage() {
-  activeTab.value = 'messages'
-  fetchConversations()
-}
-
-function switchToChannels() {
-  activeTab.value = 'channels'
-  fetchChannels()
-}
+watch(activeTab, (tab) => {
+  if (tab === 'messages') {
+    fetchConversations()
+  } else {
+    fetchChannels()
+  }
+})
 
 async function goToChannel(id) {
   const token = getToken()
@@ -323,18 +323,18 @@ function minimize() {
   cursor: pointer;
 }
 
-.tabs {
+:deep(.base-tabs-header) {
   display: flex;
   border-bottom: 1px solid var(--normal-border-color);
   margin-bottom: 16px;
 }
 
-.tab {
+:deep(.base-tabs-item) {
   padding: 10px 20px;
   cursor: pointer;
 }
 
-.tab.active {
+:deep(.base-tabs-item.selected) {
   border-bottom: 2px solid var(--primary-color);
   color: var(--primary-color);
 }
@@ -500,7 +500,7 @@ function minimize() {
     display: block;
   }
 
-  .tabs,
+  :deep(.base-tabs-header),
   .loading-message,
   .error-container,
   .search-container,
diff --git a/frontend_nuxt/pages/message.vue b/frontend_nuxt/pages/message.vue
index d694b1b2d..ed67cd2cb 100644
--- a/frontend_nuxt/pages/message.vue
+++ b/frontend_nuxt/pages/message.vue
@@ -1,515 +1,157 @@
 <template>
   <div class="message-page">
-    <div class="message-page-header">
-      <div class="message-tabs">
-        <div
-          :class="['message-tab-item', { selected: selectedTab === 'all' }]"
-          @click="selectedTab = 'all'"
-        >
-          消息
+    <BaseTabs v-model="selectedTab" :tabs="tabs">
+      <template #right>
+        <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
-          :class="['message-tab-item', { selected: selectedTab === 'unread' }]"
-          @click="selectedTab = 'unread'"
-        >
-          未读
-        </div>
-        <div
-          :class="['message-tab-item', { selected: selectedTab === 'control' }]"
-          @click="selectedTab = 'control'"
-        >
-          消息设置
-        </div>
-      </div>
+      </template>
 
-      <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 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>
         </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>
+      <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"
-      />
+        <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>
+        <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="`/posts/${item.post.id}#comment-${item.parentComment.id}`"
-                      >
-                        {{ stripMarkdownLength(item.parentComment.content, 100) }}
+                        :to="`/users/${item.comment.author.id}`"
+                        >{{ item.comment.author.username }}
                       </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)"
+                      对我的评论
+                      <span>
+                        <NuxtLink
+                          class="notif-content-text"
+                          @click="markRead(item.id)"
+                          :to="`/posts/${item.post.id}#comment-${item.parentComment.id}`"
                         >
-                          同意
-                        </div>
-                        <div
-                          class="mark-reject-button-item"
-                          @click="reject(item.fromUser.id, item.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}`"
                         >
-                          拒绝
-                        </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">
+                          {{ 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)"
@@ -517,26 +159,365 @@
                       >
                         {{ 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>
+                      查看了您的帖子
+                      <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>
+    </BaseTabs>
   </div>
 </template>
 
@@ -546,6 +527,7 @@ import BasePlaceholder from '~/components/BasePlaceholder.vue'
 import BaseTimeline from '~/components/BaseTimeline.vue'
 import NotificationContainer from '~/components/NotificationContainer.vue'
 import InfiniteLoadMore from '~/components/InfiniteLoadMore.vue'
+import BaseTabs from '~/components/BaseTabs.vue'
 import { toast } from '~/main'
 import { authState, getToken } from '~/utils/auth'
 import { stripMarkdownLength } from '~/utils/markdown'
@@ -569,6 +551,11 @@ const route = useRoute()
 const selectedTab = ref(
   ['all', 'unread', 'control'].includes(route.query.tab) ? route.query.tab : 'unread',
 )
+const tabs = [
+  { key: 'all', label: '消息' },
+  { key: 'unread', label: '未读' },
+  { key: 'control', label: '消息设置' },
+]
 const notificationPrefs = ref([])
 const page = ref(0)
 const pageSize = 30
@@ -714,7 +701,7 @@ onActivated(async () => {
   overflow-x: hidden;
 }
 
-.message-page-header {
+.message-page :deep(.base-tabs-header) {
   position: sticky;
   top: 1px;
   z-index: 200;
@@ -835,21 +822,6 @@ onActivated(async () => {
   color: var(--text-color);
 }
 
-.message-tabs {
-  display: flex;
-  flex-direction: row;
-}
-
-.message-tab-item {
-  padding: 10px 20px;
-  cursor: pointer;
-}
-
-.message-tab-item.selected {
-  color: var(--primary-color);
-  border-bottom: 2px solid var(--primary-color);
-}
-
 .message-control-title {
   font-size: 16px;
   font-weight: bold;
diff --git a/frontend_nuxt/pages/points.vue b/frontend_nuxt/pages/points.vue
index 0c3e64616..7a1bba5b3 100644
--- a/frontend_nuxt/pages/points.vue
+++ b/frontend_nuxt/pages/points.vue
@@ -1,177 +1,170 @@
 <template>
   <div class="point-mall-page">
-    <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>
+    <BaseTabs v-model="selectedTab" :tabs="tabs">
+      <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>
+          </section>
 
-    <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 class="loading-points-container" v-if="isLoading">
+            <l-hatch size="28" stroke="4" speed="3.5" color="var(--primary-color)"></l-hatch>
           </div>
-        </section>
 
-        <div class="loading-points-container" v-if="isLoading">
+          <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>
+      </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>
-
-        <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"
+        <BasePlaceholder
+          v-else-if="histories.length === 0"
+          text="暂无积分记录"
+          icon="fas fa-inbox"
         />
-      </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>
-              <template v-else-if="item.type === 'COMMENT'">
-                在文章
-                <NuxtLink :to="`/posts/${item.postId}`" class="timeline-link">{{
-                  item.postTitle
-                }}</NuxtLink>
-                中
-                <template v-if="!item.fromUserId">
-                  发送评论
+        <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
                   >
-                  ，获得{{ item.amount }}积分
+                  被
+                  <NuxtLink :to="`/users/${item.fromUserId}`" class="timeline-link">{{
+                    item.fromUserName
+                  }}</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 v-else-if="item.type === 'INVITE' && item.fromUserId">
+                  邀请了好友
+                  <NuxtLink :to="`/users/${item.fromUserId}`" class="timeline-link">{{
+                    item.fromUserName
+                  }}</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>
+                <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>
+    </BaseTabs>
   </div>
 </template>
 
@@ -184,11 +177,16 @@ import BaseTimeline from '~/components/BaseTimeline.vue'
 import BasePlaceholder from '~/components/BasePlaceholder.vue'
 import { stripMarkdownLength } from '~/utils/markdown'
 import TimeManager from '~/utils/time'
+import BaseTabs from '~/components/BaseTabs.vue'
 
 const config = useRuntimeConfig()
 const API_BASE_URL = config.public.apiBaseUrl
 
 const selectedTab = ref('mall')
+const tabs = [
+  { key: 'mall', label: '积分兑换' },
+  { key: 'history', label: '积分历史' },
+]
 const point = ref(null)
 const isLoading = ref(false)
 const histories = ref([])
@@ -315,17 +313,17 @@ const submitRedeem = async () => {
   padding: 0 20px;
 }
 
-.point-tabs {
+:deep(.base-tabs-header) {
   display: flex;
   border-bottom: 1px solid var(--normal-border-color);
 }
 
-.point-tab-item {
+:deep(.base-tabs-item) {
   padding: 10px 15px;
   cursor: pointer;
 }
 
-.point-tab-item.selected {
+:deep(.base-tabs-item.selected) {
   border-bottom: 2px solid var(--primary-color);
   color: var(--primary-color);
 }
diff --git a/frontend_nuxt/pages/users/[id].vue b/frontend_nuxt/pages/users/[id].vue
index 64881ad7d..8a487f729 100644
--- a/frontend_nuxt/pages/users/[id].vue
+++ b/frontend_nuxt/pages/users/[id].vue
@@ -72,282 +72,246 @@
         </div>
       </div>
 
-      <div class="profile-tabs">
-        <div
-          :class="['profile-tabs-item', { selected: selectedTab === 'summary' }]"
-          @click="selectedTab = 'summary'"
-        >
-          <i class="fas fa-chart-line"></i>
-          <div class="profile-tabs-item-label">总结</div>
+      <BaseTabs v-model="selectedTab" :tabs="tabs">
+        <div v-if="tabLoading" class="tab-loading">
+          <l-hatch size="28" stroke="4" speed="3.5" color="var(--primary-color)" />
         </div>
-        <div
-          :class="['profile-tabs-item', { selected: selectedTab === 'timeline' }]"
-          @click="selectedTab = 'timeline'"
-        >
-          <i class="fas fa-clock"></i>
-          <div class="profile-tabs-item-label">时间线</div>
-        </div>
-        <div
-          :class="['profile-tabs-item', { selected: selectedTab === 'following' }]"
-          @click="selectedTab = 'following'"
-        >
-          <i class="fas fa-user-plus"></i>
-          <div class="profile-tabs-item-label">关注</div>
-        </div>
-        <div
-          :class="['profile-tabs-item', { selected: selectedTab === 'favorites' }]"
-          @click="selectedTab = 'favorites'"
-        >
-          <i class="fas fa-bookmark"></i>
-          <div class="profile-tabs-item-label">收藏</div>
-        </div>
-        <div
-          :class="['profile-tabs-item', { selected: selectedTab === 'achievements' }]"
-          @click="selectedTab = 'achievements'"
-        >
-          <i class="fas fa-medal"></i>
-          <div class="profile-tabs-item-label">勋章</div>
-        </div>
-      </div>
-
-      <div v-if="tabLoading" class="tab-loading">
-        <l-hatch size="28" stroke="4" speed="3.5" color="var(--primary-color)" />
-      </div>
-      <template v-else>
-        <div v-if="selectedTab === 'summary'" class="profile-summary">
-          <div class="total-summary">
-            <div class="summary-title">统计信息</div>
-            <div class="total-summary-content">
-              <div class="total-summary-item">
-                <div class="total-summary-item-label">访问天数</div>
-                <div class="total-summary-item-value">{{ user.visitedDays }}</div>
+        <template v-else>
+          <div v-if="selectedTab === 'summary'" class="profile-summary">
+            <div class="total-summary">
+              <div class="summary-title">统计信息</div>
+              <div class="total-summary-content">
+                <div class="total-summary-item">
+                  <div class="total-summary-item-label">访问天数</div>
+                  <div class="total-summary-item-value">{{ user.visitedDays }}</div>
+                </div>
+                <div class="total-summary-item">
+                  <div class="total-summary-item-label">已读帖子</div>
+                  <div class="total-summary-item-value">{{ user.readPosts }}</div>
+                </div>
+                <div class="total-summary-item">
+                  <div class="total-summary-item-label">已送出的💗</div>
+                  <div class="total-summary-item-value">{{ user.likesSent }}</div>
+                </div>
+                <div class="total-summary-item">
+                  <div class="total-summary-item-label">已收到的💗</div>
+                  <div class="total-summary-item-value">{{ user.likesReceived }}</div>
+                </div>
               </div>
-              <div class="total-summary-item">
-                <div class="total-summary-item-label">已读帖子</div>
-                <div class="total-summary-item-value">{{ user.readPosts }}</div>
+            </div>
+            <div class="summary-divider">
+              <div class="hot-reply">
+                <div class="summary-title">热门回复</div>
+                <div class="summary-content" v-if="hotReplies.length > 0">
+                  <BaseTimeline :items="hotReplies">
+                    <template #item="{ item }">
+                      在
+                      <NuxtLink :to="`/posts/${item.comment.post.id}`" class="timeline-link">
+                        {{ item.comment.post.title }}
+                      </NuxtLink>
+                      <template v-if="item.comment.parentComment">
+                        下对
+                        <NuxtLink
+                          :to="`/posts/${item.comment.post.id}#comment-${item.comment.parentComment.id}`"
+                          class="timeline-link"
+                        >
+                          {{ stripMarkdownLength(item.comment.parentComment.content, 200) }}
+                        </NuxtLink>
+                        回复了
+                      </template>
+                      <template v-else> 下评论了 </template>
+                      <NuxtLink
+                        :to="`/posts/${item.comment.post.id}#comment-${item.comment.id}`"
+                        class="timeline-link"
+                      >
+                        {{ stripMarkdownLength(item.comment.content, 200) }}
+                      </NuxtLink>
+                      <div class="timeline-date">
+                        {{ formatDate(item.comment.createdAt) }}
+                      </div>
+                    </template>
+                  </BaseTimeline>
+                </div>
+                <div v-else>
+                  <div class="summary-empty">暂无热门回复</div>
+                </div>
               </div>
-              <div class="total-summary-item">
-                <div class="total-summary-item-label">已送出的💗</div>
-                <div class="total-summary-item-value">{{ user.likesSent }}</div>
+              <div class="hot-topic">
+                <div class="summary-title">热门话题</div>
+                <div class="summary-content" v-if="hotPosts.length > 0">
+                  <BaseTimeline :items="hotPosts">
+                    <template #item="{ item }">
+                      <NuxtLink :to="`/posts/${item.post.id}`" class="timeline-link">
+                        {{ item.post.title }}
+                      </NuxtLink>
+                      <div class="timeline-snippet">
+                        {{ stripMarkdown(item.post.snippet) }}
+                      </div>
+                      <div class="timeline-date">
+                        {{ formatDate(item.post.createdAt) }}
+                      </div>
+                    </template>
+                  </BaseTimeline>
+                </div>
+                <div v-else>
+                  <div class="summary-empty">暂无热门话题</div>
+                </div>
               </div>
-              <div class="total-summary-item">
-                <div class="total-summary-item-label">已收到的💗</div>
-                <div class="total-summary-item-value">{{ user.likesReceived }}</div>
+              <div class="hot-tag">
+                <div class="summary-title">TA创建的tag</div>
+                <div class="summary-content" v-if="hotTags.length > 0">
+                  <BaseTimeline :items="hotTags">
+                    <template #item="{ item }">
+                      <span class="timeline-link" @click="gotoTag(item.tag)">
+                        {{ item.tag.name }}<span v-if="item.tag.count"> x{{ item.tag.count }}</span>
+                      </span>
+                      <div class="timeline-snippet" v-if="item.tag.description">
+                        {{ item.tag.description }}
+                      </div>
+                      <div class="timeline-date">
+                        {{ formatDate(item.tag.createdAt) }}
+                      </div>
+                    </template>
+                  </BaseTimeline>
+                </div>
+                <div v-else>
+                  <div class="summary-empty">暂无标签</div>
+                </div>
               </div>
             </div>
           </div>
-          <div class="summary-divider">
-            <div class="hot-reply">
-              <div class="summary-title">热门回复</div>
-              <div class="summary-content" v-if="hotReplies.length > 0">
-                <BaseTimeline :items="hotReplies">
-                  <template #item="{ item }">
+
+          <div v-else-if="selectedTab === 'timeline'" class="profile-timeline">
+            <div class="timeline-tabs">
+              <div
+                :class="['timeline-tab-item', { selected: timelineFilter === 'all' }]"
+                @click="timelineFilter = 'all'"
+              >
+                全部
+              </div>
+              <div
+                :class="['timeline-tab-item', { selected: timelineFilter === 'articles' }]"
+                @click="timelineFilter = 'articles'"
+              >
+                文章
+              </div>
+              <div
+                :class="['timeline-tab-item', { selected: timelineFilter === 'comments' }]"
+                @click="timelineFilter = 'comments'"
+              >
+                评论和回复
+              </div>
+            </div>
+            <BasePlaceholder
+              v-if="filteredTimelineItems.length === 0"
+              text="暂无时间线"
+              icon="fas fa-inbox"
+            />
+            <div class="timeline-list">
+              <BaseTimeline :items="filteredTimelineItems">
+                <template #item="{ item }">
+                  <template v-if="item.type === 'post'">
+                    发布了文章
+                    <NuxtLink :to="`/posts/${item.post.id}`" class="timeline-link">
+                      {{ item.post.title }}
+                    </NuxtLink>
+                    <div class="timeline-date">{{ formatDate(item.createdAt) }}</div>
+                  </template>
+                  <template v-else-if="item.type === 'comment'">
                     在
                     <NuxtLink :to="`/posts/${item.comment.post.id}`" class="timeline-link">
                       {{ item.comment.post.title }}
                     </NuxtLink>
-                    <template v-if="item.comment.parentComment">
-                      下对
-                      <NuxtLink
-                        :to="`/posts/${item.comment.post.id}#comment-${item.comment.parentComment.id}`"
-                        class="timeline-link"
-                      >
-                        {{ stripMarkdownLength(item.comment.parentComment.content, 200) }}
-                      </NuxtLink>
-                      回复了
-                    </template>
-                    <template v-else> 下评论了 </template>
+                    下评论了
                     <NuxtLink
                       :to="`/posts/${item.comment.post.id}#comment-${item.comment.id}`"
                       class="timeline-link"
                     >
                       {{ stripMarkdownLength(item.comment.content, 200) }}
                     </NuxtLink>
-                    <div class="timeline-date">
-                      {{ formatDate(item.comment.createdAt) }}
-                    </div>
+                    <div class="timeline-date">{{ formatDate(item.createdAt) }}</div>
                   </template>
-                </BaseTimeline>
-              </div>
-              <div v-else>
-                <div class="summary-empty">暂无热门回复</div>
-              </div>
-            </div>
-            <div class="hot-topic">
-              <div class="summary-title">热门话题</div>
-              <div class="summary-content" v-if="hotPosts.length > 0">
-                <BaseTimeline :items="hotPosts">
-                  <template #item="{ item }">
-                    <NuxtLink :to="`/posts/${item.post.id}`" class="timeline-link">
-                      {{ item.post.title }}
+                  <template v-else-if="item.type === 'reply'">
+                    在
+                    <NuxtLink :to="`/posts/${item.comment.post.id}`" class="timeline-link">
+                      {{ item.comment.post.title }}
                     </NuxtLink>
-                    <div class="timeline-snippet">
-                      {{ stripMarkdown(item.post.snippet) }}
-                    </div>
-                    <div class="timeline-date">
-                      {{ formatDate(item.post.createdAt) }}
-                    </div>
+                    下对
+                    <NuxtLink
+                      :to="`/posts/${item.comment.post.id}#comment-${item.comment.parentComment.id}`"
+                      class="timeline-link"
+                    >
+                      {{ stripMarkdownLength(item.comment.parentComment.content, 200) }}
+                    </NuxtLink>
+                    回复了
+                    <NuxtLink
+                      :to="`/posts/${item.comment.post.id}#comment-${item.comment.id}`"
+                      class="timeline-link"
+                    >
+                      {{ stripMarkdownLength(item.comment.content, 200) }}
+                    </NuxtLink>
+                    <div class="timeline-date">{{ formatDate(item.createdAt) }}</div>
                   </template>
-                </BaseTimeline>
-              </div>
-              <div v-else>
-                <div class="summary-empty">暂无热门话题</div>
-              </div>
-            </div>
-            <div class="hot-tag">
-              <div class="summary-title">TA创建的tag</div>
-              <div class="summary-content" v-if="hotTags.length > 0">
-                <BaseTimeline :items="hotTags">
-                  <template #item="{ item }">
+                  <template v-else-if="item.type === 'tag'">
+                    创建了标签
                     <span class="timeline-link" @click="gotoTag(item.tag)">
                       {{ item.tag.name }}<span v-if="item.tag.count"> x{{ item.tag.count }}</span>
                     </span>
                     <div class="timeline-snippet" v-if="item.tag.description">
                       {{ item.tag.description }}
                     </div>
-                    <div class="timeline-date">
-                      {{ formatDate(item.tag.createdAt) }}
-                    </div>
+                    <div class="timeline-date">{{ formatDate(item.createdAt) }}</div>
                   </template>
-                </BaseTimeline>
-              </div>
-              <div v-else>
-                <div class="summary-empty">暂无标签</div>
-              </div>
+                </template>
+              </BaseTimeline>
             </div>
           </div>
-        </div>
 
-        <div v-else-if="selectedTab === 'timeline'" class="profile-timeline">
-          <div class="timeline-tabs">
-            <div
-              :class="['timeline-tab-item', { selected: timelineFilter === 'all' }]"
-              @click="timelineFilter = 'all'"
-            >
-              全部
+          <div v-else-if="selectedTab === 'following'" class="follow-container">
+            <div class="follow-tabs">
+              <div
+                :class="['follow-tab-item', { selected: followTab === 'followers' }]"
+                @click="followTab = 'followers'"
+              >
+                关注者
+              </div>
+              <div
+                :class="['follow-tab-item', { selected: followTab === 'following' }]"
+                @click="followTab = 'following'"
+              >
+                正在关注
+              </div>
             </div>
-            <div
-              :class="['timeline-tab-item', { selected: timelineFilter === 'articles' }]"
-              @click="timelineFilter = 'articles'"
-            >
-              文章
-            </div>
-            <div
-              :class="['timeline-tab-item', { selected: timelineFilter === 'comments' }]"
-              @click="timelineFilter = 'comments'"
-            >
-              评论和回复
+            <div class="follow-list">
+              <UserList v-if="followTab === 'followers'" :users="followers" />
+              <UserList v-else :users="followings" />
             </div>
           </div>
-          <BasePlaceholder
-            v-if="filteredTimelineItems.length === 0"
-            text="暂无时间线"
-            icon="fas fa-inbox"
-          />
-          <div class="timeline-list">
-            <BaseTimeline :items="filteredTimelineItems">
-              <template #item="{ item }">
-                <template v-if="item.type === 'post'">
-                  发布了文章
+
+          <div v-else-if="selectedTab === 'favorites'" class="favorites-container">
+            <div v-if="favoritePosts.length > 0">
+              <BaseTimeline :items="favoritePosts">
+                <template #item="{ item }">
                   <NuxtLink :to="`/posts/${item.post.id}`" class="timeline-link">
                     {{ item.post.title }}
                   </NuxtLink>
-                  <div class="timeline-date">{{ formatDate(item.createdAt) }}</div>
-                </template>
-                <template v-else-if="item.type === 'comment'">
-                  在
-                  <NuxtLink :to="`/posts/${item.comment.post.id}`" class="timeline-link">
-                    {{ item.comment.post.title }}
-                  </NuxtLink>
-                  下评论了
-                  <NuxtLink
-                    :to="`/posts/${item.comment.post.id}#comment-${item.comment.id}`"
-                    class="timeline-link"
-                  >
-                    {{ stripMarkdownLength(item.comment.content, 200) }}
-                  </NuxtLink>
-                  <div class="timeline-date">{{ formatDate(item.createdAt) }}</div>
-                </template>
-                <template v-else-if="item.type === 'reply'">
-                  在
-                  <NuxtLink :to="`/posts/${item.comment.post.id}`" class="timeline-link">
-                    {{ item.comment.post.title }}
-                  </NuxtLink>
-                  下对
-                  <NuxtLink
-                    :to="`/posts/${item.comment.post.id}#comment-${item.comment.parentComment.id}`"
-                    class="timeline-link"
-                  >
-                    {{ stripMarkdownLength(item.comment.parentComment.content, 200) }}
-                  </NuxtLink>
-                  回复了
-                  <NuxtLink
-                    :to="`/posts/${item.comment.post.id}#comment-${item.comment.id}`"
-                    class="timeline-link"
-                  >
-                    {{ stripMarkdownLength(item.comment.content, 200) }}
-                  </NuxtLink>
-                  <div class="timeline-date">{{ formatDate(item.createdAt) }}</div>
-                </template>
-                <template v-else-if="item.type === 'tag'">
-                  创建了标签
-                  <span class="timeline-link" @click="gotoTag(item.tag)">
-                    {{ item.tag.name }}<span v-if="item.tag.count"> x{{ item.tag.count }}</span>
-                  </span>
-                  <div class="timeline-snippet" v-if="item.tag.description">
-                    {{ item.tag.description }}
+                  <div class="timeline-snippet">
+                    {{ stripMarkdown(item.post.snippet) }}
                   </div>
-                  <div class="timeline-date">{{ formatDate(item.createdAt) }}</div>
+                  <div class="timeline-date">{{ formatDate(item.post.createdAt) }}</div>
                 </template>
-              </template>
-            </BaseTimeline>
-          </div>
-        </div>
-
-        <div v-else-if="selectedTab === 'following'" class="follow-container">
-          <div class="follow-tabs">
-            <div
-              :class="['follow-tab-item', { selected: followTab === 'followers' }]"
-              @click="followTab = 'followers'"
-            >
-              关注者
+              </BaseTimeline>
             </div>
-            <div
-              :class="['follow-tab-item', { selected: followTab === 'following' }]"
-              @click="followTab = 'following'"
-            >
-              正在关注
+            <div v-else>
+              <BasePlaceholder text="暂无收藏文章" icon="fas fa-inbox" />
             </div>
           </div>
-          <div class="follow-list">
-            <UserList v-if="followTab === 'followers'" :users="followers" />
-            <UserList v-else :users="followings" />
-          </div>
-        </div>
 
-        <div v-else-if="selectedTab === 'favorites'" class="favorites-container">
-          <div v-if="favoritePosts.length > 0">
-            <BaseTimeline :items="favoritePosts">
-              <template #item="{ item }">
-                <NuxtLink :to="`/posts/${item.post.id}`" class="timeline-link">
-                  {{ item.post.title }}
-                </NuxtLink>
-                <div class="timeline-snippet">
-                  {{ stripMarkdown(item.post.snippet) }}
-                </div>
-                <div class="timeline-date">{{ formatDate(item.post.createdAt) }}</div>
-              </template>
-            </BaseTimeline>
+          <div v-else-if="selectedTab === 'achievements'" class="achievements-container">
+            <AchievementList :medals="medals" :can-select="isMine" />
           </div>
-          <div v-else>
-            <BasePlaceholder text="暂无收藏文章" icon="fas fa-inbox" />
-          </div>
-        </div>
-
-        <div v-else-if="selectedTab === 'achievements'" class="achievements-container">
-          <AchievementList :medals="medals" :can-select="isMine" />
-        </div>
-      </template>
+        </template>
+      </BaseTabs>
     </div>
   </div>
 </template>
@@ -358,6 +322,7 @@ import { useRoute } from 'vue-router'
 import AchievementList from '~/components/AchievementList.vue'
 import BasePlaceholder from '~/components/BasePlaceholder.vue'
 import BaseTimeline from '~/components/BaseTimeline.vue'
+import BaseTabs from '~/components/BaseTabs.vue'
 import LevelProgress from '~/components/LevelProgress.vue'
 import UserList from '~/components/UserList.vue'
 import { toast } from '~/main'
@@ -400,6 +365,13 @@ const selectedTab = ref(
     ? route.query.tab
     : 'summary',
 )
+const tabs = [
+  { key: 'summary', label: '总结', icon: 'fas fa-chart-line' },
+  { key: 'timeline', label: '时间线', icon: 'fas fa-clock' },
+  { key: 'following', label: '关注', icon: 'fas fa-user-plus' },
+  { key: 'favorites', label: '收藏', icon: 'fas fa-bookmark' },
+  { key: 'achievements', label: '勋章', icon: 'fas fa-medal' },
+]
 const followTab = ref('followers')
 
 const levelInfo = computed(() => {
@@ -796,7 +768,7 @@ watch(selectedTab, async (val) => {
   font-size: 14px;
 }
 
-.profile-tabs {
+:deep(.base-tabs-header) {
   position: sticky;
   top: calc(var(--header-height) + 1px);
   z-index: 200;
@@ -810,7 +782,7 @@ watch(selectedTab, async (val) => {
   backdrop-filter: var(--blur-10);
 }
 
-.profile-tabs-item {
+:deep(.base-tabs-item) {
   display: flex;
   flex: 0 0 auto;
   flex-direction: row;
@@ -823,7 +795,7 @@ watch(selectedTab, async (val) => {
   white-space: nowrap;
 }
 
-.profile-tabs-item.selected {
+:deep(.base-tabs-item.selected) {
   color: var(--primary-color);
   border-bottom: 2px solid var(--primary-color);
 }
@@ -982,7 +954,7 @@ watch(selectedTab, async (val) => {
     height: 100px;
   }
 
-  .profile-tabs-item {
+  :deep(.base-tabs-item) {
     width: 100px;
   }