SystemPageLayout 系统页面布局容器

轻量级页面布局容器。提供全高度、最小高度为 0 的弹性布局包装器，确保子元素占满可用高度。

• 基础用法
• 工作原理
• 注意事项

基础用法

<template>
  <SystemPageLayout>
    <CommonPage back show-header title="用户管理">
      <AiCrudPage api="/api/user" :columns="columns" />
    </CommonPage>
  </SystemPageLayout>
</template>

<script setup>
import SystemPageLayout from '@/components/common/SystemPageLayout.vue'
</script>

工作原理

组件渲染为一个 <div> 容器，设置 height: 100% 和 min-height: 0，通过 CSS :slotted(*) 规则确保插槽内的子元素也撑满高度。主要解决 Flex 布局中子元素高度塌陷问题。

注意事项

• 无 Props、Events、Methods，纯布局容器
• 通常作为路由页面的最外层组件
• 配合 AppPage 或 CommonPage 使用