基本完成初步框架

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
-    headline="New release"
-    title="Ultimate Vue UI library"
-    description="A Nuxt/Vue-integrated UI library providing a rich set of fully-styled, accessible and highly customizable components for building modern web applications."
-    :links="links"
-  />
+    <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>