From 3449a1d82befd2d5d1ca00f73e96dd8945813fa7 Mon Sep 17 00:00:00 2001
From: Your Name <your.email@example.com>
Date: Sun, 22 Mar 2026 21:37:07 +0800
Subject: [PATCH] fix: compact detail reference candidate cards

---
 .../agents/AgentGenerationWorkspaceDarkV2.tsx | 66 +++++++++++++++----
 1 file changed, 53 insertions(+), 13 deletions(-)

diff --git a/components/agents/AgentGenerationWorkspaceDarkV2.tsx b/components/agents/AgentGenerationWorkspaceDarkV2.tsx
index c059bfa9a..0cf6150a1 100644
--- a/components/agents/AgentGenerationWorkspaceDarkV2.tsx
+++ b/components/agents/AgentGenerationWorkspaceDarkV2.tsx
@@ -322,6 +322,28 @@ function getCandidatePreviewUrl(
   );
 }
 
+function getCandidatePreviewUrls(
+  candidate: AgentModeReferenceCandidate,
+  target: AgentTaskDetailReferenceSource,
+  maxCount = 4
+) {
+  const rawTargetUrls =
+    target === "main"
+      ? candidate.mainImageUrls || []
+      : target === "detail"
+        ? candidate.detailImageUrls || []
+        : candidate.skuImageUrls || [];
+  const targetUrls =
+    target === "detail" && rawTargetUrls.length > 1 ? rawTargetUrls.slice(1) : rawTargetUrls;
+  const fallbackUrls = [
+    ...targetUrls,
+    ...(candidate.mainImageUrls || []),
+    ...(candidate.allImageUrls || []),
+  ];
+
+  return Array.from(new Set(fallbackUrls.filter(Boolean))).slice(0, maxCount);
+}
+
 function getCandidateTargetCount(
   candidate: AgentModeReferenceCandidate,
   target: AgentTaskDetailReferenceSource
@@ -2458,30 +2480,48 @@ export function AgentGenerationWorkspaceDarkV2({
                           默认载入最新一套，可随时切换
                         </div>
                       </div>
-                      <div className="agent-dark-scrollbar flex gap-2 overflow-x-auto pb-1">
+                      <div className="agent-dark-scrollbar grid max-h-[360px] grid-cols-2 gap-3 overflow-y-auto pr-1 xl:grid-cols-4">
                         {detailReplacementCandidates.map((candidate) => {
                           const isSelected = detailReplacementSelectedCandidateId === candidate.id;
-                          const previewUrl = getCandidatePreviewUrl(candidate, detailReferenceTarget);
+                          const previewUrls = getCandidatePreviewUrls(
+                            candidate,
+                            detailReferenceTarget,
+                            4
+                          );
                           return (
                             <button
                               key={candidate.id}
                               type="button"
                               onClick={() => handleSelectDetailReplacementCandidate(candidate.id)}
                               className={cn(
-                                "min-w-[280px] overflow-hidden rounded-[20px] border text-left transition-colors",
+                                "min-w-0 overflow-hidden rounded-[20px] border text-left transition-colors",
                                 isSelected
                                   ? "border-emerald-400/45 bg-emerald-500/[0.10]"
                                   : "border-white/10 bg-white/[0.03] hover:border-white/18"
                               )}
                             >
-                              <div className="relative min-h-[180px] overflow-hidden bg-[radial-gradient(circle_at_top,rgba(16,185,129,0.18),transparent_58%),linear-gradient(180deg,#0b0d0f_0%,#11161a_100%)]">
-                                {previewUrl ? (
-                                  <img
-                                    src={buildPreviewImageUrl(previewUrl, 640)}
-                                    alt={candidate.sceneName || candidate.taskNo || candidate.productModel || "候选整套"}
-                                    className="block h-auto w-full"
-                                  />
-                                ) : null}
+                              <div className="relative overflow-hidden bg-[radial-gradient(circle_at_top,rgba(16,185,129,0.18),transparent_58%),linear-gradient(180deg,#0b0d0f_0%,#11161a_100%)] p-2.5">
+                                <div className="grid grid-cols-2 gap-2">
+                                  {Array.from({ length: 4 }).map((_, previewIndex) => {
+                                    const previewUrl = previewUrls[previewIndex];
+                                    return (
+                                      <div
+                                        key={`${candidate.id}-preview-${previewIndex}`}
+                                        className="aspect-[3/4] overflow-hidden rounded-[14px] border border-white/8 bg-black/20"
+                                      >
+                                        {previewUrl ? (
+                                          <img
+                                            src={buildPreviewImageUrl(previewUrl, 360)}
+                                            alt={`${candidate.sceneName || candidate.taskNo || candidate.productModel || "候选整套"} 预览 ${previewIndex + 1}`}
+                                            className="h-full w-full object-cover object-top"
+                                          />
+                                        ) : (
+                                          <div className="h-full w-full bg-[linear-gradient(180deg,rgba(255,255,255,0.03),rgba(255,255,255,0.01))]" />
+                                        )}
+                                      </div>
+                                    );
+                                  })}
+                                </div>
                                 <div className="absolute left-3 top-3 rounded-full border border-white/10 bg-black/45 px-2.5 py-1 text-[11px] text-white/78">
                                   {getCandidateTargetCount(candidate, detailReferenceTarget)} 张{detailReferenceSourceLabel}
                                 </div>
@@ -2492,10 +2532,10 @@ export function AgentGenerationWorkspaceDarkV2({
                                 ) : null}
                               </div>
                               <div className="space-y-2 px-3 py-3">
-                                <div className="truncate text-sm font-medium text-white">
+                                <div className="truncate text-[13px] font-medium text-white">
                                   {candidate.sceneName || candidate.taskNo || candidate.productModel || "候选整套"}
                                 </div>
-                                <div className="line-clamp-2 text-[11px] text-white/42">
+                                <div className="line-clamp-2 text-[11px] leading-5 text-white/42">
                                   {formatCandidateMeta(candidate, detailReferenceTarget) || `点击切换这套${detailReferenceSourceLabel}参考图`}
                                 </div>
                                 <div className="flex flex-wrap gap-1.5 text-[11px] text-white/48">