修改页面布局大修改

app/components/docs/IndexCard.vue

@@ -0,0 +1,109 @@
+<template>
+  <div class="w-full bg-gray-50 dark:bg-gray-900 min-h-screen mt-4">
+    <!-- 响应式卡片网格 -->
+    <!--
+            这个div使用了Tailwind CSS的类来实现响应式的卡片网格布局：
+            - grid：将容器设置为网格布局。
+            - grid-cols-1：在小屏幕下每行显示1列。
+            - sm:grid-cols-2：在中等屏幕（sm及以上）每行显示2列。
+            - lg:grid-cols-3：在大屏幕（lg及以上）每行显示3列。
+            - gap-4：网格项之间有统一的间距。
+            - max-w-8xl：设置最大宽度为8xl，防止内容过宽。
+            - mx-auto：左右自动外边距，使网格居中显示。
+        -->
+    <div class="grid grid-cols-1 xs:grid-cols-2 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-3 xl:grid-cols-3 2xl:grid-cols-4 gap-4 w-full 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="font-sans 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">
+            <span class="text-primary mr-0.3">{{ getChildrenCount(item) }}</span>篇
+          </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 ">
+              <UIcon
+                :name="(typeof child.icon === 'string' ? child.icon : 'lucide-file-text')"
+                class="mr-2 text-gray-400"
+                size="14"
+              />
+              <span class="text-base font-medium font-sans">{{ child.title }}</span>
+            </div>
+            <UIcon
+              name="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')
+
+// 计算属性：提取docs目录下的第一级数据
+const firstLevelItems = computed(() => {
+  if (!navigation?.value) return []
+  // 查找docs目录
+  const docsItem = navigation.value.find(item => item.title === 'docs' || item.path === '/docs')
+  if (!docsItem?.children) return []
+  // 返回docs目录下的子目录
+  return docsItem.children
+    .filter(item => item.title && item.path)
+    .map(item => ({
+      ...item,
+      description: item.description,
+      icon: item.icon || '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 navigateTo = (path: string) => {
+  if (path) {
+    window.location.href = path
+  }
+}
+</script>