From 771deb221ec3ca2d067e6af32b6c05dd8942ae6a Mon Sep 17 00:00:00 2001
From: yml2213 <a2213290201@gmail.com>
Date: Fri, 18 Sep 2026 18:38:43 +0800
Subject: [PATCH] =?UTF-8?q?style(worker-consignment):=20=E4=BC=98=E5=8C=96?=
 =?UTF-8?q?=E5=AF=84=E5=8D=96=E5=8D=A1=E7=89=87=E6=88=AA=E5=9B=BE=E5=B1=95?=
 =?UTF-8?q?=E7=A4=BA=E4=B8=BA=E7=B4=A7=E5=87=91=E5=8D=95=E8=A1=8C=E5=B9=B6?=
 =?UTF-8?q?=E6=8E=92=E5=B8=83=E5=B1=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

1. 将提报商品截图与赠送凭证截图重构为同一行紧凑胶囊栏，减少上下两行占用空间；
2. 分别保留商品截图与赠送凭证的张数、缩略图与大图预览画廊，视觉更精致。
---
 .../pages/worker/WorkerConsignmentPage.tsx    | 94 ++++++++++---------
 1 file changed, 48 insertions(+), 46 deletions(-)

diff --git a/apps/frontend/src/pages/worker/WorkerConsignmentPage.tsx b/apps/frontend/src/pages/worker/WorkerConsignmentPage.tsx
index 7bb750d1..d03b4957 100644
--- a/apps/frontend/src/pages/worker/WorkerConsignmentPage.tsx
+++ b/apps/frontend/src/pages/worker/WorkerConsignmentPage.tsx
@@ -1103,52 +1103,54 @@ function ConsignmentRecordCard({
             ) : null}
           </Space>
         ) : null}
-        {shots.length > 0 ? (
-          <div className="worker-consignment-record-shots" style={{ marginTop: 8 }}>
-            <Typography.Text type="secondary" style={{ fontSize: 12, display: 'flex', alignItems: 'center', gap: 4, marginBottom: 4 }}>
-              <PictureOutlined />
-              提报商品截图（共 {shots.length} 张）：
-            </Typography.Text>
-            <Image.PreviewGroup>
-              <Space size={8} wrap>
-                {shots.map((src, i) => (
-                  <Image
-                    key={`submission-shot-${src}-${i}`}
-                    src={src}
-                    width={48}
-                    height={48}
-                    style={{ objectFit: 'cover', borderRadius: 6, border: '1px solid #e2e8f0' }}
-                  />
-                ))}
-              </Space>
-            </Image.PreviewGroup>
-          </div>
-        ) : null}
-        {giftShots.length > 0 ? (
-          <div className="worker-consignment-gift-shots-wrap" style={{ marginTop: 8, padding: '8px 12px', background: '#f0fdf4', borderRadius: 6, border: '1px solid #bbf7d0' }}>
-            <Typography.Text strong style={{ fontSize: 13, color: '#15803d', display: 'flex', alignItems: 'center', gap: 6 }}>
-              <CheckCircleOutlined />
-              已提交赠送凭证（共 {giftShots.length} 张截图，等待客服验收）：
-            </Typography.Text>
-            <div style={{ marginTop: 6 }}>
-              <Image.PreviewGroup>
-                <Space size={8} wrap>
-                  {giftShots.map((src, i) => (
-                    <Image
-                      key={`gift-shot-${i}`}
-                      src={src}
-                      width={52}
-                      height={52}
-                      style={{ objectFit: 'cover', borderRadius: 6, border: '1px solid #86efac' }}
-                    />
-                  ))}
-                </Space>
-              </Image.PreviewGroup>
-            </div>
-            {record.giftEvidenceNote ? (
-              <Typography.Text type="secondary" style={{ fontSize: 12, display: 'block', marginTop: 4 }}>
-                赠送备注：{record.giftEvidenceNote}
-              </Typography.Text>
+        {shots.length > 0 || giftShots.length > 0 ? (
+          <div style={{ display: 'flex', flexWrap: 'wrap', gap: 10, marginTop: 8, alignItems: 'center' }}>
+            {shots.length > 0 ? (
+              <div style={{ display: 'inline-flex', alignItems: 'center', gap: 8, background: '#f8fafc', padding: '4px 10px', borderRadius: 6, border: '1px solid #e2e8f0' }}>
+                <Typography.Text type="secondary" style={{ fontSize: 12, display: 'flex', alignItems: 'center', gap: 4, whiteSpace: 'nowrap' }}>
+                  <PictureOutlined />
+                  商品截图({shots.length})
+                </Typography.Text>
+                <Image.PreviewGroup>
+                  <Space size={6}>
+                    {shots.map((src, i) => (
+                      <Image
+                        key={`submission-shot-${src}-${i}`}
+                        src={src}
+                        width={38}
+                        height={38}
+                        style={{ objectFit: 'cover', borderRadius: 4, border: '1px solid #e2e8f0' }}
+                      />
+                    ))}
+                  </Space>
+                </Image.PreviewGroup>
+              </div>
+            ) : null}
+            {giftShots.length > 0 ? (
+              <div style={{ display: 'inline-flex', alignItems: 'center', gap: 8, background: '#f0fdf4', padding: '4px 10px', borderRadius: 6, border: '1px solid #bbf7d0' }}>
+                <Typography.Text strong style={{ fontSize: 12, color: '#15803d', display: 'flex', alignItems: 'center', gap: 4, whiteSpace: 'nowrap' }}>
+                  <CheckCircleOutlined />
+                  赠送凭证({giftShots.length})
+                </Typography.Text>
+                <Image.PreviewGroup>
+                  <Space size={6}>
+                    {giftShots.map((src, i) => (
+                      <Image
+                        key={`gift-shot-${i}`}
+                        src={src}
+                        width={38}
+                        height={38}
+                        style={{ objectFit: 'cover', borderRadius: 4, border: '1px solid #86efac' }}
+                      />
+                    ))}
+                  </Space>
+                </Image.PreviewGroup>
+                {record.giftEvidenceNote ? (
+                  <Typography.Text type="secondary" style={{ fontSize: 11, color: '#4b5563', maxWidth: 160 }} ellipsis={{ tooltip: record.giftEvidenceNote }}>
+                    {record.giftEvidenceNote}
+                  </Typography.Text>
+                ) : null}
+              </div>
             ) : null}
           </div>
         ) : null}