diff --git a/frontend_nuxt/components/BaseTabs.vue b/frontend_nuxt/components/BaseTabs.vue
deleted file mode 100644
index f90befed1..000000000
--- a/frontend_nuxt/components/BaseTabs.vue
+++ /dev/null
@@ -1,50 +0,0 @@
-<template>
-  <div class="base-tabs" @touchstart="onTouchStart" @touchend="onTouchEnd">
-    <div
-      v-for="tab in tabs"
-      :key="tab.name"
-      :class="[itemClass, { [activeClass]: tab.name === modelValue }]"
-      @click="emit('update:modelValue', tab.name)"
-    >
-      <slot name="tab" :tab="tab">{{ tab.label }}</slot>
-    </div>
-  </div>
-</template>
-
-<script setup>
-import { ref } from 'vue'
-
-const props = defineProps({
-  tabs: { type: Array, required: true },
-  modelValue: { type: String, required: true },
-  itemClass: { type: String, default: '' },
-  activeClass: { type: String, default: 'active' },
-})
-
-const emit = defineEmits(['update:modelValue'])
-
-const startX = ref(0)
-
-function onTouchStart(e) {
-  startX.value = e.changedTouches[0].clientX
-}
-
-function onTouchEnd(e) {
-  const diff = e.changedTouches[0].clientX - startX.value
-  const threshold = 50
-  if (Math.abs(diff) > threshold) {
-    const currentIndex = props.tabs.findIndex((t) => t.name === props.modelValue)
-    if (currentIndex === -1) return
-    const newIndex = currentIndex + (diff < 0 ? 1 : -1)
-    if (newIndex >= 0 && newIndex < props.tabs.length) {
-      emit('update:modelValue', props.tabs[newIndex].name)
-    }
-  }
-}
-</script>
-
-<style scoped>
-.base-tabs {
-  display: flex;
-}
-</style>
diff --git a/frontend_nuxt/pages/about/index.vue b/frontend_nuxt/pages/about/index.vue
index 23e7760ed..8d5aaa60f 100644
--- a/frontend_nuxt/pages/about/index.vue
+++ b/frontend_nuxt/pages/about/index.vue
@@ -1,16 +1,15 @@
 <template>
   <div class="about-page">
-    <BaseTabs
-      v-model="selectedTab"
-      :tabs="tabs"
-      class="about-tabs"
-      item-class="about-tabs-item"
-      active-class="selected"
-    >
-      <template #tab="{ tab }">
+    <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>
-      </template>
-    </BaseTabs>
+      </div>
+    </div>
     <div class="about-loading" v-if="isFetching">
       <l-hatch-spinner size="100" stroke="10" speed="1" color="var(--primary-color)" />
     </div>
@@ -24,13 +23,11 @@
 </template>
 
 <script>
-import { ref, watch } from 'vue'
-import BaseTabs from '~/components/BaseTabs.vue'
+import { onMounted, ref } from 'vue'
 import { handleMarkdownClick, renderMarkdown } from '~/utils/markdown'
 
 export default {
   name: 'AboutPageView',
-  components: { BaseTabs },
   setup() {
     const isFetching = ref(false)
     const tabs = [
@@ -74,20 +71,21 @@ export default {
       }
     }
 
-    watch(
-      selectedTab,
-      (name) => {
-        const tab = tabs.find((t) => t.name === name)
-        if (tab) loadContent(tab.file)
-      },
-      { immediate: true },
-    )
+    const selectTab = (name) => {
+      selectedTab.value = name
+      const tab = tabs.find((t) => t.name === name)
+      if (tab) loadContent(tab.file)
+    }
+
+    onMounted(() => {
+      loadContent(tabs[0].file)
+    })
 
     const handleContentClick = (e) => {
       handleMarkdownClick(e)
     }
 
-    return { tabs, selectedTab, content, renderMarkdown, isFetching, handleContentClick }
+    return { tabs, selectedTab, content, renderMarkdown, selectTab, isFetching, handleContentClick }
   },
 }
 </script>
