---
description: "详情页的地基形状：左是主内容（描述、正文、讨论），右是窄栏元信息（状态、参与者、相关链接）。宽屏两栏并列，窄屏塌缩为单栏。用现成小组件（卡片 / 描述列表 / 状态芯片）拼装，不搞硬编码大块"
---

# 多栏布局（主内容 + 元信息侧栏）

详情页的地基形状：**左**是主内容（描述、正文、讨论），**右**是窄栏元信息（状态、参与者、相关链接）。宽屏两栏并列，窄屏塌缩为单栏。用现成小组件（卡片 / 描述列表 / 状态芯片）拼装，不搞硬编码大块。

<iframe src="/skills/dashboard/assets/demo-page-layout.html"
        style="width:100%;height:640px;border:1px solid #8884;border-radius:10px"
        loading="lazy" title="形状 demo：多栏布局"></iframe>

试这几下：

- 点右上**切窄屏预览** —— 布局立刻塌成单栏，侧栏三张卡片变**手风琴**可折叠
- 直接把浏览器/iframe 拉窄到 720px 以下 —— 效果一样，走的是 CSS 断点（此时按钮变灰，因为已经在自然塌缩下了）
- 侧栏「状态」段控切换 / 发评论 / 删评论 —— 变更 toast、破坏性删除先弹确认

## 规矩

- **主内容独立可读**：侧栏塞的是补充信息（谁、什么时候、去哪里看更多），移除后主内容仍讲得通；这是「可以塌缩到下面」的前提
- **必须响应式**：宽屏 `1fr / 320px` 两栏，窄屏单栏堆叠。demo 用 CSS Grid + `.narrow` 类内联切换 + 媒体查询做自然塌缩；真实版做成布局组件，断点靠 Tailwind `lg:grid-cols-[1fr_320px]`
- **卡片组合，不 monolith**：主/侧栏内部都用现成小组件（`Card`、`DescriptionList`、`StatusChip`、`Button`）拼；同一份加载好的记录喂给不同分区，不是一坨 JSX
- 侧栏折叠状态**可选**放 URL / localStorage —— 用户展开了「参与者」这类偏好跨会话保留；demo 只在内存里，刷新即回默认

> 蓝本：`add-page-layout.md`[^add-page-layout]（open-dashboard @ `aa9815f`，MIT，Invariants 已消化进上面「规矩」）

??? abstract "demo 源码：`assets/demo-page-layout.html`（自包含、未压缩）"

    ```html
    --8<-- "skills/dashboard/assets/demo-page-layout.html"
    ```

[^add-page-layout]: [`add-page-layout.md`](https://github.com/ahpxex/open-dashboard/blob/aa9815f426e9520841c4aa15a341bfd9f866091f/.claude/skills/add-component/references/add-page-layout.md)，2026-07-28 读。