# 08 - 剪贴板集成(读取 / 粘贴 / 降级) ## 功能目标 - 支持 Ctrl+V 粘贴文本/文件到传输区域。 - 支持按钮主动读取系统剪贴板文本(在权限允许的情况下)。 - 在权限受限或浏览器不支持时提供清晰降级提示。 ## 前端(Vue) - **粘贴事件处理** - 监听 `paste`,遍历 `e.clipboardData.items`: - `kind=file`:提取 File,走文件传输流程 - `kind=string && type=text/plain`:提取文本,填充输入框或直接发送 - **主动读取剪贴板** - `navigator.clipboard.readText()`:读取文本并 emit `text-pasted` - 失败提示:“无法读取剪贴板,请手动粘贴”(常见于非 HTTPS、权限未授予、浏览器策略限制) - **组件建议** - `FileDropZone.vue`:承载粘贴与读取按钮 - `utils/clipboard.js`:封装权限判断与异常处理(便于复用) ## 后端(Spring Boot) - 无需专门接口支持;剪贴板只影响前端如何生成 `TEXT/FILE` 消息。 ## 边界与注意点 - **HTTPS/权限**:`navigator.clipboard` 通常要求安全上下文(HTTPS/localhost)与用户手势。 - **可用性**:粘贴是最稳妥的降级方式,读取按钮只是增强能力。