<template>
  <!--
    这是 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 $slots.default?.() ?? []"
      :key="i"
    >
      <component
        :is="slot"
        :in-stack="true"
      />
    </div>
  </ECard>
</template>

<script setup lang="ts">
defineSlots()
</script>
