feat: add reusable tabs component with swipe

frontend_nuxt/components/BaseTabs.vue

@@ -0,0 +1,110 @@
+<template>
+  <div class="base-tabs-wrapper" @touchstart="onTouchStart" @touchend="onTouchEnd">
+    <div class="base-tabs-header">
+      <div class="base-tabs-items">
+        <div
+          v-for="tab in tabs"
+          :key="tab.name"
+          :class="['base-tab-item', { selected: tab.name === current }]"
+          @click="select(tab.name)"
+        >
+          <i v-if="tab.icon" :class="tab.icon"></i>
+          <span>{{ tab.label }}</span>
+        </div>
+      </div>
+      <div class="base-tabs-right">
+        <slot name="right"></slot>
+      </div>
+    </div>
+    <div class="base-tabs-content">
+      <slot :current="current"></slot>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, watch } from 'vue'
+
+const props = defineProps({
+  modelValue: { type: String, default: undefined },
+  tabs: { type: Array, required: true },
+  swipe: { type: Boolean, default: true },
+})
+
+const emit = defineEmits(['update:modelValue'])
+
+const current = ref(props.modelValue ?? (props.tabs[0] && props.tabs[0].name))
+
+watch(
+  () => props.modelValue,
+  (val) => {
+    if (val !== undefined) current.value = val
+  },
+)
+
+function select(name) {
+  emit('update:modelValue', name)
+}
+
+let startX = 0
+
+function onTouchStart(e) {
+  if (!props.swipe) return
+  startX = e.changedTouches[0].clientX
+}
+
+function onTouchEnd(e) {
+  if (!props.swipe) return
+  const endX = e.changedTouches[0].clientX
+  const diff = endX - startX
+  if (Math.abs(diff) > 50) {
+    const index = props.tabs.findIndex((t) => t.name === current.value)
+    if (diff < 0 && index < props.tabs.length - 1) {
+      emit('update:modelValue', props.tabs[index + 1].name)
+    } else if (diff > 0 && index > 0) {
+      emit('update:modelValue', props.tabs[index - 1].name)
+    }
+  }
+}
+</script>
+
+<style scoped>
+.base-tabs-wrapper {
+  display: flex;
+  flex-direction: column;
+}
+
+.base-tabs-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  border-bottom: 1px solid var(--normal-border-color);
+}
+
+.base-tabs-items {
+  display: flex;
+  overflow-x: auto;
+  scrollbar-width: none;
+}
+
+.base-tab-item {
+  padding: 10px 20px;
+  cursor: pointer;
+  white-space: nowrap;
+}
+
+.base-tab-item.selected {
+  color: var(--primary-color);
+  border-bottom: 2px solid var(--primary-color);
+}
+
+.base-tab-item i {
+  margin-right: 6px;
+}
+
+.base-tabs-right {
+  display: flex;
+  align-items: center;
+  flex: 0 0 auto;
+}
+</style>

frontend_nuxt/pages/about/index.vue

@@ -1,15 +1,7 @@
 <template>
   <div class="about-page">
-    <div class="about-tabs">
+    <BaseTabs v-model="selectedTab" :tabs="tabs" class="about-tabs">
-      <div
+      <template #default>
-        v-for="tab in tabs"
-        :key="tab.name"
-        :class="['about-tabs-item', { selected: selectedTab === tab.name }]"
-        @click="selectTab(tab.name)"
-      >
-        <div class="about-tabs-item-label">{{ tab.label }}</div>
-      </div>
-    </div>
         <div class="about-loading" v-if="isFetching">
           <l-hatch-spinner size="100" stroke="10" speed="1" color="var(--primary-color)" />
         </div>
@@ -19,15 +11,19 @@
           v-html="renderMarkdown(content)"
           @click="handleContentClick"
         ></div>
+      </template>
+    </BaseTabs>
   </div>
 </template>
 
 <script>
-import { onMounted, ref } from 'vue'
+import { ref, watch } from 'vue'
 import { handleMarkdownClick, renderMarkdown } from '~/utils/markdown'
