Maofeng
38 lines
2.1 KiB
Plaintext
38 lines
2.1 KiB
Plaintext
---
|
|
title: 概览
|
|
description: 使用路由无关的原子组件建立一致的页面结构。
|
|
order: 1
|
|
toc:
|
|
- id: role
|
|
title: 包的职责
|
|
- id: components
|
|
title: 组件组成
|
|
- id: boundaries
|
|
title: 设计边界
|
|
---
|
|
|
|
## 包的职责 {#role}
|
|
|
|
`@workspace/page` 提供应用内容页的结构组件，包括标题、说明、操作区、面包屑、路由标签和内容 Section。它只负责语义、响应式布局和视觉约定，不创建路由，也不管理业务数据。
|
|
|
|
## 组件组成 {#components}
|
|
|
|
- `PageContainer`：页面内容的纵向根容器。
|
|
- `PageInfo`、`usePageInfo`：向页面结构组件共享可选的页面元信息。
|
|
- `PageHeader`、`PageHeading`：组织主要标题内容。
|
|
- `PageTitle`、`PageSubtitle`、`PageDescription`：语义化标题信息。
|
|
- `PageHeadingExtra`：在标题的起始侧或末尾侧放置任意内容。
|
|
- `PageHeaderExtra`：提供标题下方不限定内容类型的区域。
|
|
- `PageBackButton`：支持历史返回、原生链接及路由 Link。
|
|
- `PageBreadcrumb`：通过数据生成带溢出菜单的路径，也可以复用 `@workspace/ui` 的组合式 Breadcrumb API。
|
|
- `PageTabs`：管理受控或非受控的当前值、方向和键盘交互。
|
|
- `PageTabsList`、`PageTabsTrigger`、`PageTabsIndicator`：组成支持四侧放置和多种活动样式的标签列表。
|
|
- `PageTabsExtra`：把一个或多个页面级操作放到标签列表的起始端或末端。
|
|
- `PageTabsContent`：渲染与 Trigger 值匹配的内容面板。
|
|
- `PageSection`：页面主体的独立语义区段。
|
|
- `PagesManager`、`PageTitlePortal`：可选地把标题挂载到外部布局。
|
|
|
|
## 设计边界 {#boundaries}
|
|
|
|
`PageInfo` 只提供展示元信息，不管理路由状态。组件显式内容会覆盖对应元信息，缺少值时不渲染空节点。Page Tabs 基于 Base UI 管理值、Panel 显隐、键盘导航和 Indicator 定位，但不创建应用路由。需要与路由同步时，通过 `value` 和 `onValueChange` 在应用层完成。`PagesManager` 不保存页面栈，只向子树提供标题容器。
|