style(worker-portal): 优化打手端我要寄卖页面顶部卡片布局，轻量化重构首屏体验

1. 移除第 4 个占位无意义的「发布寄卖 苏尔南」卡片，核心指标精准收敛为待审核、履约中、已完成 3 大状态；
2. 新增 worker-consignment-kpi-grid 紧凑统计栏，移动端改为横向 3 列等宽平铺，高度由 320px+ 骤降至 52px，竖向空间节省超 80%；
3. 剔除卡片内无实际价值的长句副说明文案，改为上行轻量状态标签 + 下行醒目数字的微排版，支持点击秒切记录过滤；
4. 彻底解决移动端首屏被巨幅卡片占满导致表单下沉的问题，首屏直接呈现履约押金提示与规格选择，提升打手发布效率；
5. 前端 59 个自动化测试全绿，全套 check 与 build 100% 通过。

apps/frontend/src/pages/worker/WorkerConsignmentPage.tsx

@@ -507,96 +507,61 @@ export default function WorkerConsignmentPage() {
         </div>
       </div>
 
-      <div className="worker-orders-kpi-grid">
+      <div className="worker-consignment-kpi-grid">
         <div
-          className={`worker-orders-kpi-card ${recordFilter === 'reviewing' && activeTab === 'records' ? 'active' : ''}`}
+          className={`worker-consignment-kpi-card ${recordFilter === 'reviewing' && activeTab === 'records' ? 'active' : ''}`}
           onClick={() => {
             setRecordFilter('reviewing')
             setActiveTab('records')
           }}
         >
-          <div className="worker-orders-kpi-top">
-            <div className="worker-orders-kpi-icon-wrap pending">
-              <ClockCircleOutlined />
-            </div>
-            <div className="worker-orders-kpi-info">
-              <span className="worker-orders-kpi-title">待审核</span>
-              <strong className="worker-orders-kpi-val">
-                {reviewingCount}
-                <span className="worker-orders-kpi-unit"> 单</span>
-              </strong>
-            </div>
+          <div className="worker-consignment-kpi-main">
+            <span className="worker-consignment-kpi-title">待审核</span>
+            <span className="worker-consignment-kpi-val">
+              {reviewingCount}
+              <span className="worker-consignment-kpi-unit">单</span>
+            </span>
           </div>
-          <div className="worker-orders-kpi-bottom">
-            <span className="worker-orders-kpi-sub-label">客服审核中，通过后自动入库待匹配</span>
+          <div className="worker-consignment-kpi-icon pending">
+            <ClockCircleOutlined />
           </div>
         </div>
 
         <div
-          className={`worker-orders-kpi-card ${recordFilter === 'active' && activeTab === 'records' ? 'active' : ''}`}
+          className={`worker-consignment-kpi-card ${recordFilter === 'active' && activeTab === 'records' ? 'active' : ''}`}
           onClick={() => {
             setRecordFilter('active')
             setActiveTab('records')
           }}
         >
-          <div className="worker-orders-kpi-top">
-            <div className="worker-orders-kpi-icon-wrap in-progress">
-              <InboxOutlined />
-            </div>
-            <div className="worker-orders-kpi-info">
-              <span className="worker-orders-kpi-title">履约中</span>
-              <strong className="worker-orders-kpi-val">
-                {activeCount}
-                <span className="worker-orders-kpi-unit"> 把</span>
-              </strong>
-            </div>
+          <div className="worker-consignment-kpi-main">
+            <span className="worker-consignment-kpi-title">履约中</span>
+            <span className="worker-consignment-kpi-val">
+              {activeCount}
+              <span className="worker-consignment-kpi-unit">把</span>
+            </span>
           </div>
-          <div className="worker-orders-kpi-bottom">
-            <span className="worker-orders-kpi-sub-label">待加好友 / 冷却 / 待赠送 / 待验收</span>
+          <div className="worker-consignment-kpi-icon in-progress">
+            <InboxOutlined />
           </div>
         </div>
 
         <div
-          className={`worker-orders-kpi-card ${recordFilter === 'finished' && activeTab === 'records' ? 'active' : ''}`}
+          className={`worker-consignment-kpi-card ${recordFilter === 'finished' && activeTab === 'records' ? 'active' : ''}`}
           onClick={() => {
             setRecordFilter('finished')
             setActiveTab('records')
           }}
         >
-          <div className="worker-orders-kpi-top">
-            <div className="worker-orders-kpi-icon-wrap accepted">
-              <CheckCircleOutlined />
-            </div>
-            <div className="worker-orders-kpi-info">
-              <span className="worker-orders-kpi-title">已完成</span>
-              <strong className="worker-orders-kpi-val">
-                {finishedCount}
-                <span className="worker-orders-kpi-unit"> 把</span>
-              </strong>
-            </div>
+          <div className="worker-consignment-kpi-main">
+            <span className="worker-consignment-kpi-title">已完成</span>
+            <span className="worker-consignment-kpi-val">
+              {finishedCount}
+              <span className="worker-consignment-kpi-unit">把</span>
+            </span>
           </div>
-          <div className="worker-orders-kpi-bottom">
-            <span className="worker-orders-kpi-sub-label">含已完成、已驳回、已下架作废</span>
-          </div>
-        </div>
-
-        <div
-          className={`worker-orders-kpi-card ${activeTab === 'publish' ? 'active' : ''}`}
-          onClick={() => setActiveTab('publish')}
-        >
-          <div className="worker-orders-kpi-top">
-            <div className="worker-orders-kpi-icon-wrap problem">
-              <PlusOutlined />
-            </div>
-            <div className="worker-orders-kpi-info">
-              <span className="worker-orders-kpi-title">发布寄卖</span>
-              <strong className="worker-orders-kpi-val" style={{ fontSize: 18 }}>
-                苏尔南
-              </strong>
-            </div>
-          </div>
-          <div className="worker-orders-kpi-bottom">
-            <span className="worker-orders-kpi-sub-label">暗潮 / 怒嚎 / 血宴 · 押金履约</span>
+          <div className="worker-consignment-kpi-icon accepted">
+            <CheckCircleOutlined />
           </div>
         </div>
       </div>

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;

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` 全部通过。