yinjianm
b3a8d504d1
统一工单工作台回复区的图片上传链路，支持按钮选择、 拖拽放下和剪贴板粘贴三种入口，并复用现有图片校验、 上传接口与 Markdown 图片插入逻辑。 同时将回复区样式拆分为独立 SCSS 文件，补充拖拽激活、 上传中提示与发送禁用状态，并同步更新知识库归档信息。
3.2 KiB
3.2 KiB
任务清单: ticket-chat-image-dnd-paste-upload
@status: completed | 2026-04-27 23:19
@feature: ticket-chat-image-dnd-paste-upload
@created: 2026-04-27
@status: completed
@mode: R2
LIVE_STATUS
{"status":"completed","completed":4,"failed":0,"pending":0,"total":4,"percent":100,"current":"工单聊天图片拖拽上传、粘贴上传与前端构建验证已完成","updated_at":"2026-04-27 23:18:00"}
进度概览
| 完成 | 失败 | 跳过 | 总数 |
|---|---|---|---|
| 4 | 0 | 0 | 4 |
任务列表
1. 工单回复图片上传交互
-
[√] 1.1 修改
admin-frontend/src/views/tickets/TicketWorkspaceDialog.vue- 预期变更: 新增统一图片文件提取、校验、上传和 Markdown 插入逻辑；点击上传、拖拽上传、粘贴上传共用同一处理路径。
- 完成标准: 图片点击/拖拽/粘贴都能调用
uploadImage()并追加；非图片和超 10MB 文件被拒绝。 - 验证方式: 代码审查 +
npm run build - depends_on: []
-
[√] 1.2 修改
admin-frontend/src/views/tickets/TicketWorkspaceDialog.vue- 预期变更: 在回复区绑定 dragenter/dragover/dragleave/drop 事件，在 textarea 绑定 paste 事件，并展示上传中/拖拽激活提示。
- 完成标准: 拖拽悬停状态可见；无图片粘贴不阻断原文本粘贴；上传中按钮和提示状态一致。
- 验证方式: 代码审查 +
npm run build - depends_on: [1.1]
2. 样式拆分与视觉状态
- [√] 2.1 新增
admin-frontend/src/views/tickets/TicketWorkspaceDialog.scss- 预期变更: 迁移原 SFC scoped 样式，并加入拖拽激活态、上传提示、移动端按钮换行样式。
- 完成标准:
TicketWorkspaceDialog.vue使用项目既有<style scoped lang="scss" src="./TicketWorkspaceDialog.scss"></style>模式；组件文件降到 400 行以下。 - 验证方式: 文件行数检查 +
npm run build - depends_on: [1.2]
3. 验证与知识库同步
- [√] 3.1 运行前端构建并同步知识库
- 预期变更: 执行
npm run build；更新.helloagents/modules/admin-frontend.md、方案包任务状态和 CHANGELOG/归档信息。 - 完成标准: 构建通过或明确记录阻断原因；知识库反映工单工作台支持点击、拖拽和粘贴图片上传。
- 验证方式:
npm run build+ 文件检查 - depends_on: [2.1]
- 预期变更: 执行
执行日志
| 时间 | 任务 | 状态 | 备注 |
|---|---|---|---|
| 2026-04-27 23:10:00 | 方案设计 | in_progress | 已创建方案包并确认唯一实现路径 |
| 2026-04-27 23:15:00 | 1.1 / 1.2 | completed | 已抽出 useTicketReplyImages，统一点击、拖拽、粘贴图片上传链路 |
| 2026-04-27 23:16:00 | 2.1 | completed | 已拆出 TicketWorkspaceDialog.scss，组件文件降至 326 行 |
| 2026-04-27 23:18:00 | 3.1 | completed | npm run build 已通过 |
执行备注
- 当前工作树已有
public/assets/admin未提交改动，本任务不覆盖该路径。 - 本地上传端到端依赖
/upload/rest/upload可用；构建验证不能替代真实上传环境人工核对。 npm run build会刷新public/assets/admin构建产物；该路径在执行前已经是未提交状态。