feat: create BaseTabs component

frontend_nuxt/components/BaseTabs.vue

@@ -1,91 +1,50 @@
 <template>
-  <div class="base-tabs">
+  <div class="base-tabs" @touchstart="onTouchStart" @touchend="onTouchEnd">
-    <div class="base-tabs-header">
-      <div class="base-tabs-items">
     <div
       v-for="tab in tabs"
-          :key="tab.key"
+      :key="tab.name"
-          :class="['base-tabs-item', { selected: modelValue === tab.key }]"
+      :class="[itemClass, { [activeClass]: tab.name === modelValue }]"
-          @click="$emit('update:modelValue', tab.key)"
+      @click="emit('update:modelValue', tab.name)"
     >
-          <i v-if="tab.icon" :class="tab.icon"></i>
+      <slot name="tab" :tab="tab">{{ tab.label }}</slot>
-          <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>
+import { ref } from 'vue'
+
 const props = defineProps({
+  tabs: { type: Array, required: true },
   modelValue: { type: String, required: true },
-  tabs: { type: Array, default: () => [] },
+  itemClass: { type: String, default: '' },
+  activeClass: { type: String, default: 'active' },
 })
 
 const emit = defineEmits(['update:modelValue'])
 
-let touchStartX = 0
+const startX = ref(0)
 
 function onTouchStart(e) {
-  touchStartX = e.touches[0].clientX
+  startX.value = e.changedTouches[0].clientX
 }
 
 function onTouchEnd(e) {
-  const diffX = e.changedTouches[0].clientX - touchStartX
+  const diff = e.changedTouches[0].clientX - startX.value
-  if (Math.abs(diffX) > 50) {
+  const threshold = 50
-    const index = props.tabs.findIndex((t) => t.key === props.modelValue)
+  if (Math.abs(diff) > threshold) {
-    if (diffX < 0 && index < props.tabs.length - 1) {
+    const currentIndex = props.tabs.findIndex((t) => t.name === props.modelValue)
-      emit('update:modelValue', props.tabs[index + 1].key)
+    if (currentIndex === -1) return
-    } else if (diffX > 0 && index > 0) {
+    const newIndex = currentIndex + (diff < 0 ? 1 : -1)
-      emit('update:modelValue', props.tabs[index - 1].key)
+    if (newIndex >= 0 && newIndex < props.tabs.length) {
+      emit('update:modelValue', props.tabs[newIndex].name)
     }
   }
 }
 </script>
 
 <style scoped>
-.base-tabs-header {
+.base-tabs {
   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>

frontend_nuxt/pages/about/index.vue

@@ -1,6 +1,16 @@
 <template>
   <div class="about-page">
-    <BaseTabs v-model="selectedTab" :tabs="tabs">
+    <BaseTabs
+      v-model="selectedTab"
+      :tabs="tabs"
+      class="about-tabs"
+      item-class="about-tabs-item"
+      active-class="selected"
+    >
+      <template #tab="{ tab }">
+        <div class="about-tabs-item-label">{{ tab.label }}</div>
+      </template>
+    </BaseTabs>
     <div class="about-loading" v-if="isFetching">
       <l-hatch-spinner size="100" stroke="10" speed="1" color="var(--primary-color)" />
     </div>
@@ -10,42 +20,42 @@
       v-html="renderMarkdown(content)"
       @click="handleContentClick"
     ></div>
-    </BaseTabs>
   </div>
 </template>
 
 <script>
-import { onMounted, ref, watch } from 'vue'
+import { ref, watch } from 'vue'
-import { handleMarkdownClick, renderMarkdown } from '~/utils/markdown'
 import BaseTabs from '~/components/BaseTabs.vue'
+import { handleMarkdownClick, renderMarkdown } from '~/utils/markdown'
 
 export default {
   name: 'AboutPageView',
+  components: { BaseTabs },
   setup() {
     const isFetching = ref(false)
     const tabs = [
       {
-        key: 'about',
+        name: 'about',
         label: '关于',
         file: 'https://openisle-1307107697.cos.ap-guangzhou.myqcloud.com/assert/about/about.md',
       },
       {
-        key: 'agreement',
+        name: 'agreement',
         label: '用户协议',
         file: 'https://openisle-1307107697.cos.ap-guangzhou.myqcloud.com/assert/about/agreement.md',
       },
       {
-        key: 'guideline',
+        name: 'guideline',
         label: '创作准则',
         file: 'https://openisle-1307107697.cos.ap-guangzhou.myqcloud.com/assert/about/guideline.md',
       },
       {
-        key: 'privacy',
+        name: 'privacy',
         label: '隐私政策',
         file: 'https://openisle-1307107697.cos.ap-guangzhou.myqcloud.com/assert/about/privacy.md',
       },
     ]
-    const selectedTab = ref(tabs[0].key)
+    const selectedTab = ref(tabs[0].name)
     const content = ref('')
 
     const loadContent = async (file) => {
@@ -64,14 +74,14 @@ export default {
       }
     }
 
-    onMounted(() => {
+    watch(
-      loadContent(tabs[0].file)
+      selectedTab,
-    })
+      (name) => {
-
+        const tab = tabs.find((t) => t.name === name)
-    watch(selectedTab, (name) => {
-      const tab = tabs.find((t) => t.key === name)
         if (tab) loadContent(tab.file)
-    })
+      },
+      { immediate: true },
+    )
 
     const handleContentClick = (e) => {
       handleMarkdownClick(e)
@@ -89,7 +99,7 @@ export default {
   margin: 0 auto;
 }
 
-:deep(.base-tabs-header) {
+.about-tabs {
   top: calc(var(--header-height) + 1px);
   background-color: var(--background-color-blur);
   display: flex;
@@ -100,13 +110,13 @@ export default {
   scrollbar-width: none;
 }
 
-:deep(.base-tabs-item) {
+.about-tabs-item {
   padding: 10px 20px;
   cursor: pointer;
   white-space: nowrap;
 }
 
-:deep(.base-tabs-item.selected) {
+.about-tabs-item.selected {
   color: var(--primary-color);
   border-bottom: 2px solid var(--primary-color);
 }

frontend_nuxt/pages/message-box/index.vue

@@ -7,7 +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">
+    <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>
@@ -54,9 +61,7 @@
           <div class="last-message-row">
             <div class="last-message">
               {{
-                  convo.lastMessage
+                convo.lastMessage ? stripMarkdownLength(convo.lastMessage.content, 100) : '暂无消息'
-                    ? stripMarkdownLength(convo.lastMessage.content, 100)
-                    : '暂无消息'
               }}
             </div>
             <div v-if="convo.unreadCount > 0" class="unread-count-badge">
@@ -102,9 +107,7 @@
             <div class="last-message-row">
               <div class="last-message">
                 {{
-                    ch.lastMessage
+                  ch.lastMessage ? stripMarkdownLength(ch.lastMessage.content, 100) : ch.description
-                      ? stripMarkdownLength(ch.lastMessage.content, 100)
-                      : ch.description
                 }}
               </div>
               <div class="member-count">成员 {{ ch.memberCount }}</div>
@@ -113,7 +116,6 @@
         </div>
       </div>
     </div>
-    </BaseTabs>
   </div>
 </template>
 
@@ -144,17 +146,24 @@ const { fetchUnreadCount: refreshGlobalUnreadCount } = useUnreadCount()
 const { fetchChannelUnread: refreshChannelUnread, setFromList: setChannelUnreadFromList } =
   useChannelsUnreadCount()
 let subscription = null
-
-const activeTab = ref('channels')
 const tabs = [
-  { key: 'messages', label: '站内信' },
+  { name: 'messages', label: '站内信' },
-  { key: 'channels', 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) {
@@ -218,14 +227,6 @@ async function fetchChannels() {
   }
 }
 
-watch(activeTab, (tab) => {
-  if (tab === 'messages') {
-    fetchConversations()
-  } else {
-    fetchChannels()
-  }
-})
-
 async function goToChannel(id) {
   const token = getToken()
   if (!token) {
@@ -323,18 +324,18 @@ function minimize() {
   cursor: pointer;
 }
 
-:deep(.base-tabs-header) {
+.tabs {
   display: flex;
   border-bottom: 1px solid var(--normal-border-color);
   margin-bottom: 16px;
 }
 
-:deep(.base-tabs-item) {
+.tab {
   padding: 10px 20px;
   cursor: pointer;
 }
 
-:deep(.base-tabs-item.selected) {
+.tab.active {
   border-bottom: 2px solid var(--primary-color);
   color: var(--primary-color);
 }
@@ -500,7 +501,7 @@ function minimize() {
     display: block;
   }
 
-  :deep(.base-tabs-header),
+  .tabs,
   .loading-message,
   .error-container,
   .search-container,

frontend_nuxt/pages/message.vue

@@ -1,14 +1,21 @@
 <template>
   <div class="message-page">
-    <BaseTabs v-model="selectedTab" :tabs="tabs">
+    <div class="message-page-header">
-      <template #right>
+      <BaseTabs
+        v-model="selectedTab"
+        :tabs="messageTabs"
+        class="message-tabs"
+        item-class="message-tab-item"
+        active-class="selected"
+      />
+
       <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>
-      </template>
+    </div>
 
     <div v-if="selectedTab === 'control'">
       <div class="message-control-container">
@@ -517,7 +524,6 @@
         <InfiniteLoadMore :key="selectedTab" :on-load="loadMore" :pause="isLoadingMessage" />
       </div>
     </template>
-    </BaseTabs>
   </div>
 </template>
 
@@ -527,7 +533,6 @@ 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'
@@ -544,18 +549,19 @@ 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',
 )
-const tabs = [
-  { key: 'all', label: '消息' },
-  { key: 'unread', label: '未读' },
-  { key: 'control', label: '消息设置' },
-]
 const notificationPrefs = ref([])
 const page = ref(0)
 const pageSize = 30
@@ -701,7 +707,7 @@ onActivated(async () => {
   overflow-x: hidden;
 }
 
-.message-page :deep(.base-tabs-header) {
+.message-page-header {
   position: sticky;
   top: 1px;
   z-index: 200;
@@ -822,6 +828,21 @@ 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,14 +1,19 @@
 <template>
   <div class="point-mall-page">
-    <BaseTabs v-model="selectedTab" :tabs="tabs">
+    <BaseTabs
+      v-model="selectedTab"
+      :tabs="pointTabs"
+      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">
+            <div class="section-item" v-for="(rule, idx) in pointRules" :key="idx">{{ rule }}</div>
-                {{ rule }}
-              </div>
           </div>
         </section>
 
@@ -56,11 +61,7 @@
       <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
+      <BasePlaceholder v-else-if="histories.length === 0" text="暂无积分记录" icon="fas fa-inbox" />
-          v-else-if="histories.length === 0"
-          text="暂无积分记录"
-          icon="fas fa-inbox"
-        />
       <div class="timeline-container" v-else>
         <BaseTimeline :items="histories">
           <template #item="{ item }">
@@ -164,7 +165,6 @@
         </BaseTimeline>
       </div>
     </template>
-    </BaseTabs>
   </div>
 </template>
 
@@ -181,12 +181,11 @@ import BaseTabs from '~/components/BaseTabs.vue'
 
 const config = useRuntimeConfig()
 const API_BASE_URL = config.public.apiBaseUrl
-
+const pointTabs = [
-const selectedTab = ref('mall')
+  { name: 'mall', label: '积分兑换' },
-const tabs = [
+  { name: 'history', label: '积分历史' },
-  { key: 'mall', label: '积分兑换' },
-  { key: 'history', label: '积分历史' },
 ]
+const selectedTab = ref('mall')
 const point = ref(null)
 const isLoading = ref(false)
 const histories = ref([])
@@ -313,17 +312,17 @@ const submitRedeem = async () => {
   padding: 0 20px;
 }
 
-:deep(.base-tabs-header) {
+.point-tabs {
   display: flex;
   border-bottom: 1px solid var(--normal-border-color);
 }
 
-:deep(.base-tabs-item) {
+.point-tab-item {
   padding: 10px 15px;
   cursor: pointer;
 }
 
-:deep(.base-tabs-item.selected) {
+.point-tab-item.selected {
   border-bottom: 2px solid var(--primary-color);
   color: var(--primary-color);
 }

frontend_nuxt/pages/users/[id].vue

@@ -72,7 +72,19 @@
         </div>
       </div>
 
-      <BaseTabs v-model="selectedTab" :tabs="tabs">
+      <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 v-if="tabLoading" class="tab-loading">
         <l-hatch size="28" stroke="4" speed="3.5" color="var(--primary-color)" />
       </div>
@@ -182,26 +194,13 @@
         </div>
 
         <div v-else-if="selectedTab === 'timeline'" class="profile-timeline">
-            <div class="timeline-tabs">
+          <BaseTabs
-              <div
+            v-model="timelineFilter"
-                :class="['timeline-tab-item', { selected: timelineFilter === 'all' }]"
+            :tabs="timelineTabs"
-                @click="timelineFilter = 'all'"
+            class="timeline-tabs"
-              >
+            item-class="timeline-tab-item"
-                全部
+            active-class="selected"
-              </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="暂无时间线"
@@ -268,20 +267,13 @@
         </div>
 
         <div v-else-if="selectedTab === 'following'" class="follow-container">
-            <div class="follow-tabs">
+          <BaseTabs
-              <div
+            v-model="followTab"
-                :class="['follow-tab-item', { selected: followTab === 'followers' }]"
+            :tabs="followTabs"
-                @click="followTab = 'followers'"
+            class="follow-tabs"
-              >
+            item-class="follow-tab-item"
-                关注者
+            active-class="selected"
-              </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" />
@@ -311,7 +303,6 @@
           <AchievementList :medals="medals" :can-select="isMine" />
         </div>
       </template>
-      </BaseTabs>
     </div>
   </div>
 </template>
@@ -322,7 +313,6 @@ 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'
@@ -330,6 +320,7 @@ 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
 
@@ -345,6 +336,22 @@ 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') {
@@ -365,13 +372,6 @@ 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(() => {
@@ -768,7 +768,7 @@ watch(selectedTab, async (val) => {
   font-size: 14px;
 }
 
-:deep(.base-tabs-header) {
+.profile-tabs {
   position: sticky;
   top: calc(var(--header-height) + 1px);
   z-index: 200;
@@ -782,7 +782,7 @@ watch(selectedTab, async (val) => {
   backdrop-filter: var(--blur-10);
 }
 
-:deep(.base-tabs-item) {
+.profile-tabs-item {
   display: flex;
   flex: 0 0 auto;
   flex-direction: row;
@@ -795,7 +795,7 @@ watch(selectedTab, async (val) => {
   white-space: nowrap;
 }
 
-:deep(.base-tabs-item.selected) {
+.profile-tabs-item.selected {
   color: var(--primary-color);
   border-bottom: 2px solid var(--primary-color);
 }
@@ -954,7 +954,7 @@ watch(selectedTab, async (val) => {
     height: 100px;
   }
 
-  :deep(.base-tabs-item) {
+  .profile-tabs-item {
     width: 100px;
   }