0.0.4

PageContainer 页容器 ​

PageContainer 是一个页面容器组件，提供了统一的页面布局结构。它包含了页面标题、面包屑导航、页面操作区等标准化的页面元素，让您可以快速构建具有一致性的页面布局。

与 ProLayout 的配合 ​

ProLayout 负责整站壳层（侧栏 / 顶栏 / 菜单）。PageContainer 放在 ProLayout 的默认插槽（主内容区）内，形成「布局 → 页面容器 → 业务模块」的层次。整页级标题通常由布局或路由元信息提供，不在本组件内声明标题。

面包屑 + 右侧操作 ​

传入 breadcrumb 数组（每项 title，可选 to / replace，与 UBreadcrumbItem 一致）；#extra 与面包屑同在首行右侧（内部 USpace 横向排列）。

首行为面包屑与 #extra；下方白底区域为默认插槽正文。

无面包屑 ​

将 breadcrumb 设为 false 时，不渲染首行面包屑区域（也不会渲染 #breadcrumb 插槽）。

设置 breadcrumb="false" 时不渲染首行面包屑区域；页面标题等由外层布局（如 ProLayout）承载。

自定义面包屑 + #extra ​

使用 #breadcrumb 插槽可完全自定义左侧面包屑（例如带首页图标）；右侧仍用 #extra。

面包屑与路由 ​

  • breadcrumb 为 false 时关闭整块面包屑区域。
  • 传入 PageContainerBreadcrumbItem[] 时由内置 UBreadcrumb 渲染；最后一项一般省略 to，表示当前页。
  • UBreadcrumbItem 在应用未挂载 vue-router 时，带 to 的项点击不会导航（内部会检测 $router）。
  • 完全自定义面包屑时使用 #breadcrumb 插槽（且勿将 breadcrumb 设为 false）。

仅 #extra、无面包屑 ​

不传 breadcrumb 或传空数组、且不使用 #breadcrumb 时，左侧无面包屑；若提供 #extra，首行仅展示右侧操作区。

插槽 ​

名称说明
default白底卡片内页面主体内容
breadcrumb自定义整块面包屑（覆盖 breadcrumb 属性的内置渲染）
extra与面包屑同一行最右侧；内部使用 USpace 横向排列

PageContainer API ​

属性 ​

名称说明类型默认值
breadcrumbfalse 隐藏面包屑；数组时用 UBreadcrumb 渲染enum—
breadcrumbProps透传给 UBreadcrumb 根节点（如 separator、separatorIcon）object{}

PageContainerBreadcrumbItem ​

字段说明类型
title文案string
to路由目标（同 UBreadcrumbItem），可选string | object
replace是否 router.replaceboolean