710 lines
26 KiB
TypeScript
710 lines
26 KiB
TypeScript
"use client";
|
||
|
||
import {
|
||
useCallback,
|
||
useEffect,
|
||
useMemo,
|
||
useRef,
|
||
useState,
|
||
type PointerEvent as ReactPointerEvent,
|
||
} 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 { fetchUploadWithRetry } from "@/lib/client/upload-with-retry";
|
||
import { buildImageProxyUrl } from "@/lib/image-delivery";
|
||
import { cn } from "@/lib/utils";
|
||
import type { AgentDetailReplacementReferenceItem } from "@/types/agent";
|
||
|
||
const MERGED_IMAGE_MAX_WIDTH = 1600;
|
||
const MIN_SLICE_HEIGHT = 120;
|
||
const MERGED_IMAGE_MAX_PIXELS = 42_000_000;
|
||
|
||
type LoadedReferenceImage = {
|
||
card: AgentDetailReplacementReferenceItem;
|
||
image: HTMLImageElement;
|
||
width: number;
|
||
height: number;
|
||
scaledHeight: number;
|
||
};
|
||
|
||
type MergedSnapshot = {
|
||
width: number;
|
||
height: number;
|
||
defaultCutLines: number[];
|
||
loadedImages: LoadedReferenceImage[];
|
||
};
|
||
|
||
function clamp(value: number, min: number, max: number) {
|
||
return Math.max(min, Math.min(max, value));
|
||
}
|
||
|
||
function loadImage(url: string) {
|
||
return new Promise<HTMLImageElement>((resolve, reject) => {
|
||
const image = new Image();
|
||
image.crossOrigin = "anonymous";
|
||
image.onload = () => resolve(image);
|
||
image.onerror = () => reject(new Error("图片加载失败"));
|
||
image.src = buildImageProxyUrl(url, {
|
||
width: MERGED_IMAGE_MAX_WIDTH,
|
||
quality: 92,
|
||
format: "png",
|
||
});
|
||
});
|
||
}
|
||
|
||
function buildMergedSnapshot(images: LoadedReferenceImage[]) {
|
||
const baseWidth = Math.max(
|
||
1,
|
||
Math.min(
|
||
MERGED_IMAGE_MAX_WIDTH,
|
||
Math.max(...images.map((item) => item.width), 1)
|
||
)
|
||
);
|
||
const baseTotalHeight = images.reduce((total, item) => {
|
||
return total + Math.max(1, Math.round((baseWidth / Math.max(item.width, 1)) * item.height));
|
||
}, 0);
|
||
const basePixels = baseWidth * baseTotalHeight;
|
||
const safeScale =
|
||
basePixels > MERGED_IMAGE_MAX_PIXELS
|
||
? Math.sqrt(MERGED_IMAGE_MAX_PIXELS / Math.max(basePixels, 1))
|
||
: 1;
|
||
const targetWidth = Math.max(
|
||
1,
|
||
Math.min(
|
||
baseWidth,
|
||
Math.max(baseWidth > 720 ? 720 : baseWidth, Math.round(baseWidth * safeScale))
|
||
)
|
||
);
|
||
|
||
let totalHeight = 0;
|
||
const defaultCutLines: number[] = [];
|
||
const normalizedImages = images.map((item, index) => {
|
||
const scaledHeight = Math.max(
|
||
1,
|
||
Math.round((targetWidth / Math.max(item.width, 1)) * item.height)
|
||
);
|
||
totalHeight += scaledHeight;
|
||
if (index < images.length - 1) {
|
||
defaultCutLines.push(totalHeight);
|
||
}
|
||
return {
|
||
...item,
|
||
scaledHeight,
|
||
};
|
||
});
|
||
|
||
const canvas = document.createElement("canvas");
|
||
canvas.width = targetWidth;
|
||
canvas.height = totalHeight;
|
||
const context = canvas.getContext("2d");
|
||
if (!context) {
|
||
throw new Error("无法初始化拼合画布");
|
||
}
|
||
|
||
context.fillStyle = "#ffffff";
|
||
context.fillRect(0, 0, canvas.width, canvas.height);
|
||
|
||
let offsetY = 0;
|
||
normalizedImages.forEach((item) => {
|
||
context.drawImage(item.image, 0, offsetY, targetWidth, item.scaledHeight);
|
||
offsetY += item.scaledHeight;
|
||
});
|
||
|
||
return {
|
||
canvas,
|
||
snapshot: {
|
||
width: targetWidth,
|
||
height: totalHeight,
|
||
defaultCutLines,
|
||
loadedImages: normalizedImages,
|
||
} satisfies MergedSnapshot,
|
||
};
|
||
}
|
||
|
||
interface AgentDetailReferenceStitchDialogProps {
|
||
open: boolean;
|
||
onOpenChange: (open: boolean) => void;
|
||
cards: AgentDetailReplacementReferenceItem[];
|
||
sourceLabel?: string;
|
||
onApply: (nextCards: AgentDetailReplacementReferenceItem[]) => void;
|
||
}
|
||
|
||
export function AgentDetailReferenceStitchDialog({
|
||
open,
|
||
onOpenChange,
|
||
cards,
|
||
sourceLabel = "详情参考图",
|
||
onApply,
|
||
}: AgentDetailReferenceStitchDialogProps) {
|
||
const previewCanvasRef = useRef<HTMLCanvasElement | null>(null);
|
||
const previewContainerRef = useRef<HTMLDivElement | null>(null);
|
||
const mergedCanvasRef = useRef<HTMLCanvasElement | 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 [isApplying, setIsApplying] = useState(false);
|
||
const [applyProgressText, setApplyProgressText] = useState("");
|
||
const [errorText, setErrorText] = useState<string | null>(null);
|
||
|
||
const validCards = useMemo(
|
||
() =>
|
||
cards.filter(
|
||
(card): card is AgentDetailReplacementReferenceItem & { imageUrl: string } =>
|
||
Boolean(String(card.imageUrl || "").trim())
|
||
),
|
||
[cards]
|
||
);
|
||
|
||
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 redrawPreviewCanvas = useCallback(() => {
|
||
const previewCanvas = previewCanvasRef.current;
|
||
const mergedCanvas = mergedCanvasRef.current;
|
||
if (!previewCanvas || !mergedCanvas || !snapshot) {
|
||
return;
|
||
}
|
||
|
||
previewCanvas.width = snapshot.width;
|
||
previewCanvas.height = snapshot.height;
|
||
const context = previewCanvas.getContext("2d");
|
||
if (!context) {
|
||
return;
|
||
}
|
||
context.clearRect(0, 0, snapshot.width, snapshot.height);
|
||
context.drawImage(mergedCanvas, 0, 0);
|
||
}, [snapshot]);
|
||
|
||
useEffect(() => {
|
||
redrawPreviewCanvas();
|
||
}, [redrawPreviewCanvas]);
|
||
|
||
useEffect(() => {
|
||
if (!open) {
|
||
setDraggingLineIndex(null);
|
||
setIsAddingCutLine(false);
|
||
setPreviewCutLineY(null);
|
||
return;
|
||
}
|
||
|
||
if (validCards.length === 0) {
|
||
setSnapshot(null);
|
||
setCutLines([]);
|
||
setErrorText(`当前没有可拼合的${sourceLabel}`);
|
||
return;
|
||
}
|
||
|
||
let cancelled = false;
|
||
|
||
const setup = async () => {
|
||
try {
|
||
setIsLoading(true);
|
||
setErrorText(null);
|
||
|
||
const loadedImages = await Promise.all(
|
||
validCards.map(async (card) => {
|
||
const image = await loadImage(card.imageUrl);
|
||
return {
|
||
card,
|
||
image,
|
||
width: image.naturalWidth,
|
||
height: image.naturalHeight,
|
||
scaledHeight: image.naturalHeight,
|
||
} satisfies LoadedReferenceImage;
|
||
})
|
||
);
|
||
|
||
if (cancelled) return;
|
||
|
||
const next = buildMergedSnapshot(loadedImages);
|
||
mergedCanvasRef.current = next.canvas;
|
||
setSnapshot(next.snapshot);
|
||
setCutLines(next.snapshot.defaultCutLines);
|
||
} catch (error) {
|
||
if (cancelled) return;
|
||
console.error("[AgentDetailReferenceStitchDialog] Failed to prepare merged image:", error);
|
||
setSnapshot(null);
|
||
setCutLines([]);
|
||
setErrorText(error instanceof Error ? error.message : "拼合参考图失败");
|
||
} finally {
|
||
if (!cancelled) {
|
||
setIsLoading(false);
|
||
}
|
||
}
|
||
};
|
||
|
||
void setup();
|
||
|
||
return () => {
|
||
cancelled = true;
|
||
};
|
||
}, [open, sourceLabel, validCards]);
|
||
|
||
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;
|
||
setCutLines(snapshot.defaultCutLines);
|
||
}, [snapshot]);
|
||
|
||
const handleRemoveCutLine = useCallback((index: number) => {
|
||
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;
|
||
}
|
||
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();
|
||
setDraggingLineIndex(index);
|
||
},
|
||
[]
|
||
);
|
||
|
||
const handleApply = useCallback(async () => {
|
||
if (!snapshot || !mergedCanvasRef.current) {
|
||
toast.error("当前还没有可用的拼合图");
|
||
return;
|
||
}
|
||
|
||
if (sliceSegments.length === 0) {
|
||
toast.error("当前没有可切割的参考图");
|
||
return;
|
||
}
|
||
|
||
setIsApplying(true);
|
||
setApplyProgressText(`正在上传切片 1/${sliceSegments.length}`);
|
||
|
||
try {
|
||
const nextCards: AgentDetailReplacementReferenceItem[] = [];
|
||
const sourceCanvas = mergedCanvasRef.current;
|
||
const sourceCandidateId = validCards[0]?.candidateId || null;
|
||
const timestamp = Date.now();
|
||
|
||
for (const segment of sliceSegments) {
|
||
setApplyProgressText(`正在上传切片 ${segment.index + 1}/${sliceSegments.length}`);
|
||
|
||
const sliceCanvas = document.createElement("canvas");
|
||
sliceCanvas.width = snapshot.width;
|
||
sliceCanvas.height = segment.height;
|
||
const context = sliceCanvas.getContext("2d");
|
||
if (!context) {
|
||
throw new Error("切片画布初始化失败");
|
||
}
|
||
|
||
context.fillStyle = "#ffffff";
|
||
context.fillRect(0, 0, sliceCanvas.width, sliceCanvas.height);
|
||
context.drawImage(
|
||
sourceCanvas,
|
||
0,
|
||
segment.top,
|
||
snapshot.width,
|
||
segment.height,
|
||
0,
|
||
0,
|
||
snapshot.width,
|
||
segment.height
|
||
);
|
||
|
||
const blob = await new Promise<Blob>((resolve, reject) => {
|
||
sliceCanvas.toBlob(
|
||
(value) => {
|
||
if (value) {
|
||
resolve(value);
|
||
return;
|
||
}
|
||
reject(new Error("切片导出失败"));
|
||
},
|
||
"image/jpeg",
|
||
0.92
|
||
);
|
||
});
|
||
|
||
const formData = new FormData();
|
||
formData.append(
|
||
"file",
|
||
new File([blob], `detail-reference-slice-${timestamp}-${segment.index + 1}.jpg`, {
|
||
type: "image/jpeg",
|
||
})
|
||
);
|
||
|
||
const response = await fetchUploadWithRetry(formData);
|
||
const result = await response.json().catch(() => ({}));
|
||
if (!response.ok || !result?.url) {
|
||
throw new Error(result?.error || `第 ${segment.index + 1} 张切片上传失败`);
|
||
}
|
||
|
||
nextCards.push({
|
||
id: `detail-stitch-slice-${timestamp}-${segment.index + 1}`,
|
||
label: `拼合切片 ${segment.index + 1}`,
|
||
imageUrl: String(result.url),
|
||
candidateId: sourceCandidateId,
|
||
sortOrder: segment.index,
|
||
});
|
||
}
|
||
|
||
onApply(nextCards);
|
||
onOpenChange(false);
|
||
toast.success(`已生成 ${nextCards.length} 张切片参考图`);
|
||
} catch (error) {
|
||
console.error("[AgentDetailReferenceStitchDialog] Failed to apply slices:", error);
|
||
toast.error(error instanceof Error ? error.message : "切割参考图失败");
|
||
} finally {
|
||
setIsApplying(false);
|
||
setApplyProgressText("");
|
||
}
|
||
}, [onApply, onOpenChange, sliceSegments, snapshot, validCards]);
|
||
|
||
return (
|
||
<Dialog open={open} onOpenChange={onOpenChange}>
|
||
<DialogContent
|
||
className="h-[92vh] max-w-[1440px] overflow-hidden border-white/10 bg-[#060809] p-0 text-white"
|
||
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>
|
||
</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>
|
||
<div className="text-xs text-white/42">
|
||
默认切线已按原始详情页边界生成，可直接拖动横线微调。
|
||
{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">正在拼合参考图...</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">
|
||
<div
|
||
ref={previewContainerRef}
|
||
className="relative overflow-hidden rounded-[24px] border border-white/10 bg-white"
|
||
onPointerMove={handlePreviewPointerMove}
|
||
onPointerLeave={handlePreviewPointerLeave}
|
||
onClick={handlePreviewClick}
|
||
>
|
||
<canvas
|
||
ref={previewCanvasRef}
|
||
className="block h-auto w-full select-none"
|
||
/>
|
||
|
||
<div className="pointer-events-none absolute inset-0">
|
||
{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 flex -translate-y-1/2 cursor-row-resize 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"
|
||
onClick={(event) => {
|
||
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 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>
|
||
))
|
||
) : (
|
||
<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 || 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 || "正在应用切割"}
|
||
</>
|
||
) : (
|
||
<>
|
||
<Scissors className="mr-2 h-4 w-4" />
|
||
应用切割并替换参考图
|
||
</>
|
||
)}
|
||
</Button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</DialogContent>
|
||
</Dialog>
|
||
);
|
||
}
|