fix: move passthrough toggle onto detail preview cards
Some checks failed
Lint / build (20) (push) Has been cancelled
Playwright Tests / test (push) Has been cancelled

This commit is contained in:
Your Name 2026-04-28 19:55:05 +08:00
parent ab35298e23
commit fca2552412

View File

@ -17,6 +17,7 @@ import { motion, AnimatePresence } from "framer-motion";
import JSZip from "jszip";
import {
ArrowUp,
CheckCircle2,
ChevronDown,
ChevronUp,
Download,
@ -5679,16 +5680,34 @@ export function AgentGenerationWorkspaceDarkV2({
onClick={() => setActiveDetailReferenceCardId(card.id)}
>
<div className="relative min-h-[220px] overflow-hidden bg-[radial-gradient(circle_at_top,rgba(16,185,129,0.12),transparent_55%),linear-gradient(180deg,#0b0d0f_0%,#101316_100%)]">
<button
type="button"
onClick={(event) => {
event.stopPropagation();
handleRemoveDetailReferenceCard(card.id);
}}
className="absolute right-3 top-3 rounded-full border border-white/10 bg-black/40 px-2 py-1 text-[11px] text-white/70 transition-colors hover:border-white/20 hover:text-white"
>
删除
</button>
<div className="absolute right-3 top-3 z-10 flex flex-col items-end gap-2">
<button
type="button"
onClick={(event) => {
event.stopPropagation();
handleRemoveDetailReferenceCard(card.id);
}}
className="rounded-full border border-white/10 bg-black/40 px-2 py-1 text-[11px] text-white/70 transition-colors hover:border-white/20 hover:text-white"
>
删除
</button>
<button
type="button"
onClick={(event) => {
event.stopPropagation();
handleToggleDetailReferenceCardPassthrough(card.id);
}}
className={cn(
"inline-flex items-center gap-1.5 rounded-full border px-3 py-1 text-[11px] font-medium transition-colors",
card.passthrough
? "border-emerald-300/55 bg-emerald-500/85 text-black shadow-[0_10px_28px_rgba(16,185,129,0.32)]"
: "border-emerald-400/35 bg-emerald-500/[0.14] text-emerald-100 hover:bg-emerald-500/[0.22]"
)}
>
<CheckCircle2 className="h-3.5 w-3.5" />
<span>{card.passthrough ? "已勾选不处理" : "勾选不处理"}</span>
</button>
</div>
{card.imageUrl ? (
<img
src={buildPreviewImageUrl(card.imageUrl, 720)}
@ -5703,12 +5722,17 @@ export function AgentGenerationWorkspaceDarkV2({
参考图 {index + 1}
</div>
{card.passthrough ? (
<div className="absolute right-3 top-12 rounded-full border border-cyan-300/35 bg-cyan-500/[0.14] px-2.5 py-1 text-[11px] text-cyan-100">
<div className="absolute left-3 top-12 rounded-full border border-cyan-300/35 bg-cyan-500/[0.14] px-2.5 py-1 text-[11px] text-cyan-100">
不处理直出
</div>
) : null}
{isActive ? (
<div className="absolute left-3 top-12 rounded-full border border-emerald-300/35 bg-emerald-500/[0.14] px-2.5 py-1 text-[11px] text-emerald-100">
<div
className={cn(
"absolute rounded-full border border-emerald-300/35 bg-emerald-500/[0.14] px-2.5 py-1 text-[11px] text-emerald-100",
card.passthrough ? "left-3 top-[3.75rem]" : "left-3 top-12"
)}
>
当前联动
</div>
) : null}
@ -5719,27 +5743,10 @@ export function AgentGenerationWorkspaceDarkV2({
</div>
</div>
</div>
<div className="flex items-center justify-between gap-3 border-t border-white/10 px-3 py-2">
<div className="text-[11px] text-white/45">
{card.passthrough
? "当前切片不会参与生图,会直接进入结果区。"
: "删除某张后,后面的参考图会自动上移补位,不留空位。"}
</div>
<button
type="button"
onClick={(event) => {
event.stopPropagation();
handleToggleDetailReferenceCardPassthrough(card.id);
}}
className={cn(
"shrink-0 rounded-full border px-3 py-1 text-[11px] transition-colors",
card.passthrough
? "border-cyan-400/35 bg-cyan-500/[0.12] text-cyan-100"
: "border-white/10 bg-white/[0.03] text-white/68 hover:border-white/20 hover:text-white"
)}
>
{card.passthrough ? "取消不处理" : "标记不处理"}
</button>
<div className="border-t border-white/10 px-3 py-2 text-[11px] text-white/45">
{card.passthrough
? "当前切片不会参与生图,会直接进入结果区。"
: "删除某张后,后面的参考图会自动上移补位,不留空位。"}
</div>
</div>
);