# Page

页面布局组件，提供标准的页头、侧边栏、面包屑、内容区、页脚的页面结构。

## 适用场景

- 构建标准后台管理页面布局
- 需要侧边栏导航 + 顶部导航的页面结构
- 需要响应式侧边栏折叠的页面

## Props

### Page Props

| 名称 | 类型 | 默认值 | 必填 | 说明 |
|------|------|--------|------|------|
| className | `string` | `""` | 否 | 自定义 class |
| renderHeader | `() => ReactNode` | - | 否 | 页头区渲染器 |
| renderSidebar | `(sidebarRenderProps: PageSidebarRenderProps) => ReactNode` | - | 否 | 侧边栏区渲染器（PageSidebarRenderProps 暂定） |
| renderContent | `() => ReactNode` | - | 否 | 内容区渲染器 |
| renderBreadcrumb | `() => ReactNode` | - | 否 | 面包屑区渲染器 |
| renderFooter | `() => ReactNode` | - | 否 | 页脚区渲染器 |
| defaultSidebarCollapsed | `boolean` | `false` | 否 | 是否默认折叠侧边栏 |
| sidebarCollapsedType | `"slim" \| "hidden"` | `"slim"` | 否 | 折叠侧边栏的样式类型 |
| contentType | `"plain"` | - | 否 | 内容区的 type，详见 Layout 组件 Content 的 `props.type` |
| headerReverseColor | `boolean` | `true` | 否 | header 区是否反色（true 为 brand color 底色，false 为白底） |
| headerShadow | `boolean` | - | 否 | header 是否有下阴影，仅在 `headerReverseColor` 为 false 时有效 |
| sidebarMode | `"auto" \| "static"` | `"auto"` | 否 | sidebar 模式：auto 自动响应宽度变化，static 不响应 |

### PageSidebarRenderProps

| 名称 | 类型 | 默认值 | 必填 | 说明 |
|------|------|--------|------|------|
| sidebarCollapsed | `boolean` | - | 否 | sidebar 是否折叠（暂定） |
| changeSidebarCollapsed | `(sidebarCollapsed: boolean) => void` | - | 否 | 切换 sidebar 折叠状态的方法（暂定） |
| refSidebarInner | `RefObject<HTMLDivElement>` | - | 否 | sidebar 内部容器 ref（暂定） |

### Panel Props

| 名称 | 类型 | 默认值 | 必填 | 说明 |
|------|------|--------|------|------|
| className | `string` | `""` | 否 | 自定义 class |

## 典型用法

### 标准页面布局

> 需要配合 HeadNav、SideNav、Breadcrumb 等组件使用

```tsx
import { Page, PagePanel, PageSidebarRenderProps } from '@befe/brick'
import { HeadNav } from '@befe/brick'
import { SideNav } from '@befe/brick'
import { Breadcrumb } from '@befe/brick'

const renderHeader = () => <HeadNav />

const renderSidebar = (sidebarRenderProps: PageSidebarRenderProps) => (
    <SideNav
        menu={menu}
        collapsed={sidebarRenderProps.sidebarCollapsed}
        onChangeCollapsed={sidebarRenderProps.changeSidebarCollapsed}
    />
)

const renderBreadcrumb = () => <Breadcrumb data={breadcrumbs} />

const renderContent = () => (
    <div>
        <PagePanel>内容块一</PagePanel>
        <PagePanel>内容块二</PagePanel>
    </div>
)

const renderFooter = () => <div>BPIT Loves You</div>

<Page
    contentType="plain"
    renderHeader={renderHeader}
    renderSidebar={renderSidebar}
    renderBreadcrumb={renderBreadcrumb}
    renderContent={renderContent}
    renderFooter={renderFooter}
/>
```

## 注意事项

- 页面间切换时如果内容区发生背景/内边距切换，请设置 `contentType: 'plain'`
- sidebar 在小屏幕进入抽屉模式时，如果菜单超过 3 层（有 hover 呼出的三级 menuPopper），需通过 `sidebarRenderProps.refSidebarInner` 设置 SideNav 的 `submenuPopperPortalContainer`，避免鼠标进入 menuPopper 时抽屉意外收起
- 上述 `refSidebarInner` 的设置仅在 `renderSidebar` 返回结果中无法直接遍历到 `SideNav` 时才需要