admin/Xboard
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(admin-frontend): 补齐工单回复图片拖拽与粘贴上传

Browse Source 
统一工单工作台回复区的图片上传链路，支持按钮选择、
拖拽放下和剪贴板粘贴三种入口，并复用现有图片校验、
上传接口与 Markdown 图片插入逻辑。

同时将回复区样式拆分为独立 SCSS 文件，补充拖拽激活、
上传中提示与发送禁用状态，并同步更新知识库归档信息。
This commit is contained in:
yinjianm
2026-04-27 23:22:21 +08:00
parent 30c2f655e7
commit b3a8d504d1
11 changed files with 794 additions and 285 deletions
Download Patch File Download Diff File Expand all files Collapse all files
.helloagents/CHANGELOG.md
+14
View File
@@ -1,5 +1,19 @@
# CHANGELOG
## [0.5.19] - 2026-04-27
### 新增
- **[admin-frontend]**: 为工单工作台回复区补齐图片拖拽上传与剪贴板粘贴上传，统一复用现有图片上传接口和 Markdown 图片插入逻辑，并将超大工单工作台组件拆分出上传 composable 与独立 SCSS 样式文件 — by yinjianm
- 方案: [202604272310_ticket-chat-image-dnd-paste-upload](archive/2026-04/202604272310_ticket-chat-image-dnd-paste-upload/)
- 决策: ticket-chat-image-dnd-paste-upload#D001(统一图片入口到现有 Markdown 上传链路)
## [0.5.18] - 2026-04-27
### 快速修改
- **[admin-frontend]**: 调整节点管理状态筛选口径，“在线节点”现在同时包含显式在线与待同步节点，顶部在线节点统计同步采用相同口径；“离线节点”仍只匹配显式离线节点 — by yinjianm
- 类型: 快速修改（无方案包）
- 文件: admin-frontend/src/utils/nodes.ts:12-176
## [0.5.17] - 2026-04-25
### 修复
.helloagents/INDEX.md
+2 -2
View File
@@ -3,7 +3,7 @@
```yaml
kb_version: 2
project: Xboard-new
updated_at: 2026-04-25
updated_at: 2026-04-27
active_package: 无
```
@@ -11,7 +11,7 @@ active_package: 无
- 类型: PHP Laravel 主仓 + `admin-frontend` Vue3 管理端前端
- 当前重点模块: `admin-frontend`、`order-payment`、`subscription-protocols`
- 最新归档: `202604250002_order-payment-snapshot`
- 最新归档: `202604272310_ticket-chat-image-dnd-paste-upload`
## 活跃模块
.helloagents/archive/2026-04/202604272310_ticket-chat-image-dnd-paste-upload/.status.json
+10
View File
@@ -0,0 +1,10 @@
{
"status": "completed",
"completed": 4,
"failed": 0,
"pending": 0,
"total": 4,
"percent": 100,
"current": "工单聊天图片拖拽上传、粘贴上传与前端构建验证已完成",
"updated_at": "2026-04-27 23:18:00"
}
.helloagents/archive/2026-04/202604272310_ticket-chat-image-dnd-paste-upload/proposal.md
+165
View File
@@ -0,0 +1,165 @@
# 变更提案: ticket-chat-image-dnd-paste-upload
## 元信息
```yaml
类型: 新功能
方案类型: implementation
优先级: P2
状态: 已确认
创建: 2026-04-27
```
---
## 1. 需求
### 背景
`admin-frontend` 工单工作台当前已支持通过按钮选择图片，并将上传后的 URL 以 Markdown 图片语法插入回复框。客服处理截图类问题时，图片常来自本地文件拖入或剪贴板截图，单一按钮选择会降低连续回复效率。
### 目标
- 在 `admin-frontend/src/views/tickets/TicketWorkspaceDialog.vue` 的工单聊天回复区域支持拖拽图片上传。
- 在回复框聚焦时支持从剪贴板粘贴图片上传。
- 复用现有 `uploadImage()`、图片类型校验、10MB 大小限制和 Markdown 图片插入方式。
- 保留原有点击上传入口，并补齐上传中、拖拽悬停、失败提示等状态反馈。
- 将超大 SFC 的样式拆分到同目录 SCSS 文件，避免继续扩大 533 行组件文件。
### 约束条件
```yaml
时间约束: 无
性能约束: 不引入新依赖；拖拽/粘贴只处理图片文件，不做额外预览缓存
兼容性约束: 保持 Vue3 + Element Plus + Vite 现有技术栈；保留原有 /upload/rest/upload 上传接口
业务约束: 不修改后端工单回复语义，不改变 replyTicket payload，仅插入 Markdown 图片链接
```
### 验收标准
- [ ] 点击“上传图片”仍可上传图片并插入 `![image](url)`。
- [ ] 拖拽图片到回复区域可上传并插入 Markdown 图片。
- [ ] 在回复框中粘贴剪贴板图片可上传并插入 Markdown 图片。
- [ ] 非图片文件、超过 10MB 图片会被拒绝并展示明确提示。
- [ ] 上传中回复区有可见状态，重复上传不会破坏现有回复内容。
- [ ] `npm run build` 在 `admin-frontend` 通过。
---
## 2. 方案
### 技术方案
在 `TicketWorkspaceDialog.vue` 中抽出统一的 `uploadReplyImages(files, source)` 流程：从 Element Plus 上传、拖拽事件、粘贴事件统一收敛到同一校验与上传路径。回复区外层增加 drag/drop 事件和视觉状态，`ElInput` 增加 paste 事件。上传成功后继续以 Markdown 图片语法追加到 `replyMessage`，失败时按具体来源给出错误提示。样式迁移到 `TicketWorkspaceDialog.scss`，并新增拖拽激活态、上传提示行和响应式细节。
### 影响范围
```yaml
涉及模块:
- admin-frontend: 工单工作台回复区图片上传交互
预计变更文件: 4
```
### 风险评估
| 风险 | 等级 | 应对 |
|------|------|------|
| 粘贴文本时误触上传逻辑 | 低 | 仅当 clipboardData 中存在 image File 时拦截默认行为，否则保持原粘贴行为 |
| 多图拖拽上传时状态混乱 | 中 | 顺序上传并复用同一个上传状态，逐个插入 Markdown，失败时提示具体失败原因 |
| 样式拆分造成 scoped 样式失效 | 低 | 使用项目已有 `<style scoped lang="scss" src="./*.scss">` 模式，并通过构建验证 |
| 上传接口不可用导致本地无法端到端验证 | 中 | 构建验证覆盖类型和打包，真实上传需在可访问 `/upload/rest/upload` 的环境人工核对 |
### 方案取舍
```yaml
唯一方案理由: 当前路径复用现有上传工具和 Markdown 写入规则，新增交互入口但不改变后端契约，风险最小且符合客服聊天输入场景。
放弃的替代路径:
- 引入新的富文本/附件组件: 会增加依赖和迁移成本，且当前消息渲染以 Markdown 为事实标准。
- 新增图片预览队列: 本需求只要求上传方式增强，预览队列会扩大状态管理和失败恢复范围。
- 修改后端工单消息结构为附件字段: 会跨前后端协议，超出本次图片上传交互增强范围。
回滚边界: 回滚 `TicketWorkspaceDialog.vue` 中拖拽/粘贴逻辑和 `TicketWorkspaceDialog.scss` 样式拆分即可，不涉及数据库、接口或构建配置。
```
---
## 3. 技术设计
### 事件流程
```mermaid
flowchart TD
A[点击上传 / 拖拽放下 / 粘贴图片] --> B[提取 File[]]
B --> C[beforeImageUpload 校验类型与大小]
C --> D[uploadImage(file)]
D --> E[追加 Markdown 图片到 replyMessage]
D --> F[失败时展示 ElMessage.error]
```
### API 设计
无新增 API。继续使用 `uploadImage(file)` 访问 `/upload/rest/upload`。
### 数据模型
无数据模型变更。
---
## 4. 核心场景
### 场景: 客服从剪贴板粘贴截图回复工单
**模块**: admin-frontend
**条件**: 管理员打开工单工作台并聚焦回复框
**行为**: 管理员复制截图后在回复框中粘贴
**结果**: 图片自动上传，回复框追加 Markdown 图片链接，管理员可继续输入文字并发送
### 场景: 客服拖拽本地图片到回复区
**模块**: admin-frontend
**条件**: 管理员打开工单工作台并准备回复
**行为**: 管理员把本地图片拖入回复区域并松开
**结果**: 回复区显示拖拽激活和上传中状态，上传成功后插入 Markdown 图片链接
---
## 5. 技术决策
### ticket-chat-image-dnd-paste-upload#D001: 统一图片入口到现有 Markdown 上传链路
**日期**: 2026-04-27
**状态**: ✅采纳
**背景**: 工单消息当前以 Markdown 渲染，图片上传已经通过 `uploadImage()` 返回可复制 URL。
**选项分析**:
| 选项 | 优点 | 缺点 |
|------|------|------|
| A: 复用现有上传工具并追加 Markdown | 后端零变更、行为一致、实现集中 | 无本地预览队列 |
| B: 引入附件队列和独立发送 payload | 可展示上传前预览 | 需要后端协议或发送语义调整 |
| C: 接入富文本编辑器 | 编辑体验更强 | 依赖和迁移成本高，与当前 Markdown 渲染不一致 |
**决策**: 选择方案 A
**理由**: 满足拖拽和粘贴上传目标，同时保持当前工单消息的渲染、发送和后端语义不变。
**影响**: 仅影响管理端工单工作台图片输入体验。
---
## 6. 验证策略
```yaml
verifyMode: review-first
reviewerFocus:
- admin-frontend/src/views/tickets/TicketWorkspaceDialog.vue 中拖拽、粘贴、点击上传是否复用同一校验链路
- admin-frontend/src/views/tickets/TicketWorkspaceDialog.scss 是否只承载原样式拆分和新增状态样式
testerFocus:
- npm run build
- 人工核对点击上传、拖拽上传、粘贴上传、非图片拒绝、超 10MB 拒绝
uiValidation: optional
riskBoundary:
- 不修改后端接口和数据库
- 不覆盖现有 public/assets/admin 未提交构建产物改动
- 不引入新依赖
```
---
## 7. 成果设计
### 设计方向
- **美学基调**: Apple 式精确客服工作台，白色回复区、单一 Apple Blue 强调和克制状态层，强调“把截图放到对话里”的直接感。
- **记忆点**: 拖拽图片进入回复区时出现轻量蓝色描边和提示条，像系统级 drop target 一样明确但不打断会话。
- **参考**: `apple/DESIGN.md` 中的纯色表面、系统字体、单一蓝色交互强调和低装饰成本。
### 视觉要素
- **配色**: 使用现有 `--xboard-primary` / `--xboard-link`，背景保持 `#ffffff` 与 `#fbfbfd`，不新增强调色。
- **字体**: 沿用项目 `--xboard-font-sans`，即 Apple 系统字体栈，符合 `apple/DESIGN.md`。
- **布局**: 回复区保持底部固定工具栏结构，拖拽提示作为输入框下方的细提示行，不改变主对话布局。
- **动效**: 拖拽进入/离开使用边框、背景和提示透明度的短过渡；上传中复用 Element Plus loading。
- **氛围**: 无纹理、无渐变装饰；以纯色表面、轻描边和 Apple Blue 状态表达交互。
### 技术约束
- **可访问性**: 拖拽提示不替代按钮上传；键盘和屏幕阅读器用户仍可使用上传按钮。
- **响应式**: 小屏下回复按钮组可换行，上传提示不挤压发送按钮。
.helloagents/archive/2026-04/202604272310_ticket-chat-image-dnd-paste-upload/tasks.md
+75
View File
@@ -0,0 +1,75 @@
# 任务清单: ticket-chat-image-dnd-paste-upload
> **@status:** completed | 2026-04-27 23:19
```yaml
@feature: ticket-chat-image-dnd-paste-upload
@created: 2026-04-27
@status: completed
@mode: R2
```
## LIVE_STATUS
```json
{"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()` 并追加 `![image](url)`；非图片和超 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` 构建产物；该路径在执行前已经是未提交状态。
.helloagents/archive/_index.md
+2
View File
@@ -7,6 +7,7 @@
| 时间戳 | 名称 | 类型 | 涉及模块 | 决策 | 结果 |
|--------|------|------|---------|------|------|
| 202604272310 | ticket-chat-image-dnd-paste-upload | implementation | admin-frontend | ticket-chat-image-dnd-paste-upload#D001 | ✅完成 |
| 202604250018 | admin-frontend-user-activity-status-filter | implementation | admin-frontend,backend | admin-frontend-user-activity-status-filter#D001,#D002,#D003 | ✅完成 |
| 202604250002 | order-payment-snapshot | implementation | admin-frontend,order-payment | order-payment-snapshot#D001,#D002 | ✅完成 |
| 202604242245 | admin-frontend-node-pagination-batch-edit | implementation | admin-frontend | admin-frontend-node-pagination-batch-edit#D001,#D002,#D003 | ✅完成 |
@@ -36,6 +37,7 @@
## 按月归档
### 2026-04
- [202604272310_ticket-chat-image-dnd-paste-upload](./2026-04/202604272310_ticket-chat-image-dnd-paste-upload/) - 为工单工作台回复区补齐图片拖拽上传与剪贴板粘贴上传，并将上传逻辑与样式从超大 SFC 中拆分
- [202604250018_admin-frontend-user-activity-status-filter](./2026-04/202604250018_admin-frontend-user-activity-status-filter/) - 为用户管理高级筛选新增“活跃状态”条件，并在后端补齐 `activity_status` 复合过滤规则，支持按活跃 / 非活跃筛选用户
- [202604250002_order-payment-snapshot](./2026-04/202604250002_order-payment-snapshot/) - 补齐订单支付成功快照保存链路，并在后台订单详情中集中展示支付渠道、支付方法、平台订单号、商户订单号、实付金额与支付 IP
- [202604242245_admin-frontend-node-pagination-batch-edit](./2026-04/202604242245_admin-frontend-node-pagination-batch-edit/) - 为节点管理工作台补齐本地分页、父/子节点筛选、单节点置顶，以及仅对已勾选节点生效的批量修改
.helloagents/modules/admin-frontend.md
+2
View File
@@ -17,6 +17,7 @@
- 受保护路由在未登录时会自动附加 `redirect` 查询参数
- API 基础路径使用 `/api/v2/{secure_path}`，其中 `secure_path` 来自运行时配置
- 工单工作台现允许对已关闭工单继续回复；管理员发送新消息后会提示“发送并重开”，并通过统一后端语义把工单状态重新开启
- 工单工作台回复区支持点击选择、拖拽放下和剪贴板粘贴三种图片上传入口，统一复用 `/upload/rest/upload` 图片上传和 Markdown 图片链接插入逻辑；上传期间会禁用发送入口，避免图片链接尚未写入时提前回复
- 仪表盘以真实后端接口返回值为准，不在前端伪造业务统计
- 仪表盘“收入趋势”支持在同一张趋势图中切换“按金额 / 按数量”，数量模式同步切换摘要卡片、Y 轴标签与最近记录
- 仪表盘“作业详情”支持打开失败作业报错弹窗，集中查看 Horizon 失败作业的报错摘要、失败时间与队列信息
@@ -94,6 +95,7 @@
- 依赖 `src/utils/notices.ts` 负责公告表单转换、内容摘要、排序与显示字段归一化
- 依赖 `src/utils/systemConfig.ts` 负责系统配置字段元信息、默认值、回填与保存序列化
- 依赖 `src/utils/routes.ts` 负责路由动作映射、匹配规则序列化、节点引用摘要与搜索过滤
- 依赖 `src/views/tickets/useTicketReplyImages.ts` 收敛工单回复区图片点击上传、拖拽上传、粘贴上传、文件校验和 Markdown 插入
- 依赖 Laravel 后端 `TicketService::reply()` 提供工单“再次回复自动重开”的统一业务语义
- 依赖 Laravel 注入的 `window.settings`
- 构建输出到 `public/assets/admin`