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,52 @@
+---
+title: 设置应用布局
+description: 配置样式源并组合应用布局区域。
+order: 10
+toc:
+  - id: styles
+    title: 导入样式源
+  - id: compose
+    title: 组合区域
+  - id: sizes
+    title: 调整尺寸
+---
+
+## 导入样式源 {#styles}
+
+在应用全局样式中导入 Layout 的 Tailwind 源：
+
+```css
+@import "@workspace/layout/globals.css";
+```
+
+## 组合区域 {#compose}
+
+`AppLayout` 接受 React 节点或无必需属性的组件定义。需要业务属性时传入节点；需要组件从布局上下文读取状态时，可以直接传入组件定义。
+
+```tsx
+<AppLayout
+  header={AppHeader}
+  rail={ActivityRail}
+  sidebar={<NavigationSidebar groups={groups} />}
+  aside={AssistantPanel}
+  footer={StatusBar}
+>
+  <RouterOutlet />
+</AppLayout>
+```
+
+组件定义会在 `AppLayout` 的 Provider 内创建，因此 `AppHeader` 和 `AssistantPanel` 可以调用 `useLayoutConfig`。
+
+## 调整尺寸 {#sizes}
+
+通过 CSS 自定义属性调整辅助列宽度：
+
+```css
+.application-layout {
+  --layout-rail-width: 4rem;
+  --layout-sidebar-width: 18rem;
+  --layout-aside-width: 22rem;
+}
+```
+
+把该类名传给 `AppLayout`。内容列始终使用剩余空间，并允许收缩到零宽。