fix: restyle detail reference candidate cards
This commit is contained in:
Your Name
parent
6e493cf589
commit
4d1d973437
@ -2490,65 +2490,89 @@ export function AgentGenerationWorkspaceDarkV2({
|
||||
4
|
||||
);
|
||||
const primaryPreviewUrl = previewUrls[0] || getCandidatePreviewUrl(candidate, detailReferenceTarget);
|
||||
const uploadedAtText = (() => {
|
||||
const raw = candidate.uploadedAt ? new Date(candidate.uploadedAt) : null;
|
||||
if (!raw || Number.isNaN(raw.getTime())) return "未记录";
|
||||
return raw.toLocaleString("zh-CN", {
|
||||
timeZone: "Asia/Shanghai",
|
||||
month: "2-digit",
|
||||
day: "2-digit",
|
||||
hour: "2-digit",
|
||||
minute: "2-digit",
|
||||
});
|
||||
})();
|
||||
const summaryBadges = [
|
||||
`${detailReferenceSourceLabel}`,
|
||||
`${getCandidateTargetCount(candidate, detailReferenceTarget)}张`,
|
||||
candidate.categoryName || null,
|
||||
].filter((item): item is string => Boolean(item));
|
||||
return (
|
||||
<button
|
||||
key={candidate.id}
|
||||
type="button"
|
||||
onClick={() => handleSelectDetailReplacementCandidate(candidate.id)}
|
||||
className={cn(
|
||||
"min-w-0 overflow-hidden rounded-[20px] border text-left transition-colors",
|
||||
"group relative min-w-0 overflow-hidden rounded-2xl border p-2.5 text-left transition-all duration-300",
|
||||
isSelected
|
||||
? "border-emerald-400/45 bg-emerald-500/[0.10]"
|
||||
: "border-white/10 bg-white/[0.03] hover:border-white/18"
|
||||
? "border-emerald-400/40 bg-emerald-500/[0.08] shadow-[0_0_24px_rgba(16,185,129,0.14)]"
|
||||
: "border-white/10 bg-white/[0.03] hover:border-white/20 hover:bg-white/[0.06]"
|
||||
)}
|
||||
>
|
||||
<div className="flex items-stretch gap-3 bg-[radial-gradient(circle_at_top,rgba(16,185,129,0.18),transparent_58%),linear-gradient(180deg,#0b0d0f_0%,#11161a_100%)] p-3">
|
||||
<div className="relative w-[112px] shrink-0 overflow-hidden rounded-[16px] border border-white/8 bg-black/20 sm:w-[124px]">
|
||||
<div className="aspect-[3/4]">
|
||||
<div className="flex items-stretch gap-3">
|
||||
<div className="relative w-[88px] min-h-[112px] shrink-0 overflow-hidden rounded-[20px] border border-white/10 bg-black/30">
|
||||
<div className="h-full w-full">
|
||||
{primaryPreviewUrl ? (
|
||||
<img
|
||||
src={buildPreviewImageUrl(primaryPreviewUrl, 360)}
|
||||
alt={candidate.sceneName || candidate.taskNo || candidate.productModel || "候选整套"}
|
||||
className="h-full w-full object-cover object-top"
|
||||
className="h-full w-full object-cover object-top transition-transform duration-500 group-hover:scale-105"
|
||||
/>
|
||||
) : (
|
||||
<div className="h-full w-full bg-[linear-gradient(180deg,rgba(255,255,255,0.03),rgba(255,255,255,0.01))]" />
|
||||
)}
|
||||
</div>
|
||||
<div className="absolute left-2 top-2 rounded-full border border-white/10 bg-black/50 px-2 py-0.5 text-[10px] text-white/78">
|
||||
{getCandidateTargetCount(candidate, detailReferenceTarget)} 张
|
||||
<div className="absolute inset-0 bg-gradient-to-t from-black/35 to-transparent" />
|
||||
<div className="absolute left-1.5 top-1.5 rounded-full border border-white/10 bg-black/45 px-1.5 py-0.5 text-[9px] text-white/78">
|
||||
{getCandidateTargetCount(candidate, detailReferenceTarget)}张
|
||||
</div>
|
||||
</div>
|
||||
<div className="min-w-0 flex-1 py-1">
|
||||
<div className="flex items-start justify-between gap-2">
|
||||
<div className="truncate text-sm font-medium text-white">
|
||||
{candidate.sceneName || candidate.taskNo || candidate.productModel || "候选整套"}
|
||||
<div className="flex min-h-[112px] min-w-0 flex-1 flex-col justify-between pr-7">
|
||||
<div className="line-clamp-2 text-[13px] font-semibold leading-5 text-white">
|
||||
{candidate.sceneName || candidate.taskNo || candidate.productModel || "候选整套"}
|
||||
</div>
|
||||
<div className="mt-2 flex flex-wrap gap-1.5">
|
||||
{summaryBadges.map((badge, badgeIndex) => (
|
||||
<span
|
||||
key={`${candidate.id}-badge-${badgeIndex}-${badge}`}
|
||||
className={cn(
|
||||
"rounded-full border px-2 py-1 text-[9px] leading-none",
|
||||
badgeIndex === 0
|
||||
? "border-emerald-400/25 bg-emerald-500/[0.12] text-emerald-100"
|
||||
: "border-white/10 bg-white/[0.04] text-white/62"
|
||||
)}
|
||||
>
|
||||
{badge}
|
||||
</span>
|
||||
))}
|
||||
</div>
|
||||
<div className="mt-2 text-[10px] leading-4 text-white/45">
|
||||
<div className="truncate">
|
||||
场景名称：{candidate.sceneName || candidate.productModel || "未命名整套"}
|
||||
</div>
|
||||
<div className="truncate">
|
||||
任务编号：{candidate.taskNo || "未记录"}
|
||||
</div>
|
||||
{isSelected ? (
|
||||
<div className="shrink-0 rounded-full border border-emerald-300/35 bg-emerald-500/[0.14] px-2.5 py-1 text-[11px] text-emerald-100">
|
||||
当前使用
|
||||
</div>
|
||||
) : null}
|
||||
</div>
|
||||
<div className="mt-2 line-clamp-3 text-[12px] leading-6 text-white/46">
|
||||
{formatCandidateMeta(candidate, detailReferenceTarget) || `点击切换这套${detailReferenceSourceLabel}参考图`}
|
||||
</div>
|
||||
<div className="mt-3 flex flex-wrap gap-1.5 text-[11px] text-white/48">
|
||||
{candidate.shopName ? (
|
||||
<span className="rounded-full bg-white/[0.05] px-2 py-1">
|
||||
{candidate.shopName}
|
||||
</span>
|
||||
) : null}
|
||||
{candidate.categoryName ? (
|
||||
<span className="rounded-full bg-white/[0.05] px-2 py-1">
|
||||
{candidate.categoryName}
|
||||
</span>
|
||||
) : null}
|
||||
</div>
|
||||
<div className="mt-3 text-[11px] text-emerald-200/72">
|
||||
点击后下方直接展开这套详情每一屏
|
||||
<div className="mt-2 flex flex-col gap-1 text-[10px] text-white/50">
|
||||
<div className="truncate">店铺：{candidate.shopName || "未记录"}</div>
|
||||
<div className="truncate">更新时间：{uploadedAtText}</div>
|
||||
</div>
|
||||
</div>
|
||||
{isSelected ? (
|
||||
<div className="absolute right-4 top-4 rounded-full border border-emerald-300/35 bg-emerald-500/[0.14] px-2.5 py-1 text-[11px] text-emerald-100">
|
||||
当前使用
|
||||
</div>
|
||||
) : null}
|
||||
</div>
|
||||
</button>
|
||||
);
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user