From 630264bf1259fa1c8803d039930757566d2c85d0 Mon Sep 17 00:00:00 2001
From: Aresn <admin@aresn.com>
Date: Fri, 7 Jun 2024 17:07:59 +0800
Subject: [PATCH] =?UTF-8?q?=E7=A7=BB=E5=8A=A8=E7=AB=AF=E4=B8=BB=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 components/i/library/Header.vue | 27 +++++++++++++++++++++++++--
 components/i/library/Thread.vue |  4 ++--
 pages/library/index.vue         | 27 ++++++++++++++++++++++-----
 3 files changed, 49 insertions(+), 9 deletions(-)

diff --git a/components/i/library/Header.vue b/components/i/library/Header.vue
index b9a1ee4..b32ea04 100644
--- a/components/i/library/Header.vue
+++ b/components/i/library/Header.vue
@@ -1,6 +1,6 @@
 <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>
diff --git a/components/i/library/Thread.vue b/components/i/library/Thread.vue
index 6b7dc41..9963f46 100644
--- a/components/i/library/Thread.vue
+++ b/components/i/library/Thread.vue
@@ -1,8 +1,8 @@
 <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">
diff --git a/pages/library/index.vue b/pages/library/index.vue
index 111b861..3fe7106 100644
--- a/pages/library/index.vue
+++ b/pages/library/index.vue
@@ -1,9 +1,9 @@
 <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'
 })
-- 
GitLab