diff --git a/apps/frontend/src/pages/worker/WorkerConsignmentPage.tsx b/apps/frontend/src/pages/worker/WorkerConsignmentPage.tsx index c3649d93..c2aa423c 100644 --- a/apps/frontend/src/pages/worker/WorkerConsignmentPage.tsx +++ b/apps/frontend/src/pages/worker/WorkerConsignmentPage.tsx @@ -507,96 +507,61 @@ export default function WorkerConsignmentPage() { -
+
{ setRecordFilter('reviewing') setActiveTab('records') }} > -
-
- -
-
- 待审核 - - {reviewingCount} - 单 - -
+
+ 待审核 + + {reviewingCount} + 单 +
-
- 客服审核中,通过后自动入库待匹配 +
+
{ setRecordFilter('active') setActiveTab('records') }} > -
-
- -
-
- 履约中 - - {activeCount} - 把 - -
+
+ 履约中 + + {activeCount} + 把 +
-
- 待加好友 / 冷却 / 待赠送 / 待验收 +
+
{ setRecordFilter('finished') setActiveTab('records') }} > -
-
- -
-
- 已完成 - - {finishedCount} - 把 - -
+
+ 已完成 + + {finishedCount} + 把 +
-
- 含已完成、已驳回、已下架作废 -
-
- -
setActiveTab('publish')} - > -
-
- -
-
- 发布寄卖 - - 苏尔南 - -
-
-
- 暗潮 / 怒嚎 / 血宴 · 押金履约 +
+
diff --git a/apps/frontend/src/styles/worker.css b/apps/frontend/src/styles/worker.css index 88dda084..8bc55a35 100644 --- a/apps/frontend/src/styles/worker.css +++ b/apps/frontend/src/styles/worker.css @@ -4212,6 +4212,130 @@ body { } /* ===== 苏尔南寄卖页(对齐订单/售后视觉) ===== */ +.worker-consignment-kpi-grid { + display: grid; + grid-template-columns: repeat(3, 1fr); + gap: 12px; + margin-bottom: 14px; +} + +.worker-consignment-kpi-card { + background: #ffffff; + border: 1px solid #e2e8f0; + border-radius: 10px; + padding: 10px 14px; + display: flex; + align-items: center; + justify-content: space-between; + gap: 8px; + cursor: pointer; + user-select: none; + transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); + box-shadow: 0 1px 2px rgba(15, 23, 42, 0.03); +} + +.worker-consignment-kpi-card:hover { + border-color: #cbd5e1; + box-shadow: 0 4px 12px rgba(15, 23, 42, 0.06); + transform: translateY(-1px); +} + +.worker-consignment-kpi-card.active { + border-color: var(--theme-primary); + background: linear-gradient(180deg, #fffbf7 0%, #ffffff 100%); + box-shadow: 0 2px 8px rgba(255, 106, 0, 0.15); +} + +.worker-consignment-kpi-main { + display: flex; + flex-direction: column; + gap: 2px; + min-width: 0; +} + +.worker-consignment-kpi-title { + font-size: 12px; + color: #64748b; + font-weight: 500; + line-height: 1.2; +} + +.worker-consignment-kpi-val { + font-size: 18px; + font-weight: 700; + color: #0f172a; + line-height: 1.2; +} + +.worker-consignment-kpi-unit { + font-size: 12px; + font-weight: normal; + color: #94a3b8; + margin-left: 2px; +} + +.worker-consignment-kpi-icon { + width: 34px; + height: 34px; + border-radius: 8px; + display: flex; + align-items: center; + justify-content: center; + font-size: 16px; + flex-shrink: 0; +} + +.worker-consignment-kpi-icon.pending { + background: #fdf4ff; + color: #c026d3; +} + +.worker-consignment-kpi-icon.in-progress { + background: #eff6ff; + color: #2563eb; +} + +.worker-consignment-kpi-icon.accepted { + background: #f0fdf4; + color: #16a34a; +} + +@media (max-width: 640px) { + .worker-consignment-kpi-grid { + grid-template-columns: repeat(3, 1fr); + gap: 6px; + margin-bottom: 10px; + } + + .worker-consignment-kpi-card { + padding: 8px 4px; + flex-direction: column; + align-items: center; + justify-content: center; + text-align: center; + gap: 2px; + border-radius: 8px; + min-height: 52px; + } + + .worker-consignment-kpi-icon { + display: none; + } + + .worker-consignment-kpi-title { + font-size: 11px; + color: #64748b; + } + + .worker-consignment-kpi-val { + font-size: 16px; + } + + .worker-consignment-page .worker-orders-desktop-header { + margin-bottom: 8px; + } +} + .worker-consignment-page .worker-orders-card { border-radius: 12px; border: 1px solid #e2e8f0; diff --git a/docs/寄卖库存优化现状与进度追踪.md b/docs/寄卖库存优化现状与进度追踪.md index 37cc444c..d898f550 100644 --- a/docs/寄卖库存优化现状与进度追踪.md +++ b/docs/寄卖库存优化现状与进度追踪.md @@ -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` 全部通过。