修改样式

app/app.config.ts

@@ -80,5 +80,12 @@ export default defineAppConfig({
         target: '_blank'
       }]
     }
+  },
+  github: {
+    url: 'https://github.com/estel-li/estel_docs',
+    owner: 'estel-li',
+    name: 'estel_docs',
+    branch: 'main',
+    rootDir: ''
   }
 })

app/app.vue

@@ -31,7 +31,7 @@ provide('navigation', navigation)
   <UApp>
     <NuxtLoadingIndicator />
 
-    <AppHeader />
+
 
     <UMain>
       <NuxtLayout>
@@ -39,7 +39,7 @@ provide('navigation', navigation)
       </NuxtLayout>
     </UMain>
 
-    <AppFooter />
+
 
     <ClientOnly>
       <LazyUContentSearch

app/components/AppHeader.vue

@@ -8,14 +8,7 @@ const { header } = useAppConfig()
 
 <template>
   <UHeader
-    :ui="{ center: 'flex-1' }"
-    :to="header?.to || '/'"
   >
-    <UContentSearchButton
-      v-if="header?.search"
-      :collapsed="false"
-      class="w-full"
-    />
 
     <template
       v-if="header?.logo?.dark || header?.logo?.light || header?.title"

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>

app/layouts/default.vue

@@ -0,0 +1,40 @@
+<template>
+  <div class="min-h-screen bg-gray-50 dark:bg-gray-900 flex">
+    <!-- Mobile Sidebar (Drawer) -->
+    <div 
+      v-if="isSidebarOpen" 
+      class="fixed inset-0 bg-gray-900/50 z-40 lg:hidden" 
+      @click="isSidebarOpen = false"
+    />
+    <AppSidebar 
+      class="fixed top-0 bottom-0 z-50 transition-transform duration-300 ease-in-out" 
+      :class="isSidebarOpen ? 'translate-x-0' : '-translate-x-full lg:translate-x-0'"
+    />
+    
+    <!-- Right Content Area -->
+    <div class="flex-1 lg:ml-64 flex flex-col">
+      <!-- Fixed Header -->
+      <AppHeader 
+        class="fixed top-0 right-0 z-30 transition-all duration-300"
+        :class="{ 'left-0': !isSidebarOpen, 'lg:left-64': true }"
+        @toggle-sidebar="isSidebarOpen = !isSidebarOpen" 
+      />
+      
+      <!-- Main Content -->
+      <main class="flex-1 overflow-y-auto pt-16">
+        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-6">
+          <slot />
+        </div>
+      </main>
+      
+      <!-- Footer -->
+      <AppFooter />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+
+const isSidebarOpen = ref(false)
+</script>

app/pages/[...slug].vue

@@ -2,12 +2,12 @@
 import type { ContentNavigationItem } from '@nuxt/content'
 import { findPageHeadline } from '#ui-pro/utils/content'
 
-definePageMeta({
-  layout: 'docs'
-})
+// definePageMeta({
+//   layout: 'docs'
+// })
 
 const route = useRoute()
-const { toc } = useAppConfig()
+const appConfig = useAppConfig()
 const navigation = inject<Ref<ContentNavigationItem[]>>('navigation')
 
 const { data: page } = await useAsyncData(route.path, () => queryCollection('docs').path(route.path).first())
@@ -37,18 +37,33 @@ defineOgImageComponent('Docs', {
   headline: headline.value
 })
 
+const editLink = computed(() => {
+  if (!appConfig.github) {
+    return
+  }
+
+  return [
+    appConfig.github.url,
+    'edit',
+    appConfig.github.branch,
+    appConfig.github.rootDir,
+    'content',
+    `${page.value?.stem}.${page.value?.extension}`,
+  ].filter(Boolean).join('/')
+})
+
 const links = computed(() => {
   const links = []
-  if (toc?.bottom?.edit) {
+  if (appConfig.toc?.bottom?.edit) {
     links.push({
       icon: 'i-lucide-external-link',
       label: 'Edit this page',
-      to: `${toc.bottom.edit}/${page?.value?.stem}.${page?.value?.extension}`,
+      to: `${appConfig.toc.bottom.edit}/${page?.value?.stem}.${page?.value?.extension}`,
       target: '_blank'
     })
   }
 
-  return [...links, ...(toc?.bottom?.links || [])].filter(Boolean)
+  return [...links, ...(appConfig.toc?.bottom?.links || [])].filter(Boolean)
 })
 </script>
 
@@ -57,46 +72,64 @@ const links = computed(() => {
     <UPageHeader
       :title="page.title"
       :description="page.description"
-      :links="page.links"
       :headline="headline"
-    />
+      :ui="{
+        wrapper: 'flex-row items-center flex-wrap justify-between',
+      }"
+    >
+      <template #links>
+        <UButton
+          v-for="(link, index) in page.links"
+          :key="index"
+          size="sm"
+          v-bind="link"
+        />
+
+        <DocsPageHeaderLinks />
+      </template>
+    </UPageHeader>
 
     <UPageBody>
-      <ContentRenderer
-        v-if="page"
-        :value="page"
-      />
-
-      <USeparator v-if="surround?.length" />
+      <ContentRenderer v-if="page" :value="page" />
 
+      <USeparator>
+        <div v-if="editLink" class="flex items-center gap-2 text-sm text-muted">
+          <UButton
+            variant="link"
+            color="neutral"
+            :to="editLink"
+            target="_blank"
+            icon="i-lucide-pen"
+            :ui="{ leadingIcon: 'size-4' }"
+          >
+            Edit this page
+          </UButton>
+          or
+          <UButton
+            variant="link"
+            color="neutral"
+            :to="`${appConfig.github.url}/issues/new/choose`"
+            target="_blank"
+            icon="i-lucide-alert-circle"
+            :ui="{ leadingIcon: 'size-4' }"
+          >
+            Report an issue
+          </UButton>
+        </div>
+      </USeparator>
       <UContentSurround :surround="surround" />
     </UPageBody>
 
-    <template
-      v-if="page?.body?.toc?.links?.length"
-      #right
-    >
-      <UContentToc
-        :title="toc?.title"
-        :links="page.body?.toc?.links"
-      >
-        <template
-          v-if="toc?.bottom"
-          #bottom
-        >
+    <template v-if="page?.body?.toc?.links?.length" #right>
+      <UContentToc :title="appConfig.toc?.title" :links="page.body?.toc?.links">
+        <template v-if="appConfig.toc?.bottom" #bottom>
           <div
             class="hidden lg:block space-y-6"
             :class="{ '!mt-6': page.body?.toc?.links?.length }"
           >
-            <USeparator
-              v-if="page.body?.toc?.links?.length"
-              type="dashed"
-            />
+            <USeparator v-if="page.body?.toc?.links?.length" type="dashed" />
 
-            <UPageLinks
-              :title="toc.bottom.title"
-              :links="links"
-            />
+            <UPageLinks :title="appConfig.toc.bottom.title" :links="links" />
           </div>
         </template>
       </UContentToc>