feat: create BaseTabs component

frontend_nuxt/pages/message-box/index.vue

@@ -7,14 +7,13 @@
     <div v-if="!isFloatMode" class="float-control">
       <i class="fas fa-compress" @click="minimize" title="最小化"></i>
     </div>
-    <div class="tabs">
-      <div :class="['tab', { active: activeTab === 'messages' }]" @click="switchToMessage">
-        站内信
-      </div>
-      <div :class="['tab', { active: activeTab === 'channels' }]" @click="switchToChannels">
-        频道
-      </div>
-    </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">
@@ -132,6 +131,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([])
@@ -146,13 +146,24 @@ 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) {
@@ -216,16 +227,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) {