限制验收图片列表展示

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>
   )

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}
         />
       ),
     },

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 ? (

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%;
 }