PageGrid 页面栅格
用于承接 PC 页面级栅格规则。底层仍是 24 列；PageGrid 只负责区分后台管理和门户页两种页面场景，避免把侧边栏、门户边距和业务内容区混在一起算。
ts
import { createApp } from 'vue'
import { PageGrid, PageGridItem, PageLayout } from '@szhn/dh-design-pc'
const app = createApp({})
app.use(PageGrid)
app.use(PageGridItem)
app.use(PageLayout)PageGrid 通常放在页面最外层，先决定页面属于后台管理还是门户页；业务区域内部再使用 PageGridItem、PageLayout 或 Row / Col 承接具体内容。
页面最外层布局
后台管理
门户页
页面分区
规则
| 场景 | 外侧处理 | 内容区 | 栅格 |
|---|---|---|---|
| 后台管理 | 侧边栏是布局参数，不纳入栅格 | 右侧内容区流式自适应 | 24 列，默认 16px 水槽 |
| 门户页 | 1440px 基准下左右 80px，小屏不低于 24px | 最大 1280px，居中 | 24 列，默认 16px 水槽 |
后台页面不要套用门户页的 80px 边距，门户页面也不要使用后台的流式全宽规则。需要普通分栏时仍然可以直接使用 Row / Col。
API
PageGrid Props
| 属性名 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| scene | 页面场景 | admin / portal | admin |
| sidebar | 后台侧栏状态 | expanded / collapsed / none | none |
| columns | 栅格列数 | number | 24 |
| gutter | 水槽宽度 | string / number | var(--dh-grid-gutter, 16px) |
| row-gutter | 纵向间距 | string / number | var(--dh-grid-gutter, 16px) |
| admin-edge | 后台内容区边距 | string / number | var(--dh-content-margin, 16px) |
| admin-sidebar-width | 后台侧栏展开宽度 | string / number | var(--dh-sidebar-width, 224px) |
| admin-sidebar-collapsed-width | 后台侧栏收起宽度 | string / number | var(--dh-sidebar-collapsed-width, 80px) |
| portal-content-width | 门户内容区最大宽度 | string / number | 1280px |
| portal-edge | 门户基准边距 | string / number | 80px |
| portal-min-edge | 门户小屏最小边距 | string / number | 24px |
| grid | 是否把默认插槽作为 24 列栅格轨道 | boolean | true |
PageGrid Slots
| 插槽名 | 说明 |
|---|---|
| default | 内容区栅格项 |
| sidebar | 后台侧栏占位内容 |
PageGridItem Props
| 属性名 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| span | 占据列数 | number | 24 |
| offset | 左侧偏移列数 | number | 0 |
| columns | 当前总列数 | number | 24 |
PageLayout Props
| 属性名 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| variant | 内容区分区形态 | t / vertical | vertical |
| gap | 分区间距 | string / number | var(--dh-content-margin, 16px) |
| side-width | T 型布局左侧区域宽度 | string / number | 224px |
| aside-width | T 型布局右侧区域宽度 | string / number | 280px |
PageLayout Slots
| 插槽名 | 说明 |
|---|---|
| top | 顶部通栏 |
| subtop | 二级顶部区域 |
| default | 主内容区 |
| side | T 型布局左侧区域 |
| aside | T 型布局右侧区域 |
| bottom | 底部区域 |