组件 · 数据展示
PageHeader 页头
页面标题区：返回、标题、副标题、额外操作与页脚槽位；用于列表/详情/设置页头部。
使用建议
- 避免：用 PageHeader 替代承担完整后台布局职责
- 限制：未标 stable
引入
import {
PageHeader,
PageHeaderAvatar,
PageHeaderBack,
PageHeaderBody,
PageHeaderContent,
PageHeaderExtra,
// …共 12 个导出
} from '@selrux/ui/page-header';结构与组合
PageHeader 通过子组件组合页头，没有 title、extra 这类快捷属性。 按页面需要选择标题区、内容区与页尾；只有标题时，不必创建空的 Body 或 Footer。
import {
PageHeader, PageHeaderHeader, PageHeaderMain, PageHeaderHeading,
PageHeaderTitle, PageHeaderSubtitle, PageHeaderBody, PageHeaderFooter,
} from '@selrux/ui/page-header';
/** 业务页面自行选择语义层级，并按需组合三区。 */
export function ProjectHeader() {
return (
<PageHeader bordered>
<PageHeaderHeader>
<PageHeaderMain>
<PageHeaderHeading>
<PageHeaderTitle level={1}>项目详情</PageHeaderTitle>
<PageHeaderSubtitle>项目编号与简短说明</PageHeaderSubtitle>
</PageHeaderHeading>
</PageHeaderMain>
</PageHeaderHeader>
<PageHeaderBody>页面摘要或可滚动内容</PageHeaderBody>
<PageHeaderFooter>补充信息或页签</PageHeaderFooter>
</PageHeader>
);
}Header是顶部固定区，可先放面包屑，再放Main。 Main 推荐按Back → Avatar → Heading → Extra组织。Heading将标题与副标题成组。有 Extra 时，操作区在上、标题区在下；没有 Extra 时，返回、头像与标题同行。Body在父级高度受限时独立滚动；Footer保持在内容区下方，不提供浏览器视口吸底行为。
演练场
调节下方可实现的字面量属性，实时预览真实组件。函数、Portal、样式逃生口等见代码演示与 API 表。
订单详情
SO-20261023-001
代码演示
基础用法
只需要标题时省略 Body、Footer 与返回按钮；bordered 只显示底部分隔线。
项目设置
管理项目的基本信息与协作方式
头像、状态与操作
Avatar 放实体标识，Extra 放页级操作；有操作区时标题独占下一行。
设计系统
PRJ-024 · 基础组件维护
固定头尾与内容滚动
父级设置明确高度后，只有 Body 滚动；聚焦内容区可用方向键滚动。
交付检查记录
12 条示例记录
加载、禁用与失败恢复
先保存，再用下方按钮模拟响应；保存中禁止返回与重复提交，失败后可重试。
编辑项目信息
六档尺寸与分隔线
size 影响字号和间距，不改变标题语义；切换 bordered 对比底部分隔线。
项目设置
size="xs"
项目设置
size="sm"
项目设置
size="md"
项目设置
size="lg"
项目设置
size="xl"
项目设置
size="2xl"
长标题与窄屏
切换“手机”查看换行；操作区显式允许折行，dir 可切换布局方向与返回箭头。
跨团队组件规范与无障碍体验改进项目的交付验收记录
SELRUX / DESIGN-SYSTEM-ACCESSIBILITY-20261023-REVIEW
API
属性覆盖：示例用到 4 / 4 个自有属性（100%）
由 scripts/demo-coverage.mjs 统计，不含 className / style / 原生透传属性与纯转发事件。
PageHeader
解析本域尺寸与描边；三区滚动布局由 CSS 承担。
| 属性 | 说明 | 类型 | 默认值 |
|---|---|---|---|
size | - | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | - |
bordered | - | boolean | - |
另有 279 项原生属性与事件继承自 HTMLAttributes，原样透传。
PageHeaderAvatar
为标识容器添加局部样式；限制溢出放大。
无自有属性；其余 279 项原生属性继承自 HTMLAttributes。
PageHeaderBack
为返回按钮添加局部样式类；行为与名称仍在 headless。
| 属性 | 说明 | 类型 | 默认值 |
|---|---|---|---|
onBack | 返回请求；缺失时开发期诊断并禁用。 | ((event: MouseEvent<HTMLButtonElement>) => void) | - |
另有 288 项原生属性与事件继承自 ButtonHTMLAttributes / HTMLAttributes，原样透传。
PageHeaderBody
中间可滚动内容区；未渲染不占位。
无自有属性；其余 279 项原生属性继承自 HTMLAttributes。
PageHeaderContent
无自有属性；其余 279 项原生属性继承自 HTMLAttributes。
PageHeaderExtra
为操作区添加局部样式；逻辑末端对齐由 CSS 承担。
无自有属性；其余 279 项原生属性继承自 HTMLAttributes。
PageHeaderFooter
底部固定区样式；未渲染不占位。
无自有属性；其余 279 项原生属性继承自 HTMLAttributes。
PageHeaderHeader
顶部固定区样式；未渲染不占位。
无自有属性；其余 279 项原生属性继承自 HTMLAttributes。
PageHeaderHeading
标题成组容器：Title 与 Subtitle 同行（对照 Naive）；无头像时可内嵌 Back。 有头像时 Back 应放在 Main 内、Avatar 左侧，不要放进本容器。
无自有属性；其余 279 项原生属性继承自 HTMLAttributes。
PageHeaderMain
主行布局：有 Extra 时工具条 + 标题下行；推荐源顺序 Back → Avatar → Heading → Extra，不自动重排 children。
无自有属性；其余 279 项原生属性继承自 HTMLAttributes。
PageHeaderSubtitle
为副标题添加局部样式；默认自然换行。
无自有属性；其余 279 项原生属性继承自 HTMLAttributes。
PageHeaderTitle
为标题添加局部样式；语义层级仍由 level 决定。
| 属性 | 说明 | 类型 | 默认值 |
|---|---|---|---|
level | 默认 h1，由页面作者显式设置层级。 | 1 | 2 | 3 | 4 | 5 | 6 | h1 |
另有 279 项原生属性与事件继承自 HTMLAttributes，原样透传。
导出类型：PageHeaderAvatarProps、PageHeaderBackProps、PageHeaderBodyProps、PageHeaderContentProps、PageHeaderExtraProps、PageHeaderFooterProps、PageHeaderHeaderProps、PageHeaderHeadingProps、PageHeaderMainProps、PageHeaderProps、PageHeaderSize、PageHeaderSubtitleProps、PageHeaderTitleProps
接入与无障碍
PageHeaderBack需要显式提供onBack；不传时会禁用并在开发期提示。 组件不会调用路由或history.back()，独立打开详情页时应由应用提供稳定的列表回退地址。- 有未保存内容时，由应用拦截返回；提交中可设置
disabled。 失败提示、重试与草稿保留都由应用负责，页头只提供布局。 size支持 xs、sm、md、lg、xl、2xl；未指定时读取最近的 ConfigProvider，最后回退 md。bordered默认为 false，只控制根节点底部分隔线。PageHeaderTitle默认渲染 h1，使用level匹配页面层级。 本页示例放在三级示例标题下，因此使用 level=4；独立业务页通常使用 level=1。- 返回按钮应有具体的可访问名称；头像图片需要 alt，已有相同文字时可用空 alt 避免重复朗读。 Extra 不会自动添加工具栏角色，普通按钮组不必额外声明 toolbar。
- 父级指定高度后 Body 才能独立滚动；flex 或 grid 容器还需允许收缩（
min-block-size: 0）。 可滚动区域应提供可访问名称与键盘焦点。只作普通页头时无需固定高度。 - 标题与副标题支持自然换行。Extra 默认不换行，窄屏多操作应使用菜单收纳，或像长标题示例一样显式允许操作折行。
PageHeaderContent是 Body 的兼容别名，新代码统一使用PageHeaderBody。 页签行为复用 Tabs；完整后台壳使用 AdminLayout。