为尺寸调整确认按钮添加处理中状态

- 添加isResizing状态跟踪处理进度
- 点击确认调整后按钮显示旋转加载图标和'处理中...'文字
- 处理期间禁用按钮，防止重复点击
- 使用Loader2图标实现旋转动画效果
- 改善用户交互体验，让用户清楚知道系统正在处理

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<string | null>(null); // 选中的比例，null表示自定义
+  const [isResizing, setIsResizing] = useState(false); // 尺寸调整处理中状态
   const resizeCanvasRef = useRef<HTMLCanvasElement>(null);
   const resizeContainerRef = useRef<HTMLDivElement>(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
                 <Button
                   size="sm"
                   onClick={handleResizeConfirm}
-                  className="bg-primary text-primary-foreground hover:bg-primary/90"
+                  disabled={isResizing}
+                  className="bg-primary text-primary-foreground hover:bg-primary/90 disabled:opacity-50 disabled:cursor-not-allowed"
                 >
-                  确认调整
+                  {isResizing ? (
+                    <>
+                      <Loader2 className="mr-1 h-4 w-4 animate-spin" />
+                      处理中...
+                    </>
+                  ) : (
+                    "确认调整"
+                  )}
                 </Button>
               </div>
             </div>