style(worker-portal): 优化打手端我要寄卖页面顶部卡片布局,轻量化重构首屏体验
1. 移除第 4 个占位无意义的「发布寄卖 苏尔南」卡片,核心指标精准收敛为待审核、履约中、已完成 3 大状态; 2. 新增 worker-consignment-kpi-grid 紧凑统计栏,移动端改为横向 3 列等宽平铺,高度由 320px+ 骤降至 52px,竖向空间节省超 80%; 3. 剔除卡片内无实际价值的长句副说明文案,改为上行轻量状态标签 + 下行醒目数字的微排版,支持点击秒切记录过滤; 4. 彻底解决移动端首屏被巨幅卡片占满导致表单下沉的问题,首屏直接呈现履约押金提示与规格选择,提升打手发布效率; 5. 前端 59 个自动化测试全绿,全套 check 与 build 100% 通过。
This commit is contained in:
@@ -170,3 +170,33 @@
|
||||
3. **自动化测试与样式达标**:
|
||||
- 新增前端单元测试 `apps/frontend/tests/consignment-worker-display.test.ts`,验证普通工单、有供货打手寄售单、无打手纯现货单的解析分支;
|
||||
- 前端 57 个测试全绿,`format:check`、`lint:check`、`typecheck` 全部通过。
|
||||
|
||||
---
|
||||
|
||||
## 七、 专项优化:打手端「我要寄卖」顶部臃肿卡片轻量化重构(2026-09-21 已闭环)
|
||||
|
||||
### 1. 现象与用户反馈
|
||||
- **问题现象**:打手在手机端打开“我要寄卖”页面,顶部纵向堆叠了 4 个巨型卡片(`待审核`、`履约中`、`已完成`、`发布寄卖 苏尔南`),占用高达 400px+ 竖向空间,几乎占满整块手机屏幕。打手进页面完全看不到下方的发布表单,必须下滑整屏才能开始填表,操作链路极长且视觉严重失调。
|
||||
|
||||
### 2. 代码级根因定位
|
||||
1. **通用样式在移动端粗暴单列堆叠**:
|
||||
- `apps/frontend/src/pages/worker/WorkerConsignmentPage.tsx:510` 原先套用了通用 `.worker-orders-kpi-grid`;
|
||||
- 其在 `@media (max-width: 640px)` 下被定义为 `grid-template-columns: 1fr`,4 个卡片被强制纵向拉成长条大块;
|
||||
2. **信息噪音多、占位无意义**:
|
||||
- 每个卡片塞入了诸如“客服审核中,通过后自动入库待匹配”、“待加好友 / 冷却 / 待赠送 / 待验收”、“含已完成、已驳回、已下架作废”等多余的长文本;
|
||||
- 第 4 个卡片“发布寄卖 苏尔南”纯属凑数占位,点击只是切到下方的发布 Tab,自身毫无数据与功能意义。
|
||||
|
||||
### 3. 解决对策与落地成果
|
||||
1. **彻底移除无意义的第 4 个卡片**:
|
||||
- 移除“发布寄卖 苏尔南”假 KPI 卡片,将核心关注点精准收敛为【待审核】、【履约中】、【已完成】3 大关键数据。
|
||||
2. **重构为专属轻量级横向数据栏**:
|
||||
- 提取并新增 `.worker-consignment-kpi-grid` 与 `.worker-consignment-kpi-card`:
|
||||
- 移动端采用 `repeat(3, 1fr)` 紧凑横向三等分网格,高度由原来的 320px+ 骤降至约 52px(**竖向空间释放超 80%**);
|
||||
- 剔除无意义的长句副文案,采用居中微标签布局:上行小字展示状态(11px),下行加粗展示数值(16px);
|
||||
- 待审核(紫/橙光)、履约中(科技蓝光)、已完成(清新绿光),选中态带优雅的主题高亮指示;
|
||||
- 桌面端保留图文两列的优雅排布,兼顾大屏美观。
|
||||
3. **首屏即见核心发布表单**:
|
||||
- 优化后,打手打开手机首屏顶端即可在不滑动的情况下直接看到“履约押金提示”、“操作系统(苹果/安卓)”与“游戏区服”选择,提报效率大幅提升!
|
||||
4. **自动化测试与全量构建**:
|
||||
- 前端 59 个自动化测试全绿(**59 pass / 0 fail**);
|
||||
- `format:check`、`lint:check`、`typecheck`、`build` 全部通过。
|
||||
|
||||
Reference in New Issue
Block a user