微信浮动图标需智能靠边而非简单fixed：用right:16px+top:50%+transform translatey(-50%)垂直居中，localstorage记忆位置，touch/mouse事件统一抽象，展开收起需js控制并适配可访问性。
微信浮动图标不是加个 position: fixed 就完事的——它得不遮正文、能收放、适配触屏、还要记住用户上次拖到哪，否则一刷新就回右下角，体验直接打五折。
怎么让微信图标固定在右侧且不挡内容
关键不是“固定”，而是“智能靠边”：用 right + top + transform: translateY(-50%) 垂直居中，同时预留安全边距。别硬写 right: 20px，因为小屏设备可能被浏览器地址栏遮住。
- 优先用
right: 16px（非 0），避免贴边导致 iOS Safari 地址栏遮挡 -
top: 50%配合transform: translateY(-50%)实现垂直居中，比算top: calc(50vh - 20px)更稳 - 加
z-index: 9999，但别盲目设成 999999——和页面已有弹窗层级冲突时反而失效 - 如果页面有横向滚动，
right会随滚动条右移，此时改用left: auto+right: 16px并确保父容器没overflow: hidden
点击展开二维码区域，为什么点一次就收不回去
常见错误是只监听了 click，没处理「再次点击关闭」或「点击外部关闭」逻辑。纯 CSS 的 :hover 在移动端根本不可用。
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
- 必须用 JS 切换类名，比如
wechat-widget--open控制.wechat-content的display或visibility - 展开后给
.wechat-btn加aria-expanded="true"，提升可访问性 - 绑定
document.addEventListener('click', closeIfOutside)，但要排除按钮和二维码区域本身（用e.target.closest()判断） - 别用
display: none做隐藏——动画过渡会失效；改用opacity: 0; height: 0; overflow: hidden;配合transition
拖拽移动后刷新页面，图标又回到默认位置怎么办
不存位置，拖了白拖。localStorage 是最轻量可靠的方案，但要注意读写时机和单位一致性。
- 在
touchend/mouseup后立刻写入：localStorage.setItem('wechatFloatPos', JSON.stringify({ left, top })) - 读取时做容错：
const pos = JSON.parse(localStorage.getItem('wechatFloatPos') || '{}')，避免解析失败报错 - 计算坐标时统一用
clientX/clientY，别混用pageX/pageY（滚动后偏差大） - 限制边界：拖到顶部不能
top ，拖到底部不能 <code>top > window.innerHeight - 48（预留操作空间）
PC 和手机都要支持，事件监听怎么写才不重复
别写两套事件监听器。用特性检测 + 统一抽象，而不是 UA 判断。
- 检测是否支持 touch：
'ontouchstart' in window，真则用touchstart/touchmove/touchend，假则用mousedown/mousemove/mouseup - mousemove/mouseup 必须绑定到
document上，否则鼠标移出图标就停止拖拽 - touchmove 一定要
e.preventDefault()，否则 iOS 会触发页面缩放或滚动 - 拖拽中实时更新
style.left和style.top，别反复 setAttribute，性能差
真正难的不是让图标飘起来，而是它飘在哪、什么时候展开、拖完记不记得——这些细节没处理好，用户第一次用就关掉页面。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
