From 063242ea779c0d9ef3f6bbe333774bd080ebaf7b Mon Sep 17 00:00:00 2001
From: estel <690930@qq.com>
Date: Sat, 26 Jul 2025 21:01:45 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E5=A4=8D=E6=89=80=E6=9C=89vue=20vite?=
 =?UTF-8?q?=E8=AD=A6=E5=91=8A?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 app/components/AppHeader.vue  |   3 +-
 app/components/AppSidebar.vue | 102 ++++++++++++++--------------------
 app/components/LogoPro.vue    |  10 +++-
 app/layouts/default.vue       |   1 -
 4 files changed, 54 insertions(+), 62 deletions(-)

diff --git a/app/components/AppHeader.vue b/app/components/AppHeader.vue
index 92a7af8..b3dddb7 100644
--- a/app/components/AppHeader.vue
+++ b/app/components/AppHeader.vue
@@ -35,11 +35,12 @@ const handleLoginRegister = (type: "login" | "register") => {
   <UHeader toggle-side="left" title="Estel Docs" mode="modal">
 
     <template #title>
-      <LogoPro class="h-5 w-auto" />
+      <h6></h6>
     </template>
     
     
     <template #body>
+      <LogoPro class="h-5 w-auto mb-4" />
       <DocsAsideLeftTop />
       <div class="mt-4 mb-4 border-t border-gray-200 dark:border-gray-700 w-9/10 mx-5" />
       <UContentNavigation highlight :navigation="navigation" color="primary" type="single" variant="pill" />
diff --git a/app/components/AppSidebar.vue b/app/components/AppSidebar.vue
index e90d1f3..e983a10 100644
--- a/app/components/AppSidebar.vue
+++ b/app/components/AppSidebar.vue
@@ -1,71 +1,55 @@
 <template>
-  <div
-    class="w-64 bg-white dark:bg-gray-900 flex flex-col h-screen border-r border-gray-200 dark:border-gray-700 overflow-hidden">
-    <!--  Logo  -->
-    <div class="flex-shrink-0 p-4 border-gray-200 dark:border-gray-700">
-      <!-- Logo and Site Name -->
-      <div class="h-8">
-        <NuxtLink to="/" class="flex items-center space-x-3">
-          <div class="w-8 h-8 bg-primary rounded-xl flex items-center justify-center shadow-md">
-            <span class="text-white font-bold text-lg">E</span>
-          </div>
-          <span class="text-lg font-bold text-gray-800 dark:text-white">简单文档</span>
-          <TemplateMenu />
-        </NuxtLink>
-      </div>
-    </div>
-
-    <!-- Search Box -->
-    <div class="p-4 border-gray-200 dark:border-gray-700">
-      <ClientOnly>
-        <UContentSearchButton :collapsed="false" label="搜索文档" class="w-full"
-          color="primary" />
-      </ClientOnly>
-    </div>
-
-    <!-- 可滚动的导航区域 -->
-    <div class=" h-full overflow-y-auto ">
-
-      <!-- 导航 Section -->
-
-      <div>
-        <NuxtLink to="/"
-          class="flex items-center px-4 py-2 text-sm font-medium rounded-lg text-gray-700 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-800 hover:shadow-sm transition-all duration-200"
-          :class="{
-            'bg-blue-50 dark:bg-blue-900/20 text-blue-600 dark:text-blue-400 shadow-sm':
-              $route.path === '/',
-          }">
-          <Icon name="lucide-home" class="text-primary mr-2" size="20" />
-          站点首页
-        </NuxtLink>
-        <div class="px-2">
-          <DocsAsideLeftTop />
-        </div>   
+  <UPage>
+    <div
+      class="w-64 bg-white dark:bg-gray-900 
+      flex flex-col h-screen border-r border-gray-200 dark:border-gray-700 
+      overflow-hidden">
+      <div class="flex-shrink-0 p-4 border-gray-200 dark:border-gray-700">
+        <!-- Logo -->
+        <LogoPro />
       </div>
 