+import BaseTabs from '~/components/BaseTabs.vue'
 
 export default {
   name: 'AboutPageView',
+  components: { BaseTabs },
   setup() {
     const isFetching = ref(false)
     const tabs = [
@@ -71,21 +67,20 @@ export default {
       }
     }
 
-    const selectTab = (name) => {
+    watch(
-      selectedTab.value = name
+      selectedTab,
+      (name) => {
         const tab = tabs.find((t) => t.name === name)
         if (tab) loadContent(tab.file)
-    }
+      },
-
+      { immediate: true },
-    onMounted(() => {
+    )
-      loadContent(tabs[0].file)
-    })
 
     const handleContentClick = (e) => {
       handleMarkdownClick(e)
     }
 
-    return { tabs, selectedTab, content, renderMarkdown, selectTab, isFetching, handleContentClick }
+    return { tabs, selectedTab, content, renderMarkdown, isFetching, handleContentClick }
   },
 }
 </script>
@@ -100,25 +95,11 @@ export default {
 .about-tabs {
   top: calc(var(--header-height) + 1px);
   background-color: var(--background-color-blur);
-  display: flex;
-  flex-direction: row;
-  border-bottom: 1px solid var(--normal-border-color);
   margin-bottom: 20px;
   overflow-x: auto;
   scrollbar-width: none;
 }
 
-.about-tabs-item {
-  padding: 10px 20px;
-  cursor: pointer;
-  white-space: nowrap;
-}
-
-.about-tabs-item.selected {
-  color: var(--primary-color);
-  border-bottom: 2px solid var(--primary-color);
-}
-
 .about-content {
   line-height: 1.6;
   padding: 20px;

frontend_nuxt/pages/message-box/index.vue

@@ -7,15 +7,8 @@
     <div v-if="!isFloatMode" class="float-control">
       <i class="fas fa-compress" @click="minimize" title="最小化"></i>
     </div>
-    <div class="tabs">
+    <BaseTabs v-model="activeTab" :tabs="tabs">
-      <div :class="['tab', { active: activeTab === 'messages' }]" @click="switchToMessage">
+      <template #default>
-        站内信
-      </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>
@@ -30,7 +23,11 @@
           </div>
 
           <div v-if="!loading && conversations.length === 0" class="empty-container">
-        <BasePlaceholder v-if="conversations.length === 0" text="暂无会话" icon="fas fa-inbox" />
+            <BasePlaceholder
+              v-if="conversations.length === 0"
+              text="暂无会话"
+              icon="fas fa-inbox"
+            />
           </div>
 
           <div
@@ -62,7 +59,9 @@
               <div class="last-message-row">
                 <div class="last-message">
                   {{
-                convo.lastMessage ? stripMarkdownLength(convo.lastMessage.content, 100) : '暂无消息'
+                    convo.lastMessage
+                      ? stripMarkdownLength(convo.lastMessage.content, 100)
+                      : '暂无消息'
                   }}
                 </div>
                 <div v-if="convo.unreadCount > 0" class="unread-count-badge">
@@ -108,7 +107,9 @@
                 <div class="last-message-row">
                   <div class="last-message">
                     {{
-                  ch.lastMessage ? stripMarkdownLength(ch.lastMessage.content, 100) : ch.description
+                      ch.lastMessage
+                        ? stripMarkdownLength(ch.lastMessage.content, 100)
+                        : ch.description
                     }}
                   </div>
                   <div class="member-count">成员 {{ ch.memberCount }}</div>
@@ -117,6 +118,8 @@
             </div>
           </div>
         </div>
+      </template>
+    </BaseTabs>
   </div>
 </template>
 
@@ -132,6 +135,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([])
@@ -152,6 +156,10 @@ const channels = ref([])
 const loadingChannels = ref(false)
 const isFloatMode = computed(() => route.query.float === '1')
 const floatRoute = useState('messageFloatRoute')
+const tabs = [
+  { name: 'messages', label: '站内信' },
+  { name: 'channels', label: '频道' },
+]
 
 async function fetchConversations() {
   const token = getToken()
@@ -216,16 +224,6 @@ async function fetchChannels() {
   }
 }
 
-function switchToMessage() {
-  activeTab.value = 'messages'
-  fetchConversations()
-}
-
-function switchToChannels() {
-  activeTab.value = 'channels'
-  fetchChannels()
-}
-
 async function goToChannel(id) {
   const token = getToken()
   if (!token) {
@@ -285,6 +283,14 @@ watch(isConnected, (newValue) => {
   }
 })
 
+watch(activeTab, (val) => {
+  if (val === 'messages') {
+    fetchConversations()
+  } else {
+    fetchChannels()
+  }
+})
+
 onUnmounted(() => {
   if (subscription) {
     subscription.unsubscribe()
@@ -323,22 +329,10 @@ function minimize() {
   cursor: pointer;
 }
 
-.tabs {
+.messages-container :deep(.base-tabs-header) {
-  display: flex;
-  border-bottom: 1px solid var(--normal-border-color);
   margin-bottom: 16px;
 }
 
-.tab {
-  padding: 10px 20px;
-  cursor: pointer;
-}
-
-.tab.active {
-  border-bottom: 2px solid var(--primary-color);
-  color: var(--primary-color);
-}
-
 .loading-message {
   display: flex;
   justify-content: center;
@@ -500,7 +494,7 @@ function minimize() {
     display: block;
   }
 
-  .tabs,
+  .base-tabs-wrapper,
   .loading-message,
   .error-container,
   .search-container,

frontend_nuxt/pages/message.vue

@@ -1,35 +1,16 @@
 <template>
   <div class="message-page">
-    <div class="message-page-header">
+    <BaseTabs v-model="selectedTab" :tabs="tabs">
-      <div class="message-tabs">
+      <template #right>
-        <div
-          :class="['message-tab-item', { selected: selectedTab === 'all' }]"
-          @click="selectedTab = 'all'"
-        >
-          消息
-        </div>
-        <div
-          :class="['message-tab-item', { selected: selectedTab === 'unread' }]"
-          @click="selectedTab = 'unread'"
-        >
-          未读
-        </div>
-        <div
-          :class="['message-tab-item', { selected: selectedTab === 'control' }]"
-          @click="selectedTab = 'control'"
-        >
-          消息设置
-        </div>
-      </div>
-
         <div class="message-page-header-right">
           <div class="message-page-header-right-item" @click="markAllRead">
             <i class="fas fa-bolt message-page-header-right-item-button-icon"></i>
             <span class="message-page-header-right-item-button-text"> 已读所有消息 </span>
           </div>
         </div>
-    </div>
+      </template>
 
+      <template #default>
         <div v-if="selectedTab === 'control'">
           <div class="message-control-container">
             <div class="message-control-title">通知设置</div>
@@ -537,9 +518,10 @@
             <InfiniteLoadMore :key="selectedTab" :on-load="loadMore" :pause="isLoadingMessage" />
           </div>
         </template>
+      </template>
+    </BaseTabs>
   </div>
 </template>
-
 <script setup>
 import { ref, watch, onActivated } from 'vue'
 import BasePlaceholder from '~/components/BasePlaceholder.vue'
@@ -562,6 +544,7 @@ 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
@@ -569,6 +552,11 @@ const route = useRoute()
 const selectedTab = ref(
   ['all', 'unread', 'control'].includes(route.query.tab) ? route.query.tab : 'unread',
 )
+const tabs = [
+  { name: 'all', label: '消息' },
+  { name: 'unread', label: '未读' },
+  { name: 'control', label: '消息设置' },
+]
 const notificationPrefs = ref([])
 const page = ref(0)
 const pageSize = 30
@@ -714,13 +702,12 @@ onActivated(async () => {
   overflow-x: hidden;
 }
 
-.message-page-header {
+.message-page :deep(.base-tabs-header) {
   position: sticky;
   top: 1px;
   z-index: 200;
   background-color: var(--background-color-blur);
   display: flex;
-  flex-direction: row;
   justify-content: space-between;
   align-items: center;
   backdrop-filter: var(--blur-10);
@@ -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;

frontend_nuxt/pages/points.vue

@@ -1,26 +1,15 @@
 <template>
   <div class="point-mall-page">
-    <div class="point-tabs">
+    <BaseTabs v-model="selectedTab" :tabs="tabs">
-      <div
+      <template #default>
-        :class="['point-tab-item', { selected: selectedTab === 'mall' }]"
-        @click="selectedTab = 'mall'"
-      >
-        积分兑换
-      </div>
-      <div
-        :class="['point-tab-item', { selected: selectedTab === 'history' }]"
-        @click="selectedTab = 'history'"
-      >
-        积分历史
-      </div>
-    </div>
-
         <template v-if="selectedTab === 'mall'">
           <div class="point-mall-page-content">
             <section class="rules">
               <div class="section-title">🎉 积分规则</div>
               <div class="section-content">
-            <div class="section-item" v-for="(rule, idx) in pointRules" :key="idx">{{ rule }}</div>
+                <div class="section-item" v-for="(rule, idx) in pointRules" :key="idx">
+                  {{ rule }}
+                </div>
               </div>
             </section>
 
@@ -68,7 +57,11 @@
           <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" />
+          <BasePlaceholder
+            v-else-if="histories.length === 0"
+            text="暂无积分记录"
+            icon="fas fa-inbox"
+          />
           <div class="timeline-container" v-else>
             <BaseTimeline :items="histories">
               <template #item="{ item }">
@@ -172,6 +165,8 @@
             </BaseTimeline>
           </div>
         </template>
+      </template>
+    </BaseTabs>
   </div>
 </template>
 
@@ -182,6 +177,7 @@ import { toast } from '~/main'
 import RedeemPopup from '~/components/RedeemPopup.vue'
 import BaseTimeline from '~/components/BaseTimeline.vue'
 import BasePlaceholder from '~/components/BasePlaceholder.vue'
+import BaseTabs from '~/components/BaseTabs.vue'
 import { stripMarkdownLength } from '~/utils/markdown'
 import TimeManager from '~/utils/time'
 
@@ -189,6 +185,10 @@ const config = useRuntimeConfig()
 const API_BASE_URL = config.public.apiBaseUrl
 
 const selectedTab = ref('mall')
+const tabs = [
+  { name: 'mall', label: '积分兑换' },
+  { name: 'history', label: '积分历史' },
+]
 const point = ref(null)
 const isLoading = ref(false)
 const histories = ref([])
@@ -315,21 +315,6 @@ const submitRedeem = async () => {
   padding: 0 20px;
 }
 
-.point-tabs {
-  display: flex;
-  border-bottom: 1px solid var(--normal-border-color);
-}
-
-.point-tab-item {
-  padding: 10px 15px;
-  cursor: pointer;
-}
-
-.point-tab-item.selected {
-  border-bottom: 2px solid var(--primary-color);
-  color: var(--primary-color);
-}
-
 .timeline-container {
   padding: 10px 20px;
 }

frontend_nuxt/pages/users/[id].vue

@@ -72,44 +72,8 @@
         </div>
       </div>
 
-      <div class="profile-tabs">
+      <BaseTabs v-model="selectedTab" :tabs="tabs" class="profile-tabs">
-        <div
+        <template #default>
-          :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)" />
           </div>
@@ -200,7 +164,8 @@
                     <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>
+                          {{ 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 }}
@@ -348,6 +313,8 @@
               <AchievementList :medals="medals" :can-select="isMine" />
             </div>
           </template>
+        </template>
+      </BaseTabs>
     </div>
   </div>
 </template>
@@ -360,6 +327,7 @@ import BasePlaceholder from '~/components/BasePlaceholder.vue'
 import BaseTimeline from '~/components/BaseTimeline.vue'
 import LevelProgress from '~/components/LevelProgress.vue'
 import UserList from '~/components/UserList.vue'
+import BaseTabs from '~/components/BaseTabs.vue'
 import { toast } from '~/main'
 import { authState, getToken } from '~/utils/auth'
 import { prevLevelExp } from '~/utils/level'
@@ -400,6 +368,13 @@ const selectedTab = ref(
     ? route.query.tab
     : 'summary',
 )
+const tabs = [
+  { 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 followTab = ref('followers')
 
 const levelInfo = computed(() => {
@@ -796,13 +771,11 @@ watch(selectedTab, async (val) => {
   font-size: 14px;
 }
 
-.profile-tabs {
+.profile-tabs :deep(.base-tabs-header) {
   position: sticky;
   top: calc(var(--header-height) + 1px);
   z-index: 200;
   background-color: var(--background-color-blur);
-  display: flex;
-  flex-direction: row;
   padding: 0 20px;
   border-bottom: 1px solid var(--normal-border-color);
   scrollbar-width: none;
@@ -810,7 +783,7 @@ watch(selectedTab, async (val) => {
   backdrop-filter: var(--blur-10);
 }
 
-.profile-tabs-item {
+.profile-tabs :deep(.base-tab-item) {
   display: flex;
   flex: 0 0 auto;
   flex-direction: row;
@@ -823,11 +796,6 @@ watch(selectedTab, async (val) => {
   white-space: nowrap;
 }
 
-.profile-tabs-item.selected {
-  color: var(--primary-color);
-  border-bottom: 2px solid var(--primary-color);
-}
-
 .profile-summary {
   display: flex;
   flex-direction: column;
@@ -982,7 +950,7 @@ watch(selectedTab, async (val) => {
     height: 100px;
   }
 
-  .profile-tabs-item {
+  .profile-tabs :deep(.base-tab-item) {
     width: 100px;
   }