组件
Page 页面框架
为密集工作区和专注表单建立清晰的标题与空间。
PageHeader 用于工作区标题、元数据、操作和筛选；PageBody 放置主要内容。FormLayout 为编辑任务控制阅读宽度，PageIntro 和 SectionHeader 提供不同层级的介绍。
安装
pnpm dlx shadcn@4.22.1 add http://127.0.0.1:3040/r/v0.3.0/page.json首次使用请先完成 Registry 与主题接入。
组合
PageHeader 的 leading 可容纳返回或移动导航入口，secondary 可放次级导航，filters 形成独立筛选行。面包屑由调用方提供真实链接，组件不解析路由。
Props
| API / 属性 | 类型 | 默认值 | 说明 |
|---|---|---|---|
PageHeader.title | ReactNode | 必填 | 页面的 h1 |
breadcrumbs / meta / actions | ReactNode | — | 路径、辅助信息和操作 |
breadcrumbsLabel | string | 当前位置 | 面包屑导航名称 |
filters / secondary / leading | ReactNode | — | 区域插槽 |
PageBody | 原生 div 属性 | — | 工作区内容间距 |
FormLayout | 原生 div 属性 | 最大 2xl 宽 | 专注表单容器 |
PageIntro.title | ReactNode | 必填 | 内容区 h2 |
PageIntro.icon / description | ReactNode | — | 介绍图标和说明 |
SectionHeader.title | ReactNode | 必填 | 分段 h2 |
SectionHeader.eyebrow / description / action | ReactNode | — | 分类、解释和操作 |
键盘与约束
页面本身不改变焦点或路由。每页保持一个有意义的 h1；有多个导航区时传入能区分用途的 breadcrumbsLabel。跳转后的焦点管理由应用路由层负责。
避免这样使用
不要在已有 h1 的页面中重复嵌套 PageHeader；不要把所有全局操作都塞在页面标题行；不要为宽表单强行压缩说明和错误文本。
来源与版本
0.1.0，来自 Subtic apps/web/components/page.tsx。保留页面节奏，移除固定路由和业务快捷入口。
查看由当前源码生成的类型参考
只展示 Kitseed 自身定义的属性，原生 HTML 与 Base UI 透传属性请参阅对应上游说明。
PageHeader
| 属性 | 类型 | 默认值 |
|---|---|---|
title | ReactNode | — |
breadcrumbs? | ReactNode | — |
breadcrumbsLabel? | string | "当前位置" |
meta? | ReactNode | — |
actions? | ReactNode | — |
filters? | ReactNode | — |
secondary? | ReactNode | — |
leading? | ReactNode | — |
PageIntro
| 属性 | 类型 | 默认值 |
|---|---|---|
icon? | ReactNode | — |
title | ReactNode | — |
description? | ReactNode | — |
SectionHeader
| 属性 | 类型 | 默认值 |
|---|---|---|
eyebrow? | ReactNode | — |
title | ReactNode | — |
description? | ReactNode | — |
action? | ReactNode | — |