46 lines
1.2 KiB
Plaintext
46 lines
1.2 KiB
Plaintext
|
---
|
||
|
|
title: 应用外壳
|
||
|
|
description: 组装共享 Header、Sidebar、面包屑、聊天和通知界面。
|
||
|
|
order: 11
|
||
|
|
toc:
|
||
|
|
- id: render-app-layout
|
||
|
|
title: 渲染 AppLayout
|
||
|
|
- id: layout-inputs
|
||
|
|
title: 布局输入
|
||
|
|
- id: optional-preset
|
||
|
|
title: 可选预设
|
||
|
|
---
|
||
|
|
|
||
|
|
## 渲染 AppLayout {#render-app-layout}
|
||
|
|
|
||
|
|
`AppLayout` 是本教程其余部分的集成点：
|
||
|
|
|
||
|
|
```tsx
|
||
|
|
import { AppLayout } from "@workspace/blocks/layout"
|
||
|
|
|
||
|
|
export function WorkspaceLayout() {
|
||
|
|
return (
|
||
|
|
<AppLayout
|
||
|
|
navigationGroups={navigationGroups}
|
||
|
|
notifications={{
|
||
|
|
queryKey: ["notifications"],
|
||
|
|
queryFn: loadNotifications,
|
||
|
|
}}
|
||
|
|
chatThreads={chatThreads}
|
||
|
|
>
|
||
|
|
<Outlet />
|
||
|
|
</AppLayout>
|
||
|
|
)
|
||
|
|
}
|
||
|
|
```
|
||
|
|
|
||
|
|
## 布局输入 {#layout-inputs}
|
||
|
|
|
||
|
|
应用外壳组合了 `AppSidebar`、`AppBreadcrumb`、`AppQueryIndicator`、`UserMenu`、通知 Sheet 和聊天线程。产品需要更多全局控件时可传入 `headerActions`。
|
||
|
|
|
||
|
|
路由内容仍作为布局的 `children`，因此该包不会限制应用使用的路由器。
|
||
|
|
|
||
|
|
## 可选预设 {#optional-preset}
|
||
|
|
|
||
|
|
`@workspace/blocks/layouts/vega` 提供可选的视觉外壳。它位于独立入口，因此标准布局不会包含预设专属代码。
|