diff --git a/components/image-annotator.tsx b/components/image-annotator.tsx index 3f4b9f9cb..7c4507377 100644 --- a/components/image-annotator.tsx +++ b/components/image-annotator.tsx @@ -2,7 +2,7 @@ import React, { useRef, useState, useEffect, useCallback } from "react"; import { createPortal } from "react-dom"; -import { X, Pencil, Circle, ArrowRight, Type, Check, Undo, Trash2, Scissors, Sparkles, Download, Expand, Move, Maximize2, ZoomIn, ZoomOut } from "lucide-react"; +import { X, Pencil, Circle, ArrowRight, Type, Check, Undo, Trash2, Scissors, Sparkles, Download, Expand, Move, Maximize2, ZoomIn, ZoomOut, Loader2 } from "lucide-react"; import { Button } from "./ui/button"; import { Input } from "./ui/input"; import { toast } from "sonner"; @@ -79,6 +79,7 @@ export function ImageAnnotator({ imageUrl, onConfirm, onCancel }: ImageAnnotator const [isDraggingResize, setIsDraggingResize] = useState(false); const [dragStart, setDragStart] = useState<{ x: number; y: number } | null>(null); const [selectedAspectRatio, setSelectedAspectRatio] = useState(null); // 选中的比例,null表示自定义 + const [isResizing, setIsResizing] = useState(false); // 尺寸调整处理中状态 const resizeCanvasRef = useRef(null); const resizeContainerRef = useRef(null); @@ -679,8 +680,9 @@ export function ImageAnnotator({ imageUrl, onConfirm, onCancel }: ImageAnnotator // 尺寸调整:导出为指定尺寸的图片并上传到存储桶 const handleResizeConfirm = async () => { - if (!image || !isResizeMode) return; + if (!image || !isResizeMode || isResizing) return; + setIsResizing(true); try { // 创建指定尺寸的画布 const exportCanvas = document.createElement("canvas"); @@ -757,6 +759,8 @@ export function ImageAnnotator({ imageUrl, onConfirm, onCancel }: ImageAnnotator } catch (error) { console.error("[尺寸调整] 错误:", error); toast.error(error instanceof Error ? error.message : "尺寸调整失败,请稍后重试"); + } finally { + setIsResizing(false); } }; @@ -1151,9 +1155,17 @@ export function ImageAnnotator({ imageUrl, onConfirm, onCancel }: ImageAnnotator