BizPageHeader 页头

页面级头部：返回 + 标题 + 副标题 + 右侧操作区（#extra）。详情页 / 编辑页顶部标配；点击返回仅派发 back 事件，路由跳转语义由业务侧决定。

基础用法

内容区……

返回 + 标题 + 副标题（设备号），#extra 放状态标签与编辑按钮。

<script setup lang="ts">
/** 基础用法：返回 + 标题 + 副标题 + 右侧操作 */
import { ElButton, ElMessage, ElTag } from 'element-plus'
import { BizPageHeader } from 'vue3-ep-biz-lib'

const onBack = (): void => {
  ElMessage.info('返回上一页（router.back()）')
}
</script>

<template>
  <div style="max-width: 640px">
    <BizPageHeader title="设备详情" subtitle="DEV-1024 · 温湿度变送器" @back="onBack">
      <template #extra>
        <ElTag type="success" size="small">在线</ElTag>
        <ElButton size="small" @click="ElMessage.info('编辑')">编 辑</ElButton>
      </template>
    </BizPageHeader>
    <p style="font-size: 13px; color: var(--el-text-color-secondary)">内容区……</p>
  </div>
</template>

编辑页（无返回 + 插槽自定义标题）

表单内容区……

backable 关闭返回；#title 插槽组合标题与状态徽标；#extra 放次操作与主操作。

<script setup lang="ts">
/** 场景：编辑页页头——无返回箭头 + 插槽自定义标题徽标 */
import { ElButton, ElMessage, ElTag } from 'element-plus'
import { BizPageHeader } from 'vue3-ep-biz-lib'
</script>

<template>
  <div style="max-width: 640px">
    <BizPageHeader :backable="false" subtitle="编辑后需重新提审">
      <template #title>
        <span style="font-size: 18px; font-weight: 600">商品信息维护</span>
        <ElTag size="small" type="warning" style="margin-left: 8px">草稿</ElTag>
      </template>
      <template #extra>
        <ElButton link type="primary" @click="ElMessage.info('查看修改历史')">修改历史</ElButton>
        <ElButton type="primary" size="small" @click="ElMessage.success('已提审')">提交审核</ElButton>
      </template>
    </BizPageHeader>
    <p style="font-size: 13px; color: var(--el-text-color-secondary)">表单内容区……</p>
  </div>
</template>

列表页页头

列表场景：subtitle 插槽挂计数徽标与范围说明，extra 放刷新 / 导出 / 新增三档操作。

<script setup lang="ts">
/** 场景：列表页页头——标题计数 + 刷新/导出/新建操作区 */
import { ElButton, ElMessage, ElTag } from 'element-plus'
import { Plus } from '@element-plus/icons-vue'
import { BizPageHeader } from 'vue3-ep-biz-lib'
</script>

<template>
  <div style="max-width: 720px">
    <BizPageHeader title="设备台账" :backable="false" @back="() => undefined">
      <template #subtitle>
        <ElTag size="small" type="info">共 1,024 台</ElTag>
        <span style="margin-left: 6px">华东园区 · 一号车间</span>
      </template>
      <template #extra>
        <ElButton size="small" @click="ElMessage.info('已刷新')">刷新</ElButton>
        <ElButton size="small" @click="ElMessage.info('导出当前筛选结果')">导出</ElButton>
        <ElButton size="small" type="primary" :icon="Plus" @click="ElMessage.success('打开录入抽屉')">新增设备</ElButton>
      </template>
    </BizPageHeader>
  </div>
</template>

审批详情页

审批内容区……（配合 BizApprovalActions 操作条）

审批场景：返回列表 + 单号/金额/发起人副标题 + 状态徽标与流程图/打印操作。

<script setup lang="ts">
/** 场景：审批详情页——返回 + 单号副标题 + 流程入口 */
import { ElButton, ElMessage, ElTag } from 'element-plus'
import { Link } from '@element-plus/icons-vue'
import { BizPageHeader } from 'vue3-ep-biz-lib'
</script>

<template>
  <div style="max-width: 720px">
    <BizPageHeader title="采购审批单" subtitle="CG-2088 ｜ 金额 ¥86,400 ｜ 发起人 周七" back-text="返回列表" @back="ElMessage.info('router.back()')">
      <template #extra>
        <ElTag type="warning" size="small">审批中</ElTag>
        <ElButton size="small" :icon="Link" @click="ElMessage.info('查看完整流程图')">流程图</ElButton>
        <ElButton size="small" type="primary" @click="ElMessage.info('打印审批单')">打 印</ElButton>
      </template>
    </BizPageHeader>
    <p style="font-size: 13px; color: var(--el-text-color-secondary)">审批内容区……（配合 BizApprovalActions 操作条）</p>
  </div>
</template>

报表页头（概要统计）

报表场景：extra 插槽放三项概要数字（访问/下单/转化率）与订阅按钮——页头即摘要。

<script setup lang="ts">
/** 场景：报表页头——标题 + 概要统计 extra（数字概览） */
import { ElButton } from 'element-plus'
import { BizPageHeader } from 'vue3-ep-biz-lib'

const summary = [
  { title: '访问量', value: '43,082' },
  { title: '下单量', value: '2,814' },
  { title: '转化率', value: '6.53%' },
]
</script>

<template>
  <div style="max-width: 860px">
    <BizPageHeader title="经营日报" subtitle="2026-09-23 ｜ 数据每 10 分钟更新" :backable="false">
      <template #extra>
        <div style="display: flex; gap: 20px; align-items: center">
          <span v-for="item in summary" :key="item.title" style="display: inline-flex; gap: 8px; align-items: baseline">
            <span style="font-size: 13px; color: var(--el-text-color-secondary)">{{ item.title }}</span>
            <b style="font-size: 16px">{{ item.value }}</b>
          </span>
          <ElButton size="small" type="primary">订阅日报</ElButton>
        </div>
      </template>
    </BizPageHeader>
  </div>
</template>

Props

属性名	类型	默认值	说明
title	`string`	`''`	页面标题（#title 插槽优先）
subtitle	`string`	`''`	副标题（#subtitle 插槽优先）
backable	`boolean`	`true`	是否显示返回按钮
back-text	`string`	`'返回'`	返回按钮文案（空串仅箭头）
bordered	`boolean`	`true`	底部分割线

Events

事件名	参数	说明
back	—	点击返回（业务侧执行 router.back() 等）

Slots

插槽名	说明
title	自定义标题区
subtitle	自定义副标题
extra	右侧操作区

Expose

属性/方法	说明
—	无暴露实例

BizPageHeader 页头 ​

基础用法 ​

编辑页（无返回 + 插槽自定义标题） ​

列表页页头 ​

审批详情页 ​

报表页头（概要统计） ​

Props ​

Events ​

Slots ​

Expose ​