Maofeng
55 lines
1.2 KiB
Plaintext
55 lines
1.2 KiB
Plaintext
---
|
|
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 会在布局上下文内部创建。
|