页面容器与布局

布局类组件：PageLayout（左右分栏页面骨架）、CollapseContainer / ScrollContainer / LazyContainer（内容容器）、Scrollbar（滚动条）。

1. PageLayout 左右分栏布局

@vben/components/page-layout。典型的「左树右表」页面骨架：左侧栏（树/菜单）+ 右侧内容区，中间带可点击收起/展开的分割条，窄屏（xs）自动收起左栏。

Prop	类型	默认值	说明
`margin`	`boolean`	`true`	外边距
`padding`	`boolean`	`true`	内边距
`gutter`	`boolean \| number`	`false`	栏间距（`true` 相当于 14）
`defaultCollapsed`	`boolean`	`true`	显示收起/展开按钮
`leftColProps` / `rightColProps`	`ColProps`	`{}`	左右栏的 Col 属性
`leftStyle` / `headerStyle` / `bodyStyle`	`CSSProperties`	`{}`	各区域样式

插槽：left（左栏）、header（内容区头部）、default（内容区主体）。左栏响应式宽度：sm:10 md:7 lg:6 xl:5 xxl:4。

<template>
  <PageLayout>
    <template #left>
      <OrgTree @select="handleSelect" />
    </template>
    <template #header>
      <SearchForm />
    </template>
    <UserGrid />
  </PageLayout>
</template>

替代方案

新页面也可以用 vxe-pc-ui 的 VxeSplitter 实现分栏（文件管理页 views/console/system/file/index.vue 即此方案），需要拖拽调整宽度时优先考虑它。

2. CollapseContainer 可折叠容器

@vben/components/container。带标题栏的卡片容器，点击标题右侧箭头折叠/展开内容（CollapseTransition 动画），展开收起时触发 window.resize 以自适应内部表格高度。

Prop	类型	默认值	说明
`title`	`string`	`''`	标题
`loading`	`boolean`	`false`	加载中（显示 Skeleton）
`canExpan`	`boolean`	`true`	是否可展开折叠
`helpMessage`	`string \| string[]`	`''`	标题右侧的帮助提示

3. ScrollContainer 滚动容器

在局部区域内滚动（而非整页滚动），通过 ref 暴露滚动方法：

方法	说明
`getScrollWrap()`	获取滚动容器 DOM
`scrollBottom()`	滚动到底部
`scrollTo(top)`	滚动到指定位置

4. LazyContainer 懒加载容器

基于 IntersectionObserver 的内容懒加载：进入视口（或超时兜底）后才渲染插槽内容，未加载前显示 Skeleton。

Prop	说明
`timeout`	延迟加载时间（ms）
`maxWaitingTime`	最大等待时间（默认 80ms 后兜底渲染）
`threshold`	触发可见性比例
`direction`	监听方向
`viewport`	视口参照元素

适合详情页中「首屏外的重内容块」（图表、大表格）按需渲染。

5. Scrollbar 滚动条

源码位于 src/scrollbar，移植自 element-ui 的美化滚动条组件，跨平台统一滚动条外观。

注意

该模块未在 package.json 的 exports 中声明，业务代码暂无法通过 @vben/components/scrollbar 引入；如需使用请先在 exports 中补充导出。