左侧树状菜单自适应折叠的核心是状态驱动宽度+css过渡+dom结构隔离；需用css变量控制宽度、transition实现渐变动画、max-height替代display控制子菜单显隐，并持久化折叠状态。
左侧树状菜单支持自适应折叠，核心在于「状态驱动宽度 + CSS 过渡 + DOM 结构隔离」，不是靠 JS 操作 class 切换那么简单。直接改 style.width 或硬编码 200px/64px 会导致响应式失效、动画卡顿、父子组件状态不同步。
用 CSS 变量 + transition 控制折叠动画
折叠不是“显示/隐藏”，而是宽度渐变。必须用 transition 配合 CSS 自定义变量，否则 Safari 下会跳变，Vue/React 中绑定内联样式也容易丢帧。
- 在根元素或
:root定义--menu-width: 200px，并在.aside上用width: var(--menu-width) - 用 JS 修改
document.documentElement.style.setProperty('--menu-width', '64px')，而非直接操作 DOM style - 必须加
transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1)，避免用ease（太慢）或linear（生硬） - 注意：
flex布局下，如果父容器是display: flex，子项设width可能被flex-basis覆盖，需同时设flex: 0 0 var(--menu-width)
树状菜单节点的展开/收起不能只靠 display:none
单纯用 v-if 或 display: none 会让子菜单突然消失，破坏折叠动效连贯性，且无法做高度过渡。
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
- 对每个子菜单
<ul></ul>，用max-height+overflow: hidden替代display控制显隐 - 展开时设
max-height: 500px（足够容纳最多层级），收起时设max-height: 0，配合transition: max-height 0.25s ease-in-out - 避免用
height: auto—— CSS 无法对auto做过渡，会直接跳到最终高度 - 若节点含图标或 badge，记得同步控制其
opacity和transform: translateX()，否则折叠后残留视觉元素
移动端点击区域与折叠按钮的兼容处理
折叠按钮在小屏上常和汉堡菜单共存，但两者行为冲突：一个控制侧边栏宽度，一个控制菜单显隐，容易误触。
- 折叠按钮（
.menu-toggle）应仅在桌面断点生效：@media (min-width: 768px)内才显示 - 移动端优先用
position: fixed的侧滑菜单，折叠按钮不渲染，避免干扰手势 - 按钮图标不要用
<img>，用 SVG 内联或::before伪元素，确保缩放不失真、点击热区够大（至少 44×44px） - 监听
click时加event.preventDefault()，防止 iOS Safari 触发双击缩放
真正难的不是写几行 CSS，而是让折叠状态在路由切换、浏览器前进/后退、刷新后依然保持一致 —— 这需要把 isCollapsed 存进 localStorage 或 URL hash，且在组件挂载时读取并同步到 CSS 变量。很多人漏掉这步，导致用户每次刷新都回到默认宽度。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
