Flex布局实现后台侧边栏需理清结构与行为：侧边栏作为flex子项设flex: 0 0 240px，主内容区设flex: 1并独立滚动；语义化标签（、）配合sticky定位、aria-current高亮及移动端抽屉式切换，禁用fixed避免脱离文档流。

用 Flex 布局实现后台管理面板侧边栏，核心不是“堆样式”，而是理清结构关系和行为边界：侧边栏必须作为 flex 子项参与宽度计算，主内容区要能自动避让、滚动独立、状态可维护。

结构语义化 + Flex 容器统一控制

先用语义标签搭骨架，再靠 Flex 分配空间：

DeepBI DHTML 页面生成器

生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur

下载

• 外层用
  或

  作 flex 容器，设 display: flex; min-height: 100vh;
• 侧边栏用 @#@#@#@#@#@#@#@#@#@0，服务端或构建时注入 aria-current
• CSS 写 a[aria-current="page"] { background: #007bff; color: white; }，比纯 .active 更可靠、更无障碍
• 禁用 position: fixed——它会让侧边栏脱离文档流，主内容无法感知其存在，iOS 动画还容易卡顿

移动端收起 + 抽屉式展开

不是简单 display:none，而是保持交互完整性和视觉反馈：

• 默认隐藏：给
  加 transform: translateX(-100%); 和 transition: transform 0.3s ease;
• 用 配合 触发，无需 JS 也能切换
• 桌面端媒体查询中取消 translate，并设 position: static;，恢复正常布局流
• Overlay 层必须覆盖整个视口，点击它要能关闭菜单——事件绑定在 overlay 元素上，且阻止冒泡，避免点到菜单内部也触发关闭