docs(layout): document app layout composition

2026-09-30 01:30:56 +08:00
parent ffda0b9099
commit 57d006a39b
10 changed files with 573 additions and 0 deletions
@@ -0,0 +1,54 @@
+---
+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 会在布局上下文内部创建。