完成布局

app/app.vue

@@ -50,13 +50,12 @@ provide('navigation', navigation)
 <template>
   <UApp>
     <NuxtLoadingIndicator />
-
+    <AppHeader />
     <UMain>
       <NuxtLayout>
         <NuxtPage />
       </NuxtLayout>
     </UMain>
-
     <ClientOnly>
       <LazyUContentSearch
         :files="files"

app/components/AppSidebar.vue

@@ -48,20 +48,20 @@
           <div>
             <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-gray-50 dark:hover:bg-gray-800 hover:shadow-sm transition-all duration-200"
+              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="uim:house-user" class="text-primary mr-2" size="20" />
+              <Icon name="lucide-home" class="text-primary mr-2" size="20" />
               站点首页
             </NuxtLink>
           </div>
 
 
         <!-- 分隔线 -->
-        <div class="flex items-center px-6 p-1 ">
+        <div class="flex items-center px-8 p-1 ">
           <ContentDirectory />
         </div>
 

app/components/ContentDirectory.vue

@@ -3,6 +3,7 @@
       <UContentNavigation 
         :navigation="directoryNavigation" 
         highlight 
+        
         color="primary"
         variant="pill"
       />

app/components/auth/login.vue

@@ -0,0 +1,42 @@
+<script setup lang="ts">
+const providers = ref([
+  {
+    label: 'Google',
+    icon: 'i-simple-icons-google',
+    color: 'neutral',
+    variant: 'subtle'
+  },
+  {
+    label: 'GitHub',
+    icon: 'i-simple-icons-github',
+    color: 'neutral',
+    variant: 'subtle'
+  }
+])
+const fields = ref([
+  {
+    name: 'email',
+    type: 'text',
+    label: 'Email'
+  },
+  {
+    name: 'password',
+    type: 'password',
+    label: 'Password'
+  }
+])
+</script>
+
+<template>
+  <UAuthForm
+    class="max-w-md"
+    title="Login"
+    description="Enter your credentials to access your account."
+    icon="i-lucide-user"
+    :fields="fields"
+    :providers="providers"
+    :separator="{
+      icon: 'i-lucide-user'
+    }"
+  />
+</template>

app/error.vue

@@ -1,42 +1,57 @@
 <script setup lang="ts">
-import type { NuxtError } from '#app'
+import type { NuxtError } from "#app";
+
+definePageMeta({
+  layout: "default",
+});
 
 defineProps<{
-  error: NuxtError
-}>()
+  error: NuxtError;
+}>();
 
 useHead({
   htmlAttrs: {
-    lang: 'en'
-  }
-})
+    lang: "zh-CN",
+  },
+});
 
 useSeoMeta({
-  title: 'Page not found',
-  description: 'We are sorry but this page could not be found.'
-})
+  title: "Page not found",
+  description: "We are sorry but this page could not be found.",
+});
 
-const { data: navigation } = await useAsyncData('navigation', () => queryCollectionNavigation('docs'))
-const { data: files } = useLazyAsyncData('search', () => queryCollectionSearchSections('docs'), {
-  server: false
-})
+const { data: navigation } = await useAsyncData("navigation", () =>
+  queryCollectionNavigation("docs"),
+);
+const { data: files } = useLazyAsyncData(
+  "search",
+  () => queryCollectionSearchSections("docs"),
+  {
+    server: false,
+  },
+);
 
-provide('navigation', navigation)
+provide("navigation", navigation);
 </script>
 
 <template>
   <UApp>
     <AppHeader />
 
-    <UError :error="error" />
+    <UError
+      :error="error"
+      :clear="{
+        size: 'xl',
+        icon: 'i-lucide-arrow-left',
+        class: 'rounded-full',
+      }"
+      redirect="/"
+    />
 
     <AppFooter />
 
     <ClientOnly>
-      <LazyUContentSearch
-        :files="files"
-        :navigation="navigation"
-      />
+      <LazyUContentSearch :files="files" :navigation="navigation" />
     </ClientOnly>
   </UApp>
 </template>

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

@@ -18,11 +18,52 @@ const pageFontSizeClass = computed(() => {
   return `text-${selectedFontSize.value}`
 })
 
-const { data: page } = await useAsyncData(route.path, () => queryCollection('docs').path(route.path).first())
+// 根据路由参数构建内容路径
+const path = computed(() => {
+  const slug = route.params.slug;
+  
+  // 处理 slug 参数
+  if (!slug) {
+    return '/'; // 如果没有 slug，返回根路径
+  }
+  
+  const pathValue = Array.isArray(slug) ? slug.join("/") : slug;
+  
+  // 确保路径以 / 开头，不以 / 结尾
+  const normalizedPath = `/${pathValue}`.replace(/\/+$/, ""); // 使用 /+ 匹配多个连续的斜杠
+  
+  return normalizedPath;
+});
+
+// URL 解码并验证路径
+const queryPath = computed(() => {
+  try {
+    return decodeURIComponent(path.value);
+  } catch (error) {
+    console.error('URL decode error:', error);
+    return path.value; // 如果解码失败，返回原始路径
+  }
+});
+
+
+const { data: page } = await useAsyncData(
+  `page-${route.path}`, // 使用更具体的 key
+  () => queryCollection('docs').path(queryPath.value).first(),
+  {
+    default: () => null // 提供默认值
+  }
+);
+
 if (!page.value) {
-  throw createError({ statusCode: 404, statusMessage: 'Page not found', fatal: true })
+  throw createError({ 
+    statusCode: 404, 
+    statusMessage: '文档不存在', 
+    message: '当前页面不存在，请您检查路径是否正确',
+    fatal: true 
+  });
 }
 
