准备融入shadcnui

基本完成初步框架
修改首页卡片
2025-07-27 00:23:30 +08:00 · 2025-07-27 00:09:44 +08:00 · 2025-07-26 23:04:44 +08:00 · 2025-07-26 21:01:45 +08:00 · 2025-07-26 20:35:14 +08:00 · 2025-07-26 20:07:10 +08:00
22 changed files with 800 additions and 480 deletions
--- a/app/app.config.ts
+++ b/app/app.config.ts
@@ -22,12 +22,6 @@ export default defineAppConfig({
        close: 'absolute top-4 end-4'
      },
      variants: {
-        transition: {
-          true: {
-            overlay: 'data-[state=open]:animate-[fade-in_200ms_ease-out] data-[state=closed]:animate-[fade-out_200ms_ease-in]',
-            content: 'data-[state=open]:animate-[scale-in_200ms_ease-out] data-[state=closed]:animate-[scale-out_200ms_ease-in]'
-          }
-        },
        fullscreen: {
          true: {
            content: 'inset-0'
@@ -43,6 +37,215 @@ export default defineAppConfig({
        root: 'border-t border-default',
        left: 'text-sm text-muted'
      }
+    },
+    pageCard: {
+      slots: {
+        root: 'relative flex rounded-lg',
+        spotlight: 'absolute inset-0 rounded-[inherit] pointer-events-none bg-default/90',
+        container: 'relative flex flex-col flex-1 lg:grid gap-x-8 gap-y-4 p-4 sm:p-6',
+        wrapper: 'flex flex-col flex-1 items-start',
+        header: 'mb-4',
+        body: 'flex-1',
+        footer: 'pt-4 mt-auto',
+        leading: 'inline-flex items-center mb-2.5',
+        leadingIcon: 'size-5 shrink-0 text-primary',
+        title: 'text-base text-pretty font-semibold text-highlighted',
+        description: 'text-[15px] text-pretty'
+      },
+      variants: {
+        orientation: {
+          horizontal: {
+            container: 'lg:grid-cols-2 lg:items-center'
+          },
+          vertical: {
+            container: ''
+          }
+        },
+        reverse: {
+          true: {
+            wrapper: 'lg:order-last'
+          }
+        },
+        variant: {
+          solid: {
+            root: 'bg-inverted text-inverted',
+            title: 'text-inverted',
+            description: 'text-dimmed'
+          },
+          outline: {
+            root: 'bg-default ring ring-default',
+            description: 'text-muted'
+          },
+          soft: {
+            root: 'bg-elevated/50',
+            description: 'text-toned'
+          },
+          subtle: {
+            root: 'bg-elevated/50 ring ring-default',
+            description: 'text-toned'
+          },
+          ghost: {
+            description: 'text-muted'
+          },
+          naked: {
+            container: 'p-0 sm:p-0',
+            description: 'text-muted'
+          }
+        },
+        to: {
+          true: {
+            root: [
+              'transition'
+            ]
+          }
+        },
+        title: {
+          true: {
+            description: 'mt-1'
+          }
+        },
+        highlight: {
+          true: {
+            root: 'ring-2'
+          }
+        },
+        highlightColor: {
+          primary: '',
+          secondary: '',
+          success: '',
+          info: '',
+          warning: '',
+          error: '',
+          neutral: ''
+        },
+        spotlight: {
+          true: {
+            root: '[--spotlight-size:400px] before:absolute before:-inset-px before:pointer-events-none before:rounded-[inherit] before:bg-[radial-gradient(var(--spotlight-size)_var(--spotlight-size)_at_calc(var(--spotlight-x,0px))_calc(var(--spotlight-y,0px)),var(--spotlight-color),transparent_70%)]'
+          }
+        },
+        spotlightColor: {
+          primary: '',
+          secondary: '',
+          success: '',
+          info: '',
+          warning: '',
+          error: '',
+          neutral: ''
+        }
+      },
+      compoundVariants: [
+        {
+          variant: 'solid',
+          to: true,
+          class: {
+            root: 'hover:bg-inverted/90'
+          }
+        },
+        {
+          variant: 'outline',
+          to: true,
+          class: {
+            root: 'hover:bg-elevated/50'
+          }
+        },
+        {
+          variant: 'soft',
+          to: true,
+          class: {
+            root: 'hover:bg-elevated'
+          }
+        },
+        {
+          variant: 'subtle',
+          to: true,
+          class: {
+            root: 'hover:bg-elevated'
+          }
+        },
+        {
+          variant: 'subtle',
+          to: true,
+          highlight: false,
+          class: {
+            root: 'hover:ring-accented'
+          }
+        },
+        {
+          variant: 'ghost',
+          to: true,
+          class: {
+            root: 'hover:bg-elevated/50'
+          }
+        },
+        {
+          highlightColor: 'primary',
+          highlight: true,
+          class: {
+            root: 'ring-primary'
+          }
+        },
+        {
+          highlightColor: 'neutral',
+          highlight: true,
+          class: {
+            root: 'ring-inverted'
+          }
+        },
+        {
+          spotlightColor: 'primary',
+          spotlight: true,
+          class: {
+            root: '[--spotlight-color:var(--ui-primary)]'
+          }
+        },
+        {
+          spotlightColor: 'secondary',
+          spotlight: true,
+          class: {
+            root: '[--spotlight-color:var(--ui-secondary)]'
+          }
+        },
+        {
+          spotlightColor: 'success',
+          spotlight: true,
+          class: {
+            root: '[--spotlight-color:var(--ui-success)]'
+          }
+        },
+        {
+          spotlightColor: 'info',
+          spotlight: true,
+          class: {
+            root: '[--spotlight-color:var(--ui-info)]'
+          }
+        },
+        {
+          spotlightColor: 'warning',
+          spotlight: true,
+          class: {
+            root: '[--spotlight-color:var(--ui-warning)]'
+          }
+        },
+        {
+          spotlightColor: 'error',
+          spotlight: true,
+          class: {
+            root: '[--spotlight-color:var(--ui-error)]'
+          }
+        },
+        {
+          spotlightColor: 'neutral',
+          spotlight: true,
+          class: {
+            root: '[--spotlight-color:var(--ui-bg-inverted)]'
+          }
+        }
+      ],
+      defaultVariants: {
+        variant: 'outline',
+        highlightColor: 'primary',
+        spotlightColor: 'primary'
+      }
    }
  },
  seo: {
--- a/app/components/AppHeader.vue
+++ b/app/components/AppHeader.vue
@@ -1,9 +1,14 @@
 <script setup lang="ts">
+// import type { NavigationMenuItem } from '@nuxt/ui'
+import type { ContentNavigationItem } from "@nuxt/content";
+const navigation = inject<Ref<ContentNavigationItem[]>>("navigation");
+
 const isSettingsOpen = ref(false);
 const isLoginModalOpen = ref(false);
 const isRegisterModalOpen = ref(false);

-const { header } = useAppConfig();
+// const { header } = useAppConfig();
+

 // 定义 props 来接收侧边栏状态和切换函数
 interface Props {
@@ -11,9 +16,9 @@ interface Props {
  toggleSidebar?: () => void;
 }

-const props = withDefaults(defineProps<Props>(), {
+const Props = withDefaults(defineProps<Props>(), {
  isSidebarOpen: false,
-  toggleSidebar: () => {},
+  toggleSidebar: () => { },
 });

 // 登录注册函数
@@ -27,97 +32,61 @@ const handleLoginRegister = (type: "login" | "register") => {
 </script>

 <template>
-  <Uheader
-    class="header bg-gray-50 dark:bg-gray-900 border-b border-gray-200 dark:border-gray-800 sticky top-0 z-50"
-  >
-    <div class="px-2 sm:px-4 lg:px-6">
-      <div class="flex justify-between items-center h-12">
-        <!-- 汉堡菜单按钮 - 只在移动端显示 -->
-        <button
-          @click="
-            () => {
-              console.log('汉堡按钮被点击');
-              props.toggleSidebar();
-            }
-          "
-          class="lg:hidden p-2 rounded-md text-gray-500 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors"
-          aria-label="打开导航菜单"
-        >
-          <svg
-            class="w-5 h-5"
-            fill="none"
-            stroke="currentColor"
-            viewBox="0 0 24 24"
-            :class="{ 'rotate-180': props.isSidebarOpen }"
-          >
-            <path
-              v-if="!props.isSidebarOpen"
-              stroke-linecap="round"
-              stroke-linejoin="round"
-              stroke-width="2"
-              d="M4 6h16M4 12h16M4 18h16"
-            />
-            <path
-              v-else
-              stroke-linecap="round"
-              stroke-linejoin="round"
-              stroke-width="2"
-              d="M6 18L18 6M6 6l12 12"
-            />
-          </svg>
-        </button>
+  <UHeader toggle-side="left" title="Estel Docs" mode="modal" class="bg-gray-50 dark:bg-gray-900">

-        <UContentSearchButton v-if="header?.search" class="lg:hidden" />
-        <div class="ml-auto flex items-center space-x-2">
-          <UColorModeSwitch />
+    <template #title>
+      <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" />
+    </template>

-          <!-- Settings Button -->
-          <button
-            class="ml-auto p-2 rounded-md text-gray-500 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors"
-            title="页面设置"
-            @click="isSettingsOpen = !isSettingsOpen"
-          >
-            <svg
-              class="w-5 h-5"
-              fill="none"
-              stroke="currentColor"
-              viewBox="0 0 24 24"
-            >
-              <path
-                stroke-linecap="round"
-                stroke-linejoin="round"
-                stroke-width="2"
-                d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z"
-              />
-              <path
-                stroke-linecap="round"
-                stroke-linejoin="round"
-                stroke-width="2"
-                d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"
-              />
+    <template #right>
+      <UContentSearchButton class="lg:hidden" />
+      <UColorModeSwitch />
+      <button
+            class=" p-2 rounded-md text-gray-500 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors"
+            title="页面设置" @click="isSettingsOpen = !isSettingsOpen">
+            <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+                d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z" />
+              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+                d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
            </svg>
          </button>
-        </div>
-        <!-- User Actions - Mobile and Desktop -->
-        <div class="flex items-center space-x-2">
-          <button
-            @click="handleLoginRegister('login')"
-            class="px-3 py-2 text-sm font-medium text-gray-700 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white transition-colors"
-          >
+
+      <UTooltip text="Open on GitHub" :kbds="['meta', 'G']">
+        <UButton
+          color="neutral"
+          variant="ghost"
+          to="https://github.com/nuxt/ui"
+          target="_blank"
+          icon="i-simple-icons-github"
+          aria-label="GitHub"
+        />
+      </UTooltip>
+      <div class="flex items-center space-x-2">
+          <button @click="handleLoginRegister('login')"
+            class="px-3 py-2 text-sm font-medium text-gray-700 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white transition-colors">
            登录
          </button>
-          <button
-            @click="handleLoginRegister('register')"
-            class="text-sm font-medium text-white bg-primary rounded-md px-3 py-2 hover:bg-primary-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary transition-colors"
-          >
+          <button @click="handleLoginRegister('register')"
+            class="text-sm font-medium text-white bg-primary rounded-md px-3 py-2 hover:bg-primary-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary transition-colors">
            注册
          </button>
        </div>
-      </div>
-    </div>
-    <!-- Theme Settings Panel -->
-    <ThemeSettings :is-open="isSettingsOpen" @close="isSettingsOpen = false" />
-  </Uheader>
+    </template>
+
+
+  </UHeader>
+
+  <!-- Theme Settings Panel -->
+  <ThemeSettings :is-open="isSettingsOpen" @close="isSettingsOpen = false" />

  <!-- 登录模态框 -->
  <UModal v-model:open="isLoginModalOpen" title="登录" :dismissible="false">
--- a/app/components/AppSidebar.vue
+++ b/app/components/AppSidebar.vue
@@ -1,144 +1,55 @@
 <template>
-  <aside
-    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
-          v-if="header?.search"
-          :collapsed="false"
-          loading="true"
-          label="搜索文档"
-          description="请输入关键词"
-          class="w-full"
-          color="primary"
-        />
-      </ClientOnly>
-    </div>
-
-    <!-- 可滚动的导航区域 -->
+  <UPage>
    <div
-      class=" h-full overflow-y-auto "
+      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>

-    >
+      <!-- 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="/"
+          <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':
+              ' text-blue-600 dark:text-blue-400 ':
                $route.path === '/',
-            }"
-          >
+            }">
            <Icon name="lucide-home" class="text-primary mr-2" size="20" />
            站点首页
          </NuxtLink>
-        </div>
-
-        <!-- 总目录及展示页导航 -->
-        <div class="flex items-center px-8 p-1">
-          <ContentDirectory />
+          <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-4 uppercase tracking-wider border-t border-gray-200 dark:border-gray-700 w-7/9 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"
-                :ui="{
-                  root: '',
-                  content: '',
-                  list: 'group relative -mx-5 -mt-3',
-                  item: '',
-                  listWithChildren: 'ms-3 border-s border-default',
-                  itemWithChildren: 'flex flex-col',
-                  trigger: 'font-semibold',
-                  link: '',
-                  linkLeadingIcon: 'shrink-0 size-5',
-                  linkTrailing: 'ms-auto inline-flex gap-1.5 items-center',
-                  linkTrailingBadge: 'shrink-0',
-                  linkTrailingBadgeSize: 'sm',
-                  linkTrailingIcon: 'size-5 transform transition-transform duration-200 shrink-0 group-data-[state=open]:rotate-90',
-                  linkTitle: '',
-                  linkTitleExternalIcon: 'size- align-top text-dimmed'
-                }"
-              />
-
-
+        <div class="mt-6 flex items-center justify-start pl-4 w-full">
+            <UContentNavigation highlight :navigation="navigation" color="primary" type="single" variant="pill" />
        </div>
-
+      </div>
    </div>
-  </aside>
+  </UPage>
 </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>
--- a/app/components/ContentDirectory.vue
+++ b/app/components/ContentDirectory.vue
@@ -5,23 +5,6 @@
      highlight 
      color="primary"
      variant="pill"
-      :ui="{
-        root: '',
-        content: 'data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none',
-        list: 'isolate -mx-2.5 -mt-1.5',
-        item: '',
-        listWithChildren: 'ms-5 border-s border-default',
-        itemWithChildren: 'flex flex-col data-[state=open]:mb-1.5',
-        trigger: 'font-semibold',
-        link: 'group relative w-full px-2.5 py-1.5 before:inset-y-px before:inset-x-0 flex items-center gap-1.5 text-sm before:absolute before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2',
-        linkLeadingIcon: 'shrink-0 size-5',
-        linkTrailing: 'ms-auto inline-flex gap-1.5 items-center',
-        linkTrailingBadge: 'shrink-0',
-        linkTrailingBadgeSize: 'sm',
-        linkTrailingIcon: 'size-5 transform transition-transform duration-200 shrink-0 group-data-[state=open]:rotate-180',
-        linkTitle: 'truncate',
-        linkTitleExternalIcon: 'size-3 align-top text-dimmed'
-      }"
    />
  </div>
 </template>
--- a/app/components/IndexCard.vue
+++ b/app/components/IndexCard.vue
@@ -0,0 +1,88 @@
+<template>
+    <div class="w-full bg-gray-50 dark:bg-gray-900 min-h-screen mt-4">
+        <!-- 响应式卡片网格 -->
+        <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4 max-w-8xl mx-auto">
+            <div v-for="item in firstLevelItems" :key="item.path"
+                class="bg-white dark:bg-gray-800 rounded-lg border border-gray-200 dark:border-gray-700 p-5 sm:p-6 shadow-sm hover:shadow-md transition-all duration-200 cursor-pointer"
+                @click="navigateTo(item.path)">
+                
+                <!-- 卡片头部 -->
+                <div class="flex items-center justify-between mb-1">
+                    <h2 class="text-xl sm:text-xl lg:text-2xl font-bold text-gray-900 dark:text-white leading-tight">
+                        {{ item.title }}
+                    </h2>
+                    <span class="text-sm sm:text-base lg:text-lg text-gray-600 dark:text-gray-400 font-normal">
+                        <sum class="text-primary mr-0.3">{{ getChildrenCount(item) }}</sum>篇
+                    </span>
+                </div>
+
+                <!-- 子页面列表 -->
+                <div v-if="getChildrenTitles(item).length > 0" class="">
+                    <div v-for="(child, index) in getChildrenWithIcons(item).slice(0, 5)" :key="index"
+                        class="flex items-center justify-between 
+                        text-sm sm:text-base lg:text-lg text-gray-700 dark:text-gray-300
+                         hover:text-blue-600 dark:hover:text-blue-400 
+                         transition-colors duration-200 py-1
+                         border-b border-gray-200 dark:border-gray-700 pt-2">
+                         
+                        <div class="flex items-center flex-1 min-w-0 pl-1 ">
+                            <Icon :name="child.icon || 'i-lucide-file-text'" class="mr-2 text-gray-400" size="14" />
+                            <span class="text-base font-sans">{{ child.title }}</span>
+                        </div>
+                        <Icon name="i-lucide-chevron-right" class="text-gray-400 flex-shrink-0 ml-2" size="16" />
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script setup lang="ts">
+import type { ContentNavigationItem } from "@nuxt/content";
+
+const navigation = inject<Ref<ContentNavigationItem[]>>("navigation");
+
+// 计算属性：提取第一级数据
+const firstLevelItems = computed(() => {
+    if (!navigation?.value) return [];
+    return navigation.value
+        .filter(item => item.title && item.path)
+        .map(item => ({
+            ...item,
+            description: item.description,
+            icon: item.icon || 'i-lucide-book-open'
+        }));
+});
+
+// 获取子页面数量
+const getChildrenCount = (item: ContentNavigationItem) => {
+    return item.children?.length || 0;
+};
+
+// 获取子页面标题列表
+const getChildrenTitles = (item: ContentNavigationItem) => {
+    if (!item.children) return [];
+    return item.children.map(child => child.title).filter(Boolean);
+};
+
+// 获取子页面数据（包含图标）
+const getChildrenWithIcons = (item: ContentNavigationItem) => {
+    if (!item.children) return [];
+    return item.children.filter(child => child.title);
+};
+
+// 获取描述信息
+const getDescription = (item: ContentNavigationItem) => {
+    if (item.children && item.children.length > 0) {
+        return `${item.children.length} 个子页面`;
+    }
+    return "文档页面";
+};
+
+// 导航方法
+const navigateTo = (path: string) => {
+    if (path) {
+        window.location.href = path;
+    }
+};
+</script>
--- a/app/components/IndexHero.vue
+++ b/app/components/IndexHero.vue
@@ -0,0 +1,22 @@
+<script setup lang="ts">
+// 无需额外的脚本逻辑
+</script>
+
+<template>
+    <div class="w-full top-0 left-0 bg-gray-50 dark:bg-gray-900">
+        <!-- 欢迎卡片 -->
+        <div
+            class="bg-slate-200 dark:bg-slate-600 rounded-lg border border-gray-200 dark:border-gray-700 p-2 sm:p-4 shadow-sm">
+
+            <h1 class="text-xl font-bold text-gray-900 dark:text-white mb-2">
+                Hi 👋, 欢迎使用简单文档系统
+            </h1>
+            <!-- 编号列表 -->
+            <div class="mt-2 text-base text-gray-700 dark:text-gray-300">
+                1. 登录网站！<br>
+                2. 创建文档，为文档添加文章！<br>
+                3. 拖拽文章标题进行排序，分享文档！
+            </div>
+        </div>
+    </div>
+</template>
--- a/app/components/LogoPro.vue
+++ b/app/components/LogoPro.vue
@@ -1,52 +1,11 @@
 <template>
-  <svg
-    width="1352"
-    height="200"
-    viewBox="0 0 1352 200"
-    fill="none"
-    xmlns="http://www.w3.org/2000/svg"
-  >
-    <path
-      d="M377 200C379.16 200 381 198.209 381 196V103C381 103 386 112 395 127L434 194C435.785 197.74 439.744 200 443 200H470V50H443C441.202 50 439 51.4941 439 54V148L421 116L385 55C383.248 51.8912 379.479 50 376 50H350V200H377Z"
-      fill="currentColor"
-    />
-    <path
-      d="M726 92H739C742.314 92 745 89.3137 745 86V60H773V92H800V116H773V159C773 169.5 778.057 174 787 174H800V200H783C759.948 200 745 185.071 745 160V116H726V92Z"
-      fill="currentColor"
-    />
-    <path
-      d="M591 92V154C591 168.004 585.742 179.809 578 188C570.258 196.191 559.566 200 545 200C530.434 200 518.742 196.191 511 188C503.389 179.809 498 168.004 498 154V92H514C517.412 92 520.769 92.622 523 95C525.231 97.2459 526 98.5652 526 102V154C526 162.059 526.457 167.037 530 171C533.543 174.831 537.914 176 545 176C552.217 176 555.457 174.831 559 171C562.543 167.037 563 162.059 563 154V102C563 98.5652 563.769 96.378 566 94C567.96 91.9107 570.028 91.9599 573 92C573.411 92.0055 574.586 92 575 92H591Z"
-      fill="currentColor"
-    />
-    <path
-      d="M676 144L710 92H684C680.723 92 677.812 93.1758 676 96L660 120L645 97C643.188 94.1758 639.277 92 636 92H611L645 143L608 200H634C637.25 200 640.182 196.787 642 194L660 167L679 195C680.818 197.787 683.75 200 687 200H713L676 144Z"
-      fill="currentColor"
-    />
-    <path
-      d="M168 200H279C282.542 200 285.932 198.756 289 197C292.068 195.244 295.23 193.041 297 190C298.77 186.959 300.002 183.51 300 179.999C299.998 176.488 298.773 173.04 297 170.001L222 41C220.23 37.96 218.067 35.7552 215 34C211.933 32.2448 207.542 31 204 31C200.458 31 197.067 32.2448 194 34C190.933 35.7552 188.77 37.96 187 41L168 74L130 9.99764C128.228 6.95784 126.068 3.75491 123 2C119.932 0.245087 116.542 0 113 0C109.458 0 106.068 0.245087 103 2C99.9323 3.75491 96.7717 6.95784 95 9.99764L2 170.001C0.226979 173.04 0.00154312 176.488 1.90993e-06 179.999C-0.0015393 183.51 0.229648 186.959 2 190C3.77035 193.04 6.93245 195.244 10 197C13.0675 198.756 16.4578 200 20 200H90C117.737 200 137.925 187.558 152 164L186 105L204 74L259 168H186L168 200ZM89 168H40L113 42L150 105L125.491 147.725C116.144 163.01 105.488 168 89 168Z"
-      fill="var(--ui-primary)"
-    />
-    <path
-      d="M958 60.0001H938C933.524 60.0001 929.926 59.9395 927 63C924.074 65.8905 925 67.5792 925 72V141C925 151.372 923.648 156.899 919 162C914.352 166.931 908.468 169 899 169C889.705 169 882.648 166.931 878 162C873.352 156.899 873 151.372 873 141V72.0001C873 67.5793 872.926 65.8906 870 63.0001C867.074 59.9396 863.476 60.0001 859 60.0001H840V141C840 159.023 845.016 173.458 855 184C865.156 194.542 879.893 200 899 200C918.107 200 932.844 194.542 943 184C953.156 173.458 958 159.023 958 141V60.0001Z"
-      fill="currentColor"
-    />
-    <path
-      fill-rule="evenodd"
-      clip-rule="evenodd"
-      d="M1000 60.0233L1020 60V77L1020 128V156.007L1020 181L1020 189.004C1020 192.938 1019.98 194.429 1017 197.001C1014.02 199.725 1009.56 200 1005 200H986.001V181.006L986 130.012V70.0215C986 66.1576 986.016 64.5494 989 62.023C991.819 59.6358 995.437 60.0233 1000 60.0233Z"
-      fill="currentColor"
-    />
-    <path
-      d="M1060 200V60H1117C1126.67 60 1134.98 61.2896 1142 65C1149.16 68.7104 1155.29 74.3744 1159 81C1162.71 87.6256 1164 95.3867 1164 104C1164 112.481 1162.71 120.374 1159 127C1155.29 133.626 1149.16 138.157 1142 142C1134.98 145.71 1126.67 148 1117 148H1090V200H1060ZM1115 123C1121.63 123 1126.69 121.578 1130 118C1133.31 114.29 1135 109.433 1135 104C1135 98.567 1133.31 93.5778 1130 90C1126.69 86.2896 1121.63 85 1115 85H1090V123H1115Z"
-      fill="var(--ui-primary)"
-    />
-    <path
-      d="M1226 123C1219.37 123 1214.31 124.965 1211 130C1207.69 135.035 1206 142.122 1206 151V200H1178V100H1200C1203.31 100 1206 102.686 1206 106V116C1208.65 109.904 1211.16 106.518 1215 104C1218.98 101.482 1224.77 100 1231 100H1242V123H1226Z"
-      fill="var(--ui-primary)"
-    />
-    <path
-      d="M1299 200C1288.93 200 1280.08 197.373 1272 193C1263.92 188.495 1257.51 182.818 1253 175C1248.49 167.049 1246 157.806 1246 148C1246 138.194 1248.49 129.818 1253 122C1257.51 114.049 1263.92 107.373 1272 103C1280.08 98.4946 1288.93 97 1299 97C1309.07 97 1318.92 98.4946 1327 103C1335.08 107.373 1340.49 114.049 1345 122C1349.51 129.818 1352 138.194 1352 148C1352 157.806 1349.51 167.049 1345 175C1340.49 182.818 1335.08 188.495 1327 193C1318.92 197.373 1309.07 200 1299 200ZM1299 176C1306.42 176 1312.36 173.168 1317 168C1321.64 162.832 1324 156.216 1324 148C1324 139.652 1321.64 133.168 1317 128C1312.36 122.832 1306.42 120 1299 120C1291.58 120 1285.64 122.832 1281 128C1276.36 133.168 1274 139.652 1274 148C1274 156.216 1276.36 162.832 1281 168C1285.64 173.168 1291.58 176 1299 176Z"
-      fill="var(--ui-primary)"
-    />
-  </svg>
+  <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>
--- a/app/components/content/ProseH1.vue
+++ b/app/components/content/ProseH1.vue
@@ -0,0 +1,18 @@
+<template>
+  <h1 :id class="scroll-m-20 text-4xl font-extrabold tracking-tight lg:text-5xl">
+    <NuxtLink
+      v-if="generate"
+      :to="`#${id}`"
+    >
+      <slot />
+    </NuxtLink>
+    <slot v-else />
+  </h1>
+</template>
+
+<script setup lang="ts">
+const { id } = defineProps<{ id?: string }>();
+
+const { headings } = useRuntimeConfig().public.mdc;
+const generate = computed(() => id && ((typeof headings?.anchorLinks === 'boolean' && headings?.anchorLinks === true) || (typeof headings?.anchorLinks === 'object' && headings?.anchorLinks?.h1)));
+</script>
--- a/app/components/content/ProseH2.vue
+++ b/app/components/content/ProseH2.vue
@@ -0,0 +1,18 @@
+<template>
+  <h2 :id class="scroll-m-20 border-b pb-2 text-3xl font-semibold tracking-tight transition-colors [&:not(:first-child)]:mt-10">
+    <NuxtLink
+      v-if="id && generate"
+      :to="`#${id}`"
+    >
+      <slot />
+    </NuxtLink>
+    <slot v-else />
+  </h2>
+</template>
+
+<script setup lang="ts">
+const { id } = defineProps<{ id?: string }>();
+
+const { headings } = useRuntimeConfig().public.mdc;
+const generate = computed(() => id && ((typeof headings?.anchorLinks === 'boolean' && headings?.anchorLinks === true) || (typeof headings?.anchorLinks === 'object' && headings?.anchorLinks?.h2)));
+</script>
--- a/app/components/content/ProseH3.vue
+++ b/app/components/content/ProseH3.vue
@@ -0,0 +1,18 @@
+<template>
+  <h3 :id class="scroll-m-20 text-2xl font-semibold tracking-tight [&:not(:first-child)]:mt-8">
+    <NuxtLink
+      v-if="id && generate"
+      :to="`#${id}`"
+    >
+      <slot />
+    </NuxtLink>
+    <slot v-else />
+  </h3>
+</template>
+
+<script setup lang="ts">
+const { id } = defineProps<{ id?: string }>();
+
+const { headings } = useRuntimeConfig().public.mdc;
+const generate = computed(() => id && ((typeof headings?.anchorLinks === 'boolean' && headings?.anchorLinks === true) || (typeof headings?.anchorLinks === 'object' && headings?.anchorLinks?.h3)));
+</script>
--- a/app/components/content/ProseH4.vue
+++ b/app/components/content/ProseH4.vue
@@ -0,0 +1,18 @@
+<template>
+  <h4 :id class="scroll-m-20 text-xl font-semibold tracking-tight [&:not(:first-child)]:mt-6">
+    <NuxtLink
+      v-if="id && generate"
+      :to="`#${id}`"
+    >
+      <slot />
+    </NuxtLink>
+    <slot v-else />
+  </h4>
+</template>
+
+<script setup lang="ts">
+const { id } = defineProps<{ id?: string }>();
+
+const { headings } = useRuntimeConfig().public.mdc;
+const generate = computed(() => id && ((typeof headings?.anchorLinks === 'boolean' && headings?.anchorLinks === true) || (typeof headings?.anchorLinks === 'object' && headings?.anchorLinks?.h4)));
+</script>
--- a/app/components/content/ProseH5.vue
+++ b/app/components/content/ProseH5.vue
@@ -0,0 +1,18 @@
+<template>
+  <h5 :id class="scroll-m-20 text-lg font-semibold tracking-tight [&:not(:first-child)]:mt-6">
+    <NuxtLink
+      v-if="id && generate"
+      :to="`#${id}`"
+    >
+      <slot />
+    </NuxtLink>
+    <slot v-else />
+  </h5>
+</template>
+
+<script setup lang="ts">
+const { id } = defineProps<{ id?: string }>();
+
+const { headings } = useRuntimeConfig().public.mdc;
+const generate = computed(() => id && ((typeof headings?.anchorLinks === 'boolean' && headings?.anchorLinks === true) || (typeof headings?.anchorLinks === 'object' && headings?.anchorLinks?.h5)));
+</script>
--- a/app/components/content/ProseH6.vue
+++ b/app/components/content/ProseH6.vue
@@ -0,0 +1,18 @@
+<template>
+  <h6 :id class="scroll-m-20 text-lg font-semibold tracking-tight [&:not(:first-child)]:mt-6">
+    <NuxtLink
+      v-if="id && generate"
+      :to="`#${id}`"
+    >
+      <slot />
+    </NuxtLink>
+    <slot v-else />
+  </h6>
+</template>
+
+<script setup lang="ts">
+const { id } = defineProps<{ id?: string }>();
+
+const { headings } = useRuntimeConfig().public.mdc;
+const generate = computed(() => id && ((typeof headings?.anchorLinks === 'boolean' && headings?.anchorLinks === true) || (typeof headings?.anchorLinks === 'object' && headings?.anchorLinks?.h6)));
+</script>
--- a/app/components/docs/DocsAsideLeftTop.vue
+++ b/app/components/docs/DocsAsideLeftTop.vue
@@ -0,0 +1,98 @@
+<script setup lang="ts">
+import type { NavigationMenuItem } from '@nuxt/ui'
+const route = useRoute()
+const items = ref<NavigationMenuItem[][]>([
+  [
+    {
+      label: 'Guide',
+      icon: 'i-lucide-book-open',
+    },
+    {
+      label: 'Composables',
+      icon: 'i-lucide-database',
+      children: [
+        {
+          label: 'defineShortcuts',
+          icon: 'i-lucide-file-text',
+          description: 'Define shortcuts for your application.',
+          to: '/composables/define-shortcuts'
+        },
+        {
+          label: 'useOverlay',
+          icon: 'i-lucide-file-text',
+          description: 'Display a modal/slideover within your application.',
+          to: '/composables/use-overlay'
+        },
+        {
+          label: 'useToast',
+          icon: 'i-lucide-file-text',
+          description: 'Display a toast within your application.',
+          to: '/composables/use-toast'
+        }
+      ]
+    },
+    {
+      label: 'Components',
+      icon: 'i-lucide-box',
+      to: '/components',
+      children: [
+        {
+          label: 'Link',
+          icon: 'i-lucide-file-text',
+          description: 'Use NuxtLink with superpowers.',
+          to: '/components/link'
+        },
+        {
+          label: 'Modal',
+          icon: 'i-lucide-file-text',
+          description: 'Display a modal within your application.',
+          to: '/components/modal'
+        },
+        {
+          label: 'NavigationMenu',
+          icon: 'i-lucide-file-text',
+          description: 'Display a list of links.',
+          to: '/components/navigation-menu'
+        },
+        {
+          label: 'Pagination',
+          icon: 'i-lucide-file-text',
+          description: 'Display a list of pages.',
+          to: '/components/pagination'
+        },
+        {
+          label: 'Popover',
+          icon: 'i-lucide-file-text',
+          description: 'Display a non-modal dialog that floats around a trigger element.',
+          to: '/components/popover'
+        },
+        {
+          label: 'Progress',
+          icon: 'i-lucide-file-text',
+          description: 'Show a horizontal bar to indicate task progression.',
+          to: '/components/progress'
+        }
+      ]
+    }
+  ],
+  // [
+  //   {
+  //     label: 'GitHub',
+  //     icon: 'i-simple-icons-github',
+  //     badge: '3.8k',
+  //     to: 'https://github.com/nuxt/ui',
+  //     target: '_blank',
+  //   },
+  //   {
+  //     label: 'Help',
+  //     icon: 'i-lucide-circle-help',
+  //     badge: '3.8k',
+  //     disabled: true
+  //   }
+  // ]
+])
+</script>
+
+<template>
+  <UNavigationMenu orientation="vertical" :items="items" class="w-full justify-center" color="primary" />
+</template>
--- a/app/components/docs/DocsAsideRightBottom.vue
+++ b/app/components/docs/DocsAsideRightBottom.vue
@@ -0,0 +1,17 @@
+<script setup lang="ts">
+const appConfig = useAppConfig()
+</script>
+
+<template>
+  <div
+    v-if="appConfig.toc?.bottom?.links?.length"
+    class="hidden lg:block space-y-6"
+  >
+    <USeparator type="dashed" />
+
+    <UPageLinks
+      :title="appConfig.toc?.bottom?.title || 'Links'"
+      :links="appConfig.toc?.bottom?.links"
+    />
+  </div>
+</template>
--- a/app/components/docs/DocsPageHeaderLinks.vue
+++ b/app/components/docs/DocsPageHeaderLinks.vue
@@ -0,0 +1,77 @@
+<script setup lang="ts">
+import { useClipboard } from '@vueuse/core'
+
+const route = useRoute()
+const toast = useToast()
+const { copy, copied } = useClipboard()
+
+const markdownLink = computed(() => `${window?.location?.origin}/raw${route.path}.md`)
+
+const items = [
+  {
+    label: 'Copy Markdown link',
+    icon: 'i-lucide-link',
+    onSelect() {
+      copy(markdownLink.value)
+
+      toast.add({
+        title: 'Markdown link copied to clipboard',
+        icon: 'i-lucide-check-circle',
+        color: 'success',
+      })
+    },
+  },
+  {
+    label: 'View as Markdown',
+    icon: 'i-simple-icons:markdown',
+    target: '_blank',
+    to: markdownLink.value,
+  },
+  {
+    label: 'Open in ChatGPT',
+    icon: 'i-simple-icons:openai',
+    target: '_blank',
+    to: `https://chatgpt.com/?hints=search&q=${encodeURIComponent(`Read ${markdownLink.value} so I can ask questions about it.`)}`,
+  },
+  {
+    label: 'Open in Claude',
+    icon: 'i-simple-icons:anthropic',
+    target: '_blank',
+    to: `https://claude.ai/new?q=${encodeURIComponent(`Read ${markdownLink.value} so I can ask questions about it.`)}`,
+  },
+]
+</script>
+
+<template>
+  <UButtonGroup size="sm">
+    <UButton
+      label="Copy page"
+      :icon="copied ? 'i-lucide-copy-check' : 'i-lucide-copy'"
+      color="neutral"
+      variant="outline"
+      :ui="{
+        leadingIcon: [copied ? 'text-primary' : 'text-neutral', 'size-3.5'],
+      }"
+      @click="copy(markdownLink)"
+    />
+
+    <UDropdownMenu
+      size="sm"
+      :items="items"
+      :content="{
+        align: 'end',
+        side: 'bottom',
+        sideOffset: 8,
+      }"
+      :ui="{
+        content: 'w-48',
+      }"
+    >
+      <UButton
+        icon="i-lucide-chevron-down"
+        color="neutral"
+        variant="outline"
+      />
+    </UDropdownMenu>
+  </UButtonGroup>
+</template>
--- a/app/layouts/default.vue
+++ b/app/layouts/default.vue
@@ -17,17 +17,16 @@
    <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"
      />
      
      <!-- 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">
+      <UMain class="flex-1 overflow-y-auto">
+        <div class="mx-auto px-4 sm:px-6 lg:px-8 py-6">
          <slot />
        </div>
-      </main>
+      </UMain>
      
      <!-- Footer -->
      <AppFooter />
@@ -47,16 +46,5 @@ const toggleSidebar = () => {
  isSidebarOpen.value = !isSidebarOpen.value
 }

-// 监听路由变化，在移动端自动关闭侧边栏
-const route = useRoute()
-const stopWatch = watch(() => route.path, () => {
-  if (isSidebarOpen.value) {
-    isSidebarOpen.value = false
-  }
-})

-// 组件卸载时清理监听器
-onUnmounted(() => {
-  stopWatch()
-})
 </script>
--- a/app/pages/[...slug].vue
+++ b/app/pages/[...slug].vue
@@ -21,17 +21,17 @@ const pageFontSizeClass = computed(() => {
 // 根据路由参数构建内容路径
 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;
 });

@@ -55,11 +55,11 @@ const { data: page } = await useAsyncData(
 );

 if (!page.value) {
-  throw createError({ 
-    statusCode: 404, 
-    statusMessage: '文档不存在', 
+  throw createError({
+    statusCode: 404,
+    statusMessage: '文档不存在',
    message: '当前页面不存在，请您检查路径是否正确',
-    fatal: true 
+    fatal: true
  });
 }

@@ -118,21 +118,11 @@ const links = computed(() => {

 <template>
  <UPage v-if="page" :class="pageFontSizeClass">
-    <UPageHeader
-      :title="page.title"
-      :description="page.description"
-      :headline="headline"
-      :ui="{
-        wrapper: 'flex-row items-center flex-wrap justify-between ',
-      }"
-    >
+    <UPageHeader :title="page.title" :description="page.description" :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"
-        />
+        <UButton v-for="(link, index) in page.links" :key="index" size="sm" v-bind="link" />

        <DocsPageHeaderLinks />
      </template>
@@ -143,25 +133,13 @@ const links = computed(() => {

      <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' }"
-          >
+          <UButton variant="link" color="neutral" :to="editLink" target="_blank" icon="i-lucide-pen"
+            :ui="{ leadingIcon: 'size-4' }">
            编辑页面
          </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' }"
-          >
+          <UButton variant="link" color="neutral" :to="`${appConfig.github.url}/issues/new/choose`" target="_blank"
+            icon="i-lucide-alert-circle" :ui="{ leadingIcon: 'size-4' }">
            提交问题
          </UButton>
        </div>
@@ -170,21 +148,18 @@ const links = computed(() => {
    </UPageBody>

    <template v-if="page?.body?.toc?.links?.length" #right>
-    <div class="fixed top-24 right-10 overflow-y-auto">
+      <div class="fixed top-24 right-15 w-auto">

-      <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-5': page.body?.toc?.links?.length }"
-          >
-            <USeparator v-if="page.body?.toc?.links?.length" type="dashed" />
+        <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-5': page.body?.toc?.links?.length }">
+              <USeparator v-if="page.body?.toc?.links?.length" type="dashed" />

-            <UPageLinks :title="appConfig.toc.bottom.title" :links="links" />
-          </div>
-        </template>
-      </UContentToc>
-    </div>
+              <UPageLinks :title="appConfig.toc.bottom.title" :links="links" />
+            </div>
+          </template>
+        </UContentToc>
+      </div>
    </template>
  </UPage>
 </template>
--- a/app/pages/index.vue
+++ b/app/pages/index.vue
@@ -3,13 +3,8 @@ 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 })
-}
-
-const title = page.value.seo?.title || page.value.title
-const description = page.value.seo?.description || page.value.description
+const title = "Estel Docs"
+const description = "Estel Docs"

 useSeoMeta({
  titleTemplate: '',
@@ -23,9 +18,6 @@ useSeoMeta({
 </script>

 <template>
-  <ContentRenderer
-    v-if="page"
-    :value="page"
-    :prose="false"
-  />
+  <IndexHero />
+  <IndexCard />
 </template>
--- a/content/1.简单文档/.navigation.yml
+++ b/content/1.简单文档/.navigation.yml
@@ -1,2 +1,3 @@
 title: 简单文档
-icon: i-lucide-book-open
+description: 一个简约但功能强大的开源文档系统
+icon: i-lucide-rocket
--- a/content/1.简单文档/1.index.md
+++ b/content/1.简单文档/1.index.md
@@ -1,6 +1,6 @@
 ---
-title: Introduction
-description: Welcome to Nuxt UI Pro documentation template.
+title: 入门指南
+description: 欢迎使用简单文档
 navigation:
  icon: i-lucide-house
 ---
@@ -9,14 +9,35 @@ This template is a ready-to-use documentation template made with [Nuxt UI Pro](h

 There are already many websites based on this template:

-::button-link{right-icon="lucide:arrow-up-right" to="/getting-started" target="_blank"}
-  Get Started
-::
-::button-link{left-icon="lucide:github" variant="outline" to="https://github.com/ZTL-UwU/shadcn-docs-nuxt" target="_blank"}
-  GitHub
-::
-::button-link{left-icon="lucide:ghost" variant="ghost" href="https://github.com/ZTL-UwU/shadcn-docs-nuxt" blank}
-  Ghost
+::UPageCard
+---
+icon: lucide:rocket
+---
+
+#title
+Card Title
+
+#description
+Description
+
+#content
+Beautifully designed **Nuxt Content** template with **shadcn-vue**. _Customizable. Compatible. Open Source._
+
+#highlight
+Tailwind CSS
+
+#highlight-color
+primary
+
+    title="Tailwind CSS"
+    description="Nuxt UI v3 integrates with latest Tailwind CSS v4, bringing significant improvements."
+    icon="i-simple-icons-tailwindcss"
+    orientation="horizontal"
+    highlight
+    highlight-color="primary"
+
+#footer
+Footer
 ::

 ::steps{level="4"}
--- a/content/1.简单文档/3.usage.md
+++ b/content/1.简单文档/3.usage.md
@@ -1,127 +1,35 @@
 ---
-title: Usage
+title: 进行测试
 description: Learn how to write and customize your documentation.
 navigation:
  icon: i-lucide-sliders
 ---

-This is only a basic example of what you can achieve with [Nuxt UI Pro](https://ui.nuxt.com/pro/guide), you can tweak it to match your needs. The template uses several Nuxt modules underneath like [`@nuxt/content`](https://content.nuxt.com) for the content and [`nuxt-og-image`](https://nuxtseo.com/og-image/getting-started/installation) for social previews.

-::tip
---
-target: _blank
-to: https://ui.nuxt.com/getting-started/installation/pro/nuxt
---
-Learn more on how to take the most out of Nuxt UI Pro!
+# 这是一个H1标签
+
+## 这是一个H2标签
+
+### 这是一个H3标签
+
+#### 这是一个H4标签
+
+##### 这是一个H5标签
+
+###### 这是一个H6标签
+
+
+
+
+
+
+
+
+
+::field{name="Field" type="string" defaultValue="'default'" required}
+The _description_ can be set as prop or in the default slot with full **markdown** support.
 ::

-## Writing content

-You can just start writing `.md` or `.yml` files in the [`content/`](https://content.nuxt.com/usage/content-directory) directory to have your pages updated. The navigation will be automatically generated in the left aside and in the mobile menu. You will also be able to go through your content with full-text search.

-## App Configuration

-In addition to `@nuxt/ui-pro` configuration through the `app.config.ts`, this template lets you customize the `Header`, `Footer` and the `Table of contents` components.
-
-### Header
-
-```ts [app.config.ts]
-export default defineAppConfig({
-  header: {
-    title: '',
-    to: '/',
-    // Logo configuration
-    logo: {
-      alt: '',
-      // Light mode
-      light: '',
-      // Dark mode
-      dark: ''
-    },
-    // Show or hide the search bar
-    search: true,
-    // Show or hide the color mode button
-    colorMode: true,
-    // Customize links
-    links: [{
-      'icon': 'i-simple-icons-github',
-      'to': 'https://github.com/nuxt-ui-pro/docs',
-      'target': '_blank',
-      'aria-label': 'GitHub'
-    }]
-  },
-})
-```
-
-### Footer
-
-```ts [app.config.ts]
-export default defineAppConfig({
-  footer: {
-    // Update bottom left credits
-    credits: `Copyright © ${new Date().getFullYear()}`,
-    // Show or hide the color mode button
-    colorMode: false,
-    // Customize links
-    links: [{
-      'icon': 'i-simple-icons-nuxtdotjs',
-      'to': 'https://nuxt.com',
-      'target': '_blank',
-      'aria-label': 'Nuxt Website'
-    }, {
-      'icon': 'i-simple-icons-discord',
-      'to': 'https://discord.com/invite/ps2h6QT',
-      'target': '_blank',
-      'aria-label': 'Nuxt UI on Discord'
-    }, {
-      'icon': 'i-simple-icons-x',
-      'to': 'https://x.com/nuxt_js',
-      'target': '_blank',
-      'aria-label': 'Nuxt on X'
-    }, {
-      'icon': 'i-simple-icons-github',
-      'to': 'https://github.com/nuxt/ui',
-      'target': '_blank',
-      'aria-label': 'Nuxt UI on GitHub'
-    }]
-  },
-})
-```
-
-### Table of contents
-
-```ts [app.config.ts]
-export default defineAppConfig({
-  toc: {
-    // Title of the main table of contents
-    title: 'Table of Contents',
-    // Customize links
-    bottom: {
-      // Title of the bottom table of contents
-      title: 'Community',
-      // URL of your repository content folder
-      edit: 'https://github.com/nuxt-ui-pro/docs/edit/main/content',
-      links: [{
-        icon: 'i-lucide-star',
-        label: 'Star on GitHub',
-        to: 'https://github.com/nuxt/ui',
-        target: '_blank'
-      }, {
-        icon: 'i-lucide-book-open',
-        label: 'Nuxt UI Pro docs',
-        to: 'https://ui.nuxt.com/getting-started/installation/pro/nuxt',
-        target: '_blank'
-      }, {
-        icon: 'i-simple-icons-nuxtdotjs',
-        label: 'Purchase a license',
-        to: 'https://ui.nuxt.com/pro/purchase',
-        target: '_blank'
-      }]
-    }
-  }
-})
-```
-
-::tip{target="_blank" to="https://content.nuxt.com/docs/studio/config"}
-This template integrates with Nuxt Studio, providing a visual interface for editing your documentation - perfect for non-technical contributors.
-::
Author	SHA1	Message	Date
estel	bb7d069e06	准备融入shadcnui	2025-07-27 00:23:30 +08:00
estel	e6e258c86e	基本完成初步框架	2025-07-27 00:09:44 +08:00
estel	e454f3f441	修改首页卡片	2025-07-26 23:04:44 +08:00
estel	063242ea77	修复所有vue vite警告	2025-07-26 21:01:45 +08:00
estel	620c1a7b35	新增docsAsideleftTop组件	2025-07-26 20:35:14 +08:00
estel	2a07a42ccd	修改移动端侧边导航栏	2025-07-26 20:07:10 +08:00
estel	e991e675aa	fix导航栏在移动端无法正常显示	2025-07-26 19:50:33 +08:00
estel	d6acaa9041	增加页面组件	2025-07-26 00:15:53 +08:00
estel	9264107b3c	fix nuxt ui 参数传递错误	2025-07-26 00:02:37 +08:00
estel	e6e27c8ccf	准备修复一些控制台警告	2025-07-25 23:47:01 +08:00