---
title: 工作区布局
description: 组合导航、内容和 AI 辅助面板。
order: 30
toc:
  - id: layout
    title: 创建布局
  - id: controls
    title: 添加控制
---

## 创建布局 {#layout}

```tsx
export function Workspace() {
  return (
    <AppLayout
      className="application-layout"
      header={WorkspaceHeader}
      rail={ActivityRail}
      sidebar={Explorer}
      aside={Assistant}
      footer={StatusBar}
      defaultLayout={{
        headerStart: "content",
        footerStart: "sidebar",
      }}
    >
      <Editor />
    </AppLayout>
  )
}
```

当用户折叠 Sidebar 后，Header 和 Footer 中以 `"sidebar"` 为起点的区域会自动内移到内容列，网格不会保留空轨道。

## 添加控制 {#controls}

```tsx
function WorkspaceHeader() {
  const { layout, toggleAside, toggleSidebar } = useLayoutConfig()

  return (
    <header>
      {layout.sidebarCollapsible && (
        <button onClick={toggleSidebar}>Explorer</button>
      )}
      {layout.asideEnabled && <button onClick={toggleAside}>Assistant</button>}
    </header>
  )
}
```

控制组件不需要从应用逐层接收回调；组件型 slot 会在布局上下文内部创建。