PageContainer 内容页容器

用于详情页或列表页的最外层，统一提供面包屑、返回入口、页面标题、右侧操作区和主内容区。业务列表页推荐与 ProPage 组合。

引入

import { createApp } from 'vue'
import { PageContainer } from '@szhn/dh-design-pc'

const app = createApp({})
app.use(PageContainer)

基础用法

文档预览未挂载业务路由，下面的示例手动传入面包屑。真实项目中建议使用默认的自动面包屑。

自动面包屑和标题

breadcrumb 默认为 auto，会按 vue-router 的当前匹配路由生成面包屑；页面标题默认取当前路由的 meta.title。为每层路由配好 meta.title 后，页面中无需再传 title 或 breadcrumb。

const routes = [
  {
    path: '/ledger',
    component: () => import('./LedgerLayout.vue'),
    meta: { title: '台账管理' },
    children: [
      {
        path: 'detail',
        component: () => import('./LedgerDetail.vue'),
        meta: { title: '明细数据台账' },
      },
    ],
  },
]

<template>
  <dh-page-container>
    <div>页面内容</div>
  </dh-page-container>
</template>

设置 meta.hideInBreadcrumb: true 或 meta.hideChildrenInMenu: true 可隐藏对应的面包屑节点。手动传入时，数据格式为 [{ title: '台账管理', path: '/ledger' }, { title: '明细数据台账' }]。

与 ProPage 组合

筛选表格页标准结构：外层 PageContainer，内层 ProPage。

隐藏面包屑 / 返回

布局顶栏已有面包屑时，可关闭内容区路径；无返回场景可关 showBack。

<dh-page-container :show-breadcrumb="false" :show-back="false" title="仅标题">
  <dh-pro-page ... />
</dh-page-container>

自定义页头

extra 插槽用于页头右侧操作。点击返回时会先触发 back 事件，然后执行默认返回。

<dh-page-container title="数据详情" @back="recordBack">
  <template #extra>
    <el-button type="primary">编辑</el-button>
  </template>
  <detail-content />
</dh-page-container>

API

Props

属性名	说明	类型	默认值
title	页头标题；未传时依次取当前路由 meta.title 和最后一个面包屑标题	string	—
show-back	是否显示返回入口	boolean	true
show-breadcrumb	是否显示面包屑区域	boolean	true
breadcrumb	自动生成、隐藏或手动传入面包屑	'auto' | false | PcPageBreadcrumbItem[]	'auto'
breadcrumb-variant	面包屑样式	'text' | 'filled'	'filled'
breadcrumb-separator	面包屑分隔符	string	'>'
title-resolver	标题文案转换函数，可用于处理多语言 key	(titleOrKey: string) => string	—

PcPageBreadcrumbItem 包含必填的 title 和可选的 path。除了通过 title-resolver 单独传入，也可在应用入口统一配置：

import { pageContainerTitleResolverKey } from '@szhn/dh-design-pc'

app.provide(pageContainerTitleResolverKey, key => i18n.global.t(key))

Events

事件名	说明	回调参数
back	点击返回时触发，随后默认执行路由返回	—

Slots

插槽名	说明
default	主内容（通常为 ProPage）
extra	页头右侧操作
title	自定义标题
breadcrumb	完全自定义面包屑区域

Expose

名称	说明
breadcrumbItems	当前面包屑数据
resolvedTitle	当前页头标题
buildBreadcrumbFromRoute()	按当前路由重新生成面包屑数据

业务页推荐写法

<template>
  <dh-page-container>
    <dh-pro-page :columns="columns" :request="request" />
  </dh-page-container>
</template>

路由：

meta: { title: '明细数据台账' }

禁止在业务页传入 ['业务台账管理', '台账分类管理', ...] 字符串数组作为默认路径。