-      <!-- 分隔线 -->
-      <div class="mt-4 uppercase tracking-wider border-t border-gray-200 dark:border-gray-700 w-3/5 mx-5" />
+      <!-- Search Box -->
+      <div class="p-4 border-gray-200 dark:border-gray-700">
+        <ClientOnly>
+          <UContentSearchButton :collapsed="false" label="搜索文档" class="w-full"
+            color="primary" />
+        </ClientOnly>
+      </div>
 
-      <!-- 文档目录导航 -->
-      <div class="mt-6 flex items-center justify-start pl-8 w-4/5">
-          <UContentNavigation highlight :navigation="navigation" color="primary" type="single" variant="pill" />
+      <!-- 可滚动的导航区域 -->
+      <div class=" h-full overflow-y-auto ">
+
+        <!-- 导航 Section -->
+
+        <div>
+          <NuxtLink to="/"
+            class="flex items-center px-4 py-2 text-sm font-medium rounded-lg text-gray-700 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-800 hover:shadow-sm transition-all duration-200"
+            :class="{
+              'bg-blue-50 dark:bg-blue-900/20 text-blue-600 dark:text-blue-400 shadow-sm':
+                $route.path === '/',
+            }">
+            <Icon name="lucide-home" class="text-primary mr-2" size="20" />
+            站点首页
+          </NuxtLink>
+          <div class="px-2">
+            <DocsAsideLeftTop />
+          </div>   
+        </div>
+
+        <!-- 分隔线 -->
+        <div class="mt-4 uppercase tracking-wider border-t border-gray-200 dark:border-gray-700 w-3/5 mx-5" />
+
+        <!-- 文档目录导航 -->
+        <div class="mt-6 flex items-center justify-start pl-8 w-4/5">
+            <UContentNavigation highlight :navigation="navigation" color="primary" type="single" variant="pill" />
+        </div>
       </div>
     </div>
-  </div>
+  </UPage>
 </template>
 
 <script setup lang="ts">
 import type { ContentNavigationItem } from "@nuxt/content";
-const { header } = useAppConfig();
 const navigation = inject<Ref<ContentNavigationItem[]>>("navigation");
-
-// const handleSearch = () => {
-//   // 搜索功能将在后续实现
-//   console.log("Searching for:", searchQuery.value);
-// };
-
-// 调试信息
-// console.log('AppSidebar: Navigation data:', navigation.value)
-// console.log('AppSidebar: Pending:', pending.value)
-// console.log('AppSidebar: Error:', error.value)
 </script>
diff --git a/app/components/LogoPro.vue b/app/components/LogoPro.vue
index ab0f743..d7d9512 100644
--- a/app/components/LogoPro.vue
+++ b/app/components/LogoPro.vue
@@ -1,3 +1,11 @@
 <template>
-  <UIcon name="i-lucide-home" />
+  <div class="h-8">
+    <NuxtLink to="/" class="flex items-center space-x-3">
+      <div class="w-8 h-8 bg-primary rounded-xl flex items-center justify-center shadow-md">
+        <span class="text-white font-bold text-lg">E</span>
+      </div>
+      <span class="text-lg font-bold text-gray-800 dark:text-white">简单文档</span>
+      <TemplateMenu />
+    </NuxtLink>
+  </div>
 </template>
diff --git a/app/layouts/default.vue b/app/layouts/default.vue
index 6d8e58b..51d1313 100644
--- a/app/layouts/default.vue
+++ b/app/layouts/default.vue
@@ -17,7 +17,6 @@
     <div class="flex-1 lg:ml-64 flex flex-col min-w-0">
       <!-- Fixed Header -->
       <AppHeader 
-        class="fixed top-0 right-0 left-0 lg:left-64 z-30 bg-white dark:bg-gray-900 border-b border-gray-200 dark:border-gray-700" 
         :is-sidebar-open="isSidebarOpen"
         :toggle-sidebar="toggleSidebar"
       />