底部固定悬浮条用 position: fixed 实现，需设 bottom: 0、left: 0、width: 100vw、z-index: 2147483647 并防 overflow/transform 裁剪；一键分享中仅微博、qq 和复制链接可纯前端实现，微信必须引导用户手动分享。
底部固定悬浮条用 position: fixed 实现
直接在 底部追加一个 <div>，设为 <code>position: fixed 并锚定到底部边缘。关键不是“悬浮”，而是“固定定位 + z-index 确保在最上层”。bottom: 0 和 left: 0 是基础，宽度设为 100% 或 100vw（后者防滚动条偏移）。
常见错误：父容器设置了 overflow: hidden 或 transform，导致 fixed 元素被裁剪或相对定位失效；或者没加 z-index，被其他弹窗、广告遮住。
- 推荐用
z-index: 2147483647（最大安全整数），避免和第三方库冲突 - 加
box-sizing: border-box，方便后续加 padding/margin 不影响宽高 - 移动端注意加
max-width: 100%防止横屏溢出
一键分享按钮要兼容微信、微博、复制链接三类场景
纯前端分享受限于平台策略：微信不支持 JS 触发分享（需 JSSDK 绑定域名+签名），微博和 QQ 支持 URL Scheme，复制链接则靠 navigator.clipboard.writeText()。所以实际能“一键”完成的只有后两者 + 复制。
别信网上那些“一行代码微信分享”的方案——它们要么过期，要么只在调试工具里有效。
- 微博分享：跳转
https://service.weibo.com/share/share.php?title=xxx&url=xxx - QQ 分享：用
https://connect.qq.com/widget/shareqq/index.html?url=xxx - 复制链接：调用
navigator.clipboard.writeText(window.location.href)，需 HTTPS 或 localhost 环境 - 微信：只能引导用户点击右上角菜单 → “发送给朋友”或“分享到朋友圈”，按钮文字写清楚“请使用微信右上角分享”
按钮交互必须处理点击反馈和防重复触发
用户点一下没反应，大概率是没加视觉反馈或异步操作未 await。尤其是复制操作，成功/失败都要给提示，否则用户会狂点。
常见坑：navigator.clipboard.writeText() 是 Promise，不 await 就直接执行下一步，且失败时静默；另外 Safari 对该 API 支持较晚（iOS 13.4+），老版本需降级为 document.execCommand('copy')。
- 给按钮加
disabled属性 + loading 文字（如“已复制”），3 秒后自动恢复 - 捕获
clipboard.writeText()的catch，提示“复制失败，请手动选择链接” - 不要用
alert()，会打断操作流；用轻量 toast（几行 CSS 就够）
响应式布局下按钮间距和图标适配容易被忽略
底部条在手机上高度通常 48–56px，按钮宽高建议 40px × 40px，图标用 inline SVG（比 iconfont 更可控，无字体加载延迟）。横向排列时，左右留白至少 12px，防止误触。
PC 端如果也显示，要考虑鼠标悬停效果（:hover）和焦点状态（:focus-visible），否则不符合无障碍标准。
- SVG 图标记得加
aria-hidden="true"，文字说明放<span></span>里 - 用
@media (min-width: 768px)控制 PC 端是否显示，或改用更紧凑布局 - 避免用
flex: 1均分空间——微博和微信图标宽度不同，会导致文字按钮挤压变形
