1062 lines
41 KiB
TypeScript
1062 lines
41 KiB
TypeScript
"use client";
|
||
|
||
import {
|
||
useCallback,
|
||
useEffect,
|
||
useMemo,
|
||
useRef,
|
||
useState,
|
||
type PointerEvent as ReactPointerEvent,
|
||
type SyntheticEvent,
|
||
} from "react";
|
||
import { Loader2, Plus, RotateCcw, Scissors, Trash2 } from "lucide-react";
|
||
import { toast } from "sonner";
|
||
import { Button } from "@/components/ui/button";
|
||
import {
|
||
Dialog,
|
||
DialogContent,
|
||
DialogDescription,
|
||
DialogHeader,
|
||
DialogTitle,
|
||
} from "@/components/ui/dialog";
|
||
import { cn } from "@/lib/utils";
|
||
import { buildImageProxyUrl } from "@/lib/image-delivery";
|
||
import { createClientLogger } from "@/lib/observability/client-logger";
|
||
import type { AgentDetailReplacementReferenceItem } from "@/types/agent";
|
||
|
||
const MIN_SLICE_HEIGHT = 120;
|
||
const FAST_PREVIEW_WIDTH = 720;
|
||
const ESTIMATED_REFERENCE_HEIGHT = 960;
|
||
const SEGMENT_PRELOAD_CONCURRENCY = 4;
|
||
const logger = createClientLogger("agent-detail-reference-stitch");
|
||
|
||
type StitchSourceSegment = {
|
||
card: AgentDetailReplacementReferenceItem;
|
||
top: number;
|
||
height: number;
|
||
sourceWidth?: number;
|
||
sourceHeight?: number;
|
||
};
|
||
|
||
type MergedSnapshot = {
|
||
width: number;
|
||
height: number;
|
||
previewUrl: string;
|
||
defaultCutLines: number[];
|
||
sourceSegments: StitchSourceSegment[];
|
||
};
|
||
|
||
type DetailStitchPrepareResponse = {
|
||
success?: boolean;
|
||
data?: {
|
||
previewUrl?: string;
|
||
width?: number;
|
||
height?: number;
|
||
defaultCutLines?: number[];
|
||
sourceSegments?: StitchSourceSegment[];
|
||
failed?: Array<{ id?: string; label?: string; error?: string }>;
|
||
};
|
||
error?: string;
|
||
};
|
||
|
||
type DetailStitchApplyResponse = {
|
||
success?: boolean;
|
||
data?: {
|
||
cards?: AgentDetailReplacementReferenceItem[];
|
||
};
|
||
error?: string;
|
||
};
|
||
|
||
function clamp(value: number, min: number, max: number) {
|
||
return Math.max(min, Math.min(max, value));
|
||
}
|
||
|
||
function buildStitchPreviewImageUrl(url: string, width: number) {
|
||
const normalizedUrl = String(url || "").trim();
|
||
if (!normalizedUrl) return "";
|
||
return buildImageProxyUrl(normalizedUrl, {
|
||
width: Math.min(Math.max(Math.round(width || 720), 96), 1200),
|
||
quality: 84,
|
||
format: "jpeg",
|
||
delivery: "proxy",
|
||
});
|
||
}
|
||
|
||
function buildStitchSegmentDisplayImageUrl(url: string, width: number) {
|
||
const normalizedUrl = String(url || "").trim();
|
||
if (!normalizedUrl) return "";
|
||
return buildImageProxyUrl(normalizedUrl, {
|
||
width: Math.min(Math.max(Math.round(width || FAST_PREVIEW_WIDTH), 96), 960),
|
||
quality: 78,
|
||
format: "jpeg",
|
||
delivery: "display",
|
||
});
|
||
}
|
||
|
||
function getReferenceDimension(value: unknown) {
|
||
const normalized = Math.round(Number(value));
|
||
return Number.isFinite(normalized) && normalized > 0 ? normalized : null;
|
||
}
|
||
|
||
function normalizeDetailStitchErrorMessage(error: unknown, fallback: string) {
|
||
const message =
|
||
error instanceof Error ? error.message : String(error || "").trim();
|
||
if (/timeout|aborted|operation was aborted/i.test(message)) {
|
||
return "切割图片下载超时，通常是源图过大、源站响应慢或网络抖动导致。请稍后重试，或减少本次切割图片数量后再应用。";
|
||
}
|
||
if (/failed to fetch|networkerror|network error/i.test(message)) {
|
||
return "网络连接异常，部分参考图暂时无法下载，请稍后重试。";
|
||
}
|
||
return message || fallback;
|
||
}
|
||
|
||
function resolveReferencePreviewHeight(card: AgentDetailReplacementReferenceItem) {
|
||
const width = getReferenceDimension(card.width);
|
||
const height = getReferenceDimension(card.height);
|
||
if (width && height) {
|
||
return Math.max(MIN_SLICE_HEIGHT, Math.round((FAST_PREVIEW_WIDTH / width) * height));
|
||
}
|
||
return ESTIMATED_REFERENCE_HEIGHT;
|
||
}
|
||
|
||
function buildOptimisticSnapshot(
|
||
cards: Array<AgentDetailReplacementReferenceItem & { imageUrl: string }>
|
||
): MergedSnapshot {
|
||
let top = 0;
|
||
const defaultCutLines: number[] = [];
|
||
const sourceSegments = cards.map((card, index) => {
|
||
const height = resolveReferencePreviewHeight(card);
|
||
const currentTop = top;
|
||
top += height;
|
||
if (index < cards.length - 1) {
|
||
defaultCutLines.push(top);
|
||
}
|
||
return {
|
||
card,
|
||
top: currentTop,
|
||
height,
|
||
sourceWidth: getReferenceDimension(card.width) || undefined,
|
||
sourceHeight: getReferenceDimension(card.height) || undefined,
|
||
};
|
||
});
|
||
|
||
return {
|
||
previewUrl: "",
|
||
width: FAST_PREVIEW_WIDTH,
|
||
height: Math.max(1, top),
|
||
defaultCutLines,
|
||
sourceSegments,
|
||
};
|
||
}
|
||
|
||
function areCutLinesEqual(left: number[], right: number[]) {
|
||
if (left.length !== right.length) return false;
|
||
return left.every((value, index) => Math.round(value) === Math.round(right[index] || 0));
|
||
}
|
||
|
||
function scaleCutLines(lines: number[], fromHeight: number, toHeight: number) {
|
||
const ratio = toHeight / Math.max(1, fromHeight);
|
||
return Array.from(
|
||
new Set(
|
||
lines
|
||
.map((line) => Math.round(line * ratio))
|
||
.filter((line) => Number.isFinite(line) && line > 0 && line < toHeight)
|
||
)
|
||
).sort((left, right) => left - right);
|
||
}
|
||
|
||
function preloadBrowserImage(url: string) {
|
||
return new Promise<void>((resolve) => {
|
||
if (typeof window === "undefined" || !url) {
|
||
resolve();
|
||
return;
|
||
}
|
||
const image = new Image();
|
||
image.decoding = "async";
|
||
image.onload = () => resolve();
|
||
image.onerror = () => resolve();
|
||
image.src = url;
|
||
});
|
||
}
|
||
|
||
interface AgentDetailReferenceStitchDialogProps {
|
||
open: boolean;
|
||
onOpenChange: (open: boolean) => void;
|
||
cards: AgentDetailReplacementReferenceItem[];
|
||
sourceLabel?: string;
|
||
onPrepared?: (nextCards: AgentDetailReplacementReferenceItem[]) => void;
|
||
onApply: (nextCards: AgentDetailReplacementReferenceItem[]) => void;
|
||
}
|
||
|
||
export function AgentDetailReferenceStitchDialog({
|
||
open,
|
||
onOpenChange,
|
||
cards,
|
||
sourceLabel = "详情参考图",
|
||
onPrepared,
|
||
onApply,
|
||
}: AgentDetailReferenceStitchDialogProps) {
|
||
const previewContainerRef = useRef<HTMLDivElement | null>(null);
|
||
const [snapshot, setSnapshot] = useState<MergedSnapshot | null>(null);
|
||
const [cutLines, setCutLines] = useState<number[]>([]);
|
||
const [draggingLineIndex, setDraggingLineIndex] = useState<number | null>(null);
|
||
const [isAddingCutLine, setIsAddingCutLine] = useState(false);
|
||
const [previewCutLineY, setPreviewCutLineY] = useState<number | null>(null);
|
||
const [isLoading, setIsLoading] = useState(false);
|
||
const [isPreparing, setIsPreparing] = useState(false);
|
||
const [isApplying, setIsApplying] = useState(false);
|
||
const [applyProgressText, setApplyProgressText] = useState("");
|
||
const [loadingProgressText, setLoadingProgressText] = useState("");
|
||
const [errorText, setErrorText] = useState<string | null>(null);
|
||
const [warningText, setWarningText] = useState<string | null>(null);
|
||
const [previewImageLoadFailed, setPreviewImageLoadFailed] = useState(false);
|
||
const [passthroughSegmentIndexes, setPassthroughSegmentIndexes] = useState<number[]>([]);
|
||
const hasManualCutLineChangesRef = useRef(false);
|
||
const onPreparedRef = useRef(onPrepared);
|
||
|
||
useEffect(() => {
|
||
onPreparedRef.current = onPrepared;
|
||
}, [onPrepared]);
|
||
|
||
const validCards = useMemo(
|
||
() =>
|
||
cards.filter(
|
||
(card): card is AgentDetailReplacementReferenceItem & { imageUrl: string } =>
|
||
Boolean(String(card.imageUrl || "").trim())
|
||
),
|
||
[cards]
|
||
);
|
||
const validCardLoadKey = useMemo(
|
||
() =>
|
||
validCards
|
||
.map(
|
||
(card, index) =>
|
||
`${card.id}::${String(card.imageUrl || "").trim()}::${card.sortOrder ?? index}`
|
||
)
|
||
.join("|"),
|
||
[validCards]
|
||
);
|
||
const setupCardsRef = useRef(validCards);
|
||
const setupCardsKeyRef = useRef(validCardLoadKey);
|
||
if (setupCardsKeyRef.current !== validCardLoadKey) {
|
||
setupCardsKeyRef.current = validCardLoadKey;
|
||
setupCardsRef.current = validCards;
|
||
}
|
||
const setupCards = setupCardsRef.current;
|
||
|
||
const normalizedCutLines = useMemo(
|
||
() =>
|
||
[...cutLines]
|
||
.filter((value) => Number.isFinite(value))
|
||
.sort((left, right) => left - right),
|
||
[cutLines]
|
||
);
|
||
|
||
const sliceSegments = useMemo(() => {
|
||
if (!snapshot) return [];
|
||
const points = [0, ...normalizedCutLines, snapshot.height];
|
||
return Array.from({ length: Math.max(points.length - 1, 0) }, (_, index) => ({
|
||
index,
|
||
top: points[index],
|
||
height: Math.max(points[index + 1] - points[index], 1),
|
||
}));
|
||
}, [normalizedCutLines, snapshot]);
|
||
const passthroughSegmentIndexSet = useMemo(
|
||
() => new Set(passthroughSegmentIndexes),
|
||
[passthroughSegmentIndexes]
|
||
);
|
||
const mergedPreviewDisplayUrl = useMemo(
|
||
() =>
|
||
snapshot
|
||
? buildStitchPreviewImageUrl(snapshot.previewUrl, snapshot.width)
|
||
: "",
|
||
[snapshot]
|
||
);
|
||
const useVirtualPreview = previewImageLoadFailed || !mergedPreviewDisplayUrl;
|
||
|
||
useEffect(() => {
|
||
if (!open) {
|
||
setDraggingLineIndex(null);
|
||
setIsAddingCutLine(false);
|
||
setPreviewCutLineY(null);
|
||
setLoadingProgressText("");
|
||
setIsLoading(false);
|
||
setIsPreparing(false);
|
||
setWarningText(null);
|
||
setPreviewImageLoadFailed(false);
|
||
setPassthroughSegmentIndexes([]);
|
||
hasManualCutLineChangesRef.current = false;
|
||
return;
|
||
}
|
||
|
||
if (setupCards.length === 0) {
|
||
setSnapshot(null);
|
||
setCutLines([]);
|
||
hasManualCutLineChangesRef.current = false;
|
||
setIsLoading(false);
|
||
setIsPreparing(false);
|
||
setErrorText(`当前没有可拼合的${sourceLabel}`);
|
||
return;
|
||
}
|
||
|
||
let cancelled = false;
|
||
const optimisticSnapshot = buildOptimisticSnapshot(setupCards);
|
||
|
||
setSnapshot(optimisticSnapshot);
|
||
setCutLines(optimisticSnapshot.defaultCutLines);
|
||
hasManualCutLineChangesRef.current = false;
|
||
setPassthroughSegmentIndexes([]);
|
||
setErrorText(null);
|
||
setWarningText(null);
|
||
setPreviewImageLoadFailed(true);
|
||
setIsLoading(false);
|
||
setIsPreparing(true);
|
||
setLoadingProgressText(`正在后台校准 ${setupCards.length} 张参考图尺寸`);
|
||
|
||
const setup = async () => {
|
||
try {
|
||
const response = await fetch("/api/agent-workflow/detail-stitch", {
|
||
method: "POST",
|
||
headers: { "Content-Type": "application/json" },
|
||
body: JSON.stringify({
|
||
mode: "prepare",
|
||
references: setupCards.map((card, index) => ({
|
||
...card,
|
||
sortOrder: card.sortOrder ?? index,
|
||
})),
|
||
}),
|
||
});
|
||
const result = (await response.json().catch(() => ({}))) as DetailStitchPrepareResponse;
|
||
|
||
if (cancelled) return;
|
||
|
||
if (!response.ok || !result.success || !result.data) {
|
||
throw new Error(result.error || "拼合参考图失败");
|
||
}
|
||
|
||
const previewUrl = String(result.data.previewUrl || "").trim();
|
||
const width = Math.round(Number(result.data.width));
|
||
const height = Math.round(Number(result.data.height));
|
||
const sourceSegments = Array.isArray(result.data.sourceSegments)
|
||
? result.data.sourceSegments.filter(
|
||
(segment): segment is StitchSourceSegment =>
|
||
Boolean(segment?.card?.imageUrl) &&
|
||
Number.isFinite(Number(segment.top)) &&
|
||
Number.isFinite(Number(segment.height))
|
||
)
|
||
: [];
|
||
const defaultCutLines = Array.isArray(result.data.defaultCutLines)
|
||
? result.data.defaultCutLines
|
||
.map((value) => Math.round(Number(value)))
|
||
.filter((value) => Number.isFinite(value) && value > 0 && value < height)
|
||
: [];
|
||
|
||
if (!width || !height || sourceSegments.length === 0) {
|
||
throw new Error("拼合结果无效，请稍后重试");
|
||
}
|
||
|
||
const preciseSnapshot = {
|
||
width,
|
||
height,
|
||
previewUrl,
|
||
defaultCutLines,
|
||
sourceSegments,
|
||
};
|
||
setSnapshot(preciseSnapshot);
|
||
setPreviewImageLoadFailed(!previewUrl);
|
||
setCutLines((current) => {
|
||
if (hasManualCutLineChangesRef.current) {
|
||
return scaleCutLines(current, optimisticSnapshot.height, height);
|
||
}
|
||
return areCutLinesEqual(current, optimisticSnapshot.defaultCutLines)
|
||
? defaultCutLines
|
||
: scaleCutLines(current, optimisticSnapshot.height, height);
|
||
});
|
||
if (onPreparedRef.current) {
|
||
const dimensionByCardId = new Map(
|
||
sourceSegments.map((segment) => [
|
||
segment.card.id,
|
||
{
|
||
previewUrl: segment.card.previewUrl || segment.card.imageUrl || null,
|
||
width: segment.sourceWidth || segment.card.width || null,
|
||
height: segment.sourceHeight || segment.card.height || null,
|
||
},
|
||
])
|
||
);
|
||
onPreparedRef.current(
|
||
setupCards.map((card, index) => {
|
||
const dimensions = dimensionByCardId.get(card.id);
|
||
return {
|
||
...card,
|
||
sortOrder: card.sortOrder ?? index,
|
||
previewUrl: dimensions?.previewUrl || card.previewUrl || card.imageUrl || null,
|
||
width: dimensions?.width || card.width || null,
|
||
height: dimensions?.height || card.height || null,
|
||
};
|
||
})
|
||
);
|
||
}
|
||
setWarningText(
|
||
(result.data.failed?.length || 0) > 0
|
||
? `有 ${result.data.failed?.length || 0} 张参考图加载失败，已自动跳过异常图片。`
|
||
: null
|
||
);
|
||
} catch (error) {
|
||
if (cancelled) return;
|
||
const message = normalizeDetailStitchErrorMessage(error, "拼合参考图失败");
|
||
logger.warn("prepare_failed", {
|
||
cardCount: setupCards.length,
|
||
message,
|
||
});
|
||
setWarningText(
|
||
`精准尺寸校准失败，已先使用快速预览：${message}`
|
||
);
|
||
} finally {
|
||
if (!cancelled) {
|
||
setIsPreparing(false);
|
||
setLoadingProgressText("");
|
||
}
|
||
}
|
||
};
|
||
|
||
void setup();
|
||
|
||
return () => {
|
||
cancelled = true;
|
||
};
|
||
}, [open, setupCards, sourceLabel]);
|
||
|
||
useEffect(() => {
|
||
const validIndexes = new Set(sliceSegments.map((segment) => segment.index));
|
||
setPassthroughSegmentIndexes((current) =>
|
||
current.filter((index) => validIndexes.has(index))
|
||
);
|
||
}, [sliceSegments]);
|
||
|
||
useEffect(() => {
|
||
if (!open || !snapshot || !useVirtualPreview) return;
|
||
const urls = Array.from(
|
||
new Set(
|
||
snapshot.sourceSegments
|
||
.map((segment) => {
|
||
const originalImageUrl = String(segment.card.imageUrl || "").trim();
|
||
const segmentImageUrl =
|
||
String(segment.card.previewUrl || "").trim() || originalImageUrl;
|
||
return buildStitchSegmentDisplayImageUrl(segmentImageUrl, snapshot.width);
|
||
})
|
||
.filter(Boolean)
|
||
)
|
||
);
|
||
if (urls.length <= 2) return;
|
||
|
||
let cancelled = false;
|
||
let cursor = 2;
|
||
const timer = window.setTimeout(() => {
|
||
const worker = async () => {
|
||
while (!cancelled && cursor < urls.length) {
|
||
const currentIndex = cursor;
|
||
cursor += 1;
|
||
await preloadBrowserImage(urls[currentIndex] || "");
|
||
}
|
||
};
|
||
void Promise.all(
|
||
Array.from(
|
||
{ length: Math.min(SEGMENT_PRELOAD_CONCURRENCY, Math.max(urls.length - 2, 0)) },
|
||
() => worker()
|
||
)
|
||
);
|
||
}, 300);
|
||
|
||
return () => {
|
||
cancelled = true;
|
||
window.clearTimeout(timer);
|
||
};
|
||
}, [open, snapshot, useVirtualPreview]);
|
||
|
||
const resolveInsertCutLineY = useCallback(
|
||
(rawY: number) => {
|
||
if (!snapshot) return null;
|
||
const sortedLines = [...normalizedCutLines].sort((left, right) => left - right);
|
||
const insertIndex = sortedLines.findIndex((value) => value > rawY);
|
||
const previousBoundary =
|
||
insertIndex <= 0 ? 0 : sortedLines[(insertIndex === -1 ? sortedLines.length : insertIndex) - 1];
|
||
const nextBoundary =
|
||
insertIndex === -1 ? snapshot.height : sortedLines[insertIndex];
|
||
const minY = previousBoundary + MIN_SLICE_HEIGHT;
|
||
const maxY = nextBoundary - MIN_SLICE_HEIGHT;
|
||
if (maxY < minY) {
|
||
return null;
|
||
}
|
||
return clamp(rawY, minY, maxY);
|
||
},
|
||
[normalizedCutLines, snapshot]
|
||
);
|
||
|
||
const resolveCanvasYFromClient = useCallback(
|
||
(clientY: number) => {
|
||
const container = previewContainerRef.current;
|
||
if (!container || !snapshot) return null;
|
||
const rect = container.getBoundingClientRect();
|
||
if (rect.height <= 0) return null;
|
||
const rawY = ((clientY - rect.top) / rect.height) * snapshot.height;
|
||
return clamp(rawY, 0, snapshot.height);
|
||
},
|
||
[snapshot]
|
||
);
|
||
|
||
useEffect(() => {
|
||
if (draggingLineIndex === null || !snapshot) {
|
||
return;
|
||
}
|
||
|
||
const handlePointerMove = (event: PointerEvent) => {
|
||
const container = previewContainerRef.current;
|
||
if (!container) return;
|
||
const rect = container.getBoundingClientRect();
|
||
if (rect.height <= 0) return;
|
||
|
||
const rawY = ((event.clientY - rect.top) / rect.height) * snapshot.height;
|
||
setCutLines((current) => {
|
||
const next = [...current].sort((left, right) => left - right);
|
||
const minY =
|
||
draggingLineIndex === 0
|
||
? MIN_SLICE_HEIGHT
|
||
: next[draggingLineIndex - 1] + MIN_SLICE_HEIGHT;
|
||
const maxY =
|
||
draggingLineIndex === next.length - 1
|
||
? snapshot.height - MIN_SLICE_HEIGHT
|
||
: next[draggingLineIndex + 1] - MIN_SLICE_HEIGHT;
|
||
next[draggingLineIndex] = clamp(rawY, minY, maxY);
|
||
return next;
|
||
});
|
||
};
|
||
|
||
const handlePointerUp = () => {
|
||
setDraggingLineIndex(null);
|
||
};
|
||
|
||
window.addEventListener("pointermove", handlePointerMove);
|
||
window.addEventListener("pointerup", handlePointerUp);
|
||
|
||
return () => {
|
||
window.removeEventListener("pointermove", handlePointerMove);
|
||
window.removeEventListener("pointerup", handlePointerUp);
|
||
};
|
||
}, [draggingLineIndex, snapshot]);
|
||
|
||
const handleAddCutLine = useCallback(() => {
|
||
if (!snapshot) return;
|
||
const points = [0, ...normalizedCutLines, snapshot.height];
|
||
const hasSpace = points.some(
|
||
(value, index) =>
|
||
index < points.length - 1 && points[index + 1] - value >= MIN_SLICE_HEIGHT * 2
|
||
);
|
||
if (!hasSpace) {
|
||
toast.error("当前没有足够空间继续添加切线");
|
||
return;
|
||
}
|
||
|
||
setIsAddingCutLine((current) => !current);
|
||
setPreviewCutLineY(null);
|
||
}, [normalizedCutLines, snapshot]);
|
||
|
||
const handleResetCutLines = useCallback(() => {
|
||
if (!snapshot) return;
|
||
hasManualCutLineChangesRef.current = false;
|
||
setCutLines(snapshot.defaultCutLines);
|
||
}, [snapshot]);
|
||
|
||
const handleClearCutLines = useCallback(() => {
|
||
hasManualCutLineChangesRef.current = true;
|
||
setCutLines([]);
|
||
setDraggingLineIndex(null);
|
||
setIsAddingCutLine(false);
|
||
setPreviewCutLineY(null);
|
||
}, []);
|
||
|
||
const handleRemoveCutLine = useCallback((index: number) => {
|
||
hasManualCutLineChangesRef.current = true;
|
||
setCutLines((current) => current.filter((_, currentIndex) => currentIndex !== index));
|
||
}, []);
|
||
|
||
const handlePreviewPointerMove = useCallback(
|
||
(event: ReactPointerEvent<HTMLDivElement>) => {
|
||
if (!isAddingCutLine) return;
|
||
const rawY = resolveCanvasYFromClient(event.clientY);
|
||
if (rawY === null) {
|
||
setPreviewCutLineY(null);
|
||
return;
|
||
}
|
||
setPreviewCutLineY(resolveInsertCutLineY(rawY));
|
||
},
|
||
[isAddingCutLine, resolveCanvasYFromClient, resolveInsertCutLineY]
|
||
);
|
||
|
||
const handlePreviewPointerLeave = useCallback(() => {
|
||
if (!isAddingCutLine) return;
|
||
setPreviewCutLineY(null);
|
||
}, [isAddingCutLine]);
|
||
|
||
const handlePreviewClick = useCallback(
|
||
(event: ReactPointerEvent<HTMLDivElement>) => {
|
||
if (!isAddingCutLine) return;
|
||
const rawY = resolveCanvasYFromClient(event.clientY);
|
||
const nextY = rawY === null ? null : resolveInsertCutLineY(rawY);
|
||
if (nextY === null) {
|
||
toast.error("当前位置无法添加切线，请换一个位置");
|
||
return;
|
||
}
|
||
hasManualCutLineChangesRef.current = true;
|
||
setCutLines((current) => [...current, Math.round(nextY)].sort((left, right) => left - right));
|
||
setIsAddingCutLine(false);
|
||
setPreviewCutLineY(null);
|
||
},
|
||
[isAddingCutLine, resolveCanvasYFromClient, resolveInsertCutLineY]
|
||
);
|
||
|
||
const handleLinePointerDown = useCallback(
|
||
(index: number) => (event: ReactPointerEvent<HTMLDivElement>) => {
|
||
event.preventDefault();
|
||
event.stopPropagation();
|
||
try {
|
||
event.currentTarget.setPointerCapture(event.pointerId);
|
||
} catch {
|
||
// Older browsers may not support pointer capture for this target.
|
||
}
|
||
hasManualCutLineChangesRef.current = true;
|
||
setDraggingLineIndex(index);
|
||
},
|
||
[]
|
||
);
|
||
|
||
const handleMergedPreviewImageError = useCallback(
|
||
(event: SyntheticEvent<HTMLImageElement, Event>) => {
|
||
const image = event.currentTarget;
|
||
const fallbackUrl = String(snapshot?.previewUrl || "").trim();
|
||
if (fallbackUrl && image.dataset.originalFallbackApplied !== "1") {
|
||
image.dataset.originalFallbackApplied = "1";
|
||
image.src = fallbackUrl;
|
||
return;
|
||
}
|
||
setPreviewImageLoadFailed(true);
|
||
setWarningText((current) => current || "拼合预览图加载失败，已切换为分段预览。");
|
||
},
|
||
[snapshot?.previewUrl]
|
||
);
|
||
|
||
const handleSegmentPreviewImageError = useCallback(
|
||
(originalUrl: string) => (event: SyntheticEvent<HTMLImageElement, Event>) => {
|
||
const image = event.currentTarget;
|
||
const fallbackUrl = String(originalUrl || "").trim();
|
||
if (fallbackUrl && image.dataset.originalFallbackApplied !== "1") {
|
||
image.dataset.originalFallbackApplied = "1";
|
||
image.src = fallbackUrl;
|
||
return;
|
||
}
|
||
image.style.opacity = "0";
|
||
},
|
||
[]
|
||
);
|
||
|
||
const handleApply = useCallback(async () => {
|
||
if (!snapshot) {
|
||
toast.error("当前还没有可用的拼合图");
|
||
return;
|
||
}
|
||
|
||
if (sliceSegments.length === 0) {
|
||
toast.error("当前没有可切割的参考图");
|
||
return;
|
||
}
|
||
|
||
setIsApplying(true);
|
||
setApplyProgressText(`正在服务端切割 ${sliceSegments.length} 张`);
|
||
|
||
try {
|
||
const response = await fetch("/api/agent-workflow/detail-stitch", {
|
||
method: "POST",
|
||
headers: { "Content-Type": "application/json" },
|
||
body: JSON.stringify({
|
||
mode: "apply",
|
||
previewUrl: snapshot.previewUrl,
|
||
width: snapshot.width,
|
||
height: snapshot.height,
|
||
cutLines: normalizedCutLines,
|
||
sourceSegments: snapshot.sourceSegments,
|
||
passthroughSegmentIndexes,
|
||
}),
|
||
});
|
||
const result = (await response.json().catch(() => ({}))) as DetailStitchApplyResponse;
|
||
if (!response.ok || !result.success || !result.data?.cards?.length) {
|
||
throw new Error(result.error || "切割参考图失败");
|
||
}
|
||
|
||
const orderedCards = result.data.cards.map((card, index) => ({
|
||
...card,
|
||
sortOrder: index,
|
||
passthrough: passthroughSegmentIndexSet.has(index),
|
||
}));
|
||
if (orderedCards.length !== sliceSegments.length) {
|
||
throw new Error("部分切片处理失败，请稍后重试");
|
||
}
|
||
|
||
setApplyProgressText(
|
||
normalizedCutLines.length === snapshot.defaultCutLines.length
|
||
? "已复用原图边界"
|
||
: `已生成 ${orderedCards.length} 张切片`
|
||
);
|
||
|
||
onApply(orderedCards);
|
||
onOpenChange(false);
|
||
toast.success(`已生成 ${orderedCards.length} 张切片参考图`);
|
||
} catch (error) {
|
||
const message = normalizeDetailStitchErrorMessage(error, "切割参考图失败");
|
||
logger.error("apply_failed", {
|
||
cutLineCount: normalizedCutLines.length,
|
||
sliceCount: sliceSegments.length,
|
||
sourceSegmentCount: snapshot.sourceSegments.length,
|
||
message,
|
||
});
|
||
toast.error(message);
|
||
} finally {
|
||
setIsApplying(false);
|
||
setApplyProgressText("");
|
||
}
|
||
}, [
|
||
normalizedCutLines,
|
||
onApply,
|
||
onOpenChange,
|
||
passthroughSegmentIndexes,
|
||
passthroughSegmentIndexSet,
|
||
sliceSegments.length,
|
||
snapshot,
|
||
]);
|
||
|
||
return (
|
||
<Dialog open={open} onOpenChange={onOpenChange}>
|
||
<DialogContent
|
||
className="h-[92vh] max-w-[1440px] overflow-hidden border-white/10 bg-[#060809] p-0 text-white"
|
||
onEscapeKeyDown={(event) => {
|
||
event.preventDefault();
|
||
}}
|
||
onInteractOutside={(event) => {
|
||
event.preventDefault();
|
||
}}
|
||
onPointerDownOutside={(event) => {
|
||
event.preventDefault();
|
||
}}
|
||
overlayClassName="bg-black/85 backdrop-blur-sm"
|
||
>
|
||
<DialogHeader className="border-b border-white/10 px-6 py-5">
|
||
<div className="flex flex-wrap items-start justify-between gap-4">
|
||
<div className="space-y-1">
|
||
<DialogTitle className="flex items-center gap-2 text-white">
|
||
<Scissors className="h-5 w-5 text-emerald-300" />
|
||
拼合切割{sourceLabel}
|
||
</DialogTitle>
|
||
<DialogDescription className="text-white/45">
|
||
先把当前参考图按顺序纵向拼成一张长图，再通过横向切线重新切成多屏，继续用于详情替换逐屏生成。
|
||
</DialogDescription>
|
||
</div>
|
||
<div className="flex flex-wrap items-center gap-2">
|
||
<div className="rounded-full border border-white/10 bg-white/[0.04] px-3 py-1 text-xs text-white/58">
|
||
原始 {validCards.length} 张
|
||
</div>
|
||
<div className="rounded-full border border-emerald-400/20 bg-emerald-500/[0.08] px-3 py-1 text-xs text-emerald-100/85">
|
||
当前将切成 {sliceSegments.length || 0} 张
|
||
</div>
|
||
{passthroughSegmentIndexes.length > 0 ? (
|
||
<div className="rounded-full border border-cyan-400/20 bg-cyan-500/[0.08] px-3 py-1 text-xs text-cyan-100/85">
|
||
直出 {passthroughSegmentIndexes.length} 张
|
||
</div>
|
||
) : null}
|
||
</div>
|
||
</div>
|
||
</DialogHeader>
|
||
|
||
<div className="grid h-full min-h-0 grid-cols-1 xl:grid-cols-[minmax(0,1fr)_320px]">
|
||
<div className="min-h-0 border-b border-white/10 xl:border-b-0 xl:border-r">
|
||
<div className="flex flex-wrap items-center gap-2 border-b border-white/10 px-6 py-4">
|
||
<Button
|
||
type="button"
|
||
variant="outline"
|
||
onClick={handleAddCutLine}
|
||
disabled={!snapshot || isLoading || isApplying}
|
||
className="border-white/12 bg-white/[0.03] text-white hover:bg-white/[0.08] hover:text-white"
|
||
>
|
||
<Plus className="mr-2 h-4 w-4" />
|
||
{isAddingCutLine ? "点击长图落线" : "添加切线"}
|
||
</Button>
|
||
<Button
|
||
type="button"
|
||
variant="outline"
|
||
onClick={handleResetCutLines}
|
||
disabled={!snapshot || isLoading || isApplying}
|
||
className="border-white/12 bg-white/[0.03] text-white hover:bg-white/[0.08] hover:text-white"
|
||
>
|
||
<RotateCcw className="mr-2 h-4 w-4" />
|
||
恢复原页边界
|
||
</Button>
|
||
<Button
|
||
type="button"
|
||
variant="outline"
|
||
onClick={handleClearCutLines}
|
||
disabled={!snapshot || isLoading || isApplying || normalizedCutLines.length === 0}
|
||
className="border-red-400/20 bg-red-500/[0.06] text-red-100 hover:bg-red-500/[0.14] hover:text-red-50"
|
||
>
|
||
<Trash2 className="mr-2 h-4 w-4" />
|
||
清空切线
|
||
</Button>
|
||
<div className="text-xs text-white/42">
|
||
{isPreparing
|
||
? loadingProgressText || "正在后台校准参考图尺寸，完成后会自动修正切线。"
|
||
: "默认切线已按原始详情页边界生成，可直接拖动横线微调。"}
|
||
{isAddingCutLine ? " 当前已进入加线模式，移动鼠标预览位置后点击长图即可落线。" : ""}
|
||
</div>
|
||
</div>
|
||
|
||
<div className="agent-dark-scrollbar h-full overflow-auto px-6 py-5">
|
||
{isLoading ? (
|
||
<div className="flex min-h-[420px] flex-col items-center justify-center gap-3 rounded-[24px] border border-dashed border-white/12 bg-black/20 text-center">
|
||
<Loader2 className="h-6 w-6 animate-spin text-emerald-300" />
|
||
<div className="text-sm text-white/75">
|
||
{loadingProgressText || "正在拼合参考图..."}
|
||
</div>
|
||
<div className="text-xs text-white/42">会按当前参考图顺序生成虚拟长图，不再上传超长拼合图</div>
|
||
</div>
|
||
) : errorText ? (
|
||
<div className="flex min-h-[420px] flex-col items-center justify-center rounded-[24px] border border-dashed border-red-400/20 bg-red-500/[0.05] px-6 text-center">
|
||
<div className="text-sm font-medium text-red-100">{errorText}</div>
|
||
<div className="mt-2 text-xs leading-6 text-red-100/60">
|
||
请先确认当前已经成功加载参考详情图，再进入拼合切割。
|
||
</div>
|
||
</div>
|
||
) : snapshot ? (
|
||
<div className="space-y-4">
|
||
{warningText ? (
|
||
<div className="rounded-[18px] border border-amber-400/20 bg-amber-500/[0.08] px-4 py-3 text-xs leading-6 text-amber-100/88">
|
||
{warningText}
|
||
</div>
|
||
) : null}
|
||
<div className="flex justify-center">
|
||
<div
|
||
ref={previewContainerRef}
|
||
className="relative w-full max-w-[650px] overflow-hidden rounded-[24px] border border-white/10 bg-white shadow-[0_18px_48px_rgba(0,0,0,0.22)]"
|
||
onPointerMove={handlePreviewPointerMove}
|
||
onPointerLeave={handlePreviewPointerLeave}
|
||
onClick={handlePreviewClick}
|
||
>
|
||
{useVirtualPreview ? (
|
||
<div className="w-full bg-white">
|
||
{snapshot.sourceSegments.map((segment, index) => {
|
||
const originalImageUrl = String(segment.card.imageUrl || "").trim();
|
||
const segmentImageUrl =
|
||
String(segment.card.previewUrl || "").trim() || originalImageUrl;
|
||
return (
|
||
<div
|
||
key={`${segment.card.id || "segment"}-${index}-${segment.top}`}
|
||
className="relative overflow-hidden bg-white"
|
||
style={{
|
||
aspectRatio: `${snapshot.width} / ${Math.max(segment.height, 1)}`,
|
||
contentVisibility: index > 4 ? "auto" : undefined,
|
||
containIntrinsicSize:
|
||
index > 4 ? `${Math.max(segment.height, 1)}px` : undefined,
|
||
}}
|
||
>
|
||
<div className="absolute inset-0 flex items-center justify-center px-4 text-center text-xs text-neutral-400">
|
||
参考图 {index + 1} 加载失败
|
||
</div>
|
||
{segmentImageUrl ? (
|
||
<img
|
||
src={buildStitchSegmentDisplayImageUrl(segmentImageUrl, snapshot.width)}
|
||
alt={`拼合分段预览 ${index + 1}`}
|
||
className="relative z-10 block h-full w-full select-none object-fill"
|
||
draggable={false}
|
||
decoding="async"
|
||
loading={index > 2 ? "lazy" : "eager"}
|
||
fetchPriority={index < 2 ? "high" : "low"}
|
||
onError={handleSegmentPreviewImageError(originalImageUrl)}
|
||
/>
|
||
) : null}
|
||
</div>
|
||
);
|
||
})}
|
||
</div>
|
||
) : (
|
||
<img
|
||
key={mergedPreviewDisplayUrl || snapshot.previewUrl}
|
||
src={mergedPreviewDisplayUrl || snapshot.previewUrl}
|
||
alt="拼合长图预览"
|
||
className="block h-auto w-full select-none"
|
||
width={snapshot.width}
|
||
height={snapshot.height}
|
||
draggable={false}
|
||
decoding="async"
|
||
onError={handleMergedPreviewImageError}
|
||
/>
|
||
)}
|
||
|
||
<div className="pointer-events-none absolute inset-0 z-30">
|
||
{isAddingCutLine && previewCutLineY !== null ? (
|
||
<div
|
||
className="absolute inset-x-0"
|
||
style={{ top: `${(previewCutLineY / snapshot.height) * 100}%` }}
|
||
>
|
||
<div className="absolute inset-x-0 flex -translate-y-1/2 items-center justify-center">
|
||
<div className="relative w-full">
|
||
<div className="h-[2px] w-full border-t border-dashed border-emerald-400 bg-transparent" />
|
||
<div className="absolute left-3 top-1/2 -translate-y-1/2 rounded-full border border-emerald-300/35 bg-black/72 px-2 py-1 text-[11px] text-emerald-100">
|
||
点击落线
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
) : null}
|
||
{normalizedCutLines.map((lineY, index) => {
|
||
const topPercent = (lineY / snapshot.height) * 100;
|
||
return (
|
||
<div
|
||
key={`cut-line-${index}-${lineY}`}
|
||
className="absolute inset-x-0"
|
||
style={{ top: `${topPercent}%` }}
|
||
>
|
||
<div
|
||
onPointerDown={handleLinePointerDown(index)}
|
||
className={cn(
|
||
"pointer-events-auto absolute inset-x-0 z-10 flex h-10 -translate-y-1/2 cursor-row-resize touch-none select-none items-center justify-center",
|
||
draggingLineIndex === index && "z-20"
|
||
)}
|
||
style={{ touchAction: "none" }}
|
||
>
|
||
<div className="relative w-full">
|
||
<div className="h-[2px] w-full bg-emerald-400 shadow-[0_0_16px_rgba(52,211,153,0.42)]" />
|
||
<div className="absolute left-3 top-1/2 -translate-y-1/2 rounded-full border border-emerald-300/35 bg-black/72 px-2 py-1 text-[11px] text-emerald-100">
|
||
切线 {index + 1}
|
||
</div>
|
||
<button
|
||
type="button"
|
||
onPointerDown={(event) => {
|
||
event.preventDefault();
|
||
event.stopPropagation();
|
||
setDraggingLineIndex(null);
|
||
}}
|
||
onClick={(event) => {
|
||
event.preventDefault();
|
||
event.stopPropagation();
|
||
handleRemoveCutLine(index);
|
||
}}
|
||
className="absolute right-3 top-1/2 pointer-events-auto -translate-y-1/2 rounded-full border border-white/12 bg-black/72 px-2 py-1 text-[11px] text-white/78 transition-colors hover:border-white/20 hover:text-white"
|
||
>
|
||
删除
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
);
|
||
})}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div className="rounded-[20px] border border-white/10 bg-black/20 px-4 py-3 text-xs leading-6 text-white/48">
|
||
向下拖动可浏览整张拼合长图。每条横线代表一次切割边界；右侧可把某些切片标记为“直接应用”，这些模块会跳过继续生成，直接进入结果区。
|
||
</div>
|
||
</div>
|
||
) : null}
|
||
</div>
|
||
</div>
|
||
|
||
<div className="flex min-h-0 flex-col">
|
||
<div className="border-b border-white/10 px-5 py-4">
|
||
<div className="text-sm font-semibold text-white">切割结果预估</div>
|
||
<div className="mt-1 text-xs text-white/42">
|
||
应用切割后，下方每一段都会回到详情替换参考图区；标记为“不处理直出”的切片会跳过继续生成，未标记的切片再逐屏生成。
|
||
</div>
|
||
</div>
|
||
|
||
<div className="agent-dark-scrollbar flex-1 space-y-3 overflow-y-auto px-5 py-4">
|
||
{sliceSegments.length > 0 ? (
|
||
sliceSegments.map((segment) => (
|
||
<div
|
||
key={`slice-segment-${segment.index}`}
|
||
className="rounded-[20px] border border-white/10 bg-white/[0.03] p-3"
|
||
>
|
||
<div className="flex items-center justify-between gap-3">
|
||
<div className="text-sm font-medium text-white">
|
||
切片 {segment.index + 1}
|
||
</div>
|
||
<div className="rounded-full border border-white/10 bg-black/30 px-2.5 py-1 text-[11px] text-white/52">
|
||
高度 {segment.height}px
|
||
</div>
|
||
</div>
|
||
<div className="mt-2 text-xs leading-6 text-white/42">
|
||
从 {Math.round(segment.top)}px 到 {Math.round(segment.top + segment.height)}px
|
||
</div>
|
||
<div className="mt-3 flex items-center justify-between gap-2">
|
||
<div className="text-[11px] text-white/45">
|
||
{passthroughSegmentIndexSet.has(segment.index)
|
||
? "当前切片不会参与生图，应用后会直接进入结果区。"
|
||
: "当前切片会继续参与详情替换生成。"}
|
||
</div>
|
||
<button
|
||
type="button"
|
||
onClick={() =>
|
||
setPassthroughSegmentIndexes((current) =>
|
||
current.includes(segment.index)
|
||
? current.filter((item) => item !== segment.index)
|
||
: [...current, segment.index].sort((left, right) => left - right)
|
||
)
|
||
}
|
||
className={cn(
|
||
"rounded-full border px-3 py-1 text-[11px] transition-colors",
|
||
passthroughSegmentIndexSet.has(segment.index)
|
||
? "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"
|
||
)}
|
||
>
|
||
{passthroughSegmentIndexSet.has(segment.index)
|
||
? "取消不处理"
|
||
: "标记不处理"}
|
||
</button>
|
||
</div>
|
||
</div>
|
||
))
|
||
) : (
|
||
<div className="flex min-h-[220px] items-center justify-center rounded-[20px] border border-dashed border-white/12 bg-black/20 px-5 text-center text-sm text-white/42">
|
||
当前还没有可切割的长图。
|
||
</div>
|
||
)}
|
||
</div>
|
||
|
||
<div className="border-t border-white/10 px-5 py-4">
|
||
<Button
|
||
type="button"
|
||
onClick={handleApply}
|
||
disabled={isLoading || isPreparing || isApplying || !snapshot || sliceSegments.length === 0}
|
||
className="h-11 w-full rounded-[18px] bg-emerald-500 text-black hover:bg-emerald-400 disabled:opacity-50"
|
||
>
|
||
{isApplying ? (
|
||
<>
|
||
<Loader2 className="mr-2 h-4 w-4 animate-spin" />
|
||
{applyProgressText || "正在应用切割"}
|
||
</>
|
||
) : isPreparing ? (
|
||
<>
|
||
<Loader2 className="mr-2 h-4 w-4 animate-spin" />
|
||
正在校准尺寸
|
||
</>
|
||
) : (
|
||
<>
|
||
<Scissors className="mr-2 h-4 w-4" />
|
||
应用切割并替换参考图
|
||
</>
|
||
)}
|
||
</Button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</DialogContent>
|
||
</Dialog>
|
||
);
|
||
}
|