27 lines
1.2 KiB
Markdown
27 lines
1.2 KiB
Markdown
# 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）与用户手势。
|
||
- **可用性**：粘贴是最稳妥的降级方式，读取按钮只是增强能力。
|
||
|