From 965556e458a76b220ab7b058706ffcda6316e5b9 Mon Sep 17 00:00:00 2001
From: Aresn <admin@aresn.com>
Date: Thu, 30 May 2024 16:35:10 +0800
Subject: [PATCH] =?UTF-8?q?=E6=94=B6=E8=97=8F=E5=A4=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 components/i/library/header.vue | 46 ++++++++++++++++++++-------------
 pages/library/[id].vue          | 13 ++++++++++
 2 files changed, 41 insertions(+), 18 deletions(-)

diff --git a/components/i/library/header.vue b/components/i/library/header.vue
index b142824..a73bb75 100644
--- a/components/i/library/header.vue
+++ b/components/i/library/header.vue
@@ -1,27 +1,37 @@
 <template>
-    <div class="container max-w-screen-lg flex flex-col p-6">
-        <div class="flex justify-between items-center">
-            <div class="flex">
-                <div class="flex items-center text-xl gap-2" v-if="!collect">
-                    <UIcon name="i-heroicons-rectangle-stack-20-solid" />
-                    <div>主题</div>
+    <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="flex justify-between items-center">
+                <div class="flex gap-4">
+                    <div class="flex items-center text-xl gap-2" v-if="!collect">
+                        <UIcon name="i-heroicons-rectangle-stack-20-solid" />
+                        <div>主题</div>
+                    </div>
+                    <template v-else>
+                        <UButton
+                            icon="i-heroicons-chevron-left"
+                            color="gray"
+                            variant="ghost"
+                            to="/library"
+                        />
+                        <div class="flex items-center text-xl gap-2">
+                            <UIcon name="i-heroicons-squares-2x2" />
+                            <div>{{ collect }}</div>
+                        </div>
+                    </template>
                 </div>
-                <div class="flex items-center text-xl gap-2" v-else>
-                    <UIcon name="i-heroicons-squares-2x2" />
-                    <div>{{ collect }}</div>
+                <div class="flex">
+                    <UInput
+                        v-model="searchQuery"
+                        icon="i-heroicons-magnifying-glass-20-solid"
+                        placeholder="搜索你的主题..."
+                        size="md"
+                    />
                 </div>
             </div>
-            <div class="flex">
-                <UInput
-                    v-model="searchQuery"
-                    icon="i-heroicons-magnifying-glass-20-solid"
-                    placeholder="搜索你的主题..."
-                    size="md"
-                />
-            </div>
         </div>
+        <UDivider />
     </div>
-    <UDivider />
 </template>
 <script setup>
 defineProps({
diff --git a/pages/library/[id].vue b/pages/library/[id].vue
index a25b1b1..b4d4b90 100644
--- a/pages/library/[id].vue
+++ b/pages/library/[id].vue
@@ -1,6 +1,19 @@
 <template>
     <div class="w-full items-center flex flex-col">
         <ILibraryHeader collect="前端开发" />
+        <div class="container max-w-screen-lg flex flex-col p-6">
+            <div class="flex gap-10">
+                <div class="flex flex-col flex-grow">
+                    <div class="flex flex-col gap-4">
+                        <ILibraryThread />
+                        <ILibraryThread />
+                        <ILibraryThread />
+                        <ILibraryThread />
+                        <ILibraryThread />
+                    </div>
+                </div>
+            </div>
+        </div>
     </div>
 </template>
 <script setup>
-- 
GitLab