添加对话框图片尺寸调整按钮和优化用户体验

- 在对话框图片上添加'尺寸调整'按钮，点击后直接打开图片编辑器并进入尺寸调整模式
- 为确认调整按钮添加处理中状态，显示旋转加载图标和'处理中...'文字
- 处理期间禁用按钮，防止重复点击
- 改善用户交互体验，让用户清楚知道系统正在处理

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(() => {

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)}
+        />
+      )}
     </>
   );
 }