diff --git a/components/image-annotator.tsx b/components/image-annotator.tsx
index cfc704be2..cb2d50eaa 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 } from "lucide-react";
+import { X, Pencil, Circle, ArrowRight, Type, Check, Undo, Trash2, Scissors, Sparkles, Download, Expand, Move, Maximize2, ZoomIn, ZoomOut } from "lucide-react";
import { Button } from "./ui/button";
import { Input } from "./ui/input";
import { toast } from "sonner";
@@ -539,6 +539,18 @@ export function ImageAnnotator({ imageUrl, onConfirm, onCancel }: ImageAnnotator
setDragStart(null);
};
+ // 尺寸调整:放大图片
+ const handleResizeZoomIn = () => {
+ if (!isResizeMode) return;
+ setResizeImageScale((prev) => Math.min(prev * 1.2, 5)); // 最大5倍
+ };
+
+ // 尺寸调整:缩小图片
+ const handleResizeZoomOut = () => {
+ if (!isResizeMode) return;
+ setResizeImageScale((prev) => Math.max(prev / 1.2, 0.1)); // 最小0.1倍
+ };
+
// 尺寸调整:处理图片缩放(鼠标滚轮)
const handleResizeImageWheel = (e: React.WheelEvent) => {
if (!isResizeMode || !image) return;
@@ -883,18 +895,12 @@ export function ImageAnnotator({ imageUrl, onConfirm, onCancel }: ImageAnnotator
// 弹窗内容
const modalContent = (
- {/* 弹窗容器 - 使用与preview-attachment相同的居中方式 */}
+ {/* 弹窗容器 - 全屏显示 */}
e.stopPropagation()}
>
{/* 顶部标题栏 */}
@@ -960,73 +966,163 @@ export function ImageAnnotator({ imageUrl, onConfirm, onCancel }: ImageAnnotator
- {/* 工具选择栏 */}
-
- {/* 工具按钮 */}
-
-
-
-
-
-
-
- {/* 颜色选择 */}
-
- {COLORS.map((c) => (
-
+ ) : (
+ /* 非尺寸调整模式下显示图片标注工具栏 */
+
+ {/* 工具按钮 */}
+
+
setTool("pen")}
+ title="画笔"
+ >
+
+
+
setTool("arrow")}
+ title="箭头"
+ >
+
+
+
setTool("circle")}
+ title="圆圈"
+ >
+
+
+
setTool("text")}
+ title="文字"
+ >
+
+
+
+
+ {/* 颜色选择 */}
+
+ {COLORS.map((c) => (
+ setColor(c)}
+ title={c}
+ />
+ ))}
+
+
+ {/* 线宽选择 */}
+
+ {LINE_WIDTHS.map((w) => (
+
setLineWidth(w)}
+ title={`线宽 ${w}px`}
+ >
+
+
+ ))}
+
+
+ )}
{/* 画布区域 - 并排显示原图和处理后的图片 */}
@@ -1050,101 +1146,50 @@ export function ImageAnnotator({ imageUrl, onConfirm, onCancel }: ImageAnnotator
正在加载图片...
) : isResizeMode ? (
- /* 尺寸调整模式 */
-
- {/* 尺寸调整控制面板 */}
-
-
-
- setResizeCanvasWidth(Number.parseInt(e.target.value) || 1)}
- className="w-24 h-8"
- min={1}
- max={10000}
- />
- px
-
-
-
- setResizeCanvasHeight(Number.parseInt(e.target.value) || 1)}
- className="w-24 h-8"
- min={1}
- max={10000}
- />
- px
-
-
-
- setResizeBackgroundColor(e.target.value)}
- disabled={resizeBackgroundTransparent}
- className="w-12 h-8 rounded border cursor-pointer disabled:opacity-50"
- />
-
-
-