---
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` 提供可选的视觉外壳。它位于独立入口，因此标准布局不会包含预设专属代码。