容器
PageHeader - 页面开头
一个页面的开头：这一页是什么，以及什么在限定它。
用法
什么时候用它
import { PageHeader } from '@misoto22/folio'说明
一个页面的开头：这一页是什么，以及什么在限定它。
系统里有 Heading 管标题、Breadcrumb 管路径，却没有任何东西规定一个页面该怎么「开始」——于是每个应用都自己发明一套排法，眉标在这一屏落在标题上面，在下一屏落在标题下面。这个组件把顺序、下面那条线、以及控件摆在哪里都固定下来。
它和 AppShell 不是一回事：外壳是页面外面的框，每条路由都共用那条侧栏和那条顶栏；这个是路由自己那一栏里的第一样东西。
除非 level 另有说法，标题渲染成 h1；而这个默认值几乎在所有情况下就是全部答案，理由值得说一句：一个页面只有一个名字，而一个把文档标题据为己有的外壳，是把这一页自己的名字拿走了。一屏上出现两个开头，就是两个页面。
字号则根本不是属性。Heading 在 level 1 上默认是 --fs-title，那是给「主题就是标题本身」的文档用的编辑级台阶；而一个页面开头站在一块工作界面上方，标题是下面那堆东西的标签，读者真正要看的是线下面那些记录。--fs-heading 在每一个层级上都是那一档，画它的仍然是 Heading，所以这条阶梯始终只有一条，把一个开头挪到大纲更深处也从不改变它的大小。
结构
| 部件 | 说明 |
|---|---|
| 页头必填 | 一个 <header>，因此也是这一页的 banner 地标。一列内容，下面压一条细线，线下面留 24px——自己不带上边距，所以页面从哪里开始由外壳决定。 |
| 路径 | breadcrumb，在所有东西的最上面，收的是已经渲染好的 Breadcrumb 而不是它的 items——每一节仍然由调用处自己接到路由上。外面那个框已经钉了一条路径时就不传。 |
| 眉标 | eyebrow，等宽小字，--ink-3-aa，在标题上方，绝不在下方。可以是页面编号，也可以是这一页所属的板块。 |
| 标题必填 | title，经 Heading 渲染，字号 --fs-heading；除非 level 另有说法，否则是一个 h1。字号从不跟着层级走：在大纲的每一档上，一个页面开头都站在一块工作界面上方，而不是站在一份「主题就是标题本身」的文档上方。 |
| 控件位 | actions，和标题同基线，靠行内末端。放的是「说明标题指的是哪一段」的控件——时间范围、范围切换——不是作用在那些记录上的控件。 |
| 说明 | description，在标题下面，按 --measure-record 收住行宽，这样它保持在一个读得下去的宽度，而它上面那一排照样占满整幅。 |
实践建议
推荐
- 时间范围选择器放这里，不要放在表格上方。它限定的是标题——它说的是这一页讲的是档案里的哪一段——而放到线下面，它就变成一条工具栏，和页面开头那一横排争起来。
- 外壳已经钉住一条路径时，就不要传 breadcrumb。一屏上两条路径，是对「我在哪」的两个回答，而读者两条都会去看。
避免
- 不要在一个页面上渲染两个 level 1 的开头。每一个都是 h1，所以就标题导航而言，第二个就是第二份文档；而放在一个已经有自己 h1 的页面里的预览或模板，正是 level 要解决的场景。
- 不要把第二条结论塞进 description。一句话说明这一页是干什么的就够了；一个会变的数字属于线下面，放在那些跟它可比的数字旁边。
示例
完整的开头
整个开头，按它被固定下来的顺序：路径、眉标、标题，然后是标题下面那句话。时间范围选择器摆在标题旁边而不是内容上方，是因为它限定的是标题所指的东西——它说的是这一页讲的是档案里的哪一段；放到线下面，它就变成一条工具栏，和页面开头那一横排争起来。标题在每一个层级上都是 --fs-heading，因为把一个开头挪到大纲更深处，是关于这份文档的事实，不是「请把字号调小」的请求——这里写 level={2}，只是因为这个文档页面已经占着那个 h1 了。路径带上自己的 label 也是同一个理由：两个名字相同的导航地标，对任何按地标浏览的人来说是分不出来的，而这也正是「外壳已经钉住一条路径时就不要传 breadcrumb」这条建议背后的道理。
04
Money
Balances and flows across every account, as at the last sync.
只有标题
除标题以外每一个槽位都是可选的，而没传的那个什么都不渲染，不是渲染一个空盒子——四个空元素占的竖向空间和四个满的一样多，读起来就是排版出了错。这也是应用框架里多数路由真正想要的形状：外壳已经钉住了一条路径，这里再来一条，就是对「我在哪」的两个回答。这里同样写了 level={2}，因为真实页面上的那个开头就是文档自己的 h1，而这一个是放在一个已经有 h1 的页面里的预览。
Jobs
无障碍
- 标题默认是一个 h1，所以无论外面那层外壳在做什么，这个页面在标题列表里都有名字；而当这个开头并不属于这份文档时，level 会把它挪走。
- 那个 <header> 就是这一页的 banner 地标，也是按地标导航的读者最先跳到的地方。