基本完成初步框架

app/components/AppHeader.vue

@@ -32,7 +32,7 @@ const handleLoginRegister = (type: "login" | "register") => {
 </script>
 
 <template>
-  <UHeader toggle-side="left" title="Estel Docs" mode="modal">
+  <UHeader toggle-side="left" title="Estel Docs" mode="modal" class="bg-gray-50 dark:bg-gray-900">
 
     <template #title>
       <h6></h6>

app/components/AppSidebar.vue

@@ -26,7 +26,7 @@
           <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" />
@@ -38,10 +38,10 @@
         </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">
+        <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>

app/components/IndexCard.vue

@@ -1,5 +1,5 @@
 <template>
-    <div class="w-full bg-gray-50 dark:bg-gray-900 min-h-screen p-2 sm:p-4 lg:p-2">
+    <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"

app/components/IndexHero.vue

@@ -1,25 +1,22 @@
 <script setup lang="ts">
-const links = ref([
+// 无需额外的脚本逻辑
-  {
-    label: 'Get started',
-    to: '/getting-started',
-    icon: 'i-lucide-square-play'
-  },
-  {
-    label: 'Learn more',
-    to: '/getting-started/theme',
-    color: 'neutral',
-    variant: 'subtle',
-    trailingIcon: 'i-lucide-arrow-right'
-  }
-])
 </script>
 
 <template>
-  <UPageHero
+    <div class="w-full top-0 left-0 bg-gray-50 dark:bg-gray-900">
-    headline="New release"
+        <!-- 欢迎卡片 -->
-    title="Ultimate Vue UI library"
+        <div
-    description="A Nuxt/Vue-integrated UI library providing a rich set of fully-styled, accessible and highly customizable components for building modern web applications."
+            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">
-    :links="links"
+
-  />
+            <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>

app/layouts/default.vue

@@ -23,7 +23,7 @@
       
       <!-- Main Content -->
       <UMain class="flex-1 overflow-y-auto">
-        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-6">
+        <div class="mx-auto px-4 sm:px-6 lg:px-8 py-6">
           <slot />
         </div>
       </UMain>

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({ 
+  throw createError({
-    statusCode: 404, 
+    statusCode: 404,
-    statusMessage: '文档不存在', 
+    statusMessage: '文档不存在',
     message: '当前页面不存在，请您检查路径是否正确',
-    fatal: true 
+    fatal: true
   });
 }
 
@@ -118,21 +118,11 @@ const links = computed(() => {
 
 <template>
   <UPage v-if="page" :class="pageFontSizeClass">
-    <UPageHeader
+    <UPageHeader :title="page.title" :description="page.description" :headline="headline" :ui="{
-      :title="page.title"
+      wrapper: 'flex-row items-center flex-wrap justify-between ',
-      :description="page.description"
+    }">
-      :headline="headline"
-      :ui="{
-        wrapper: 'flex-row items-center flex-wrap justify-between ',
-      }"
-    >
       <template #links>
-        <UButton
+        <UButton v-for="(link, index) in page.links" :key="index" size="sm" v-bind="link" />
-          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
+          <UButton variant="link" color="neutral" :to="editLink" target="_blank" icon="i-lucide-pen"
-            variant="link"
+            :ui="{ leadingIcon: 'size-4' }">
-            color="neutral"
-            :to="editLink"
-            target="_blank"
-            icon="i-lucide-pen"
-            :ui="{ leadingIcon: 'size-4' }"
-          >
             编辑页面
           </UButton>
           or
-          <UButton
+          <UButton variant="link" color="neutral" :to="`${appConfig.github.url}/issues/new/choose`" target="_blank"
-            variant="link"
+            icon="i-lucide-alert-circle" :ui="{ leadingIcon: 'size-4' }">
-            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">
+        <UContentToc :title="appConfig.toc?.title" :links="page.body?.toc?.links">
-        <template v-if="appConfig.toc?.bottom" #bottom>
+          <template v-if="appConfig.toc?.bottom" #bottom>
-          <div
+            <div class="hidden lg:block space-y-6 " :class="{ '!mt-5': page.body?.toc?.links?.length }">
-            class="hidden lg:block space-y-6 "
+              <USeparator v-if="page.body?.toc?.links?.length" type="dashed" />
-            :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" />
+              <UPageLinks :title="appConfig.toc.bottom.title" :links="links" />
-          </div>
+            </div>
-        </template>
+          </template>
-      </UContentToc>
+        </UContentToc>
-    </div>
+      </div>
     </template>
   </UPage>
 </template>

app/pages/index.vue

@@ -18,6 +18,6 @@ useSeoMeta({
 </script>
 
 <template>
-  <!-- <IndexHero /> -->
+  <IndexHero />
   <IndexCard />
 </template>