4.1 KiB
4.1 KiB
2026-06-10 工作日志
截图功能不可用 & 无法粘贴图片文件 — 修复(23:19)
问题1:截图功能不可用
- 根因:两个 ScreenshotEditor.vue 根 div 都有
v-if="visible",但父组件没传visibleprop- 父组件用
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
- 发送 FormData 时浏览器会自动生成
- 修复:
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 监听器
- passive 模式下
问题3:坐席端截图选区也可能被遮罩阻挡
- 根因:坐席端 ScreenshotEditor 的
.screenshot-dark-overlay也缺少pointer-events: none - 修复:坐席端同样加
pointer-events: none
修改文件清单
frontend-agent/src/api/upload.ts— 修复双重 append + 删除手动 Content-Typefrontend-h5/src/api/upload.ts— 删除手动 Content-Typefrontend-agent/src/components/chat/ScreenshotEditor.vue— 暗色遮罩加pointer-events: nonefrontend-h5/src/components/chat/ScreenshotEditor.vue— 暗色遮罩加pointer-events: none;触摸事件改为非 passive 手动绑定
构建状态
- 坐席端:
npx vite build✅ 成功 - H5端:
npx vite build✅ 成功