侧边导航+内容

Sidebar Layout

布局模式也叫：侧边栏布局、左右布局、后台管理布局、左侧菜单布局、Sidebar Navigation

一句话：左侧是一条竖向的功能菜单，右侧是当前菜单对应的页面内容，适合功能模块多、需要频繁切换的后台系统。

详细解释

侧边导航+内容是后台管理系统的标准框架：左侧一条宽约 200~240px 的竖向菜单，列出「概览、订单管理、商品管理、用户管理、系统设置」等功能模块，可以展开二级菜单；右侧是当前模块的内容区，顶部常有一条窄顶栏放面包屑和用户头像。

竖向排列能放下很多菜单项和多级层级，用户随时能看到系统有哪些功能、自己当前在哪一项。侧栏通常可以折叠成只显示图标的窄条，给内容区腾出空间。

注意它和「主从布局」的区别：侧边导航的左栏是固定的功能菜单，点击后右侧换成另一个功能页面；主从布局的左栏是一条条数据记录，点击后右侧显示这条记录的详情。

灰度线框示意，只表达结构，不代表具体视觉风格。

可以直接贴给 Cursor、Claude Code 等工具，把里面的业务内容换成你自己的。

用侧边导航+内容布局：左侧菜单宽 220px，可折叠成 64px 只显示图标，菜单项包括「概览、订单管理（含子菜单）、商品管理、用户管理、系统设置」，当前项高亮；右侧顶部是 56px 高的顶栏，放面包屑和用户头像，下方内容区浅灰背景、内边距 24px。侧栏固定不动，只有内容区滚动。

左侧是固定宽度的竖向菜单栏；右侧上方是窄顶栏（面包屑、用户入口），下方是占满剩余空间的内容区。

插件本地识别时匹配的 CSS 选择器（标签、ARIA role、常见组件库 class）。