69 lines
4.1 KiB
Markdown
69 lines
4.1 KiB
Markdown
|
# 2026-06-10 工作日志
|
|||
|
|
|
|||
|
|
## 截图功能不可用 & 无法粘贴图片文件 — 修复（23:19）
|
|||
|
|
|
|||
|
|
### 问题1：截图功能不可用
|
|||
|
|
- **根因**：两个 ScreenshotEditor.vue 根 div 都有 `v-if="visible"`，但父组件没传 `visible` prop
|
|||
|
|
- 父组件用 `v-if="showScreenshotEditor"` 控制渲染，子组件的 `v-if="visible"` 冗余且导致内容永远隐藏
|
|||
|
|
- **修复**：删除 `frontend-agent/src/components/chat/ScreenshotEditor.vue` 第10行 和 `frontend-h5/src/components/chat/ScreenshotEditor.vue` 第10行 的 `v-if="visible"`
|
|||
|
|
|
|||
|
|
### 问题2：会话框无法粘贴图片、文件
|
|||
|
|
- **坐席端根因**：`handlePaste` 只处理 `image/*` 类型，非图片文件无法粘贴
|
|||
|
|
- **坐席端修复**：
|
|||
|
|
- `handlePaste` 改为检查 `item.kind === 'file'` 处理所有文件类型
|
|||
|
|
- 新增 `handleFileUpload()` 函数：上传非图片文件并发送 `file` 类型消息
|
|||
|
|
- **H5端根因**：
|
|||
|
|
- `handlePaste` 只处理 `image/*`
|
|||
|
|
- `handleImageUpload` 上传后没有调用发送（只 console.log）
|
|||
|
|
- **H5端修复**：
|
|||
|
|
- `handlePaste` 支持所有文件类型
|
|||
|
|
- `handleImageUpload` 上传后调用 `store.sendNewMessage()` 发送图片链接
|
|||
|
|
- 新增 `handleFileUpload()` 处理非图片文件
|
|||
|
|
|
|||
|
|
### 修改文件清单
|
|||
|
|
- `frontend-agent/src/components/chat/ScreenshotEditor.vue` — 删除 `v-if="visible"`
|
|||
|
|
- `frontend-h5/src/components/chat/ScreenshotEditor.vue` — 删除 `v-if="visible"`
|
|||
|
|
- `frontend-agent/src/components/chat/ReplyBox.vue` — 修复 `handlePaste`，新增 `handleFileUpload()`
|
|||
|
|
- `frontend-h5/src/components/chat/InputBar.vue` — 修复 `handlePaste`，修复 `handleImageUpload`，新增 `handleFileUpload()`
|
|||
|
|
|
|||
|
|
### 构建状态
|
|||
|
|
- 坐席端：`npx vite build` ✅ 成功
|
|||
|
|
- H5端：`npx vite build` ✅ 成功
|
|||
|
|
|
|||
|
|
---
|
|||
|
|
|
|||
|
|
## 422错误 + 截图发送失败 + H5截图无法选中 — 修复（23:50）
|
|||
|
|
|
|||
|
|
### 问题1：文件粘贴请求失败422 + 截图发送失败
|
|||
|
|
- **根因1**：`uploadFile()` 中 Blob 被 append 了**两次**（第一次没文件名，第二次有文件名）
|
|||
|
|
- 坐席端 `upload.ts`：先 `formData.append('file', file)` 无条件 append 一次，然后 `if (Blob)` 再 append 一次
|
|||
|
|
- FormData 中有两个 `file` 字段，FastAPI 可能取到第一个（无文件名），导致解析失败
|
|||
|
|
- **根因2**：手动设 `Content-Type: multipart/form-data` **覆盖了浏览器自动生成的 boundary**
|
|||
|
|
- 发送 FormData 时浏览器会自动生成 `Content-Type: multipart/form-data; boundary=----xxx`
|
|||
|
|
- 手动设 `headers: { 'Content-Type': 'multipart/form-data' }` 会丢弃 boundary
|
|||
|
|
- 后端无法解析没有 boundary 的 multipart 请求体 → 422 Unprocessable Entity
|
|||
|
|
- **修复**：
|
|||
|
|
- `frontend-agent/src/api/upload.ts`：去掉无条件 append，改为 if/else 分支；删除 `Content-Type` 头
|
|||
|
|
- `frontend-h5/src/api/upload.ts`：删除 `Content-Type` 头
|
|||
|
|
|
|||
|
|
### 问题2：H5截图无法选中（暗色遮罩阻挡 + passive事件）
|
|||
|
|
- **根因1**：`.screenshot-dark-overlay` 在选区绘制层内部，拦截了所有触摸事件
|
|||
|
|
- 修复：加 `pointer-events: none`，让触摸事件穿透遮罩到达选区层
|
|||
|
|
- **根因2**：`onTouchStart`/`onTouchMove` 调用 `e.preventDefault()` 但 Vue 在移动端默认用 passive 模式绑定触摸事件
|
|||
|
|
- passive 模式下 `preventDefault()` 无效且报 warning
|
|||
|
|
- 修复：模板中移除 `@touchstart`/`@touchmove`，改为 `onMounted` 中用 `addEventListener` 手动绑定非 passive 监听器
|
|||
|
|
|
|||
|
|
### 问题3：坐席端截图选区也可能被遮罩阻挡
|
|||
|
|
- **根因**：坐席端 ScreenshotEditor 的 `.screenshot-dark-overlay` 也缺少 `pointer-events: none`
|
|||
|
|
- **修复**：坐席端同样加 `pointer-events: none`
|
|||
|
|
|
|||
|
|
### 修改文件清单
|
|||
|
|
- `frontend-agent/src/api/upload.ts` — 修复双重 append + 删除手动 Content-Type
|
|||
|
|
- `frontend-h5/src/api/upload.ts` — 删除手动 Content-Type
|
|||
|
|
- `frontend-agent/src/components/chat/ScreenshotEditor.vue` — 暗色遮罩加 `pointer-events: none`
|
|||
|
|
- `frontend-h5/src/components/chat/ScreenshotEditor.vue` — 暗色遮罩加 `pointer-events: none`；触摸事件改为非 passive 手动绑定
|
|||
|
|
|
|||
|
|
### 构建状态
|
|||
|
|
- 坐席端：`npx vite build` ✅ 成功
|
|||
|
|
- H5端：`npx vite build` ✅ 成功
|