feat(messages): 新增 PC 消息中心与订单群聊入口

This commit is contained in:
yml2213
2026-10-30 14:08:16 +08:00
parent 4fc4e9236b
commit f2552fe523
13 changed files with 1258 additions and 11 deletions
@@ -0,0 +1,77 @@
# Phase 2 文件上传与消息中心验收
> 日期:2026-10-30
> 范围:通用文件上传、订单证据图片、移动端聊天图片、订单群聊入口、PC 消息中心与 PC 聊天页。
## 1. 交付内容
### 1.1 通用文件上传
- 新增 `frontend/src/shared/api/files.ts`
- `uploadFile(file, scene)`:multipart 字段 `file` + `scene`,调用 `POST /api/files/upload`。
- `isImageFileURL(url)`:识别站内对象地址与常见图片扩展名。
- 新增 `frontend/src/shared/utils/imageUpload.ts`
- 上传前按场景限制最长边并转 WebP;透明图保留 alpha。
- 尺寸合适且小于 1.5MB 时保留原图,减少二次压缩。
- 上传限制与后端保持一致:单文件 10MB,聊天场景仅图片。
### 1.2 订单证据上传
- 新增 `frontend/src/components/EvidenceUpload.tsx`
- 支持多图上传、缩略图预览、单条删除、外部链接添加。
- 图片走 `handoff` / `dispute` 场景,链接与上传图片统一写入 `evidence_urls`。
- `OrderActionPanel` 的结账、还价、申诉弹层接入证据上传。
- 保留原「外部证据链接(每行一条)」输入,兼容历史使用方式。
### 1.3 二次确认修复
- 新增 `frontend/src/shared/utils/confirm.ts` 的 `confirmModal()`。
- 修复 AntD v5 `modal.confirm` 返回值不是 Promise 导致「取消仍继续执行」的问题。
- 已替换确认收号、提交结账、确认结账、同意结账、发起申诉、取消申诉、取消订单共 7 处确认。
### 1.4 聊天图片与订单群聊
- `sendChatMessage` 支持第三个参数 `attachmentURLs`,请求体写入 `attachment_urls`。
- 移动端聊天页新增图片选择、上传、预览、移除,最多 9 张;纯图片消息也可发送。
- 新增 `fetchOrderConversation(orderId)`:`GET /api/orders/:id/chat`。
- 移动端订单详情新增「进入订单群聊」,跳转 `/m/messages/:id`。
- PC 订单详情新增「进入订单群聊」,跳转 `/messages/:id`。
### 1.5 PC 消息中心
- 新增 `frontend/src/features/messages/MessagesPage.tsx`
- 会话列表、未读数、订单号、最近消息、分页加载。
- 一键新建平台客服会话。
- 未登录守卫与沟通建议侧栏。
- 新增 `frontend/src/features/messages/ChatPage.tsx`
- 会话详情、消息分页、图片消息预览、图片上传、发送。
- 已读上报、会话与未读数刷新。
- 新增路由 `/messages`、`/messages/:id`。
- 商城导航新增「消息」入口与未读角标,用户菜单新增「我的消息」。
### 1.6 样式维护
- 原 `global.css` 3793 行,按页面域拆分为 16 个文件:
- `base`、`storefront-*`、`auth`、`admin-*`、`mobile-*`、`pc-messages`、`components`。
- `global.css` 仅保留 `@import` 汇总,导入顺序即原级联顺序。
- 拆分前后内容 SHA-1 校验一致:`e438b4b54dac281fb683d4f5b1b64ae74103306e`。
## 2. 验证记录
| 检查 | 结果 |
|---|---|
| `cd frontend && npx tsc --noEmit` | 通过 |
| `cd frontend && npm run build` | 通过,主入口 516.17 kB / gzip 166.39 kB |
| `GET http://localhost:5289/messages` | 200 |
| `GET http://localhost:5289/messages/1` | 200 |
| `GET /api/chats?page=1&page_size=5` | 200,返回客服会话与商品群会话 |
| `GET /api/chats/2/messages` | 200,消息结构与附件字段正常 |
| `POST /api/files/upload`(scene=chat,PNG) | 201,返回 `object_key` 与 `/api/files/object?key=...` |
| `GET /api/orders/1/chat` | 404(开发库无订单 1,路由已注册) |
## 3. 约束与后续
- 聊天仍为 6 秒轮询;后端 `GET /api/chats/events` 已存在,但浏览器 `EventSource` 无法附加 Bearer,需要改用 fetch 流或短期票据后再接。
- PC 消息中心当前只有会话,不含通知 Tab;移动端已有「会话 / 通知」双 Tab。
- 文件上传暂无删除接口,联调上传的测试对象会留在开发 MinIO 中。
- 真实支付、交接、结账仍未回归:开发库无可用订单,且商品 1 的号主就是联调用户。
+1 -1
View File
@@ -381,7 +381,7 @@ hfb_jysh/
### Phase 3:C 端 PC + 移动端(3 周)
> 状态:**进行中(2026-10-30)**。移动端已完成首页、商品列表/详情、下单确认、登录、个人中心、订单列表/详情、消息中心与聊天,并接入支付、交接、确认收号、结账、还价与申诉;PC 商品详情、下单、订单中心与操作页已接通,移动端实名入口、订单群聊与证据上传待迁移。
> 状态:**进行中(2026-10-30)**。移动端已完成首页、商品列表/详情、下单确认、登录、个人中心、订单列表/详情、消息中心与聊天,并接入支付、交接、确认收号、结账、还价、申诉、证据图片上传与订单群聊;PC 商品详情、下单、订单中心、操作页、消息中心与聊天页已接通,移动端实名入口、卖家发布链路待迁移。
- 首页、商品列表、商品详情、撞车商品。
- 登录、注册、找回密码、实名认证。