侧边栏收缩布局用 Flex 实现，核心是类名切换控制 width + transition 动画，主内容区设 flex: 1 和 min-width: 0，侧边栏设初始 width、min-width: 0 且不设 flex-shrink: 0；收缩时通过 .sidebar-collapsed 切换 width 和 overflow，图标保留、文字 opacity/width 归零；小屏下媒体查询隐藏侧边栏，汉堡菜单以 fixed 覆盖层唤出。
侧边栏收缩布局用 Flex 实现，核心是利用 flex 的弹性行为 + 类名切换控制宽度，配合 CSS 过渡实现平滑收放效果，无需 JS 计算尺寸。
基础结构：用 flex-direction: row 搭建主-侧布局
容器设为 display: flex，主内容区用 flex: 1 自适应剩余空间，侧边栏设初始宽度（如 width: 260px）并允许收缩：
- 侧边栏不写
flex: 0 0 auto（默认即可），但需加min-width: 0防止内容撑宽 - 主内容区必须设
min-width: 0，否则文字或长单词可能破坏收缩逻辑 - 避免在侧边栏上直接写
flex-basis和flex-shrink: 0，否则无法压缩
收缩控制：用 class 切换触发宽度变化
定义一个 .sidebar-collapsed 类，只改侧边栏的 width 和 overflow，不碰 flex 属性：
.sidebar { width: 260px; transition: width 0.3s ease; }.sidebar-collapsed { width: 60px; overflow: hidden; }- JS 只负责增删该 class，不操作 style 或 offsetWidth
图标与文字的响应式显示
侧边栏内元素根据宽度自动显隐，不用媒体查询：
- 文字用
span包裹，初始opacity: 1; width: auto; - 收缩时加
.sidebar-collapsed span { opacity: 0; width: 0; }，再配overflow: hidden - 图标保持显示，可加
flex-shrink: 0防被压缩变形
适配移动端：折叠后隐藏侧边栏
小屏下直接隐藏侧边栏，用汉堡菜单唤出：
- 媒体查询中设
@media (max-width: 768px) { .sidebar { display: none; } } - 点击按钮时给 body 加
sidebar-open类，用position: fixed覆盖层展示 - 此时 flex 布局退化为主内容区占满全屏，逻辑更清晰
