From 3a292260776144c56c41c32b0bf536d364552ede Mon Sep 17 00:00:00 2001
From: yml2213 <a2213290201@gmail.com>
Date: Sat, 15 Aug 2026 15:10:39 +0800
Subject: [PATCH] =?UTF-8?q?=E9=99=90=E5=88=B6=E9=AA=8C=E6=94=B6=E5=9B=BE?=
 =?UTF-8?q?=E7=89=87=E5=88=97=E8=A1=A8=E5=B1=95=E7=A4=BA?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/components/files/ImagePreviewList.tsx   | 17 ++++++++++++++++-
 .../src/pages/admin/panels/WorkOrdersPanel.tsx  |  1 +
 .../src/pages/worker/WorkerOrdersPage.tsx       |  4 ++--
 apps/frontend/src/styles/main.css               |  5 +++++
 4 files changed, 24 insertions(+), 3 deletions(-)

diff --git a/apps/frontend/src/components/files/ImagePreviewList.tsx b/apps/frontend/src/components/files/ImagePreviewList.tsx
index 87422453..5b6ca237 100644
--- a/apps/frontend/src/components/files/ImagePreviewList.tsx
+++ b/apps/frontend/src/components/files/ImagePreviewList.tsx
@@ -1,4 +1,5 @@
 import { Image, Typography } from 'antd'
+import { useState } from 'react'
 
 import type { UploadedFile } from '@/types/worker-platform'
 import { getImageIdentityFromUrl } from '@/utils/image-identity'
@@ -7,22 +8,28 @@ type ImagePreviewListProps = {
   files?: UploadedFile[]
   imageUrls?: string[]
   size?: number
+  maxVisible?: number
 }
 
 export default function ImagePreviewList({
   files = [],
   imageUrls = [],
   size = 56,
+  maxVisible,
 }: ImagePreviewListProps) {
+  const [expanded, setExpanded] = useState(false)
   const items = normalizePreviewItems(files, imageUrls)
   if (items.length === 0) {
     return <Typography.Text type="secondary">-</Typography.Text>
   }
 
+  const hasHiddenItems = Boolean(maxVisible && items.length > maxVisible)
+  const visibleItems = hasHiddenItems && !expanded ? items.slice(0, maxVisible) : items
+
   return (
     <Image.PreviewGroup>
       <div className="image-preview-list">
-        {items.map((item) => (
+        {visibleItems.map((item) => (
           <Image
             key={item.url}
             src={item.thumbnailUrl || item.url}
@@ -32,6 +39,14 @@ export default function ImagePreviewList({
             className="image-preview-item"
           />
         ))}
+        {hasHiddenItems ? (
+          <Typography.Link
+            className="image-preview-more"
+            onClick={() => setExpanded((value) => !value)}
+          >
+            {expanded ? '收起' : `查看全部（${items.length}）`}
+          </Typography.Link>
+        ) : null}
       </div>
     </Image.PreviewGroup>
   )
diff --git a/apps/frontend/src/pages/admin/panels/WorkOrdersPanel.tsx b/apps/frontend/src/pages/admin/panels/WorkOrdersPanel.tsx
index f20a67b0..fb321a04 100644
--- a/apps/frontend/src/pages/admin/panels/WorkOrdersPanel.tsx
+++ b/apps/frontend/src/pages/admin/panels/WorkOrdersPanel.tsx
@@ -644,6 +644,7 @@ export default function WorkOrdersPanel() {
           files={getAcceptanceFiles(row)}
           imageUrls={getAcceptanceImageUrls(row)}
           size={44}
+          maxVisible={2}
         />
       ),
     },
diff --git a/apps/frontend/src/pages/worker/WorkerOrdersPage.tsx b/apps/frontend/src/pages/worker/WorkerOrdersPage.tsx
index 7bcf3fa7..533b84e0 100644
--- a/apps/frontend/src/pages/worker/WorkerOrdersPage.tsx
+++ b/apps/frontend/src/pages/worker/WorkerOrdersPage.tsx
@@ -342,7 +342,7 @@ export default function WorkerOrdersPage() {
         return (
           <div className="cell-stack">
             {hasAcceptance ? (
-              <ImagePreviewList files={acceptanceFiles} size={38} />
+              <ImagePreviewList files={acceptanceFiles} size={38} maxVisible={2} />
             ) : null}
             {submittedAt ? (
               <Typography.Text type="secondary" style={{ fontSize: 12 }}>
@@ -354,7 +354,7 @@ export default function WorkerOrdersPage() {
                 <Tag color="processing" icon={<PictureOutlined />}>
                   已暂存 {draftCount} 张图片
                 </Tag>
-                <ImagePreviewList files={draftFiles} size={38} />
+                <ImagePreviewList files={draftFiles} size={38} maxVisible={2} />
               </div>
             ) : null}
             {getWorkerAcceptance(row)?.note ? (
diff --git a/apps/frontend/src/styles/main.css b/apps/frontend/src/styles/main.css
index 2ee7581a..1af70bb7 100644
--- a/apps/frontend/src/styles/main.css
+++ b/apps/frontend/src/styles/main.css
@@ -2487,6 +2487,11 @@ select {
   background: #f8fafc;
 }
 
+.image-preview-more {
+  font-size: 12px;
+  white-space: nowrap;
+}
+
 .worker-rule-form {
   width: 100%;
 }