From ffe3de48cc3302f7be182f3ae65e32cef5c069ec Mon Sep 17 00:00:00 2001
From: Your Name <your.email@example.com>
Date: Tue, 30 Dec 2025 00:26:02 +0800
Subject: [PATCH] =?UTF-8?q?=E4=B8=BA=E5=B0=BA=E5=AF=B8=E8=B0=83=E6=95=B4?=
 =?UTF-8?q?=E7=A1=AE=E8=AE=A4=E6=8C=89=E9=92=AE=E6=B7=BB=E5=8A=A0=E5=A4=84?=
 =?UTF-8?q?=E7=90=86=E4=B8=AD=E7=8A=B6=E6=80=81?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 添加isResizing状态跟踪处理进度
- 点击确认调整后按钮显示旋转加载图标和'处理中...'文字
- 处理期间禁用按钮，防止重复点击
- 使用Loader2图标实现旋转动画效果
- 改善用户交互体验，让用户清楚知道系统正在处理
---
 components/image-annotator.tsx | 20 ++++++++++++++++----
 1 file changed, 16 insertions(+), 4 deletions(-)

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<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>