lunanting/ai-chatbot
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: compact detail reference candidate cards
Some checks failed
Lint / build (20) (push) Has been cancelled
Details
Playwright Tests / test (push) Has been cancelled
Details

Browse Source
This commit is contained in:
Your Name 2026-03-22 21:37:07 +08:00
parent b98196b96e
commit 3449a1d82b
1 changed files with 53 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

66
components/agents/AgentGenerationWorkspaceDarkV2.tsx
View File

@ -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">