diff --git a/components/agents/AgentPsdTemplateEditorDialog.tsx b/components/agents/AgentPsdTemplateEditorDialog.tsx index eb4dbcd2d..c24196c54 100644 --- a/components/agents/AgentPsdTemplateEditorDialog.tsx +++ b/components/agents/AgentPsdTemplateEditorDialog.tsx @@ -412,11 +412,20 @@ export function AgentPsdTemplateEditorDialog({ ? normalizeAgentPsdImagePlacement(effectiveImagePlacements[selectedImageLayer.id]) : getDefaultAgentPsdImagePlacement(); const fontFaceCss = useMemo(() => buildPreviewFontFaces(selectedTemplate), [selectedTemplate]); + const selectedTemplateSelectValue = selectedTemplate?.id; useEffect(() => { if (!open) return; - if (templates.length > 0 && !templates.some((template) => template.id === selectedTemplateId)) { + if (templates.length === 0) { + if (selectedTemplateId) { + setSelectedTemplateId(""); + } + setSelectedLayerId(""); + return; + } + + if (!templates.some((template) => template.id === selectedTemplateId)) { setSelectedTemplateId(templates[0].id); } }, [open, selectedTemplateId, templates]); @@ -436,6 +445,9 @@ export function AgentPsdTemplateEditorDialog({ setImageSizes({}); return; } + if (typeof window === "undefined" || typeof window.Image !== "function") { + return; + } let cancelled = false; for (const layer of editableImageLayers) { @@ -496,10 +508,44 @@ export function AgentPsdTemplateEditorDialog({ }; updateScale(); - const observer = new ResizeObserver(updateScale); - observer.observe(element); + let animationFrameId: number | null = null; + const scheduleScaleUpdate = () => { + if (typeof window !== "undefined" && typeof window.requestAnimationFrame === "function") { + if (animationFrameId !== null) { + window.cancelAnimationFrame(animationFrameId); + } + animationFrameId = window.requestAnimationFrame(() => { + animationFrameId = null; + updateScale(); + }); + return; + } + + updateScale(); + }; + + if (typeof ResizeObserver !== "undefined") { + const observer = new ResizeObserver(scheduleScaleUpdate); + observer.observe(element); + return () => { + observer.disconnect(); + if (animationFrameId !== null && typeof window !== "undefined") { + window.cancelAnimationFrame(animationFrameId); + } + }; + } + + if (typeof window !== "undefined") { + window.addEventListener("resize", scheduleScaleUpdate); + } + return () => { - observer.disconnect(); + if (typeof window !== "undefined") { + window.removeEventListener("resize", scheduleScaleUpdate); + if (animationFrameId !== null) { + window.cancelAnimationFrame(animationFrameId); + } + } }; }, [selectedTemplate]); @@ -513,11 +559,23 @@ export function AgentPsdTemplateEditorDialog({ return; } - requestAnimationFrame(() => { + const focusTextarea = () => { textarea.focus(); const valueLength = textarea.value.length; textarea.setSelectionRange(valueLength, valueLength); - }); + }; + + if (typeof window !== "undefined" && typeof window.requestAnimationFrame === "function") { + const frameId = window.requestAnimationFrame(focusTextarea); + return () => { + window.cancelAnimationFrame(frameId); + }; + } + + const timeoutId = window.setTimeout(focusTextarea, 0); + return () => { + window.clearTimeout(timeoutId); + }; }, [selectedTextLayer?.id]); async function handleSlotUpload(slotId: string, event: ChangeEvent) { @@ -635,21 +693,6 @@ export function AgentPsdTemplateEditorDialog({ window.addEventListener("pointercancel", handlePointerUp); } - function handleImageWheel( - layer: AgentPsdTemplateImageLayerSlot, - event: ReactPointerEvent - ) { - if (!String(effectiveImageAssignments[layer.id] || "").trim()) { - return; - } - - event.preventDefault(); - event.stopPropagation(); - - const delta = event.deltaY < 0 ? 0.08 : -0.08; - nudgeImageScale(layer.id, delta); - } - async function handleRender() { if (!selectedTemplate) { toast.error("请先选择 PSD 模板"); @@ -715,7 +758,7 @@ export function AgentPsdTemplateEditorDialog({
- @@ -937,7 +980,6 @@ export function AgentPsdTemplateEditorDialog({ tabIndex={0} onClick={() => setSelectedLayerId(layer.id)} onPointerDown={(event) => handleImageDragStart(layer, event)} - onWheel={(event) => handleImageWheel(layer, event)} className="absolute overflow-hidden rounded-lg transition-all" style={{ ...frameStyle, @@ -952,50 +994,9 @@ export function AgentPsdTemplateEditorDialog({
{layer.layerName}
-
- - - -
- 拖动或滚轮缩放 + 拖动调整
) : ( @@ -1025,6 +1026,56 @@ export function AgentPsdTemplateEditorDialog({ ); })} + {orderedEditableImageLayers.map((layer) => { + const isSelected = selectedLayerId === layer.id; + const hasAssignedImage = Boolean( + String(effectiveImageAssignments[layer.id] || "").trim() + ); + if (!isSelected || !hasAssignedImage) { + return null; + } + + return ( +
+ + + +
+ ); + })} + {orderedEditableTextLayers.map((layer) => { const isSelected = selectedLayerId === layer.id; const frameStyle = getLayerFrameStyle(layer, isSelected);