From 4fc33d719df68635ab9190368ff16142e854a156 Mon Sep 17 00:00:00 2001
From: Your Name <your.email@example.com>
Date: Tue, 30 Dec 2025 00:37:21 +0800
Subject: [PATCH] =?UTF-8?q?=E6=B7=BB=E5=8A=A0=E5=AF=B9=E8=AF=9D=E6=A1=86?=
 =?UTF-8?q?=E5=9B=BE=E7=89=87=E5=B0=BA=E5=AF=B8=E8=B0=83=E6=95=B4=E6=8C=89?=
 =?UTF-8?q?=E9=92=AE=E5=92=8C=E4=BC=98=E5=8C=96=E7=94=A8=E6=88=B7=E4=BD=93?=
 =?UTF-8?q?=E9=AA=8C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 在对话框图片上添加'尺寸调整'按钮，点击后直接打开图片编辑器并进入尺寸调整模式
- 为确认调整按钮添加处理中状态，显示旋转加载图标和'处理中...'文字
- 处理期间禁用按钮，防止重复点击
- 改善用户交互体验，让用户清楚知道系统正在处理
---
 components/image-annotator.tsx | 12 ++++++++++--
 components/image-preview.tsx   | 33 ++++++++++++++++++++++++++++++++-
 2 files changed, 42 insertions(+), 3 deletions(-)

diff --git a/components/image-annotator.tsx b/components/image-annotator.tsx
index 7c4507377..7c6813296 100644
--- a/components/image-annotator.tsx
+++ b/components/image-annotator.tsx
@@ -27,6 +27,7 @@ interface ImageAnnotatorProps {
   imageUrl: string;
   onConfirm: (annotatedImageUrl: string) => void;
   onCancel: () => void;
+  initialResizeMode?: boolean; // 是否直接进入尺寸调整模式
 }
 
 const COLORS = [
@@ -43,7 +44,7 @@ const COLORS = [
 
 const LINE_WIDTHS = [2, 4, 6, 8];
 
-export function ImageAnnotator({ imageUrl, onConfirm, onCancel }: ImageAnnotatorProps) {
+export function ImageAnnotator({ imageUrl, onConfirm, onCancel, initialResizeMode = false }: ImageAnnotatorProps) {
   const canvasRef = useRef<HTMLCanvasElement>(null);
   const containerRef = useRef<HTMLDivElement>(null);
   const [ctx, setCtx] = useState<CanvasRenderingContext2D | null>(null);
@@ -158,12 +159,19 @@ export function ImageAnnotator({ imageUrl, onConfirm, onCancel }: ImageAnnotator
     img.onload = () => {
       setImage(img);
       setIsLoading(false);
+      // 如果指定了初始进入尺寸调整模式，自动进入
+      if (initialResizeMode && img) {
+        setIsResizeMode(true);
+        setResizeCanvasWidth(img.width);
+        setResizeCanvasHeight(img.height);
+        setSelectedAspectRatio(null);
+      }
     };
     img.onerror = () => {
       setIsLoading(false);
     };
     img.src = imageUrl;
-  }, [imageUrl]);
+  }, [imageUrl, initialResizeMode]);
 
   // 初始化 canvas - 适配弹窗大小，固定编辑器大小，图片缩小显示
   useEffect(() => {
diff --git a/components/image-preview.tsx b/components/image-preview.tsx
index 3e2ac7a2d..84df4f442 100644
--- a/components/image-preview.tsx
+++ b/components/image-preview.tsx
@@ -1,7 +1,7 @@
 "use client";
 
 import React, { useState } from "react";
-import { X, Download, Edit, Target, Paintbrush, Sparkles, Scissors, Expand } from "lucide-react";
+import { X, Download, Edit, Target, Paintbrush, Sparkles, Scissors, Expand, Maximize2 } from "lucide-react";
 import { toast } from "sonner";
 import { ImageAnnotator } from "./image-annotator";
 
@@ -40,6 +40,7 @@ export function ImagePreview({
   const [isAnnotationMode, setIsAnnotationMode] = useState(false);
   const [isDetecting, setIsDetecting] = useState(false);
   const [showAnnotator, setShowAnnotator] = useState(false);
+  const [showResizeEditor, setShowResizeEditor] = useState(false);
 
   // 解析 alt 文本，提取原图 URL 和宽度
   // 格式优先级：
@@ -284,6 +285,19 @@ export function ImagePreview({
                 <span className="text-xs font-medium">图像拓展</span>
               </button>
             )}
+            <button
+              className="flex items-center gap-1.5 rounded-full bg-black/70 hover:bg-black/80 px-2.5 py-1.5 text-white transition-colors shadow-lg"
+              onClick={(e) => {
+                e.stopPropagation();
+                setShowResizeEditor(true);
+              }}
+              type="button"
+              aria-label="尺寸调整"
+              title="尺寸调整"
+            >
+              <Maximize2 size={14} />
+              <span className="text-xs font-medium">尺寸调整</span>
+            </button>
           </div>
         )}
         
@@ -498,6 +512,23 @@ export function ImagePreview({
           onCancel={() => setShowAnnotator(false)}
         />
       )}
+
+      {/* 尺寸调整编辑器 */}
+      {showResizeEditor && (
+        <ImageAnnotator
+          imageUrl={original}
+          initialResizeMode={true}
+          onConfirm={(resizedImageUrl) => {
+            // 尺寸调整完成后，将图片添加到聊天
+            if (onDrawingComplete) {
+              onDrawingComplete(resizedImageUrl);
+              toast.success("尺寸调整图片已添加到聊天");
+            }
+            setShowResizeEditor(false);
+          }}
+          onCancel={() => setShowResizeEditor(false)}
+        />
+      )}
     </>
   );
 }