diff --git a/frontend_nuxt/pages/message-box/index.vue b/frontend_nuxt/pages/message-box/index.vue
index 30c85f3b7..ffb91ffb2 100644
--- a/frontend_nuxt/pages/message-box/index.vue
+++ b/frontend_nuxt/pages/message-box/index.vue
@@ -7,13 +7,14 @@
     <div v-if="!isFloatMode" class="float-control">
       <i class="fas fa-compress" @click="minimize" title="最小化"></i>
     </div>
-    <BaseTabs
-      v-model="activeTab"
-      :tabs="tabs"
-      class="tabs"
-      item-class="tab"
-      active-class="active"
-    />
+    <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">
@@ -131,7 +132,6 @@ 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([])
@@ -146,24 +146,13 @@ const { fetchUnreadCount: refreshGlobalUnreadCount } = useUnreadCount()
 const { fetchChannelUnread: refreshChannelUnread, setFromList: setChannelUnreadFromList } =
   useChannelsUnreadCount()
 let subscription = null
-const tabs = [
-  { name: 'messages', label: '站内信' },
-  { name: 'channels', label: '频道' },
-]
+
 const activeTab = ref('channels')
 const channels = ref([])
 const loadingChannels = ref(false)
 const isFloatMode = computed(() => route.query.float === '1')
 const floatRoute = useState('messageFloatRoute')
 
