#PS切图做H5单页：看似过时，却是最高效的底层技能
帮朋友改金融类H5单页，Figma导出在iOS Safari上边缘发虚、阴影错位，退回PS手动切图后完美解决。PS切图不是怀旧，而是像素级视觉交付的保底技能。从图层命名规范、存储为Web所用格式的坑，到CSS Sprite手动计算、AI抠图进化，本文详解为何老手艺比新工具更靠谱。
git checkout分类：前端
#Vue 3 组合式 API 封装 WebSocket 心跳重连：实现后台实时消息推送与断线自动恢复
在实时推送场景中，原生 WebSocket 缺乏心跳检测和自动重连机制，导致断线后页面成为数据孤岛。本文深入剖析僵死连接的隐患，对比手写类与 VueUse useWebSocket 的优劣，并基于组合式 API 封装一个支持心跳、指数退避重连、多连接管理的 composable，让组件只需关注业务消息处理，无需操心连接健康度。
git checkout
#Vue 3 组合式 API 封装原生拖放：打造自由拖拽排序看板
本文介绍如何用 Vue 3 组合式 API 封装原生 HTML5 拖放，实现可跨列拖拽的任务看板。从事件处理、状态管理到数据同步，详细讲解 useDragAndDrop 组合函数的编写与测试，避免第三方库的局限性，让你轻松控制拖拽逻辑。
git checkout
#CSS滚动驱动动画+Vue3组合式API：实现高性能图片懒加载与渐进式模糊加载
本文介绍如何结合CSS滚动驱动动画与Vue3组合式API，实现高性能图片懒加载与渐进式模糊加载。通过IntersectionObserver控制加载时机，CSS动画驱动模糊到清晰的过渡，减少JS计算，提升用户体验。
git checkout
#用Vue 3组合式API封装浏览器通知与页面可见性，实现后台标签页消息聚合与免打扰
用户切到微信回了三句，再切回来——Notification API已经连发五条弹窗，遮住按钮、盖住表单、打断操作。这不是设计，是失控。Vue 3的ref和watch组合式API本该帮我们管住这事，但多数人直接在onMounted里调Notification.requestPermission()，再用new Notification()推送，压根没存状态、不判visibility、也不攒队列。结果就是：页面不可见时通知静默丢失；切回瞬间所有积压消息像推土机一样涌上来。本文教你用组合式API把document.hidden和Notification两套独立系统焊在一起，实现后台标签页消息聚合与免打扰。
git checkout
#Vue 3 组合式 API 封装 WebRTC 屏幕共享与远程协作标注
远程会议中屏幕共享后如何实时标注？本文用 Vue 3 组合式 API 封装 WebRTC，实现屏幕共享与远程协作标注。通过 useScreenShare() 管理流状态、资源回收和错误降级，避免静默失败；通过 useRemoteControl() 基于 DataChannel 传输归一化坐标，结合 canvas 叠加层实现低延迟标注。涵盖浏览器兼容性处理、光标同步优化与冲突解决策略。
git checkout
#Vue 3 响应式 API 封装剪贴板与拖放，实现跨标签页复制粘贴与批量上传
本文深入解析浏览器剪贴板与拖放 API 在跨标签页场景下的局限性，并基于 Vue 3 的 Composition API 封装 useClipboard 和 useDragDrop 两个 composable，实现响应式状态同步，解决跨标签页复制粘贴失效、拖放文件流丢失等问题。附带完整代码示例与最佳实践。
git checkout
#前端断点调试绕过付费资料下载限制，反推私域引流验证逻辑
付了费，资料包却提示“下载受限”。刷新、清缓存都没用，只能干着急。这往往不是服务器故意拦你，而是前端代码里一道“看得见但改不动”的门——JavaScript 在做本地校验。一把断点，就能撬开。本文通过实际案例，演示如何用 Chrome DevTools 断点调试绕过前端下载限制，并反推其背后的私域引流验证逻辑。
git checkout
#Vue实现资料包目录在线预览与动态水印叠加，扫码加微信下载完整版
本文介绍如何使用Vue-Office组件库实现文档在线预览，包括PDF、Word、Excel等格式，并叠加动态水印保护版权。用户浏览目录后，扫码加微信即可下载完整版，有效提升转化率。
git checkout
#用前端沙箱隔离技术打造付费资料包预览页，防扒防抓包引导加微信
做付费资料预览页，最怕用户打开F12直接扒走资源。本文介绍如何利用iframe sandbox、HMAC签名、短时效链接等前端沙箱隔离技术，让预览内容看得见摸不着，既保证真实体验又防止泄露，最终引导用户加微信获取完整版。
git checkout