# PageLayout 一级页面布局

## Props

| 属性 | 说明 | 类型 | 默认值 | 必填 |
|------|------|------|--------|------|
| children | 子组件（Slot 组件） | ReactNode | - | 否 |
| scrollRef | ScrollView ref | React.RefObject\<ScrollView\> | - | 否 |
| onScroll | 滚动回调 | (event) => void | - | 否 |

## Slots

采用 compound component 模式，通过以下子组件定义各区域：

| 子组件 | 说明 |
|--------|------|
| PageLayout.Background | 背景层（absoluteFillObject） |
| PageLayout.Navigation | 导航栏（固定不滚动） |
| PageLayout.Header | 头部区域（随滚动） |
| PageLayout.AlertContainer | 告警区域（随滚动） |
| PageLayout.Content | 主内容区（通过 ContainerWithGap 布局，gap=8） |
| PageLayout.Footer | 底部区域（自动加安全距离 paddingBottom） |

## 用法

```tsx
<PageLayout onScroll={scrollHandler}>
  <PageLayout.Background>
    <View style={{ height: 260, backgroundColor: '#E5F0FF' }} />
  </PageLayout.Background>
  <PageLayout.Navigation>
    <NavigationBar title="设备" titleSize="large" collapseTitle titleVisible={titleVisible} />
  </PageLayout.Navigation>
  <PageLayout.Header>
    <LargeTitle />
  </PageLayout.Header>
  <PageLayout.AlertContainer>
    <StatusAlert alerts={[...]} />
  </PageLayout.AlertContainer>
  <PageLayout.Content>
    <CardHeader title="操作" />
    <ListCard title="设置">...</ListCard>
  </PageLayout.Content>
  <PageLayout.Footer>
    <BrandProduced />
  </PageLayout.Footer>
</PageLayout>
```

## 注意事项

- Background 使用绝对定位覆盖整个 PageLayout 区域
- Navigation 固定在 ScrollView 之上，不随滚动
- Content 内的子元素之间自动有 8px 间距（ContainerWithGap），不要用 Fragment 包裹多个子元素
- AlertContainer 内的子元素之间无自动间距
- Footer 底部自动加安全距离（safeAreaInsets.bottom + 28）