Sidebar App Shell
应用侧栏架构
左侧常驻导航侧栏、右侧主工作台独立滚动的现代桌面与 Web 应用骨架。
Live Demo
真的可以点你刚才看到的这个：Notion、Linear 或飞书的桌面端：最左边是一列深灰色的工作空间树和菜单导航，右边是一片宽敞的主文档区，中间滚动时左侧菜单丝毫不动。
它到底是什么
应用侧栏架构（App Shell）是 SaaS、生产力工具与中后台系统的基石。与普通营销网页不同，应用外壳会锁死浏览器整屏高度（h-screen overflow-hidden），侧边栏常驻左侧保证工作上下文随时可切换，主内容区在右侧独立滚动。同时支持侧边栏收折为紧凑图标条（Rail），移动端自动转换为抽屉。
Anatomy · 它由什么组成
Fixed Sidebar固定侧边栏
承载团队切换、导航树与个人设置
Collapsible Rail紧凑折叠导轨
收起后仅显示微图标节省空间
App Header / Breadcrumb顶栏面包屑区
当前路径、搜索框与快捷操作
Independent Canvas独立主画布
overflow-y-auto 独立滚动区域
When to Use
什么时候该用 / 不该用| 情况 | 推荐 |
|---|---|
| SaaS 软件、管理后台、企业应用、CRM 仪表盘 | 用 |
| 需要深度多层级页面切换且要求保持当前工作上下文 | 用 |
| 开发者工具、文档知识库（带章节目录树） | 用 |
| 单页面营销落地页、短流程宣传站（浪费横向空间且增加认知负担） | 不用 |
| 长篇小说沉浸式阅读页（容易分散注意力） | 不用 |
未做滚动隔离，侧栏和主页面一起随着鼠标滚轮滚走，导致用户想换菜单必须先滚回顶部。
在移动端直接按桌面端硬挤侧栏，未提供汉堡按钮 + 抽屉（Drawer/Sheet）降级方案。
Similar Patterns
别搞混Sidebar App Shell当前
应用侧栏架构
左侧常驻导航侧栏、右侧主工作台独立滚动的现代桌面与 Web 应用骨架。
Split Screen
双栏分屏
将屏幕水平切分为左右两半，一侧负责沉浸式品牌传达，另一侧承载核心交互。
一句话区分：左侧常驻导航侧栏、右侧主工作台独立滚动的现代桌面与 Web 应用骨架。
怎么告诉 AI
三层 Prompt补上组件名和具体内容
使用 App Shell 架构：全屏视口高度，左侧侧栏宽度 260px 固定不滚动，右侧顶部面包屑导航，右侧主体区域独立纵向滚动，移动端侧栏收为抽屉。
不要只对 AI 说
Bad → Better不要这样对 AI 说
左边放侧边栏，右边放内容。
改成这样说
构建 SaaS 应用外壳 (App Shell)：h-screen flex overflow-hidden，左侧 260px 侧栏独立固定，右侧顶部 Header 配面包屑，主内容区 flex-1 overflow-y-auto，移动端提供 Drawer 抽屉切换。
分享这张卡
社交平台友好把这个 Pattern 做成 3:4（小红书）或 1:1（X / Reddit）的知识卡片，在浏览器里直接导出 PNG，不需要后端。