侧边栏折叠展开应使用CSS变量配合transition实现width渐变，避免JS动画帧；需设overflow:hidden防溢出，用--sidebar-width和--sidebar-collapsed-width变量控制尺寸，transition仅作用于width，结合requestAnimationFrame防重排、disabled防连点，并兼顾响应式、可访问性与状态持久化。
用 CSS 变量 + transition 控制侧边栏宽度
侧边栏折叠展开本质是控制 width 的渐变切换，别硬写 JS 动画帧。核心是用一个布尔类（比如 .sidebar-collapsed）触发 CSS 变量变化，再靠 transition 衔接。注意：必须给侧边栏设 overflow: hidden，否则文字会溢出或换行错乱。
实操建议：
立即学习“前端免费学习笔记（深入）”；
DeepBI DHTML 页面生成器
下载
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
- 定义两个 CSS 变量：
--sidebar-width: 240px和--sidebar-collapsed-width: 60px - 侧边栏容器用
width: var(--sidebar-width)，并在.sidebar-collapsed下覆盖为width: var(--sidebar-collapsed-width) - 加
transition: width 0.3s ease-in-out—— 不要只写all，否则可能触发重排或影响子元素动画 - 图标按钮的
title属性要在折叠时动态更新（JS 控制），不然用户 hover 不知道当前状态
点击按钮切换 class 时避免 layout thrashing
直接 element.classList.toggle('sidebar-collapsed') 看似简单，但若后续有 JS 读取 offsetWidth 或 getComputedStyle，可能强制触发同步重排。尤其在快速连点时容易卡顿或状态错乱。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 用
requestAnimationFrame延迟读取尺寸操作，例如：折叠后想记录当前宽度，不要紧挨着toggle写el.offsetWidth - 按钮点击后立即禁用（
button.disabled = true），并在transitionend事件里恢复，防止连点导致 class 错乱 - 如果侧边栏含 Vue/React 组件，确保折叠逻辑不依赖组件内部的
ref尺寸计算 —— 优先用 CSS 变量驱动，而非 JS 测量
折叠后保留关键交互元素（图标、通知点）
纯收缩到 60px 后，文字消失是正常预期，但用户仍需识别功能入口。不能只靠图标语义，还要考虑可访问性与误触。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 用
display: flex; flex-direction: column; align-items: center布局菜单项，让图标垂直居中 - 每个菜单项加
padding: 12px 0（上下留空），避免折叠后点击热区过小 - 通知徽标（badge）用绝对定位，右上角偏移量固定（如
right: 8px; top: 8px），不要依赖父容器宽度计算 - 鼠标悬停展开（hover 展开）仅限桌面端，移动端必须保留点击触发，且要加
touch-action: manipulation避免延迟
响应式断点下自动展开/收起
PC 端默认展开、移动端默认收起是常见需求，但别用 JS 监听 window.resize 频繁判断 —— 容易抖动，也难维护。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 用媒体查询配合
:has()（现代浏览器）或纯 CSS 类组合，例如：@media (max-width: 768px) { .sidebar { width: var(--sidebar-collapsed-width); } } - 如果需 JS 感知断点变化，用
matchMedia而非resize事件：const mql = window.matchMedia('(max-width: 768px)'); mql.addEventListener('change', handler) - 服务端渲染（SSR）场景下，首次加载时 JS 还没执行，CSS 必须能独立决定初始状态，所以断点逻辑优先写在 CSS 里
