修改样式与简单文档md

app/components/AppSidebar.vue

@@ -58,6 +58,7 @@
             color="primary"
             type="single"
             variant="pill"
+            trailingIcon="lucide:chevron-right"
           />
         </div>
       </div>

app/components/content/ETabs.vue

@@ -47,4 +47,8 @@ function getSlotContent(item: TabsItem) {
   if (!item.slot) return null
   return slotContents.value[item.slot]
 }
+
+defineSlots<{
+  default: () => any
+}>()
 </script>

app/components/content/ProseH2.vue

@@ -1,7 +1,7 @@
 <template>
   <h2
     :id
-    class="scroll-m-20 border-b pb-2 text-3xl font-semibold tracking-tight transition-colors [&:not(:first-child)]:mt-10"
+    class="scroll-m-20 border-b border-gray-200 dark:border-gray-700 pb-2 text-3xl font-semibold tracking-tight transition-colors [&:not(:first-child)]:mt-10 mb-2"
   >
     <NuxtLink
       v-if="id && generate"

app/components/content/ProseH3.vue

@@ -1,7 +1,7 @@
 <template>
   <h3
     :id
-    class="scroll-m-20 text-2xl font-semibold tracking-tight [&:not(:first-child)]:mt-8"
+    class="scroll-m-20 text-2xl font-semibold tracking-tight [&:not(:first-child)]:mt-8 mb-3"
   >
     <NuxtLink
       v-if="id && generate"

app/components/content/ProseH4.vue

@@ -1,7 +1,7 @@
 <template>
   <h4
     :id
-    class="scroll-m-20 text-xl font-semibold tracking-tight [&:not(:first-child)]:mt-6"
+    class="scroll-m-20 text-xl font-semibold tracking-tight [&:not(:first-child)]:mt-6 mb-2"
   >
     <NuxtLink
       v-if="id && generate"

app/components/content/Stack.vue

@@ -1,23 +1,20 @@
 <template>
-  <UPageCard class="divide-y overflow-hidden rounded-xl [&:not(:first-child)]:mt-4  dark:divide-gray-700 shadow-sm ">
+  <!--
+    这是 Stack 组件的外层容器，使用 UPageCard 组件实现。
+    主要作用是将插槽内容以卡片形式垂直堆叠，每个内容块之间有分割线。
+    该容器带有圆角、阴影效果，并支持暗色模式下的分割线颜色。
+    常用于将多个内容分组展示，提升页面的层次感和可读性。
+  -->
+  <ECard class="divide-y overflow-hidden rounded-xl [&:not(:first-child)]:mt-4  dark:divide-gray-700 shadow-sm ">
     <div
-      v-for="(slot, i) in slotItems"
+      v-for="(slot, i) in $slots.default?.() ?? []"
       :key="i"
-      class=""
     >
-      <component :is="slot" />
+      <component :is="slot" :in-stack="true" />
     </div>
-  </UPageCard>
+  </ECard>
 </template>
 
 <script setup lang="ts">
-const slots = useSlots()
-
-// Process slots to create stack items
-const slotItems = computed(() => {
-  const defaultSlots = slots.default?.() || []
-  return defaultSlots.filter(slot => slot)
-})
-
 defineSlots()
 </script>