必须用、、语义标签物理隔离侧边栏、顶栏、内容区，而非CSS浮动或定位；此举为JS和自动化测试提供稳定选择器锚点，避免样式调整导致逻辑失效。
侧边栏、顶栏、内容区必须物理隔离
三块区域不能靠CSS浮动或绝对定位硬挤在一起，得用语义化标签明确切分。侧边栏用@#@#@#@#@#@#@#@#@#@0，别用id，避免克隆后重复
data-role="user-dropdown"标记，方便事件委托绑定用
这类声明只是存结构，克隆出来就是“裸DOM”：没事件、没状态、不响应。你看到模板里写了onclick="toggleSubmenu()"，那根本不会执行——克隆后节点还没挂到DOM树上，JS压根找不到那个onclick属性。
正确做法是克隆后立刻遍历子节点，对带data-role="dropdown-toggle"的按钮手动绑addEventListener('click', ...)。下拉菜单展开/收起的状态必须绑定到该实例自身（比如el._isOpen = true），而不是用全局变量或class切换，否则点开一个，其他全跟着动。
- 所有动态生成的菜单项，用
data-index或data-path传参，别拼字符串到href里 - 销毁组件时，必须调
removeEventListener，否则内存泄漏+重复绑定 - 不要用
innerHTML插入克隆结果——会丢掉已绑定的事件监听器，且无法保留对原始节点的引用
表单项绑定不能依赖form.elements自动遍历
想用for (let el of form.elements)统一处理赋值和监听？这在多选框、下拉框、文本域混合场景下必然翻车。原因很实在：input[type=checkbox]是否选中看checked，不是value；textarea设值必须用.value，用textContent等于白写；select[multiple]要遍历selectedOptions，而单选直接读.value就行。
所以模板里每个控件得有明确标识，比如，JS才好按data-key映射到数据对象的user.email字段。填值时直接el.value = data[el.dataset.key]，监听时再反向写回去。
- 复选框组用
name统一，但取值逻辑单独写：收集所有name="role"且checked为true的value - 日期控件（
input[type=date]）的值是字符串格式"YYYY-MM-DD"，别拿new Date()硬转 - 禁用状态统一走
el.disabled = true，别只靠CSS加opacity
响应式断点要从布局骨架开始控制
移动端折叠侧边栏不是靠@media隐藏就完事。真正的通用性在于：顶栏必须能接管原属于侧边栏的导航入口，比如加个汉堡按钮，点击后在，只是渲染位置不同。
否则会出现“PC端菜单正常，手机点开空白”的情况——因为移动端菜单是另写的HTML，数据源、事件绑定、状态管理全都是两套逻辑，维护成本翻倍。
- 折叠逻辑触发后，用
document.body.classList.add('sidebar-collapsed')统一控制样式，别在多个CSS文件里重复写display: none - 顶栏搜索框在小屏下建议收进下拉菜单，避免挤压操作按钮空间
- 内容区的表格在移动端必须支持横向滚动，
overflow-x: auto加在外层容器，别只包真正难的不是写出一套能跑的布局，而是让侧边栏换图标、顶栏加通知角标、内容区换表格样式时，不用动其他两块的HTML和JS。骨架切得清，后续所有扩展才不会互相污染。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
