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 -
}
+ const hasHiddenItems = Boolean(maxVisible && items.length > maxVisible)
+ const visibleItems = hasHiddenItems && !expanded ? items.slice(0, maxVisible) : items
+
return (
- {items.map((item) => (
+ {visibleItems.map((item) => (
))}
+ {hasHiddenItems ? (
+ setExpanded((value) => !value)}
+ >
+ {expanded ? '收起' : `查看全部(${items.length})`}
+
+ ) : null}
)
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 (
{hasAcceptance ? (
-
+
) : null}
{submittedAt ? (
@@ -354,7 +354,7 @@ export default function WorkerOrdersPage() {
}>
已暂存 {draftCount} 张图片
-
+
) : 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%;
}