+
 const { data: surround } = await useAsyncData(`${route.path}-surround`, () => {
   return queryCollectionItemSurroundings('docs', route.path, {
     fields: ['description']

app/pages/index.vue

@@ -1,4 +1,8 @@
 <script setup lang="ts">
+definePageMeta({
+  layout: 'default'
+})
+
 const { data: page } = await useAsyncData('index', () => queryCollection('landing').path('/').first())
 if (!page.value) {
   throw createError({ statusCode: 404, statusMessage: 'Page not found', fatal: true })

app/pages/login.vue

@@ -1,96 +0,0 @@
-<template>
-  <div class="min-h-screen flex items-center justify-center bg-gray-50 dark:bg-gray-900 py-12 px-4 sm:px-6 lg:px-8">
-    <div class="max-w-md w-full space-y-8">
-      <div>
-        <h2 class="mt-6 text-center text-3xl font-extrabold text-gray-900 dark:text-white">
-          登录您的账户
-        </h2>
-        <p class="mt-2 text-center text-sm text-gray-600 dark:text-gray-300">
-          或
-          <NuxtLink to="/register" class="font-medium text-blue-600 hover:text-blue-500">
-            创建新账户
-          </NuxtLink>
-        </p>
-      </div>
-      <form class="mt-8 space-y-6" @submit.prevent="handleLogin">
-        <div class="rounded-md shadow-sm -space-y-px">
-          <div>
-            <label for="email" class="sr-only">邮箱地址</label>
-            <input 
-              id="email" 
-              v-model="email" 
-              type="email" 
-              required 
-              class="appearance-none rounded-none relative block w-full px-3 py-2 border border-gray-300 placeholder-gray-500 text-gray-900 rounded-t-md focus:outline-none focus:ring-blue-500 focus:border-blue-500 focus:z-10 sm:text-sm" 
-              placeholder="邮箱地址"
-            >
-          </div>
-          <div>
-            <label for="password" class="sr-only">密码</label>
-            <input 
-              id="password" 
-              v-model="password" 
-              type="password" 
-              required 
-              class="appearance-none rounded-none relative block w-full px-3 py-2 border border-gray-300 placeholder-gray-500 text-gray-900 rounded-b-md focus:outline-none focus:ring-blue-500 focus:border-blue-500 focus:z-10 sm:text-sm" 
-              placeholder="密码"
-            >
-          </div>
-        </div>
-
-        <div class="flex items-center justify-between">
-          <div class="flex items-center">
-            <input 
-              id="remember-me" 
-              v-model="rememberMe" 
-              type="checkbox" 
-              class="h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300 rounded"
-            >
-            <label for="remember-me" class="ml-2 block text-sm text-gray-900 dark:text-gray-300">
-              记住我
-            </label>
-          </div>
-
-          <div class="text-sm">
-            <a href="#" class="font-medium text-blue-600 hover:text-blue-500">
-              忘记密码？
-            </a>
-          </div>
-        </div>
-
-        <div>
-          <button 
-            type="submit" 
-            class="group relative w-full flex justify-center py-2 px-4 border border-transparent text-sm font-medium rounded-md text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500"
-          >
-            <span class="absolute left-0 inset-y-0 flex items-center pl-3">
-              <svg class="h-5 w-5 text-blue-500 group-hover:text-blue-400" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
-                <path fill-rule="evenodd" d="M5 9V7a5 5 0 0110 0v2a2 2 0 012 2v5a2 2 0 01-2 2H5a2 2 0 01-2-2v-5a2 2 0 012-2zm8-2v2H7V7a3 3 0 016 0z" clip-rule="evenodd" />
-              </svg>
-            </span>
-            登录
-          </button>
-        </div>
-      </form>
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-const email = ref('')
-const password = ref('')
-const rememberMe = ref(false)
-
-const handleLogin = () => {
-  // TODO: Implement actual login logic
-  console.log('Login attempt:', { email: email.value, password: password.value, rememberMe: rememberMe.value })
-  
-  // For demo purposes, redirect to home
-  navigateTo('/')
-}
-
-useSeoMeta({
-  title: '登录 - Easy Docs',
-  description: '登录您的 Easy Docs 账户'
-})
-</script>