feat: add reusable multi-tabs component

frontend_nuxt/components/BaseTabs.vue

@@ -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>

frontend_nuxt/components/MultiTabs.vue

@@ -0,0 +1,82 @@
+<template>
+  <div class="multi-tabs">
+    <div class="multi-tabs-header" :class="headerClass">
+      <div
+        v-for="tab in tabs"
+        :key="tab.name"
+        :class="[itemClass, { selected: current === tab.name }]"
+        @click="select(tab.name)"
+      >
+        <div :class="labelClass">
+          <i v-if="tab.icon" :class="tab.icon"></i>
+          {{ tab.label }}
+        </div>
+      </div>
+      <slot name="header-extra" />
+    </div>
+    <div class="multi-tabs-content" @touchstart="onTouchStart" @touchend="onTouchEnd">
+      <slot :selected="current" />
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { computed, ref } from 'vue'
+
+const props = defineProps({
+  tabs: { type: Array, required: true },
+  modelValue: { type: String, required: true },
+  headerClass: { type: String, default: '' },
+  itemClass: { type: String, default: '' },
+  labelClass: { type: String, default: '' },
+})
+
+const emit = defineEmits(['update:modelValue'])
+
+const current = computed({
+  get: () => props.modelValue,
+  set: (val) => emit('update:modelValue', val),
+})
+
+const select = (name) => {
+  current.value = name
+}
+
+const startX = ref(0)
+const startY = ref(0)
+
+const onTouchStart = (e) => {
+  const t = e.touches[0]
+  startX.value = t.clientX
+  startY.value = t.clientY
+}
+
+const onTouchEnd = (e) => {
+  const t = e.changedTouches[0]
+  const dx = t.clientX - startX.value
+  const dy = t.clientY - startY.value
+  if (Math.abs(dx) > Math.abs(dy) && Math.abs(dx) > 50) {
+    const idx = props.tabs.findIndex((t) => t.name === current.value)
+    if (dx < 0 && idx < props.tabs.length - 1) {
+      current.value = props.tabs[idx + 1].name
+    } else if (dx > 0 && idx > 0) {
+      current.value = props.tabs[idx - 1].name
+    }
+  }
+}
+</script>
+
+<style scoped>
+.multi-tabs-header {
+  display: flex;
+  flex-direction: row;
+  overflow-x: auto;
+  scrollbar-width: none;
+}
+.multi-tabs-header::-webkit-scrollbar {
+  display: none;
+}
+.multi-tabs-content {
+  width: 100%;
+}
+</style>

frontend_nuxt/pages/about/index.vue

@@ -1,36 +1,33 @@
 <template>
   <div class="about-page">
-    <BaseTabs
-      v-model="selectedTab"
+    <MultiTabs
       :tabs="tabs"
-      class="about-tabs"
+      v-model="selectedTab"
+      header-class="about-tabs"
       item-class="about-tabs-item"
-      active-class="selected"
+      label-class="about-tabs-item-label"
     >
-      <template #tab="{ tab }">
-        <div class="about-tabs-item-label">{{ tab.label }}</div>
+      <template #default>
+        <div class="about-loading" v-if="isFetching">
+          <l-hatch-spinner size="100" stroke="10" speed="1" color="var(--primary-color)" />
+        </div>
+        <div
+          v-else
+          class="about-content"
+          v-html="renderMarkdown(content)"
+          @click="handleContentClick"
+        ></div>
       </template>
-    </BaseTabs>
-    <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>
+    </MultiTabs>
   </div>
 </template>
 
 <script>
