feat(admin-frontend): 补齐工单回复图片拖拽与粘贴上传
统一工单工作台回复区的图片上传链路，支持按钮选择、 拖拽放下和剪贴板粘贴三种入口，并复用现有图片校验、 上传接口与 Markdown 图片插入逻辑。 同时将回复区样式拆分为独立 SCSS 文件，补充拖拽激活、 上传中提示与发送禁用状态，并同步更新知识库归档信息。
This commit is contained in:
yinjianm
@@ -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
|
||||
|
||||
### 修复
|
||||
|
||||
@@ -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`
|
||||
|
||||
## 活跃模块
|
||||
|
||||
|
||||
+10
@@ -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"
|
||||
}
|
||||
+165
@@ -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 图片链接
|
||||
```
|
||||
|
||||
### 验收标准
|
||||
- [ ] 点击“上传图片”仍可上传图片并插入 ``。
|
||||
- [ ] 拖拽图片到回复区域可上传并插入 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 状态表达交互。
|
||||
|
||||
### 技术约束
|
||||
- **可访问性**: 拖拽提示不替代按钮上传；键盘和屏幕阅读器用户仍可使用上传按钮。
|
||||
- **响应式**: 小屏下回复按钮组可换行，上传提示不挤压发送按钮。
|
||||
@@ -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()` 并追加 ``；非图片和超 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` 构建产物；该路径在执行前已经是未提交状态。
|
||||
@@ -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/) - 为节点管理工作台补齐本地分页、父/子节点筛选、单节点置顶，以及仅对已勾选节点生效的批量修改
|
||||
|
||||
@@ -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`
|
||||
|
||||
@@ -9,6 +9,8 @@ export interface NodeStatusMeta {
|
||||
tagType: 'success' | 'warning' | 'danger' | 'info'
|
||||
}
|
||||
|
||||
type NodeStatusClass = NodeStatusMeta['dotClass']
|
||||
|
||||
const NODE_TYPE_LABELS: Record<string, string> = {
|
||||
shadowsocks: 'Shadowsocks',
|
||||
trojan: 'Trojan',
|
||||
@@ -64,6 +66,10 @@ export function getNodeStatusMeta(node: AdminNodeItem): NodeStatusMeta {
|
||||
}
|
||||
}
|
||||
|
||||
function isNodeOnlineStatus(status: NodeStatusClass): boolean {
|
||||
return status === 'online' || status === 'pending'
|
||||
}
|
||||
|
||||
export function getNodeIdLabel(node: AdminNodeItem): string {
|
||||
return node.parent_id ? `${node.id} → ${node.parent_id}` : String(node.id)
|
||||
}
|
||||
@@ -146,7 +152,7 @@ export function filterNodes(
|
||||
}
|
||||
|
||||
const nodeStatus = getNodeStatusMeta(node).dotClass
|
||||
if (normalizedStatus === 'online' && nodeStatus !== 'online') {
|
||||
if (normalizedStatus === 'online' && !isNodeOnlineStatus(nodeStatus)) {
|
||||
return false
|
||||
}
|
||||
|
||||
@@ -167,7 +173,7 @@ export function filterNodes(
|
||||
}
|
||||
|
||||
export function countOnlineNodes(nodes: AdminNodeItem[]): number {
|
||||
return nodes.filter((node) => getNodeStatusMeta(node).dotClass === 'online').length
|
||||
return nodes.filter((node) => isNodeOnlineStatus(getNodeStatusMeta(node).dotClass)).length
|
||||
}
|
||||
|
||||
export function countVisibleNodes(nodes: AdminNodeItem[]): number {
|
||||
|
||||
@@ -0,0 +1,270 @@
|
||||
.workspace-header {
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
justify-content: space-between;
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.workspace-title p {
|
||||
font-size: 11px;
|
||||
letter-spacing: 0.22em;
|
||||
text-transform: uppercase;
|
||||
color: var(--xboard-text-muted);
|
||||
}
|
||||
|
||||
.workspace-title h2 {
|
||||
font-size: 34px;
|
||||
line-height: 1.08;
|
||||
color: var(--xboard-text-strong);
|
||||
}
|
||||
|
||||
.workspace-header__actions {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.ghost-action {
|
||||
color: var(--xboard-link);
|
||||
}
|
||||
|
||||
.danger-action {
|
||||
color: var(--xboard-danger);
|
||||
}
|
||||
|
||||
.workspace-shell {
|
||||
display: grid;
|
||||
grid-template-columns: 280px minmax(0, 1fr);
|
||||
min-height: 70vh;
|
||||
border: 1px solid var(--xboard-border);
|
||||
border-radius: 24px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.workspace-sidebar {
|
||||
display: grid;
|
||||
grid-template-rows: auto 1fr;
|
||||
border-right: 1px solid var(--xboard-border);
|
||||
background: #fbfbfd;
|
||||
}
|
||||
|
||||
.sidebar-header {
|
||||
display: grid;
|
||||
gap: 12px;
|
||||
padding: 20px;
|
||||
border-bottom: 1px solid var(--xboard-border);
|
||||
}
|
||||
|
||||
.sidebar-list {
|
||||
display: grid;
|
||||
align-content: start;
|
||||
gap: 8px;
|
||||
padding: 16px;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.sidebar-ticket {
|
||||
border: 1px solid transparent;
|
||||
background: #ffffff;
|
||||
border-radius: 18px;
|
||||
padding: 16px;
|
||||
text-align: left;
|
||||
display: grid;
|
||||
gap: 8px;
|
||||
cursor: pointer;
|
||||
transition: 0.2s ease;
|
||||
}
|
||||
|
||||
.sidebar-ticket.active {
|
||||
border-color: rgba(0, 113, 227, 0.24);
|
||||
background: rgba(0, 113, 227, 0.08);
|
||||
}
|
||||
|
||||
.sidebar-ticket__row,
|
||||
.sidebar-ticket__meta {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.sidebar-ticket span,
|
||||
.sidebar-ticket small {
|
||||
color: var(--xboard-text-muted);
|
||||
}
|
||||
|
||||
.workspace-main {
|
||||
display: grid;
|
||||
grid-template-rows: auto 1fr auto;
|
||||
background: #ffffff;
|
||||
min-height: 0;
|
||||
}
|
||||
|
||||
.conversation-header {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
justify-content: space-between;
|
||||
gap: 16px;
|
||||
padding: 20px 24px;
|
||||
border-bottom: 1px solid var(--xboard-border);
|
||||
}
|
||||
|
||||
.conversation-header h3 {
|
||||
font-size: 32px;
|
||||
line-height: 1.08;
|
||||
color: var(--xboard-text-strong);
|
||||
}
|
||||
|
||||
.conversation-meta {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 14px;
|
||||
margin-top: 8px;
|
||||
color: var(--xboard-text-muted);
|
||||
}
|
||||
|
||||
.conversation-tags {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.message-thread {
|
||||
display: grid;
|
||||
align-content: start;
|
||||
gap: 16px;
|
||||
padding: 24px;
|
||||
overflow-y: auto;
|
||||
background: linear-gradient(180deg, #ffffff 0%, #fbfbfd 100%);
|
||||
}
|
||||
|
||||
.message-card {
|
||||
display: grid;
|
||||
gap: 10px;
|
||||
max-width: min(720px, 100%);
|
||||
padding: 18px 20px;
|
||||
border-radius: 20px;
|
||||
box-shadow: var(--xboard-shadow);
|
||||
}
|
||||
|
||||
.from-user {
|
||||
background: #eef3fb;
|
||||
}
|
||||
|
||||
.from-admin {
|
||||
background: #1d1d1f;
|
||||
color: #ffffff;
|
||||
margin-left: auto;
|
||||
}
|
||||
|
||||
.message-card__meta {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 8px;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.from-user .message-card__meta {
|
||||
color: var(--xboard-text-muted);
|
||||
}
|
||||
|
||||
.from-admin .message-card__meta {
|
||||
color: rgba(255, 255, 255, 0.72);
|
||||
}
|
||||
|
||||
.markdown-body :deep(p),
|
||||
.markdown-body :deep(h1),
|
||||
.markdown-body :deep(h2),
|
||||
.markdown-body :deep(h3),
|
||||
.markdown-body :deep(ul),
|
||||
.markdown-body :deep(ol) {
|
||||
margin: 0 0 10px;
|
||||
}
|
||||
|
||||
.markdown-body :deep(img) {
|
||||
max-width: min(420px, 100%);
|
||||
border-radius: 14px;
|
||||
}
|
||||
|
||||
.markdown-body :deep(a) {
|
||||
color: inherit;
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.reply-box {
|
||||
display: grid;
|
||||
gap: 12px;
|
||||
padding: 20px 24px;
|
||||
border-top: 1px solid var(--xboard-border);
|
||||
background: rgba(255, 255, 255, 0.92);
|
||||
transition: background 0.18s ease, box-shadow 0.18s ease;
|
||||
}
|
||||
|
||||
.reply-box.is-drag-active {
|
||||
background: #fbfdff;
|
||||
box-shadow: inset 0 0 0 2px rgba(0, 113, 227, 0.34);
|
||||
}
|
||||
|
||||
.reply-box.is-uploading {
|
||||
cursor: progress;
|
||||
}
|
||||
|
||||
.reply-box__hint,
|
||||
.reply-box__drop-hint {
|
||||
color: var(--xboard-text-muted);
|
||||
font-size: 13px;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.reply-box__drop-hint {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
min-height: 20px;
|
||||
color: var(--xboard-link);
|
||||
opacity: 0.78;
|
||||
transition: opacity 0.18s ease, color 0.18s ease;
|
||||
}
|
||||
|
||||
.reply-box.is-drag-active .reply-box__drop-hint {
|
||||
color: var(--xboard-primary);
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.reply-box__actions {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.workspace-empty {
|
||||
display: grid;
|
||||
place-items: center;
|
||||
color: var(--xboard-text-muted);
|
||||
}
|
||||
|
||||
@media (max-width: 1023px) {
|
||||
.workspace-shell {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.workspace-sidebar {
|
||||
border-right: 0;
|
||||
border-bottom: 1px solid var(--xboard-border);
|
||||
}
|
||||
|
||||
.workspace-header,
|
||||
.conversation-header {
|
||||
flex-direction: column;
|
||||
align-items: stretch;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 640px) {
|
||||
.reply-box__actions {
|
||||
justify-content: stretch;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
}
|
||||
@@ -1,7 +1,6 @@
|
||||
<script setup lang="ts">
|
||||
import { computed, ref, watch } from 'vue'
|
||||
import { ElMessage, ElMessageBox } from 'element-plus'
|
||||
import type { UploadProps, UploadRequestOptions } from 'element-plus'
|
||||
import { ChatLineRound, DataAnalysis, Picture, Search } from '@element-plus/icons-vue'
|
||||
import { closeTicket, fetchTickets, getTicketById, replyTicket } from '@/api/admin'
|
||||
import type { AdminTicketDetail, AdminTicketListItem } from '@/types/api'
|
||||
@@ -12,8 +11,8 @@ import {
|
||||
getTicketStatusMeta,
|
||||
renderTicketMarkdown,
|
||||
} from '@/utils/tickets'
|
||||
import { uploadImage } from '@/utils/upload'
|
||||
import TrafficLogDialog from './TrafficLogDialog.vue'
|
||||
import { useTicketReplyImages } from './useTicketReplyImages'
|
||||
|
||||
const props = defineProps<{
|
||||
visible: boolean
|
||||
@@ -35,8 +34,20 @@ const detail = ref<AdminTicketDetail | null>(null)
|
||||
const keyword = ref('')
|
||||
const replyMessage = ref('')
|
||||
const trafficVisible = ref(false)
|
||||
const uploadingImage = ref(false)
|
||||
type UploadError = Parameters<UploadRequestOptions['onError']>[0]
|
||||
|
||||
const {
|
||||
uploadingImage,
|
||||
isReplyDragActive,
|
||||
replyImageUploadLabel,
|
||||
beforeImageUpload,
|
||||
handleImageUploadRequest,
|
||||
handleReplyDragEnter,
|
||||
handleReplyDragOver,
|
||||
handleReplyDragLeave,
|
||||
handleReplyDrop,
|
||||
handleReplyPaste,
|
||||
resetReplyDragState,
|
||||
} = useTicketReplyImages(replyMessage)
|
||||
|
||||
const statusMeta = computed(() => detail.value ? getTicketStatusMeta(detail.value) : null)
|
||||
const levelMeta = computed(() => detail.value ? getTicketLevelMeta(detail.value.level) : null)
|
||||
@@ -108,43 +119,6 @@ async function handleReply() {
|
||||
}
|
||||
}
|
||||
|
||||
const beforeImageUpload: UploadProps['beforeUpload'] = (rawFile) => {
|
||||
if (!rawFile.type.startsWith('image/')) {
|
||||
ElMessage.error('仅支持上传图片文件')
|
||||
return false
|
||||
}
|
||||
|
||||
if (rawFile.size / 1024 / 1024 > 10) {
|
||||
ElMessage.error('图片大小不能超过 10MB')
|
||||
return false
|
||||
}
|
||||
|
||||
return true
|
||||
}
|
||||
|
||||
async function handleImageUploadRequest(options: UploadRequestOptions) {
|
||||
uploadingImage.value = true
|
||||
try {
|
||||
const url = await uploadImage(options.file)
|
||||
const markdown = ``
|
||||
replyMessage.value = replyMessage.value
|
||||
? `${replyMessage.value}\n${markdown}\n`
|
||||
: `${markdown}\n`
|
||||
options.onSuccess({ url })
|
||||
ElMessage.success('图片上传成功')
|
||||
} catch (error) {
|
||||
const message = error instanceof Error ? error.message : '图片上传失败'
|
||||
options.onError(Object.assign(new Error(message), {
|
||||
status: 500,
|
||||
method: 'POST',
|
||||
url: '/upload/rest/upload',
|
||||
}) as UploadError)
|
||||
ElMessage.error(message)
|
||||
} finally {
|
||||
uploadingImage.value = false
|
||||
}
|
||||
}
|
||||
|
||||
async function handleCloseTicket() {
|
||||
if (!detail.value || detail.value.status === 1) {
|
||||
return
|
||||
@@ -165,6 +139,7 @@ async function handleCloseTicket() {
|
||||
}
|
||||
|
||||
function closeDialog() {
|
||||
resetReplyDragState()
|
||||
emit('update:visible', false)
|
||||
}
|
||||
|
||||
@@ -172,6 +147,7 @@ watch(
|
||||
() => props.visible,
|
||||
async (visible) => {
|
||||
if (!visible) {
|
||||
resetReplyDragState()
|
||||
return
|
||||
}
|
||||
|
||||
@@ -312,7 +288,17 @@ watch(
|
||||
</article>
|
||||
</div>
|
||||
|
||||
<footer class="reply-box">
|
||||
<footer
|
||||
class="reply-box"
|
||||
:class="{
|
||||
'is-drag-active': isReplyDragActive,
|
||||
'is-uploading': uploadingImage,
|
||||
}"
|
||||
@dragenter="handleReplyDragEnter"
|
||||
@dragover="handleReplyDragOver"
|
||||
@dragleave="handleReplyDragLeave"
|
||||
@drop="handleReplyDrop"
|
||||
>
|
||||
<p v-if="willReopenClosedTicket" class="reply-box__hint">
|
||||
当前工单已关闭，发送新回复后会自动重新开启。
|
||||
</p>
|
||||
@@ -322,13 +308,19 @@ watch(
|
||||
:rows="3"
|
||||
resize="none"
|
||||
placeholder="输入回复内容..."
|
||||
@paste="handleReplyPaste"
|
||||
/>
|
||||
<div class="reply-box__drop-hint">
|
||||
<ElIcon><Picture /></ElIcon>
|
||||
<span>{{ replyImageUploadLabel }}</span>
|
||||
</div>
|
||||
<div class="reply-box__actions">
|
||||
<ElUpload
|
||||
:show-file-list="false"
|
||||
accept="image/*"
|
||||
:before-upload="beforeImageUpload"
|
||||
:http-request="handleImageUploadRequest"
|
||||
:disabled="uploadingImage"
|
||||
>
|
||||
<ElButton text class="ghost-action" :loading="uploadingImage">
|
||||
<ElIcon><Picture /></ElIcon>
|
||||
@@ -339,6 +331,7 @@ watch(
|
||||
type="primary"
|
||||
:icon="ChatLineRound"
|
||||
:loading="replying"
|
||||
:disabled="uploadingImage"
|
||||
@click="handleReply"
|
||||
>
|
||||
{{ willReopenClosedTicket ? '发送并重开' : '发送' }}
|
||||
@@ -361,242 +354,4 @@ watch(
|
||||
</ElDialog>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.workspace-header {
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
justify-content: space-between;
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.workspace-title p {
|
||||
font-size: 11px;
|
||||
letter-spacing: 0.22em;
|
||||
text-transform: uppercase;
|
||||
color: var(--xboard-text-muted);
|
||||
}
|
||||
|
||||
.workspace-title h2 {
|
||||
font-size: 34px;
|
||||
line-height: 1.08;
|
||||
color: var(--xboard-text-strong);
|
||||
}
|
||||
|
||||
.workspace-header__actions {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.ghost-action {
|
||||
color: var(--xboard-link);
|
||||
}
|
||||
|
||||
.danger-action {
|
||||
color: var(--xboard-danger);
|
||||
}
|
||||
|
||||
.workspace-shell {
|
||||
display: grid;
|
||||
grid-template-columns: 280px minmax(0, 1fr);
|
||||
min-height: 70vh;
|
||||
border: 1px solid var(--xboard-border);
|
||||
border-radius: 24px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.workspace-sidebar {
|
||||
display: grid;
|
||||
grid-template-rows: auto 1fr;
|
||||
border-right: 1px solid var(--xboard-border);
|
||||
background: #fbfbfd;
|
||||
}
|
||||
|
||||
.sidebar-header {
|
||||
display: grid;
|
||||
gap: 12px;
|
||||
padding: 20px;
|
||||
border-bottom: 1px solid var(--xboard-border);
|
||||
}
|
||||
|
||||
.sidebar-list {
|
||||
display: grid;
|
||||
align-content: start;
|
||||
gap: 8px;
|
||||
padding: 16px;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.sidebar-ticket {
|
||||
border: 1px solid transparent;
|
||||
background: #ffffff;
|
||||
border-radius: 18px;
|
||||
padding: 16px;
|
||||
text-align: left;
|
||||
display: grid;
|
||||
gap: 8px;
|
||||
cursor: pointer;
|
||||
transition: 0.2s ease;
|
||||
}
|
||||
|
||||
.sidebar-ticket.active {
|
||||
border-color: rgba(0, 113, 227, 0.24);
|
||||
background: rgba(0, 113, 227, 0.08);
|
||||
}
|
||||
|
||||
.sidebar-ticket__row,
|
||||
.sidebar-ticket__meta {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.sidebar-ticket span,
|
||||
.sidebar-ticket small {
|
||||
color: var(--xboard-text-muted);
|
||||
}
|
||||
|
||||
.workspace-main {
|
||||
display: grid;
|
||||
grid-template-rows: auto 1fr auto;
|
||||
background: #ffffff;
|
||||
min-height: 0;
|
||||
}
|
||||
|
||||
.conversation-header {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
justify-content: space-between;
|
||||
gap: 16px;
|
||||
padding: 20px 24px;
|
||||
border-bottom: 1px solid var(--xboard-border);
|
||||
}
|
||||
|
||||
.conversation-header h3 {
|
||||
font-size: 32px;
|
||||
line-height: 1.08;
|
||||
color: var(--xboard-text-strong);
|
||||
}
|
||||
|
||||
.conversation-meta {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 14px;
|
||||
margin-top: 8px;
|
||||
color: var(--xboard-text-muted);
|
||||
}
|
||||
|
||||
.conversation-tags {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.message-thread {
|
||||
display: grid;
|
||||
align-content: start;
|
||||
gap: 16px;
|
||||
padding: 24px;
|
||||
overflow-y: auto;
|
||||
background: linear-gradient(180deg, #ffffff 0%, #fbfbfd 100%);
|
||||
}
|
||||
|
||||
.message-card {
|
||||
display: grid;
|
||||
gap: 10px;
|
||||
max-width: min(720px, 100%);
|
||||
padding: 18px 20px;
|
||||
border-radius: 20px;
|
||||
box-shadow: var(--xboard-shadow);
|
||||
}
|
||||
|
||||
.from-user {
|
||||
background: #eef3fb;
|
||||
}
|
||||
|
||||
.from-admin {
|
||||
background: #1d1d1f;
|
||||
color: #ffffff;
|
||||
margin-left: auto;
|
||||
}
|
||||
|
||||
.message-card__meta {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 8px;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.from-user .message-card__meta {
|
||||
color: var(--xboard-text-muted);
|
||||
}
|
||||
|
||||
.from-admin .message-card__meta {
|
||||
color: rgba(255, 255, 255, 0.72);
|
||||
}
|
||||
|
||||
.markdown-body :deep(p),
|
||||
.markdown-body :deep(h1),
|
||||
.markdown-body :deep(h2),
|
||||
.markdown-body :deep(h3),
|
||||
.markdown-body :deep(ul),
|
||||
.markdown-body :deep(ol) {
|
||||
margin: 0 0 10px;
|
||||
}
|
||||
|
||||
.markdown-body :deep(img) {
|
||||
max-width: min(420px, 100%);
|
||||
border-radius: 14px;
|
||||
}
|
||||
|
||||
.markdown-body :deep(a) {
|
||||
color: inherit;
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.reply-box {
|
||||
display: grid;
|
||||
gap: 12px;
|
||||
padding: 20px 24px;
|
||||
border-top: 1px solid var(--xboard-border);
|
||||
background: rgba(255, 255, 255, 0.92);
|
||||
}
|
||||
|
||||
.reply-box__hint {
|
||||
color: var(--xboard-text-muted);
|
||||
font-size: 13px;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.reply-box__actions {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.workspace-empty {
|
||||
display: grid;
|
||||
place-items: center;
|
||||
color: var(--xboard-text-muted);
|
||||
}
|
||||
|
||||
@media (max-width: 1023px) {
|
||||
.workspace-shell {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.workspace-sidebar {
|
||||
border-right: 0;
|
||||
border-bottom: 1px solid var(--xboard-border);
|
||||
}
|
||||
|
||||
.workspace-header,
|
||||
.conversation-header {
|
||||
flex-direction: column;
|
||||
align-items: stretch;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<style scoped lang="scss" src="./TicketWorkspaceDialog.scss"></style>
|
||||
|
||||
@@ -0,0 +1,210 @@
|
||||
import { computed, ref, type Ref } from 'vue'
|
||||
import { ElMessage } from 'element-plus'
|
||||
import type { UploadProps, UploadRequestOptions } from 'element-plus'
|
||||
import { uploadImage } from '@/utils/upload'
|
||||
|
||||
type ReplyImageUploadSource = 'button' | 'drop' | 'paste'
|
||||
type UploadError = Parameters<UploadRequestOptions['onError']>[0]
|
||||
|
||||
interface ReplyImageUploadResult {
|
||||
urls: string[]
|
||||
failed: number
|
||||
lastError?: string
|
||||
}
|
||||
|
||||
export function useTicketReplyImages(replyMessage: Ref<string>) {
|
||||
const uploadingImage = ref(false)
|
||||
const isReplyDragActive = ref(false)
|
||||
const replyDragDepth = ref(0)
|
||||
|
||||
const replyImageUploadLabel = computed(() => {
|
||||
if (uploadingImage.value) {
|
||||
return '图片上传中，请稍候...'
|
||||
}
|
||||
|
||||
if (isReplyDragActive.value) {
|
||||
return '松开后上传图片到当前回复'
|
||||
}
|
||||
|
||||
return '支持拖拽图片到这里，或在输入框粘贴截图。'
|
||||
})
|
||||
|
||||
function validateReplyImage(file: File): boolean {
|
||||
if (!file.type.startsWith('image/')) {
|
||||
ElMessage.error('仅支持上传图片文件')
|
||||
return false
|
||||
}
|
||||
|
||||
if (file.size / 1024 / 1024 > 10) {
|
||||
ElMessage.error('图片大小不能超过 10MB')
|
||||
return false
|
||||
}
|
||||
|
||||
return true
|
||||
}
|
||||
|
||||
const beforeImageUpload: UploadProps['beforeUpload'] = (rawFile) => validateReplyImage(rawFile)
|
||||
|
||||
function appendReplyImageMarkdown(url: string) {
|
||||
const leadingBreak = replyMessage.value && !replyMessage.value.endsWith('\n') ? '\n' : ''
|
||||
replyMessage.value = `${replyMessage.value}${leadingBreak}\n`
|
||||
}
|
||||
|
||||
function getUploadFileLabel(file: File, index: number): string {
|
||||
return file.name || `图片 ${index + 1}`
|
||||
}
|
||||
|
||||
async function uploadReplyImages(
|
||||
files: File[],
|
||||
source: ReplyImageUploadSource,
|
||||
): Promise<ReplyImageUploadResult> {
|
||||
if (!files.length) {
|
||||
if (source === 'drop') {
|
||||
ElMessage.warning('请拖拽图片文件到回复区')
|
||||
}
|
||||
return { urls: [], failed: 0, lastError: '没有可上传的图片' }
|
||||
}
|
||||
|
||||
if (uploadingImage.value) {
|
||||
const message = '图片正在上传，请稍候'
|
||||
ElMessage.warning(message)
|
||||
return { urls: [], failed: files.length, lastError: message }
|
||||
}
|
||||
|
||||
const validFiles = files.filter((file) => validateReplyImage(file))
|
||||
if (!validFiles.length) {
|
||||
return { urls: [], failed: files.length, lastError: '没有可上传的图片' }
|
||||
}
|
||||
|
||||
uploadingImage.value = true
|
||||
const urls: string[] = []
|
||||
let failed = 0
|
||||
let lastError: string | undefined
|
||||
|
||||
try {
|
||||
for (const [index, file] of validFiles.entries()) {
|
||||
try {
|
||||
const url = await uploadImage(file)
|
||||
appendReplyImageMarkdown(url)
|
||||
urls.push(url)
|
||||
} catch (error) {
|
||||
failed += 1
|
||||
lastError = error instanceof Error ? error.message : '图片上传失败'
|
||||
ElMessage.error(`${getUploadFileLabel(file, index)} 上传失败: ${lastError}`)
|
||||
}
|
||||
}
|
||||
} finally {
|
||||
uploadingImage.value = false
|
||||
}
|
||||
|
||||
if (urls.length) {
|
||||
const successMessage = urls.length === 1 ? '图片上传成功' : `${urls.length} 张图片上传成功`
|
||||
if (failed) {
|
||||
ElMessage.warning(`${successMessage}，${failed} 张失败`)
|
||||
} else {
|
||||
ElMessage.success(successMessage)
|
||||
}
|
||||
}
|
||||
|
||||
return { urls, failed, lastError }
|
||||
}
|
||||
|
||||
async function handleImageUploadRequest(options: UploadRequestOptions) {
|
||||
const result = await uploadReplyImages([options.file], 'button')
|
||||
const [url] = result.urls
|
||||
|
||||
if (url) {
|
||||
options.onSuccess({ url })
|
||||
return
|
||||
}
|
||||
|
||||
const message = result.lastError || '图片上传失败'
|
||||
options.onError(Object.assign(new Error(message), {
|
||||
status: 500,
|
||||
method: 'POST',
|
||||
url: '/upload/rest/upload',
|
||||
}) as UploadError)
|
||||
}
|
||||
|
||||
function isDraggingFiles(event: DragEvent): boolean {
|
||||
return Array.from(event.dataTransfer?.types ?? []).includes('Files')
|
||||
}
|
||||
|
||||
function resetReplyDragState() {
|
||||
replyDragDepth.value = 0
|
||||
isReplyDragActive.value = false
|
||||
}
|
||||
|
||||
function handleReplyDragEnter(event: DragEvent) {
|
||||
if (!isDraggingFiles(event)) {
|
||||
return
|
||||
}
|
||||
|
||||
event.preventDefault()
|
||||
replyDragDepth.value += 1
|
||||
isReplyDragActive.value = true
|
||||
}
|
||||
|
||||
function handleReplyDragOver(event: DragEvent) {
|
||||
if (!isDraggingFiles(event)) {
|
||||
return
|
||||
}
|
||||
|
||||
event.preventDefault()
|
||||
if (event.dataTransfer) {
|
||||
event.dataTransfer.dropEffect = 'copy'
|
||||
}
|
||||
}
|
||||
|
||||
function handleReplyDragLeave(event: DragEvent) {
|
||||
if (!isDraggingFiles(event)) {
|
||||
return
|
||||
}
|
||||
|
||||
event.preventDefault()
|
||||
replyDragDepth.value = Math.max(0, replyDragDepth.value - 1)
|
||||
if (replyDragDepth.value === 0) {
|
||||
isReplyDragActive.value = false
|
||||
}
|
||||
}
|
||||
|
||||
function handleReplyDrop(event: DragEvent) {
|
||||
if (!isDraggingFiles(event)) {
|
||||
return
|
||||
}
|
||||
|
||||
event.preventDefault()
|
||||
const files = Array.from(event.dataTransfer?.files ?? [])
|
||||
resetReplyDragState()
|
||||
void uploadReplyImages(files, 'drop')
|
||||
}
|
||||
|
||||
function handleReplyPaste(event: ClipboardEvent) {
|
||||
const files = Array.from(event.clipboardData?.items ?? [])
|
||||
.filter((item) => item.kind === 'file')
|
||||
.map((item) => item.getAsFile())
|
||||
.filter((file): file is File => Boolean(file))
|
||||
.filter((file) => file.type.startsWith('image/'))
|
||||
|
||||
if (!files.length) {
|
||||
return
|
||||
}
|
||||
|
||||
event.preventDefault()
|
||||
void uploadReplyImages(files, 'paste')
|
||||
}
|
||||
|
||||
return {
|
||||
uploadingImage,
|
||||
isReplyDragActive,
|
||||
replyImageUploadLabel,
|
||||
beforeImageUpload,
|
||||
handleImageUploadRequest,
|
||||
handleReplyDragEnter,
|
||||
handleReplyDragOver,
|
||||
handleReplyDragLeave,
|
||||
handleReplyDrop,
|
||||
handleReplyPaste,
|
||||
resetReplyDragState,
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user