移动端右侧滑出筛选面板需用 fixed+js 控制显隐并禁用 body 滚动，否则 ios 卡死、android 点击穿透；right: -260px 比 right: -100% 更稳定；须阻止 touchmove 默认行为、延迟执行关闭逻辑、隔离 dom 渲染与状态更新、及时设置 overflow:hidden。
移动端右侧滑出筛选面板不能靠 <select></select> 或纯 CSS 动画硬推，必须用 position: fixed 控制层级 + JS 控制显隐状态 + 显式禁用 body 滚动，否则 iOS 会卡死、Android 会穿透点击、键盘弹出后无法收起。
为什么 right: -100% 不如 right: -260px 可靠
百分比位移在 viewport 宽度变化（比如横屏/软键盘弹出）时会重算，导致面板错位或残留空白；固定像素值（如 right: -260px）配合明确的 width: 260px 才能保证入场/退场位置稳定。iOS Safari 对 transform: translateX() 的渲染有延迟，且动画中若触发 layout thrashing（如同时改 scrollTop），容易丢帧。
- 始终用
px单位定义面板宽度和偏移量，不要用%或vw - 如果支持横屏，监听
orientationchange后手动重设right值，而不是依赖媒体查询 - 动画过渡用
transition: right .3s ease，避免all—— 否则改z-index或opacity也会触发动画
点击遮罩层关闭时，touchmove 必须阻止默认行为
移动端手指滑动关闭面板时，touchmove 默认会滚动背景页，造成“关不掉”假象；更糟的是，iOS 在 fixed 元素上触发 touchmove 会强制激活 overscroll 回弹，干扰面板收起逻辑。
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
- 给遮罩层绑定
touchstart事件，并在回调里调用event.preventDefault() - 关闭逻辑统一放在
touchend或click，但需加setTimeout(..., 0)延迟执行，避开 iOS 的 click 延迟陷阱 - 遮罩层
z-index必须比面板低（如面板z-index: 1000，遮罩z-index: 999），否则 iOS 点击穿透到下层
多级联动数据加载必须隔离 DOM 渲染与状态更新
省→市→区三级筛选若把所有数据一次性塞进 HTML，DOM 节点数暴涨，低端机直接卡死；而每次点击都发请求又可能并发混乱，尤其用户快速连点两级时。
- 用
data-level="1"标记当前展开层级，每次点击只清空data-level > clickedLevel的容器 - 首次展开一级时，只渲染省级列表；选中某省后，再用
fetch()拉取该省下的市级数据，响应成功后再innerHTML = ''替换二级容器 - 每个选项元素必须带
data-id和data-parent-id，避免靠 DOM 层级找父级（parentNode在动态插入时不可靠） - 点击「返回」按钮时，不是
history.back()，而是level--并还原上一级的data-selected状态，否则提交时会漏掉上级选择
最易被忽略的是：面板打开时，document.body.style.overflow = 'hidden' 必须在 class 切换前设置，否则 iOS 会在动画过程中短暂滚动背景页；且关闭后要立刻恢复 overflow: auto，不能等 transition 结束——因为 transition 时间可能被用户手势中断。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
