移动端主题

components/i/library/Header.vue

 <template>
     <div class="flex flex-col w-full items-center sticky top-0 bg-white dark:bg-black z-10">
-        <div class="container max-w-screen-lg flex flex-col p-6">
+        <div class="container max-w-screen-lg 2xl:max-w-screen-xl flex flex-col p-6">
             <div class="flex justify-between items-center">
                 <div class="flex gap-4">
                     <div class="flex items-center text-xl gap-2" v-if="!collect">
@@ -52,6 +52,9 @@
             <div v-if="description" class="text-gray-500 ml-12 mt-2">{{ description }}</div>
         </div>
         <UDivider />
+        <div v-if="showTabs" class="w-full p-6 block lg:hidden">
+            <UTabs :model-value="tab" @update:modelValue="handleChangeTab" :items="tabs" />
+        </div>
     </div>
 </template>
 <script setup>
@@ -71,9 +74,17 @@ defineProps({
     collectId: {
         type: [String, Number],
         default: ''
+    },
+    showTabs: {
+        type: Boolean,
+        default: false
+    },
+    tab: {
+        type: Number,
+        default: 0
     }
 })
-const emit = defineEmits(['search', 'clear'])
+const emit = defineEmits(['search', 'clear', 'change-tab'])
 const searchQuery = ref('')
 const searchLoading = ref(false)
 defineShortcuts({
@@ -91,4 +102,16 @@ function handleClear () {
     searchQuery.value = ''
     emit('clear')
 }
+const tabs = [
+    {
+        label: '全部主题',
+        icon: 'i-heroicons-square-3-stack-3d'
+    },
+    {
+        label: '合集'
+    }
+]
+function handleChangeTab (index) {
+    emit('change-tab', index)
+}
 </script>

components/i/library/Thread.vue

 <template>
     <ULink :to="`/search/${thread.c_id}`" class="flex flex-col group">
         <div class="flex  items-center gap-2 transition group-hover:text-primary">{{ thread.title }}</div>
-        <div class="break-word text-balance line-clamp-2 font-sans text-sm" :class="textColor">
-           {{ thread.description || '待补充' }}
+        <div class="break-word text-balance line-clamp-2 font-sans text-sm" :class="textColor" v-if="false">
+           {{ thread.description }}
         </div>
     </ULink>
     <div class="flex justify-between items-center">

pages/library/index.vue

 <template>
     <div class="w-full items-center flex flex-col">
-        <ILibraryHeader @search="handleSearch" @clear="getThreadData" />
-        <div class="container max-w-screen-lg 2xl:max-w-screen-xl flex flex-col p-6">
-            <div class="flex gap-10">
-                <div class="flex flex-col flex-grow">
+        <ILibraryHeader show-tabs :tab="tab" @change-tab="handleChangeTab" @search="handleSearch" @clear="getThreadData" />
+        <div class="container max-w-screen-lg 2xl:max-w-screen-xl flex flex-col p-6 pt-0 lg:pt-6">
+            <div class="flex gap-10" v-show="ready">
+                <div class="flex flex-col flex-grow" v-show="tab === 0 || tab === -1">
                     <div v-auto-animate class="flex flex-col gap-4">
                         <ILibraryThread
                             v-for="item in threads"
@@ -14,7 +14,7 @@
                         <IEmpty v-if="!threads.length" />
                     </div>
                 </div>
-                <div class="flex flex-col flex-shrink-0 w-56">
+                <div class="flex flex-col flex-shrink-0 w-full lg:w-56" v-show="tab === 1 || tab === -1">
                     <div class="flex justify-between items-center">
                         <div class="flex items-center text-lg gap-2">
                             <UIcon name="i-heroicons-squares-2x2" />
@@ -39,6 +39,8 @@
     </div>
 </template>
 <script setup>
+import {LG} from '~/composables/useMQ.js';
+
 const { $collection } = storeToRefs(useLibraryStore())
 const { $openLibraryCreate, $getCollection } = useLibraryStore()
 const { getThreadsList } = useLibraryRequest()
@@ -61,6 +63,21 @@ function handleDeletedThread (c_id) {
 function handleSearch (data) {
     threads.value = data
 }
+
+const tab = ref(-1)
+watch(()=> LG.value, (value) => {
+    if (value) tab.value = 0
+    else tab.value = -1
+})
+const ready = ref(false)
+onMounted(() => {
+    if (LG.value) tab.value = 0
+    ready.value = true
+})
+function handleChangeTab (index) {
+    tab.value = index
+}
+
 useHead({
     title: '全部主题 - GitBot'
 })