修改样式

app/components/AppSidebar.vue

@@ -0,0 +1,116 @@
+<template>
+  <aside
+    class="w-64 bg-gradient-to-b from-gray-50 to-gray-100 dark:from-gray-800 dark:to-gray-900 flex flex-col h-screen"
+  >
+    <!--  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">
+      <ClientOnly>
+      <UContentSearchButton
+        v-if="header?.search"
+        :collapsed="false"
+        loading="true"
+        label="搜索文档"
+        description="请输入关键词"
+        class="w-full dark:bg-gray-700 text-gray-600 dark:text-gray-100"
+        color="primary"
+      />
+      </ClientOnly>
+    </div>
+    <!-- 可滚动的导航区域 -->
+    <div
+      class="flex-1 overflow-y-auto scrollbar-thin scrollbar-thumb-gray-300 dark:scrollbar-thumb-gray-600 scrollbar-track-transparent hover:scrollbar-thumb-gray-400 dark:hover:scrollbar-thumb-gray-500 p-4"
+      style="max-height: calc(100vh - 180px)"
+    >
+      <nav class="space-y-6">
+        <!-- 导航 Section -->
+        <div>
+          <h3
+            class="text-xs font-semibold text-gray-500 dark:text-gray-400 uppercase tracking-wider mb-3 px-1"
+          >
+            导航
+          </h3>
+          <div class="space-y-2">
+            <NuxtLink
+              to="/"
+              class="flex items-center px-4 py-3 text-sm font-medium rounded-xl text-gray-700 dark:text-gray-300 hover:bg-white dark:hover:bg-gray-700 hover:shadow-sm transition-all duration-200"
+              :class="{
+                'bg-white dark:bg-gray-700 text-blue-600 dark:text-blue-400 shadow-sm':
+                  $route.path === '/',
+              }"
+            >
+              <Icon name="uim:house-user" class="text-primary mr-1" size="20" />
+              站点首页
+            </NuxtLink>
+          </div>
+        </div>
+
+        <!-- Document Navigation -->
+        <UContainer>
+          <UPageAside>
+            <UContentNavigation highlight :navigation="navigation" />
+          </UPageAside>
+        </UContainer>
+      </nav>
+    </div>
+  </aside>
+</template>
+
+<script setup lang="ts">
+import type { ContentNavigationItem } from "@nuxt/content";
+const { header } = useAppConfig();
+// const searchQuery = ref("");
+
+// 折叠状态管理
+// const expandedGroups = ref<Set<string>>(new Set())
+
+// 切换分组展开状态
+// const toggleGroup = (groupPath: string) => {
+//   if (expandedGroups.value.has(groupPath)) {
+//     expandedGroups.value.delete(groupPath)
+//   } else {
+//     expandedGroups.value.add(groupPath)
+//   }
+// }
+
+// 检查分组是否展开
+// const isGroupExpanded = (groupPath: string) => {
+//   return expandedGroups.value.has(groupPath)
+// }
+
+// // 使用官方的 queryCollectionNavigation 方法获取导航数据
+// const { data: navigation, pending, error, refresh } = await useAsyncData('content-navigation', () => {
+//   return queryCollectionNavigation('docs', ['description'])
+// })
+
+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>