# 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` ✅ 成功