feat: add reusable multi-tabs component

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,15 +1,13 @@
 <template>
   <div class="about-page">
-    <div class="about-tabs">
+    <MultiTabs
-      <div
+      :tabs="tabs"
-        v-for="tab in tabs"
+      v-model="selectedTab"
-        :key="tab.name"
+      header-class="about-tabs"
-        :class="['about-tabs-item', { selected: selectedTab === tab.name }]"
+      item-class="about-tabs-item"
-        @click="selectTab(tab.name)"
+      label-class="about-tabs-item-label"
     >
-        <div class="about-tabs-item-label">{{ tab.label }}</div>
+      <template #default>
-      </div>
-    </div>
         <div class="about-loading" v-if="isFetching">
           <l-hatch-spinner size="100" stroke="10" speed="1" color="var(--primary-color)" />
         </div>
@@ -19,11 +17,13 @@
           v-html="renderMarkdown(content)"
           @click="handleContentClick"
         ></div>
+      </template>
+    </MultiTabs>
   </div>
 </template>
 
 <script>
-import { onMounted, ref } from 'vue'
+import { onMounted, ref, watch } from 'vue'
 import { handleMarkdownClick, renderMarkdown } from '~/utils/markdown'
 
 export default {
@@ -71,21 +71,21 @@ export default {
       }
     }
 
-    const selectTab = (name) => {
+    watch(selectedTab, (name) => {
-      selectedTab.value = name
       const tab = tabs.find((t) => t.name === name)
       if (tab) loadContent(tab.file)
-    }
+    })
 
     onMounted(() => {
-      loadContent(tabs[0].file)
+      const first = tabs[0]
+      if (first) loadContent(first.file)
     })
 
     const handleContentClick = (e) => {
       handleMarkdownClick(e)
     }
 
-    return { tabs, selectedTab, content, renderMarkdown, selectTab, isFetching, handleContentClick }
+    return { tabs, selectedTab, content, renderMarkdown, isFetching, handleContentClick }
   },
 }
 </script>

frontend_nuxt/pages/message-box/index.vue

@@ -7,16 +7,9 @@
     <div v-if="!isFloatMode" class="float-control">
       <i class="fas fa-compress" @click="minimize" title="最小化"></i>
     </div>
-    <div class="tabs">
+    <MultiTabs :tabs="tabs" v-model="activeTab" header-class="tabs" item-class="tab">
-      <div :class="['tab', { active: activeTab === 'messages' }]" @click="switchToMessage">
+      <template #default="{ selected }">
-        站内信
+        <div v-if="selected === 'messages'">
-      </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>
@@ -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">
@@ -72,7 +71,6 @@
             </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>
@@ -108,7 +106,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 +117,8 @@
             </div>
           </div>
         </div>
+      </template>
+    </MultiTabs>
   </div>
 </template>
 
@@ -147,6 +149,10 @@ const { fetchChannelUnread: refreshChannelUnread, setFromList: setChannelUnreadF
   useChannelsUnreadCount()
 let subscription = null
 
+const tabs = [
+  { name: 'messages', label: '站内信' },
+  { name: 'channels', label: '频道' },
+]
 const activeTab = ref('channels')
 const channels = ref([])
 const loadingChannels = ref(false)
@@ -216,15 +222,13 @@ async function fetchChannels() {
   }
 }
 
-function switchToMessage() {
+watch(activeTab, (val) => {
-  activeTab.value = 'messages'
+  if (val === 'messages') {
     fetchConversations()
-}
+  } else {
-
-function switchToChannels() {
-  activeTab.value = 'channels'
     fetchChannels()
   }
+})
 
 async function goToChannel(id) {
   const token = getToken()

frontend_nuxt/pages/message.vue

@@ -1,36 +1,21 @@
 <template>
   <div class="message-page">
-    <div class="message-page-header">
+    <MultiTabs
-      <div class="message-tabs">
+      :tabs="tabs"
-        <div
+      v-model="selectedTab"
-          :class="['message-tab-item', { selected: selectedTab === 'all' }]"
+      header-class="message-page-header message-tabs"
-          @click="selectedTab = 'all'"
+      item-class="message-tab-item"
     >
-          消息
+      <template #header-extra>
-        </div>
+        <div class="message-page-header-right" v-if="selectedTab !== 'control'">
-        <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="{ selected }">
-    <div v-if="selectedTab === 'control'">
+        <div v-if="selected === 'control'">
           <div class="message-control-container">
             <div class="message-control-title">通知设置</div>
             <div class="message-control-item-container">
@@ -537,6 +522,8 @@
             <InfiniteLoadMore :key="selectedTab" :on-load="loadMore" :pause="isLoadingMessage" />
           </div>
         </template>
+      </template>
+    </MultiTabs>
   </div>
 </template>
 
@@ -566,6 +553,11 @@ import BaseSwitch from '~/components/BaseSwitch.vue'
 const config = useRuntimeConfig()
 const API_BASE_URL = config.public.apiBaseUrl
 const route = useRoute()
+const tabs = [
+  { name: 'all', label: '消息' },
+  { name: 'unread', label: '未读' },
+  { name: 'control', label: '消息设置' },
+]
 const selectedTab = ref(
   ['all', 'unread', 'control'].includes(route.query.tab) ? route.query.tab : 'unread',
 )

frontend_nuxt/pages/points.vue

@@ -1,33 +1,25 @@
 <template>
   <div class="point-mall-page">
-    <div class="point-tabs">
+    <MultiTabs
-      <div
+      :tabs="tabs"
-        :class="['point-tab-item', { selected: selectedTab === 'mall' }]"
+      v-model="selectedTab"
-        @click="selectedTab = 'mall'"
+      header-class="point-tabs"
+      item-class="point-tab-item"
     >
-        积分兑换
+      <template #default="{ selected }">
-      </div>
+        <template v-if="selected === 'mall'">
-      <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>
-
             <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
@@ -36,7 +28,6 @@
                 >
               </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" />
@@ -63,12 +54,15 @@
             />
           </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" />
+          <BasePlaceholder
+            v-else-if="histories.length === 0"
+            text="暂无积分记录"
+            icon="fas fa-inbox"
+          />
           <div class="timeline-container" v-else>
             <BaseTimeline :items="histories">
               <template #item="{ item }">
@@ -158,20 +152,15 @@
                     <NuxtLink :to="`/posts/${item.postId}`" class="timeline-link">{{
                       item.postTitle
                     }}</NuxtLink>
-                被
+                    被抽中，消耗 {{ -item.amount }} 积分
-                <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>
+    </MultiTabs>
   </div>
 </template>
 
@@ -188,6 +177,11 @@ import TimeManager from '~/utils/time'
 const config = useRuntimeConfig()
 const API_BASE_URL = config.public.apiBaseUrl
 
+const tabs = [
+  { name: 'mall', label: '积分兑换' },
+  { name: 'history', label: '积分历史' },
+]
+
 const selectedTab = ref('mall')
 const point = ref(null)
 const isLoading = ref(false)