-watch(activeTab, (tab) => {
-  if (tab === 'messages') {
-    fetchConversations()
-  } else {
-    fetchChannels()
-  }
-})
-
 async function fetchConversations() {
   const token = getToken()
   if (!token) {
@@ -227,6 +216,16 @@ async function fetchChannels() {
   }
 }
 
+function switchToMessage() {
+  activeTab.value = 'messages'
+  fetchConversations()
+}
+
+function switchToChannels() {
+  activeTab.value = 'channels'
+  fetchChannels()
+}
+
 async function goToChannel(id) {
   const token = getToken()
   if (!token) {
diff --git a/frontend_nuxt/pages/message.vue b/frontend_nuxt/pages/message.vue
index 8496e2ccc..d694b1b2d 100644
--- a/frontend_nuxt/pages/message.vue
+++ b/frontend_nuxt/pages/message.vue
@@ -1,13 +1,26 @@
 <template>
   <div class="message-page">
     <div class="message-page-header">
-      <BaseTabs
-        v-model="selectedTab"
-        :tabs="messageTabs"
-        class="message-tabs"
-        item-class="message-tab-item"
-        active-class="selected"
-      />
+      <div class="message-tabs">
+        <div
+          :class="['message-tab-item', { selected: selectedTab === 'all' }]"
+          @click="selectedTab = 'all'"
+        >
+          消息
+        </div>
+        <div
+          :class="['message-tab-item', { selected: selectedTab === 'unread' }]"
+          @click="selectedTab = 'unread'"
+        >
+          未读
+        </div>
+        <div
+          :class="['message-tab-item', { selected: selectedTab === 'control' }]"
+          @click="selectedTab = 'control'"
+        >
+          消息设置
+        </div>
+      </div>
 
       <div class="message-page-header-right">
         <div class="message-page-header-right-item" @click="markAllRead">
@@ -549,16 +562,10 @@ import {
 } from '~/utils/notification'
 import TimeManager from '~/utils/time'
 import BaseSwitch from '~/components/BaseSwitch.vue'
-import BaseTabs from '~/components/BaseTabs.vue'
 
 const config = useRuntimeConfig()
 const API_BASE_URL = config.public.apiBaseUrl
 const route = useRoute()
-const messageTabs = [
-  { name: 'all', label: '消息' },
-  { name: 'unread', label: '未读' },
-  { name: 'control', label: '消息设置' },
-]
 const selectedTab = ref(
   ['all', 'unread', 'control'].includes(route.query.tab) ? route.query.tab : 'unread',
 )
diff --git a/frontend_nuxt/pages/points.vue b/frontend_nuxt/pages/points.vue
index b4a22dbd6..0c3e64616 100644
--- a/frontend_nuxt/pages/points.vue
+++ b/frontend_nuxt/pages/points.vue
@@ -1,12 +1,19 @@
 <template>
   <div class="point-mall-page">
-    <BaseTabs
-      v-model="selectedTab"
-      :tabs="pointTabs"
-      class="point-tabs"
-      item-class="point-tab-item"
-      active-class="selected"
-    />
+    <div class="point-tabs">
+      <div
+        :class="['point-tab-item', { selected: selectedTab === 'mall' }]"
+        @click="selectedTab = 'mall'"
+      >
+        积分兑换
+      </div>
+      <div
+        :class="['point-tab-item', { selected: selectedTab === 'history' }]"
+        @click="selectedTab = 'history'"
+      >
+        积分历史
+      </div>
+    </div>
 
     <template v-if="selectedTab === 'mall'">
       <div class="point-mall-page-content">
@@ -177,14 +184,10 @@ 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 pointTabs = [
-  { name: 'mall', label: '积分兑换' },
-  { name: 'history', label: '积分历史' },
-]
+
 const selectedTab = ref('mall')
 const point = ref(null)
 const isLoading = ref(false)
diff --git a/frontend_nuxt/pages/users/[id].vue b/frontend_nuxt/pages/users/[id].vue
index 6b0d61197..64881ad7d 100644
--- a/frontend_nuxt/pages/users/[id].vue
+++ b/frontend_nuxt/pages/users/[id].vue
@@ -72,18 +72,43 @@
         </div>
       </div>
 
-      <BaseTabs
-        v-model="selectedTab"
-        :tabs="profileTabs"
-        class="profile-tabs"
-        item-class="profile-tabs-item"
-        active-class="selected"
-      >
-        <template #tab="{ tab }">
-          <i :class="tab.icon"></i>
-          <div class="profile-tabs-item-label">{{ tab.label }}</div>
-        </template>
-      </BaseTabs>
+      <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>
+        </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)" />
@@ -194,13 +219,26 @@
         </div>
 
         <div v-else-if="selectedTab === 'timeline'" class="profile-timeline">
-          <BaseTabs
-            v-model="timelineFilter"
-            :tabs="timelineTabs"
-            class="timeline-tabs"
-            item-class="timeline-tab-item"
-            active-class="selected"
-          />
+          <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="暂无时间线"
@@ -267,13 +305,20 @@
         </div>
 
         <div v-else-if="selectedTab === 'following'" class="follow-container">
-          <BaseTabs
-            v-model="followTab"
-            :tabs="followTabs"
-            class="follow-tabs"
-            item-class="follow-tab-item"
-            active-class="selected"
-          />
+          <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="follow-list">
             <UserList v-if="followTab === 'followers'" :users="followers" />
             <UserList v-else :users="followings" />
@@ -320,7 +365,6 @@ import { authState, getToken } from '~/utils/auth'
 import { prevLevelExp } from '~/utils/level'
 import { stripMarkdown, 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
 
@@ -336,22 +380,6 @@ const hotReplies = ref([])
 const hotTags = ref([])
 const favoritePosts = ref([])
 const timelineItems = ref([])
-const profileTabs = [
-  { name: 'summary', label: '总结', icon: 'fas fa-chart-line' },
-  { name: 'timeline', label: '时间线', icon: 'fas fa-clock' },
-  { name: 'following', label: '关注', icon: 'fas fa-user-plus' },
-  { name: 'favorites', label: '收藏', icon: 'fas fa-bookmark' },
-  { name: 'achievements', label: '勋章', icon: 'fas fa-medal' },
-]
-const timelineTabs = [
-  { name: 'all', label: '全部' },
-  { name: 'articles', label: '文章' },
-  { name: 'comments', label: '评论和回复' },
-]
-const followTabs = [
-  { name: 'followers', label: '关注者' },
-  { name: 'following', label: '正在关注' },
-]
 const timelineFilter = ref('all')
 const filteredTimelineItems = computed(() => {
   if (timelineFilter.value === 'articles') {