纯 CSS 实现伸缩式侧栏导航可行，需用 checkbox 控制状态、flex/grid 隔离布局；左栏用 flex: 0 0 240px + box-sizing: border-box，右栏 flex: 1；grid 方案用 minmax(64px, 240px) 1fr；主内容区加 overflow: auto；侧栏需 overflow-y: auto、文字用 opacity+visibility 过渡；移动端改用 position: fixed + transform；可访问性细节不可忽视。
纯 CSS 实现伸缩式侧栏导航是可行的，但必须满足两个前提：结构上用 <input type="checkbox"> 控制状态，布局上用 display: flex 或 display: grid 隔离伸缩行为——否则宽度切换会引发内容挤压、滚动错位、文字换行失效等连锁问题。
用 flex 布局隔离侧栏与主内容区
侧栏和主内容不能共用一个未约束的 flex 容器；否则当侧栏宽度从 240px 缩到 64px 时，主内容区可能被意外压缩或触发换行。正确做法是让父容器设 display: flex，左栏用 flex: 0 0 240px（禁拉伸、禁收缩、基础宽），右栏用 flex: 1 吃掉剩余空间。
-
flex: 0 0 240px比width: 240px更安全，避免 padding/border 导致实际宽度超限 - 必须加
box-sizing: border-box到左栏，否则边框和内边距会额外加宽 - 右栏若含长英文或 URL，需加
word-break: break-word防溢出 - 小屏堆叠时，只改
flex-direction: column，不碰 width 百分比
grid-template-columns 中 minmax() 控制折叠态最小宽度
用 display: grid 的方案里，grid-template-columns: minmax(64px, 240px) 1fr 是关键写法。它让侧栏在收起时保持至少 64px（够放图标），展开时最多撑到 240px（容下文字），且不会因内容过多而无限拉宽。
- 不用
240px 1fr——收起后宽度固定死，无法响应式收缩 - 不用
64px 1fr——展开后文字被截断，失去可读性 -
minmax()是唯一能同时兼顾“最小可用”和“最大容错”的方式 - 主内容区（
1fr列）必须加overflow: auto，否则溢出会撑破整个视口
纯 CSS 切换依赖 :checked + 兄弟选择器，但结构不能错位
核心是把 <input type="checkbox"> 放在导航栏最顶部，并用相邻兄弟选择器（~）控制后续元素样式。一旦 DOM 顺序错位（比如按钮不在 checkbox 后面），:checked ~ .sidebar 就完全失效。
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
立即学习“前端免费学习笔记（深入）”；
- checkbox 必须是第一个子元素，且不可隐藏（
visibility: hidden可，display: none不可） - 切换按钮要用
label[for="xxx"]关联 checkbox，而非 JS 绑 click - 侧栏本身要设
overflow-y: auto并限定最大高度，否则菜单项多时会无限拉长容器 - 收起状态下所有文字、徽章、箭头需统一用
opacity: 0+visibility: hidden配合transition，不能只靠display: none（会打断动画）
移动端滑入式侧栏必须用 position: fixed + transform
桌面端的宽度切换在移动端不适用——用户需要的是从左滑入的覆盖层。此时不能复用同一套 flex/grid 宽度逻辑，而要另起一套定位方案：
- 侧栏加
position: fixed; top: 0; left: -100%; width: 240px; height: 100vh; - 用
transform: translateX(100%)替代left动画，性能更好且不触发重排 - 遮罩层（
.overlay）必须紧跟侧栏之后，用z-index确保盖住主内容 - JS 仅负责 toggle class，所有动画和显隐全由 CSS 的
transition和:checked ~控制
真正难的不是怎么缩，而是缩完之后文字是否还对齐、图标是否还居中、焦点是否还能键盘操作、屏幕阅读器能否感知状态变化——这些细节不会在 flex 或 grid 的文档里写明，但一漏就导致可访问性失败。
