前端

左侧栏布局Sidebar

你可能会说

左边一列功能菜单，右边大块区域显示内容，像后台那样。

侧栏布局是一种把层级导航放在页面一侧、把主要任务内容放在另一侧的页面结构后台和工具产品常在左侧用侧栏组织项目、设置或功能入口，右侧留给当前工作区。需要明确侧栏宽度、折叠方式和内容区最小宽度；窄屏通常改成可开关的抽屉，并提供遮罩、关闭入口和正确的键盘焦点。

组成结构 · Anatomy

承载层级导航，可设置固定宽度或收起状态

面包屑、搜索、用户头像的位置

表格、表单等工作内容，随侧栏伸缩

常见变体 · Variants

固定侧栏Fixed

后台默认，导航常驻左侧

可收起侧栏Collapsible

内容需要更多横向空间时

抽屉式Drawer

移动端，点汉堡按钮滑出

典型使用场景

后台管理系统

小店后台 📊 仪表盘 🧾 订单管理 📦 商品库 👥 客户 ⚙️ 设置

订单管理

#20260721-018 · 林小满¥ 239.00已发货

#20260721-017 · 陈默¥ 88.00待付款

#20260720-132 · 阿梨¥ 459.00已完成

数据仪表盘

数据看板 📈 概览 🌐 流量来源 🔻 转化漏斗 🔁 用户留存 📑 报表中心

今日访问

12,847

新增用户

1,203

转化率

3.2%

控制台

云控制台 🖥 生产环境 🧪 预发环境 🚀 部署记录 🔔 监控告警 🔑 访问密钥

server-prod-01 运行中

➜ vibekit deploy --prod
构建完成 · 34 个文件 · 2.1s
✓ 已上线 https://app.example.com

多模块工具

效率盒子 📮 收件箱 3 📅 日历 ✅ 待办清单 ☁️ 云盘文件 📝 笔记

收件箱

林小满

方案我看过了，改两处就能发

10:24

GitHub

[vibe-ui] PR #48 已通过审查

09:51

陈默

周五评审会的材料先发你

昨天