-import { ref, watch } from 'vue'
-import BaseTabs from '~/components/BaseTabs.vue'
+import { onMounted, ref, watch } from 'vue'
 import { handleMarkdownClick, renderMarkdown } from '~/utils/markdown'
 
 export default {
   name: 'AboutPageView',
-  components: { BaseTabs },
   setup() {
     const isFetching = ref(false)
     const tabs = [
@@ -74,14 +71,15 @@ export default {
       }
     }
 
-    watch(
-      selectedTab,
-      (name) => {
-        const tab = tabs.find((t) => t.name === name)
-        if (tab) loadContent(tab.file)
-      },
-      { immediate: true },
-    )
+    watch(selectedTab, (name) => {
+      const tab = tabs.find((t) => t.name === name)
+      if (tab) loadContent(tab.file)
+    })
+
+    onMounted(() => {
+      const first = tabs[0]
+      if (first) loadContent(first.file)
+    })
 
     const handleContentClick = (e) => {
       handleMarkdownClick(e)

frontend_nuxt/pages/message-box/index.vue

@@ -7,115 +7,118 @@
     <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 v-if="activeTab === 'messages'">
-      <div v-if="loading" class="loading-message">
-        <l-hatch size="28" stroke="4" speed="3.5" color="var(--primary-color)"></l-hatch>
-      </div>
-
-      <div v-else-if="error" class="error-container">
-        <div class="error-text">{{ error }}</div>
-      </div>
-
-      <div v-if="!loading && !isFloatMode" class="search-container">
-        <SearchPersonDropdown />
-      </div>
-
-      <div v-if="!loading && conversations.length === 0" class="empty-container">
-        <BasePlaceholder v-if="conversations.length === 0" text="暂无会话" icon="fas fa-inbox" />
-      </div>
-
-      <div
-        v-if="!loading"
-        v-for="convo in conversations"
-        :key="convo.id"
-        class="conversation-item"
-        @click="goToConversation(convo.id)"
-      >
-        <div class="conversation-avatar">
-          <BaseImage
-            :src="getOtherParticipant(convo)?.avatar || '/default-avatar.svg'"
-            :alt="getOtherParticipant(convo)?.username || '用户'"
-            class="avatar-img"
-            @error="handleAvatarError"
-          />
-        </div>
-
-        <div class="conversation-content">
-          <div class="conversation-header">
-            <div class="participant-name">
-              {{ getOtherParticipant(convo)?.username || '未知用户' }}
-            </div>
-            <div class="message-time">
-              {{ formatTime(convo.lastMessage?.createdAt || convo.createdAt) }}
-            </div>
+    <MultiTabs :tabs="tabs" v-model="activeTab" header-class="tabs" item-class="tab">
+      <template #default="{ selected }">
+        <div v-if="selected === 'messages'">
+          <div v-if="loading" class="loading-message">
+            <l-hatch size="28" stroke="4" speed="3.5" color="var(--primary-color)"></l-hatch>
           </div>
 
-          <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 v-else-if="error" class="error-container">
+            <div class="error-text">{{ error }}</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 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 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
+            v-if="!loading"
+            v-for="convo in conversations"
+            :key="convo.id"
+            class="conversation-item"
+            @click="goToConversation(convo.id)"
+          >
+            <div class="conversation-avatar">
+              <BaseImage
+                :src="getOtherParticipant(convo)?.avatar || '/default-avatar.svg'"
+                :alt="getOtherParticipant(convo)?.username || '用户'"
+                class="avatar-img"
+                @error="handleAvatarError"
+              />
             </div>
-            <div class="last-message-row">
-              <div class="last-message">
-                {{
-                  ch.lastMessage ? stripMarkdownLength(ch.lastMessage.content, 100) : ch.description
-                }}
+
+            <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 class="member-count">成员 {{ ch.memberCount }}</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>
+      </template>
+    </MultiTabs>
   </div>
 </template>
 
@@ -131,7 +134,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,6 +148,7 @@ const { fetchUnreadCount: refreshGlobalUnreadCount } = useUnreadCount()
 const { fetchChannelUnread: refreshChannelUnread, setFromList: setChannelUnreadFromList } =
   useChannelsUnreadCount()
 let subscription = null
+
 const tabs = [
   { name: 'messages', label: '站内信' },
   { name: 'channels', label: '频道' },
@@ -156,14 +159,6 @@ 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 +222,14 @@ async function fetchChannels() {
   }
 }
 
+watch(activeTab, (val) => {
+  if (val === 'messages') {
+    fetchConversations()
+  } else {
+    fetchChannels()
+  }
+})
+
 async function goToChannel(id) {
   const token = getToken()
   if (!token) {

frontend_nuxt/pages/points.vue

@@ -1,170 +1,166 @@
 <template>
   <div class="point-mall-page">
-    <BaseTabs
+    <MultiTabs
+      :tabs="tabs"
       v-model="selectedTab"
-      :tabs="pointTabs"
-      class="point-tabs"
+      header-class="point-tabs"
       item-class="point-tab-item"
-      active-class="selected"
-    />
-
-    <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>
-
-        <div class="loading-points-container" v-if="isLoading">
-          <l-hatch size="28" stroke="4" speed="3.5" color="var(--primary-color)"></l-hatch>
-        </div>
-
-        <div class="point-info">
-          <p v-if="authState.loggedIn && point !== null">
-            <span><i class="fas fa-coins coin-icon"></i></span>我的积分：<span
-              class="point-value"
-              >{{ point }}</span
-            >
-          </p>
-        </div>
-
-        <section class="goods">
-          <div class="goods-item" v-for="(good, idx) in goods" :key="idx">
-            <BaseImage class="goods-item-image" :src="good.image" alt="good.name" />
-            <div class="goods-item-name">{{ good.name }}</div>
-            <div class="goods-item-cost">
-              <i class="fas fa-coins"></i>
-              {{ good.cost }} 积分
+    >
+      <template #default="{ selected }">
+        <template v-if="selected === 'mall'">
+          <div class="point-mall-page-content">
+            <section class="rules">
+              <div class="section-title">🎉 积分规则</div>
+              <div class="section-content">
+                <div class="section-item" v-for="(rule, idx) in pointRules" :key="idx">
+                  {{ rule }}
+                </div>
+              </div>
+            </section>
+            <div class="loading-points-container" v-if="isLoading">
+              <l-hatch size="28" stroke="4" speed="3.5" color="var(--primary-color)"></l-hatch>
             </div>
-            <div
-              class="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>
-      <BasePlaceholder v-else-if="histories.length === 0" text="暂无积分记录" icon="fas fa-inbox" />
-      <div class="timeline-container" v-else>
-        <BaseTimeline :items="histories">
-          <template #item="{ item }">
-            <div class="history-content">
-              <template v-if="item.type === 'POST'">
-                发送帖子
-                <NuxtLink :to="`/posts/${item.postId}`" class="timeline-link">{{
-                  item.postTitle
-                }}</NuxtLink>
-                ，获得{{ item.amount }}积分
-              </template>
-              <template v-else-if="item.type === 'COMMENT'">
-                在文章
-                <NuxtLink :to="`/posts/${item.postId}`" class="timeline-link">{{
-                  item.postTitle
-                }}</NuxtLink>
-                中
-                <template v-if="!item.fromUserId">
-                  发送评论
-                  <NuxtLink
-                    :to="`/posts/${item.postId}#comment-${item.commentId}`"
-                    class="timeline-link"
-                    >{{ stripMarkdownLength(item.commentContent, 100) }}</NuxtLink
-                  >
-                  ，获得{{ item.amount }}积分
-                </template>
-                <template v-else>
-                  被评论
-                  <NuxtLink
-                    :to="`/posts/${item.postId}#comment-${item.commentId}`"
-                    class="timeline-link"
-                    >{{ stripMarkdownLength(item.commentContent, 100) }}</NuxtLink
-                  >
-                  ，获得{{ item.amount }}积分
-                </template>
-              </template>
-              <template v-else-if="item.type === 'POST_LIKED' && item.fromUserId">
-                帖子
-                <NuxtLink :to="`/posts/${item.postId}`" class="timeline-link">{{
-                  item.postTitle
-                }}</NuxtLink>
-                被
-                <NuxtLink :to="`/users/${item.fromUserId}`" class="timeline-link">{{
-                  item.fromUserName
-                }}</NuxtLink>
-                按赞，获得{{ item.amount }}积分
-              </template>
-              <template v-else-if="item.type === 'COMMENT_LIKED' && item.fromUserId">
-                评论
-                <NuxtLink
-                  :to="`/posts/${item.postId}#comment-${item.commentId}`"
-                  class="timeline-link"
-                  >{{ stripMarkdownLength(item.commentContent, 100) }}</NuxtLink
+            <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
                 >
-                被
-                <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 }}
+              </p>
             </div>
-            <div class="history-time">{{ TimeManager.format(item.createdAt) }}</div>
-          </template>
-        </BaseTimeline>
-      </div>
-    </template>
+            <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>
+          <BasePlaceholder
+            v-else-if="histories.length === 0"
+            text="暂无积分记录"
+            icon="fas fa-inbox"
+          />
+          <div class="timeline-container" v-else>
+            <BaseTimeline :items="histories">
+              <template #item="{ item }">
+                <div class="history-content">
+                  <template v-if="item.type === 'POST'">
+                    发送帖子
+                    <NuxtLink :to="`/posts/${item.postId}`" class="timeline-link">{{
+                      item.postTitle
+                    }}</NuxtLink>
+                    ，获得{{ item.amount }}积分
+                  </template>
+                  <template v-else-if="item.type === 'COMMENT'">
+                    在文章
+                    <NuxtLink :to="`/posts/${item.postId}`" class="timeline-link">{{
+                      item.postTitle
+                    }}</NuxtLink>
+                    中
+                    <template v-if="!item.fromUserId">
+                      发送评论
+                      <NuxtLink
+                        :to="`/posts/${item.postId}#comment-${item.commentId}`"
+                        class="timeline-link"
+                        >{{ stripMarkdownLength(item.commentContent, 100) }}</NuxtLink
+                      >
+                      ，获得{{ item.amount }}积分
+                    </template>
+                    <template v-else>
+                      被评论
+                      <NuxtLink
+                        :to="`/posts/${item.postId}#comment-${item.commentId}`"
+                        class="timeline-link"
+                        >{{ stripMarkdownLength(item.commentContent, 100) }}</NuxtLink
+                      >
+                      ，获得{{ item.amount }}积分
+                    </template>
+                  </template>
+                  <template v-else-if="item.type === 'POST_LIKED' && item.fromUserId">
+                    帖子
+                    <NuxtLink :to="`/posts/${item.postId}`" class="timeline-link">{{
+                      item.postTitle
+                    }}</NuxtLink>
+                    被
+                    <NuxtLink :to="`/users/${item.fromUserId}`" class="timeline-link">{{
+                      item.fromUserName
+                    }}</NuxtLink>
+                    按赞，获得{{ item.amount }}积分
+                  </template>
+                  <template v-else-if="item.type === 'COMMENT_LIKED' && item.fromUserId">
+                    评论
+                    <NuxtLink
+                      :to="`/posts/${item.postId}#comment-${item.commentId}`"
+                      class="timeline-link"
+                      >{{ stripMarkdownLength(item.commentContent, 100) }}</NuxtLink
+                    >
+                    被
+                    <NuxtLink :to="`/users/${item.fromUserId}`" class="timeline-link">{{
+                      item.fromUserName
+                    }}</NuxtLink>
+                    按赞，获得{{ item.amount }}积分
+                  </template>
+                  <template v-else-if="item.type === 'INVITE' && item.fromUserId">
+                    邀请了好友
+                    <NuxtLink :to="`/users/${item.fromUserId}`" class="timeline-link">{{
+                      item.fromUserName
+                    }}</NuxtLink>
+                    加入社区 🎉，获得 {{ item.amount }} 积分
+                  </template>
+                  <template v-else-if="item.type === 'FEATURE'">
+                    文章
+                    <NuxtLink :to="`/posts/${item.postId}`" class="timeline-link">{{
+                      item.postTitle
+                    }}</NuxtLink>
+                    被收录为精选，获得 {{ item.amount }} 积分
+                  </template>
+                  <template v-else-if="item.type === 'REDEEM'">
+                    兑换商品，消耗 {{ -item.amount }} 积分
+                  </template>
+                  <template v-else-if="item.type === 'LOTTERY_JOIN'">
+                    参与抽奖帖
+                    <NuxtLink :to="`/posts/${item.postId}`" class="timeline-link">{{
+                      item.postTitle
+                    }}</NuxtLink>
+                    ，消耗 {{ -item.amount }} 积分
+                  </template>
+                  <template v-else-if="item.type === 'LOTTERY_REWARD'">
+                    你的抽奖帖
+                    <NuxtLink :to="`/posts/${item.postId}`" class="timeline-link">{{
+                      item.postTitle
+                    }}</NuxtLink>
+                    被抽中，消耗 {{ -item.amount }} 积分
+                  </template>
+                </div>
+              </template>
+            </BaseTimeline>
+          </div>
+        </template>
+      </template>
+    </MultiTabs>
   </div>
 </template>
 
@@ -177,14 +173,15 @@ 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 = [
+
+const tabs = [
   { name: 'mall', label: '积分兑换' },
   { name: 'history', label: '积分历史' },
 ]
+
 const selectedTab = ref('mall')
 const point = ref(null)
 const isLoading = ref(false)

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') {