限制验收图片列表展示

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