From d146fa198902a75fcac692466d5bbc599fc932a2 Mon Sep 17 00:00:00 2001
From: Your Name <your.email@example.com>
Date: Sun, 22 Feb 2026 15:27:51 +0800
Subject: [PATCH] chore(ui): sync manual updates for image editor and canvas
 image node

---
 components/canvas/nodes/ImageNode.tsx |    4 +
 components/image-annotator.tsx        | 1222 +++++++++++++------------
 2 files changed, 636 insertions(+), 590 deletions(-)

diff --git a/components/canvas/nodes/ImageNode.tsx b/components/canvas/nodes/ImageNode.tsx
index 4e507fe4e..94056d75b 100644
--- a/components/canvas/nodes/ImageNode.tsx
+++ b/components/canvas/nodes/ImageNode.tsx
@@ -2022,6 +2022,8 @@ export function ImageNode({ node, isSelected }: ImageNodeProps) {
           imageUrl={data.src}
           onConfirm={handleAnnotateComplete}
           onCancel={() => setAnnotatorOpen(false)}
+          open={annotatorOpen}
+          onOpenChange={setAnnotatorOpen}
         />
       )}
 
@@ -2032,6 +2034,8 @@ export function ImageNode({ node, isSelected }: ImageNodeProps) {
           confirmButtonText="发送到对话"
           onConfirm={handleResizeEditorComplete}
           onCancel={() => setResizeAnnotatorOpen(false)}
+          open={resizeAnnotatorOpen}
+          onOpenChange={setResizeAnnotatorOpen}
         />
       )}
       
diff --git a/components/image-annotator.tsx b/components/image-annotator.tsx
index 15a146264..1f56181b5 100644
--- a/components/image-annotator.tsx
+++ b/components/image-annotator.tsx
@@ -4,12 +4,27 @@ import React, { useRef, useState, useEffect, useCallback } from "react";
 import { createPortal } from "react-dom";
 import Link from "next/link";
 import { useTheme } from "next-themes";
-import { X, Pencil, Circle, ArrowRight, Type, Check, Undo, Trash2, Scissors, Sparkles, Download, Expand, Move, Maximize2, ZoomIn, ZoomOut, Loader2, Move3D, Layers, Upload as UploadIcon, Image as ImageIcon, Droplet } from "lucide-react";
+import { X, Pencil, Circle, ArrowRight, Type, Check, Undo, Trash2, Scissors, Sparkles, Download, Expand, Move, Maximize2, ZoomIn, ZoomOut, Loader2, Move3D, Layers, Upload as UploadIcon, Image as ImageIcon, Droplet, Redo, MousePointer2 } from "lucide-react";
 import { Button } from "./ui/button";
 import { Input } from "./ui/input";
+import { Slider } from "./ui/slider";
 import { toast } from "sonner";
 import { AngleEditDialog } from "./angle-edit-dialog";
 import { SceneFusionView } from "./scene-fusion-view";
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  DialogDescription,
+} from "@/components/ui/dialog";
+import { cn } from "@/lib/utils";
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+} from "@/components/ui/tooltip";
 
 type Tool = "pen" | "arrow" | "circle" | "text";
 
@@ -34,6 +49,8 @@ interface ImageAnnotatorProps {
   onHomeClick?: () => void;
   initialResizeMode?: boolean; // 是否直接进入尺寸调整模式
   confirmButtonText?: string;
+  open?: boolean; // 兼容 Dialog 模式
+  onOpenChange?: (open: boolean) => void;
 }
 
 const COLORS = [
@@ -57,6 +74,8 @@ export function ImageAnnotator({
   onHomeClick,
   initialResizeMode = false,
   confirmButtonText = "发送到新对话",
+  open = true,
+  onOpenChange,
 }: ImageAnnotatorProps) {
   const canvasRef = useRef<HTMLCanvasElement>(null);
   const containerRef = useRef<HTMLDivElement>(null);
@@ -87,6 +106,14 @@ export function ImageAnnotator({
   
   const fileInputRef = useRef<HTMLInputElement>(null);
 
+  // Handle open change
+  const handleOpenChange = (newOpen: boolean) => {
+    onOpenChange?.(newOpen);
+    if (!newOpen) {
+      onCancel();
+    }
+  };
+
   // 上传图片到服务器获取 URL 的辅助函数
   const uploadImageFile = async (file: File): Promise<string> => {
     const formData = new FormData();
@@ -1226,11 +1253,6 @@ export function ImageAnnotator({
       // 更完善的缩略图URL转换逻辑
       if (downloadUrl.includes("-thumb") || downloadUrl.includes("/thumb/") || downloadUrl.includes("thumbnail")) {
         // 如果URL包含thumb标识，尝试转换为原图URL
-        // 处理各种可能的格式：
-        // - rmbg-thumb-xxx.png -> rmbg-orig-xxx.png
-        // - enhance-thumb-xxx.jpg -> enhance-orig-xxx.jpg
-        // - extend-thumb-xxx.jpg -> extend-orig-xxx.jpg
-        // - xxx/thumb/xxx -> xxx/orig/xxx
         downloadUrl = downloadUrl
           .replace(/-thumb-/g, "-orig-")
           .replace(/-thumb\./g, "-orig.")
@@ -1377,592 +1399,612 @@ export function ImageAnnotator({
     }
   };
 
-  // 弹窗内容
-  const modalContent = (
-    <div 
-      className="fixed inset-0 z-[9999] flex items-center justify-center bg-black/55 backdrop-blur-sm"
-      onClick={onCancel}
-    >
-      {/* 弹窗容器 - 全屏显示 */}
-      <div 
-        className="flex h-full w-full flex-col overflow-hidden bg-background"
-        onClick={(e) => e.stopPropagation()}
-      >
-        {/* 顶部标题栏 - 始终深色模式，高度与首页导航栏一致 */}
-        <div className="flex items-center justify-between border-b border-zinc-700 px-4 h-12 bg-zinc-900 text-white">
-          <Link 
-            href="/" 
-            className="flex items-center gap-2 hover:opacity-80 transition-opacity"
-            onClick={(e) => {
-              e.stopPropagation();
-              if (onHomeClick) {
-                e.preventDefault();
-                onHomeClick();
-              }
-            }}
-          >
-            {siteLogoDark || siteLogo ? (
-              <>
-                <img 
-                  src={siteLogoDark || siteLogo || undefined} 
-                  alt={siteName}
-                  className="h-6 w-auto"
-                />
-                <span className="text-base font-medium text-white">{siteName}</span>
-              </>
-            ) : (
-              <span className="text-base font-medium text-white">{siteName}</span>
-            )}
-          </Link>
-          <div className="flex items-center gap-2">
-            <Button 
-              variant="ghost" 
-              size="sm" 
-              onClick={handleRemoveBackground} 
-              disabled={isRemovingBg || isEnhancing || isExtending || isResizeMode || showAngleEditDialog || showSceneFusion || isRemovingWatermark || !image}
-              title="移除背景（抠图）"
-              className="text-zinc-300 hover:text-white hover:bg-zinc-800"
-            >
-              <Scissors className={`mr-1 h-4 w-4 ${isRemovingBg ? "animate-spin" : ""}`} />
-              {isRemovingBg ? "处理中..." : "抠图"}
-            </Button>
-            <Button 
-              variant="ghost" 
-              size="sm" 
-              onClick={handleEnhance} 
-              disabled={isEnhancing || isRemovingBg || isExtending || isResizeMode || showAngleEditDialog || showSceneFusion || isRemovingWatermark || !image}
-              title="图片变清晰"
-              className="text-zinc-300 hover:text-white hover:bg-zinc-800"
-            >
-              <Sparkles className={`mr-1 h-4 w-4 ${isEnhancing ? "animate-spin" : ""}`} />
-              {isEnhancing ? "处理中..." : "变清晰"}
-            </Button>
-            <Button 
-              variant="ghost" 
-              size="sm" 
-              onClick={handleExtend} 
-              disabled={isExtending || isRemovingBg || isEnhancing || isResizeMode || showAngleEditDialog || showSceneFusion || isRemovingWatermark || !image}
-              title="图像拓展"
-              className="text-zinc-300 hover:text-white hover:bg-zinc-800"
-            >
-              <Expand className={`mr-1 h-4 w-4 ${isExtending ? "animate-spin" : ""}`} />
-              {isExtending ? "处理中..." : "图像拓展"}
-            </Button>
-            <Button 
-              variant="ghost" 
-              size="sm" 
-              onClick={handleResize} 
-              disabled={isResizeMode || isRemovingBg || isEnhancing || isExtending || showAngleEditDialog || showSceneFusion || isRemovingWatermark || !image}
-              className="text-zinc-300 hover:text-white hover:bg-zinc-800"
-              title="尺寸调整"
-            >
-              <Maximize2 className="mr-1 h-4 w-4" />
-              尺寸调整
-            </Button>
-            <Button 
-              variant="ghost" 
-              size="sm" 
-              onClick={handleAngleEdit} 
-              disabled={showAngleEditDialog || isRemovingBg || isEnhancing || isExtending || isResizeMode || showSceneFusion || isRemovingWatermark || !image}
-              title="角度调整"
-              className="text-zinc-300 hover:text-white hover:bg-zinc-800"
-            >
-              <Move3D className="mr-1 h-4 w-4" />
-              角度调整
-            </Button>
-            <Button 
-              variant="ghost" 
-              size="sm" 
-              onClick={handleWatermarkRemove} 
-              disabled={isRemovingWatermark || isRemovingBg || isEnhancing || isExtending || isResizeMode || showAngleEditDialog || showSceneFusion || !image}
-              title="去水印"
-              className="text-zinc-300 hover:text-white hover:bg-zinc-800"
-            >
-              <Droplet className={`mr-1 h-4 w-4 ${isRemovingWatermark ? "animate-spin" : ""}`} />
-              {isRemovingWatermark ? "处理中..." : "去水印"}
-            </Button>
-            <Button 
-              variant={showSceneFusion ? "secondary" : "ghost"}
-              size="sm" 
-              onClick={() => {
-                setShowSceneFusion(!showSceneFusion);
-                // 进入详情替换时，退出其他模式
-                if (!showSceneFusion) {
-                  setIsResizeMode(false);
-                  setShowAngleEditDialog(false);
-                }
-              }} 
-              disabled={showAngleEditDialog || isRemovingBg || isEnhancing || isExtending || isResizeMode}
-              title="详情替换"
-              className={showSceneFusion ? "bg-primary text-white" : "text-zinc-300 hover:text-white hover:bg-zinc-800"}
-            >
-              <Layers className="mr-1 h-4 w-4" />
-              详情替换
-            </Button>
-            {!showSceneFusion && (
-              <>
-                <Button variant="ghost" size="sm" onClick={handleUndo} disabled={actions.length === 0} className="text-zinc-300 hover:text-white hover:bg-zinc-800">
-                  <Undo className="mr-1 h-4 w-4" />
-                  撤销
-                </Button>
-                <Button variant="ghost" size="sm" onClick={handleClear} disabled={actions.length === 0} className="text-zinc-300 hover:text-white hover:bg-zinc-800">
-                  <Trash2 className="mr-1 h-4 w-4" />
-                  清空
-                </Button>
-              </>
-            )}
-            <Button variant="ghost" size="sm" onClick={onCancel} className="text-zinc-300 hover:text-white hover:bg-zinc-800">
-              <X className="mr-1 h-4 w-4" />
-              取消
-            </Button>
-            {!showSceneFusion && (
-              <Button size="sm" onClick={handleConfirm} className="bg-primary text-primary-foreground hover:bg-primary/90">
-                <Check className="mr-1 h-4 w-4" />
-                {confirmButtonText}
-              </Button>
-            )}
-          </div>
-        </div>
-
-        {showSceneFusion ? (
-          <div className="flex-1 overflow-hidden relative">
-            <SceneFusionView
-              onBack={() => setShowSceneFusion(false)}
-              // 直接复用当前编辑器中的图片 URL，进入「详情替换」时自动带入产品图
-              initialProductImage={processedImageUrl ?? originalImageUrl ?? null}
-            />
-          </div>
-        ) : (
-          <>
-            {/* 工具选择栏 / 尺寸调整工具栏 */}
-            {isResizeMode ? (
-              /* 尺寸调整模式下显示尺寸调整工具栏 */
-              <div className="flex flex-col gap-3 border-b px-4 py-3 bg-muted/30">
-            {/* 比例选择和尺寸输入在同一行 */}
-            <div className="flex items-center gap-4 flex-wrap">
-              {/* 比例选择 */}
-              <div className="flex items-center gap-2">
-                <label className="text-sm font-medium whitespace-nowrap">选择比例:</label>
-                <div className="flex items-center gap-2 overflow-x-auto pb-1">
-                  {aspectRatios.map((ratio) => (
-                    <button
-                      key={ratio.value}
-                      type="button"
-                      onClick={() => handleAspectRatioSelect(ratio.value === selectedAspectRatio ? null : ratio.value)}
-                      className={`flex flex-col items-center justify-center gap-1 px-3 py-2 rounded-lg border transition-colors whitespace-nowrap ${
-                        selectedAspectRatio === ratio.value
-                          ? "bg-primary text-primary-foreground border-primary"
-                          : "bg-background hover:bg-muted border-border"
-                      }`}
-                      title={ratio.label}
-                    >
-                      <div
-                        className={`border-2 rounded flex items-center justify-center ${
-                          selectedAspectRatio === ratio.value ? "border-primary-foreground" : "border-foreground"
-                        }`}
-                        style={{
-                          width: ratio.value === "smart" ? "16px" : ratio.ratio && ratio.ratio > 1 ? "24px" : ratio.ratio && ratio.ratio < 1 ? "12px" : "16px",
-                          height: ratio.value === "smart" ? "16px" : ratio.ratio && ratio.ratio > 1 ? "12px" : ratio.ratio && ratio.ratio < 1 ? "24px" : "16px",
-                        }}
-                      >
-                        {ratio.value === "smart" && (
-                          <Maximize2 className="h-3 w-3" />
-                        )}
-                      </div>
-                      <span className="text-xs">{ratio.label}</span>
-                    </button>
-                  ))}
-                </div>
-              </div>
-              
-              {/* 尺寸输入 */}
-              <div className="flex items-center gap-4">
-                <div className="flex items-center gap-2">
-                  <label className="text-sm font-medium">宽度:</label>
-                  <Input
-                    type="number"
-                    value={resizeCanvasWidth}
-                    onChange={(e) => handleWidthChange(Number.parseInt(e.target.value) || 1)}
-                    className="w-24 h-8"
-                    min={1}
-                    max={10000}
-                  />
-                  <span className="text-xs text-muted-foreground">px</span>
-                </div>
-                <div className="flex items-center gap-2">
-                  <label className="text-sm font-medium">高度:</label>
-                  <Input
-                    type="number"
-                    value={resizeCanvasHeight}
-                    onChange={(e) => handleHeightChange(Number.parseInt(e.target.value) || 1)}
-                    className="w-24 h-8"
-                    min={1}
-                    max={10000}
-                  />
-                  <span className="text-xs text-muted-foreground">px</span>
-                </div>
-                <div className="flex items-center gap-2">
-                  <label className="text-sm font-medium">背景:</label>
-                  <input
-                    type="color"
-                    value={resizeBackgroundColor}
-                    onChange={(e) => setResizeBackgroundColor(e.target.value)}
-                    disabled={resizeBackgroundTransparent}
-                    className="w-12 h-8 rounded border cursor-pointer disabled:opacity-50"
-                  />
-                </div>
-                <div className="flex items-center gap-2">
-                  <label className="text-sm font-medium flex items-center gap-1">
-                    <input
-                      type="checkbox"
-                      checked={resizeBackgroundTransparent}
-                      onChange={(e) => setResizeBackgroundTransparent(e.target.checked)}
-                      className="w-4 h-4"
-                    />
-                    透明
-                  </label>
-                </div>
-              </div>
-              
-              {/* 操作按钮 */}
-              <div className="flex items-center gap-2 ml-auto">
-                <Button
-                  variant="outline"
-                  size="sm"
-                  onClick={handleResizeZoomOut}
-                  title="缩小"
-                  className="h-8 w-8 p-0"
-                >
-                  <ZoomOut className="h-4 w-4" />
-                </Button>
-                <Button
-                  variant="outline"
-                  size="sm"
-                  onClick={handleResizeZoomIn}
-                  title="放大"
-                  className="h-8 w-8 p-0"
-                >
-                  <ZoomIn className="h-4 w-4" />
-                </Button>
-                <Button
-                  variant="ghost"
-                  size="sm"
-                  onClick={() => {
-                    setIsResizeMode(false);
-                    setResizeImageScale(1);
-                    setResizeImagePosition({ x: 0, y: 0 });
-                  }}
-                >
-                  取消
-                </Button>
-                <Button
-                  size="sm"
-                  onClick={handleResizeConfirm}
-                  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>
-          </div>
-        ) : (
-          /* 非尺寸调整模式下显示图片标注工具栏 */
-          <div className="flex flex-wrap items-center justify-center gap-3 border-b px-4 py-2">
-            {/* 工具按钮 */}
-            <div className="flex items-center gap-1 rounded-lg bg-muted p-1">
-              <button
-                type="button"
-                className={`rounded-md p-1.5 transition-colors ${tool === "pen" ? "bg-primary text-primary-foreground" : "text-muted-foreground hover:bg-muted-foreground/10 hover:text-foreground"}`}
-                onClick={() => setTool("pen")}
-                title="画笔"
-              >
-                <Pencil className="h-4 w-4" />
-              </button>
-              <button
-                type="button"
-                className={`rounded-md p-1.5 transition-colors ${tool === "arrow" ? "bg-primary text-primary-foreground" : "text-muted-foreground hover:bg-muted-foreground/10 hover:text-foreground"}`}
-                onClick={() => setTool("arrow")}
-                title="箭头"
-              >
-                <ArrowRight className="h-4 w-4" />
-              </button>
-              <button
-                type="button"
-                className={`rounded-md p-1.5 transition-colors ${tool === "circle" ? "bg-primary text-primary-foreground" : "text-muted-foreground hover:bg-muted-foreground/10 hover:text-foreground"}`}
-                onClick={() => setTool("circle")}
-                title="圆圈"
-              >
-                <Circle className="h-4 w-4" />
-              </button>
-              <button
-                type="button"
-                className={`rounded-md p-1.5 transition-colors ${tool === "text" ? "bg-primary text-primary-foreground" : "text-muted-foreground hover:bg-muted-foreground/10 hover:text-foreground"}`}
-                onClick={() => setTool("text")}
-                title="文字"
-              >
-                <Type className="h-4 w-4" />
-              </button>
-            </div>
-
-            {/* 颜色选择 */}
-            <div className="flex items-center gap-1 rounded-lg bg-muted p-1">
-              {COLORS.map((c) => (
-                <button
-                  key={c}
-                  type="button"
-                  className={`h-6 w-6 rounded-full border-2 transition-transform ${color === c ? "scale-110 border-primary" : "border-transparent hover:scale-105"}`}
-                  style={{ backgroundColor: c }}
-                  onClick={() => setColor(c)}
-                  title={c}
-                />
-              ))}
-            </div>
-
-            {/* 线宽选择 */}
-            <div className="flex items-center gap-1 rounded-lg bg-muted p-1">
-              {LINE_WIDTHS.map((w) => (
-                <button
-                  key={w}
-                  type="button"
-                  className={`flex h-7 w-7 items-center justify-center rounded-md transition-colors ${lineWidth === w ? "bg-primary/20" : "hover:bg-muted-foreground/10"}`}
-                  onClick={() => setLineWidth(w)}
-                  title={`线宽 ${w}px`}
-                >
-                  <div className="rounded-full bg-foreground" style={{ width: w + 2, height: w + 2 }} />
-                </button>
-              ))}
-            </div>
-          </div>
-        )}
-
-        {/* 画布区域 - 并排显示原图和处理后的图片 */}
-        <div ref={containerRef} className="flex flex-1 items-center justify-center gap-2 overflow-hidden bg-muted/30 p-2">
-          {isLoading ? (
-            /* 加载动画 */
-            <div className="flex flex-col items-center justify-center gap-3">
-              <div className="flex items-center gap-1">
-                <span 
-                  className="h-2 w-2 rounded-full bg-primary animate-bounce"
-                  style={{ animationDelay: "0ms" }}
-                />
-                <span 
-                  className="h-2 w-2 rounded-full bg-primary animate-bounce"
-                  style={{ animationDelay: "150ms" }}
-                />
-                <span 
-                  className="h-2 w-2 rounded-full bg-primary animate-bounce"
-                  style={{ animationDelay: "300ms" }}
-                />
-              </div>
-              <span className="text-sm text-muted-foreground">正在加载图片...</span>
-            </div>
-          ) : !image ? (
-            /* 没有图片时显示上传区域 */
-            <div className="flex flex-col items-center justify-center p-8">
-              <div 
-                className="w-full max-w-lg border-2 border-dashed border-muted-foreground/25 rounded-xl p-12 text-center cursor-pointer hover:border-primary/50 hover:bg-muted/20 transition-all group"
-                onClick={() => fileInputRef.current?.click()}
-                onDrop={handleDrop}
-                onDragOver={handleDragOver}
-              >
-                <div className="bg-background rounded-full p-4 w-20 h-20 mx-auto mb-6 shadow-sm group-hover:scale-105 transition-transform flex items-center justify-center">
-                  <UploadIcon className="w-10 h-10 text-muted-foreground group-hover:text-primary transition-colors" />
-                </div>
-                <h3 className="text-xl font-medium mb-2">上传图片以开始编辑</h3>
-                <p className="text-muted-foreground mb-2">拖拽图片到此处、点击选择或 Ctrl+V 粘贴</p>
-                <p className="text-muted-foreground/60 text-sm mb-6">支持 JPG, PNG, WebP 格式，最大 50MB</p>
-                <Button variant="default">选择图片</Button>
-                <input 
-                  type="file" 
-                  ref={fileInputRef}
-                  className="hidden" 
-                  accept="image/png,image/jpeg,image/webp"
-                  onChange={handleImageUpload}
-                />
-              </div>
-            </div>
-          ) : isResizeMode ? (
-            /* 尺寸调整模式 - 左右对比布局 */
-            <>
-              {/* 左侧：原图 */}
-              <div className="flex flex-col border-2 border-dashed border-border rounded-lg bg-muted/20 p-2 overflow-hidden" style={{ width: "714px", height: "570px" }}>
-                <div className="mb-1 text-xs font-medium text-muted-foreground text-center">原图</div>
-                <div className="flex-1 flex items-center justify-center overflow-auto min-h-0" style={{ height: "calc(570px - 2rem)" }}>
-                  {image && (
-                    <img
-                      src={image.src}
-                      alt="原图"
-                      className="rounded-lg shadow-lg"
-                      style={{ 
-                        objectFit: "contain",
-                        maxHeight: "calc(570px - 2rem)",
-                        maxWidth: "100%",
-                        width: "auto",
-                        height: "auto"
-                      }}
-                    />
-                  )}
-                </div>
-              </div>
-              
-              {/* 右侧：尺寸调整预览画布 */}
-              <div className="flex flex-col border-2 border-dashed border-primary/50 rounded-lg bg-muted/30 p-2 overflow-hidden" style={{ width: "714px", height: "570px" }}>
-                <div className="mb-1 flex items-center justify-between">
-                  <span className="text-xs font-medium text-muted-foreground">调整尺寸</span>
-                  {(processedImageUrl || processedImageBase64) && processType === "resize" && (
-                    <Button
-                      variant="default"
-                      size="sm"
-                      onClick={handleDownloadProcessed}
-                      className="h-7 px-3 bg-primary text-primary-foreground hover:bg-primary/90 shadow-md flex items-center gap-1.5 font-medium"
-                      title="下载调整后的图片"
-                    >
-                      <Download className="h-3.5 w-3.5" />
-                      <span className="text-xs">下载</span>
-                    </Button>
-                  )}
-                </div>
-                <div 
-                  ref={resizeContainerRef}
-                  className="flex items-center justify-center overflow-auto"
-                  style={{ width: "100%", height: "calc(570px - 2rem)" }}
-                  onWheel={handleResizeImageWheel}
-                >
-                  <div className="relative inline-block">
-                    <canvas
-                      ref={resizeCanvasRef}
-                      className="cursor-move rounded-lg shadow-lg"
-                      onMouseDown={handleResizeImageDragStart}
-                      onMouseMove={handleResizeImageDrag}
-                      onMouseUp={handleResizeImageDragEnd}
-                      onMouseLeave={handleResizeImageDragEnd}
-                      onTouchStart={handleResizeImageDragStart}
-                      onTouchMove={handleResizeImageDrag}
-                      onTouchEnd={handleResizeImageDragEnd}
-                    />
-                    <div className="absolute top-2 left-2 bg-black/70 text-white text-xs px-2 py-1 rounded">
-                      画布: {resizeCanvasWidth} x {resizeCanvasHeight} | 缩放: {(resizeImageScale * 100).toFixed(0)}% | 拖拽移动图片，滚轮缩放
-                    </div>
-                  </div>
-                </div>
-              </div>
-            </>
-          ) : (
-            <>
-              {/* 原图画布 */}
-              <div className="flex flex-1 flex-col items-center justify-center">
-                <div className="mb-2 text-xs text-muted-foreground">原图</div>
-                <canvas
-                  ref={canvasRef}
-                  className="cursor-crosshair rounded-lg shadow-lg max-w-full"
-                  onMouseDown={handleStart}
-                  onMouseMove={handleMove}
-                  onMouseUp={handleEnd}
-                  onMouseLeave={handleEnd}
-                  onTouchStart={handleStart}
-                  onTouchMove={handleMove}
-                  onTouchEnd={handleEnd}
-                />
-              </div>
-              
-              {/* 处理后的图片展示区域 */}
-              {processedImageBase64 && (
-                <div className="flex flex-1 flex-col items-center justify-center">
-                  <div className="mb-2 flex items-center justify-between gap-2 w-full">
-                        <span className="text-xs text-muted-foreground">
-                          {processType === "rmbg" ? "抠图结果" : processType === "enhance" ? "清晰结果" : processType === "resize" ? "尺寸调整结果" : processType === "watermark" ? "去水印结果" : "拓展结果"}
-                        </span>
-                    <Button
-                      variant="default"
-                      size="sm"
-                      onClick={handleDownloadProcessed}
-                      className="h-8 px-3 bg-primary text-primary-foreground hover:bg-primary/90 shadow-md flex items-center gap-1.5 font-medium"
-                      title="下载处理后的图片"
-                    >
-                      <Download className="h-4 w-4" />
-                      <span className="text-xs">下载</span>
-                    </Button>
-                  </div>
-                  <div className="relative rounded-lg border-2 border-primary/50 bg-background p-2 shadow-lg">
-                    {processedImageUrl ? (
-                      <img
-                        src={processedImageUrl}
-                        alt={processType === "rmbg" ? "抠图结果" : processType === "enhance" ? "清晰结果" : processType === "resize" ? "尺寸调整结果" : processType === "watermark" ? "去水印结果" : "拓展结果"}
-                        className="max-h-[350px] max-w-full rounded-lg"
-                        style={{ maxWidth: canvasRef.current?.width || "400px" }}
-                      />
-                    ) : processedImageBase64 ? (
-                      <img
-                        src={`data:image/${processType === "rmbg" || processType === "resize" ? "png" : "jpeg"};base64,${processedImageBase64}`}
-                        alt={processType === "rmbg" ? "抠图结果" : processType === "enhance" ? "清晰结果" : processType === "resize" ? "尺寸调整结果" : processType === "watermark" ? "去水印结果" : "拓展结果"}
-                        className="max-h-[350px] max-w-full rounded-lg"
-                        style={{ maxWidth: canvasRef.current?.width || "400px" }}
-                      />
-                    ) : null}
-                  </div>
-                </div>
-              )}
-            </>
-          )}
-        </div>
-          </>
-        )}
-      </div>
-
-      {/* 文字输入弹窗 */}
-      {textPosition && (
-        <div className="fixed inset-0 z-[10000] flex items-center justify-center bg-black/50 backdrop-blur-sm" onClick={() => setTextPosition(null)}>
-          <div className="rounded-lg border bg-background p-4 shadow-xl" onClick={(e) => e.stopPropagation()}>
-            <div className="mb-3 text-sm font-medium">输入标注文字</div>
-            <input
-              type="text"
-              value={textInput}
-              onChange={(e) => setTextInput(e.target.value)}
-              onKeyDown={(e) => {
-                if (e.key === "Enter") handleAddText();
-              }}
-              className="mb-3 w-64 rounded-md border bg-muted px-3 py-2 text-foreground outline-none focus:border-primary"
-              placeholder="输入文字..."
-              autoFocus
-            />
-            <div className="flex justify-end gap-2">
-              <Button variant="ghost" size="sm" onClick={() => setTextPosition(null)}>
-                取消
-              </Button>
-              <Button size="sm" onClick={handleAddText} disabled={!textInput.trim()}>
-                添加
-              </Button>
-            </div>
-          </div>
-        </div>
-      )}
-
-      {/* 角度调整对话框 - 包裹在阻止事件冒泡的 div 中 */}
-      {showAngleEditDialog && originalImageUrl && (
-        <div onClick={(e) => e.stopPropagation()} onMouseDown={(e) => e.stopPropagation()}>
-          <AngleEditDialog
-            open={showAngleEditDialog}
-            onOpenChange={setShowAngleEditDialog}
-            imageUrl={originalImageUrl}
-            onComplete={handleAngleEditComplete}
-          />
-        </div>
-      )}
-    </div>
-  );
-
-  // 使用 Portal 渲染到 document.body，避免受父元素定位影响
   if (!mounted) {
     return null;
   }
 
-  return createPortal(modalContent, document.body);
+  return (
+    <Dialog open={open} onOpenChange={handleOpenChange}>
+      <DialogContent className="h-[95vh] w-[98vw] max-w-[1800px] overflow-hidden rounded-[20px] border-0 bg-background p-0 shadow-2xl sm:rounded-[20px] md:rounded-[24px]">
+        <DialogHeader className="sr-only">
+          <DialogTitle>图片编辑器</DialogTitle>
+          <DialogDescription>编辑、标注或处理图片。</DialogDescription>
+        </DialogHeader>
+
+        {/* Top Header - Minimal */}
+        <div className="absolute left-0 right-0 top-0 z-50 flex h-14 items-center justify-start px-6 bg-gradient-to-b from-black/20 to-transparent pointer-events-none">
+          <div className="pointer-events-auto flex items-center gap-3 rounded-full bg-background/95 backdrop-blur-md px-4 py-1.5 border border-border/50 shadow-sm">
+            <span className="font-semibold text-sm">Image Editor</span>
+            <div className="h-4 w-[1px] bg-border" />
+            <span className="text-xs text-muted-foreground">
+              {isResizeMode ? "调整尺寸" : "图片标注与处理"}
+            </span>
+          </div>
+        </div>
+
+        {/* Floating Toolbar - Top (Tools & Actions) */}
+        {!showSceneFusion && (
+          <div className="absolute left-1/2 top-[72px] z-20 -translate-x-1/2 pointer-events-none w-full max-w-[90vw] flex justify-center">
+            <div className="pointer-events-auto flex items-center gap-1 rounded-[30px] border border-black/10 bg-white/95 p-2 shadow-xl backdrop-blur-xl dark:bg-zinc-900/95 dark:border-white/10 overflow-x-auto max-w-full scrollbar-hide">
+              
+              {!isResizeMode && (
+                <>
+                  {/* Drawing Tools */}
+                  <TooltipProvider delayDuration={0}>
+                    <Tooltip>
+                      <TooltipTrigger asChild>
+                        <Button
+                          size="icon"
+                          variant="ghost"
+                          className={cn(
+                            "h-10 w-10 rounded-full text-zinc-600 hover:bg-zinc-100 dark:text-zinc-300 dark:hover:bg-zinc-800",
+                            tool === "pen" && "bg-black text-white hover:bg-black dark:bg-white dark:text-black dark:hover:bg-white"
+                          )}
+                          onClick={() => setTool("pen")}
+                        >
+                          <Pencil className="h-5 w-5" />
+                        </Button>
+                      </TooltipTrigger>
+                      <TooltipContent>画笔</TooltipContent>
+                    </Tooltip>
+                    
+                    <Tooltip>
+                      <TooltipTrigger asChild>
+                        <Button
+                          size="icon"
+                          variant="ghost"
+                          className={cn(
+                            "h-10 w-10 rounded-full text-zinc-600 hover:bg-zinc-100 dark:text-zinc-300 dark:hover:bg-zinc-800",
+                            tool === "arrow" && "bg-black text-white hover:bg-black dark:bg-white dark:text-black dark:hover:bg-white"
+                          )}
+                          onClick={() => setTool("arrow")}
+                        >
+                          <ArrowRight className="h-5 w-5" />
+                        </Button>
+                      </TooltipTrigger>
+                      <TooltipContent>箭头</TooltipContent>
+                    </Tooltip>
+
+                    <Tooltip>
+                      <TooltipTrigger asChild>
+                        <Button
+                          size="icon"
+                          variant="ghost"
+                          className={cn(
+                            "h-10 w-10 rounded-full text-zinc-600 hover:bg-zinc-100 dark:text-zinc-300 dark:hover:bg-zinc-800",
+                            tool === "circle" && "bg-black text-white hover:bg-black dark:bg-white dark:text-black dark:hover:bg-white"
+                          )}
+                          onClick={() => setTool("circle")}
+                        >
+                          <Circle className="h-5 w-5" />
+                        </Button>
+                      </TooltipTrigger>
+                      <TooltipContent>圆圈</TooltipContent>
+                    </Tooltip>
+
+                    <Tooltip>
+                      <TooltipTrigger asChild>
+                        <Button
+                          size="icon"
+                          variant="ghost"
+                          className={cn(
+                            "h-10 w-10 rounded-full text-zinc-600 hover:bg-zinc-100 dark:text-zinc-300 dark:hover:bg-zinc-800",
+                            tool === "text" && "bg-black text-white hover:bg-black dark:bg-white dark:text-black dark:hover:bg-white"
+                          )}
+                          onClick={() => setTool("text")}
+                        >
+                          <Type className="h-5 w-5" />
+                        </Button>
+                      </TooltipTrigger>
+                      <TooltipContent>文字</TooltipContent>
+                    </Tooltip>
+                  </TooltipProvider>
+
+                  <div className="mx-1 h-7 w-px bg-black/10 dark:bg-white/10" />
+
+                  {/* Colors */}
+                  <div className="flex items-center gap-1 px-1">
+                    {COLORS.slice(0, 5).map((c) => (
+                      <button
+                        key={c}
+                        type="button"
+                        className={cn(
+                          "h-5 w-5 rounded-full border border-black/15 transition-all",
+                          color === c && "scale-110 ring-2 ring-black/25 dark:ring-white/25"
+                        )}
+                        style={{ backgroundColor: c }}
+                        onClick={() => setColor(c)}
+                        title={c}
+                      />
+                    ))}
+                    <input
+                      type="color"
+                      value={color}
+                      onChange={(event) => setColor(event.target.value)}
+                      className="h-5 w-5 cursor-pointer rounded-full border border-black/15 bg-transparent p-0"
+                      title="自定义颜色"
+                    />
+                  </div>
+
+                  <div className="mx-1 h-7 w-px bg-black/10 dark:bg-white/10" />
+
+                  {/* Line Width */}
+                  <div className="flex items-center gap-1">
+                    {LINE_WIDTHS.map((w) => (
+                      <button
+                        key={w}
+                        type="button"
+                        className={cn(
+                          "flex h-7 w-7 items-center justify-center rounded-md transition-colors hover:bg-zinc-100 dark:hover:bg-zinc-800",
+                          lineWidth === w && "bg-zinc-200 dark:bg-zinc-700"
+                        )}
+                        onClick={() => setLineWidth(w)}
+                        title={`线宽 ${w}px`}
+                      >
+                        <div className="rounded-full bg-zinc-800 dark:bg-zinc-200" style={{ width: w + 2, height: w + 2 }} />
+                      </button>
+                    ))}
+                  </div>
+
+                  <div className="mx-1 h-7 w-px bg-black/10 dark:bg-white/10" />
+                </>
+              )}
+
+              {/* AI Actions */}
+              <TooltipProvider delayDuration={0}>
+                 {!isResizeMode && (
+                  <>
+                    <Tooltip>
+                      <TooltipTrigger asChild>
+                        <Button
+                          size="icon"
+                          variant="ghost"
+                          className="h-10 w-10 rounded-full text-zinc-600 hover:bg-zinc-100 dark:text-zinc-300 dark:hover:bg-zinc-800"
+                          onClick={handleRemoveBackground}
+                          disabled={isRemovingBg}
+                        >
+                           <Scissors className={cn("h-5 w-5", isRemovingBg && "animate-spin")} />
+                        </Button>
+                      </TooltipTrigger>
+                      <TooltipContent>移除背景</TooltipContent>
+                    </Tooltip>
+
+                    <Tooltip>
+                      <TooltipTrigger asChild>
+                        <Button
+                          size="icon"
+                          variant="ghost"
+                          className="h-10 w-10 rounded-full text-zinc-600 hover:bg-zinc-100 dark:text-zinc-300 dark:hover:bg-zinc-800"
+                          onClick={handleEnhance}
+                          disabled={isEnhancing}
+                        >
+                           <Sparkles className={cn("h-5 w-5", isEnhancing && "animate-spin")} />
+                        </Button>
+                      </TooltipTrigger>
+                      <TooltipContent>变清晰</TooltipContent>
+                    </Tooltip>
+
+                    <Tooltip>
+                      <TooltipTrigger asChild>
+                        <Button
+                          size="icon"
+                          variant="ghost"
+                          className="h-10 w-10 rounded-full text-zinc-600 hover:bg-zinc-100 dark:text-zinc-300 dark:hover:bg-zinc-800"
+                          onClick={handleExtend}
+                          disabled={isExtending}
+                        >
+                           <Expand className={cn("h-5 w-5", isExtending && "animate-spin")} />
+                        </Button>
+                      </TooltipTrigger>
+                      <TooltipContent>图像拓展</TooltipContent>
+                    </Tooltip>
+
+                    <Tooltip>
+                      <TooltipTrigger asChild>
+                        <Button
+                          size="icon"
+                          variant="ghost"
+                          className="h-10 w-10 rounded-full text-zinc-600 hover:bg-zinc-100 dark:text-zinc-300 dark:hover:bg-zinc-800"
+                          onClick={handleWatermarkRemove}
+                          disabled={isRemovingWatermark}
+                        >
+                           <Droplet className={cn("h-5 w-5", isRemovingWatermark && "animate-spin")} />
+                        </Button>
+                      </TooltipTrigger>
+                      <TooltipContent>去水印</TooltipContent>
+                    </Tooltip>
+                    
+                    <div className="mx-1 h-7 w-px bg-black/10 dark:bg-white/10" />
+
+                    <Tooltip>
+                      <TooltipTrigger asChild>
+                        <Button
+                          size="icon"
+                          variant="ghost"
+                          className="h-10 w-10 rounded-full text-zinc-600 hover:bg-zinc-100 dark:text-zinc-300 dark:hover:bg-zinc-800"
+                          onClick={handleResize}
+                        >
+                           <Maximize2 className="h-5 w-5" />
+                        </Button>
+                      </TooltipTrigger>
+                      <TooltipContent>尺寸调整</TooltipContent>
+                    </Tooltip>
+
+                    <Tooltip>
+                      <TooltipTrigger asChild>
+                        <Button
+                          size="icon"
+                          variant="ghost"
+                          className="h-10 w-10 rounded-full text-zinc-600 hover:bg-zinc-100 dark:text-zinc-300 dark:hover:bg-zinc-800"
+                          onClick={handleAngleEdit}
+                        >
+                           <Move3D className="h-5 w-5" />
+                        </Button>
+                      </TooltipTrigger>
+                      <TooltipContent>角度调整</TooltipContent>
+                    </Tooltip>
+
+                    <Tooltip>
+                      <TooltipTrigger asChild>
+                        <Button
+                          size="icon"
+                          variant="ghost"
+                          className="h-10 w-10 rounded-full text-zinc-600 hover:bg-zinc-100 dark:text-zinc-300 dark:hover:bg-zinc-800"
+                          onClick={() => setShowSceneFusion(true)}
+                        >
+                           <Layers className="h-5 w-5" />
+                        </Button>
+                      </TooltipTrigger>
+                      <TooltipContent>详情替换</TooltipContent>
+                    </Tooltip>
+
+                    <div className="mx-1 h-7 w-px bg-black/10 dark:bg-white/10" />
+                  </>
+                 )}
+
+                 {/* History */}
+                 {!isResizeMode && (
+                   <>
+                    <Tooltip>
+                      <TooltipTrigger asChild>
+                        <Button
+                          size="icon"
+                          variant="ghost"
+                          className="h-10 w-10 rounded-full text-zinc-600 hover:bg-zinc-100 dark:text-zinc-300 dark:hover:bg-zinc-800"
+                          onClick={handleUndo}
+                          disabled={actions.length === 0}
+                        >
+                           <Undo className="h-5 w-5" />
+                        </Button>
+                      </TooltipTrigger>
+                      <TooltipContent>撤销</TooltipContent>
+                    </Tooltip>
+
+                    <Tooltip>
+                      <TooltipTrigger asChild>
+                        <Button
+                          size="icon"
+                          variant="ghost"
+                          className="h-10 w-10 rounded-full text-zinc-600 hover:bg-zinc-100 dark:text-zinc-300 dark:hover:bg-zinc-800"
+                          onClick={handleClear}
+                          disabled={actions.length === 0}
+                        >
+                           <Trash2 className="h-5 w-5" />
+                        </Button>
+                      </TooltipTrigger>
+                      <TooltipContent>清空</TooltipContent>
+                    </Tooltip>
+                   </>
+                 )}
+
+                 {/* Resize Mode specific tools */}
+                 {isResizeMode && (
+                   <>
+                     <div className="flex items-center gap-2 px-2">
+                       {aspectRatios.slice(0, 4).map((ratio) => (
+                         <Button
+                           key={ratio.value}
+                           variant={selectedAspectRatio === ratio.value ? "secondary" : "ghost"}
+                           size="sm"
+                           onClick={() => handleAspectRatioSelect(ratio.value === selectedAspectRatio ? null : ratio.value)}
+                           className="h-8 text-xs"
+                         >
+                           {ratio.label}
+                         </Button>
+                       ))}
+                     </div>
+                     <div className="mx-1 h-7 w-px bg-black/10 dark:bg-white/10" />
+                     <div className="flex items-center gap-2 px-2">
+                       <Input
+                         type="number"
+                         value={resizeCanvasWidth}
+                         onChange={(e) => handleWidthChange(Number.parseInt(e.target.value) || 1)}
+                         className="h-8 w-20 text-xs"
+                       />
+                       <span className="text-zinc-400">x</span>
+                       <Input
+                         type="number"
+                         value={resizeCanvasHeight}
+                         onChange={(e) => handleHeightChange(Number.parseInt(e.target.value) || 1)}
+                         className="h-8 w-20 text-xs"
+                       />
+                     </div>
+                     <div className="mx-1 h-7 w-px bg-black/10 dark:bg-white/10" />
+                     <Tooltip>
+                      <TooltipTrigger asChild>
+                        <Button
+                          size="icon"
+                          variant="ghost"
+                          className="h-10 w-10 rounded-full text-zinc-600 hover:bg-zinc-100 dark:text-zinc-300 dark:hover:bg-zinc-800"
+                          onClick={handleResizeZoomOut}
+                        >
+                           <ZoomOut className="h-5 w-5" />
+                        </Button>
+                      </TooltipTrigger>
+                      <TooltipContent>缩小</TooltipContent>
+                    </Tooltip>
+                    <Tooltip>
+                      <TooltipTrigger asChild>
+                        <Button
+                          size="icon"
+                          variant="ghost"
+                          className="h-10 w-10 rounded-full text-zinc-600 hover:bg-zinc-100 dark:text-zinc-300 dark:hover:bg-zinc-800"
+                          onClick={handleResizeZoomIn}
+                        >
+                           <ZoomIn className="h-5 w-5" />
+                        </Button>
+                      </TooltipTrigger>
+                      <TooltipContent>放大</TooltipContent>
+                    </Tooltip>
+                   </>
+                 )}
+              </TooltipProvider>
+            </div>
+          </div>
+        )}
+
+        {/* Main Content Area */}
+        <div className="relative flex h-full w-full bg-[#f4f4f5] dark:bg-[#09090b]">
+           {showSceneFusion ? (
+             <div className="flex-1 overflow-hidden relative">
+               <SceneFusionView
+                 onBack={() => setShowSceneFusion(false)}
+                 initialProductImage={processedImageUrl ?? originalImageUrl ?? null}
+               />
+             </div>
+           ) : (
+             <div ref={containerRef} className="flex flex-1 items-center justify-center gap-2 overflow-hidden p-0 relative">
+               <div className="absolute inset-0 pattern-grid-lg opacity-[0.03] pointer-events-none" />
+               
+               {/* Main Canvas / Image Area */}
+               <div className="relative z-10 flex items-center justify-center w-full h-full p-8 pb-24">
+                 {isLoading ? (
+                   <div className="flex flex-col items-center justify-center gap-3">
+                     <div className="flex items-center gap-1">
+                       <span className="h-2 w-2 rounded-full bg-primary animate-bounce" style={{ animationDelay: "0ms" }} />
+                       <span className="h-2 w-2 rounded-full bg-primary animate-bounce" style={{ animationDelay: "150ms" }} />
+                       <span className="h-2 w-2 rounded-full bg-primary animate-bounce" style={{ animationDelay: "300ms" }} />
+                     </div>
+                     <span className="text-sm text-muted-foreground">正在加载图片...</span>
+                   </div>
+                 ) : !image ? (
+                   <div className="flex flex-col items-center justify-center p-8">
+                     <div 
+                       className="w-full max-w-lg border-2 border-dashed border-muted-foreground/25 rounded-xl p-12 text-center cursor-pointer hover:border-primary/50 hover:bg-muted/20 transition-all group"
+                       onClick={() => fileInputRef.current?.click()}
+                       onDrop={handleDrop}
+                       onDragOver={handleDragOver}
+                     >
+                       <div className="bg-background rounded-full p-4 w-20 h-20 mx-auto mb-6 shadow-sm group-hover:scale-105 transition-transform flex items-center justify-center">
+                         <UploadIcon className="w-10 h-10 text-muted-foreground group-hover:text-primary transition-colors" />
+                       </div>
+                       <h3 className="text-xl font-medium mb-2">上传图片以开始编辑</h3>
+                       <p className="text-muted-foreground mb-2">拖拽图片到此处、点击选择或 Ctrl+V 粘贴</p>
+                       <p className="text-muted-foreground/60 text-sm mb-6">支持 JPG, PNG, WebP 格式，最大 50MB</p>
+                       <Button variant="default">选择图片</Button>
+                       <input 
+                         type="file" 
+                         ref={fileInputRef}
+                         className="hidden" 
+                         accept="image/png,image/jpeg,image/webp"
+                         onChange={handleImageUpload}
+                       />
+                     </div>
+                   </div>
+                 ) : isResizeMode ? (
+                   /* Resize Mode View */
+                   <div className="flex gap-4 h-full w-full items-center justify-center">
+                     {/* Source Image */}
+                     <div className="flex flex-col border border-border/40 rounded-xl bg-white/50 dark:bg-zinc-900/50 p-2 overflow-hidden shadow-sm h-full max-h-[80vh] flex-1">
+                       <div className="mb-2 text-xs font-medium text-muted-foreground text-center bg-black/5 dark:bg-white/5 py-1 rounded">原图</div>
+                       <div className="flex-1 flex items-center justify-center overflow-auto min-h-0">
+                         {image && (
+                           <img
+                             src={image.src}
+                             alt="原图"
+                             className="rounded-lg shadow-sm"
+                             style={{ objectFit: "contain", maxHeight: "100%", maxWidth: "100%" }}
+                           />
+                         )}
+                       </div>
+                     </div>
+                     
+                     {/* Preview Canvas */}
+                     <div className="flex flex-col border border-primary/20 rounded-xl bg-white/50 dark:bg-zinc-900/50 p-2 overflow-hidden shadow-sm h-full max-h-[80vh] flex-1">
+                       <div className="mb-2 flex items-center justify-between bg-black/5 dark:bg-white/5 py-1 px-2 rounded">
+                         <span className="text-xs font-medium text-muted-foreground">调整预览</span>
+                         {(processedImageUrl || processedImageBase64) && processType === "resize" && (
+                           <Button
+                             variant="ghost"
+                             size="sm"
+                             onClick={handleDownloadProcessed}
+                             className="h-6 px-2 text-xs hover:bg-background"
+                           >
+                             <Download className="h-3 w-3 mr-1" />
+                             下载
+                           </Button>
+                         )}
+                       </div>
+                       <div 
+                         ref={resizeContainerRef}
+                         className="flex-1 flex items-center justify-center overflow-hidden relative"
+                         onWheel={handleResizeImageWheel}
+                       >
+                         <div className="relative inline-block">
+                           <canvas
+                             ref={resizeCanvasRef}
+                             className="cursor-move rounded-lg shadow-lg"
+                             onMouseDown={handleResizeImageDragStart}
+                             onMouseMove={handleResizeImageDrag}
+                             onMouseUp={handleResizeImageDragEnd}
+                             onMouseLeave={handleResizeImageDragEnd}
+                             onTouchStart={handleResizeImageDragStart}
+                             onTouchMove={handleResizeImageDrag}
+                             onTouchEnd={handleResizeImageDragEnd}
+                           />
+                         </div>
+                       </div>
+                     </div>
+                   </div>
+                 ) : (
+                   /* Normal Mode View */
+                   <div className="flex gap-4 h-full w-full items-center justify-center">
+                     <div className="relative flex items-center justify-center max-h-full max-w-full">
+                       <canvas
+                         ref={canvasRef}
+                         className={cn(
+                           "touch-none shadow-2xl rounded-lg block bg-white dark:bg-[#18181b]",
+                           (tool === "pen" || tool === "arrow" || tool === "circle" || tool === "text") ? "cursor-crosshair" : "cursor-default"
+                         )}
+                         onMouseDown={handleStart}
+                         onMouseMove={handleMove}
+                         onMouseUp={handleEnd}
+                         onMouseLeave={handleEnd}
+                         onTouchStart={handleStart}
+                         onTouchMove={handleMove}
+                         onTouchEnd={handleEnd}
+                       />
+                       
+                       {/* Processed Result Overlay/Side-by-side could go here if we want splitscreen, but ImageAnnotator usually replaces or shows result in place? 
+                           Currently it shows result in a separate box if processed. 
+                           Let's keep the logic: if processedImage exists, show it side-by-side or replace?
+                           Original code showed side-by-side.
+                       */}
+                       
+                     </div>
+
+                     {/* Processed Result (Side by Side) */}
+                     {(processedImageUrl || processedImageBase64) && (
+                       <div className="relative flex flex-col items-center justify-center max-h-full max-w-full ml-4 border-l border-border/20 pl-4">
+                         <div className="mb-2 text-xs font-medium text-muted-foreground bg-black/5 dark:bg-white/5 px-2 py-1 rounded">
+                           {processType === "rmbg" ? "抠图结果" : processType === "enhance" ? "清晰结果" : processType === "resize" ? "尺寸调整结果" : processType === "watermark" ? "去水印结果" : "拓展结果"}
+                         </div>
+                         <div className="relative rounded-lg shadow-2xl overflow-hidden bg-white dark:bg-[#18181b]">
+                           {processedImageUrl ? (
+                             <img
+                               src={processedImageUrl}
+                               alt="Result"
+                               className="max-h-[70vh] max-w-[40vw] object-contain"
+                             />
+                           ) : processedImageBase64 ? (
+                             <img
+                               src={`data:image/${processType === "rmbg" || processType === "resize" ? "png" : "jpeg"};base64,${processedImageBase64}`}
+                               alt="Result"
+                               className="max-h-[70vh] max-w-[40vw] object-contain"
+                             />
+                           ) : null}
+                           
+                           <Button
+                             size="icon"
+                             variant="secondary"
+                             className="absolute bottom-4 right-4 shadow-lg"
+                             onClick={handleDownloadProcessed}
+                           >
+                             <Download className="h-5 w-5" />
+                           </Button>
+                         </div>
+                       </div>
+                     )}
+                   </div>
+                 )}
+               </div>
+             </div>
+           )}
+        </div>
+
+        {/* Floating Toolbar - Bottom (Confirm/Cancel) */}
+        {!showSceneFusion && (
+          <div className="absolute bottom-8 left-1/2 -translate-x-1/2 z-20 pointer-events-none">
+            <div className="pointer-events-auto flex items-center gap-2 p-1.5 bg-background/95 backdrop-blur-xl border border-border/50 shadow-2xl rounded-[24px]">
+              <Button 
+                variant="ghost" 
+                onClick={onCancel}
+                className="rounded-xl px-4 text-muted-foreground hover:text-foreground"
+              >
+                取消
+              </Button>
+              <div className="h-4 w-px bg-border/50" />
+              <Button 
+                onClick={isResizeMode ? handleResizeConfirm : handleConfirm}
+                disabled={isResizing}
+                className="rounded-xl px-6 bg-primary text-primary-foreground hover:bg-primary/90"
+              >
+                {isResizing ? (
+                  <>
+                    <Loader2 className="mr-2 h-4 w-4 animate-spin" />
+                    处理中...
+                  </>
+                ) : (
+                  <>
+                    <Check className="mr-2 h-4 w-4" />
+                    {confirmButtonText}
+                  </>
+                )}
+              </Button>
+            </div>
+          </div>
+        )}
+
+        {/* Text Input Modal */}
+        {textPosition && (
+          <div className="fixed inset-0 z-[10000] flex items-center justify-center bg-black/50 backdrop-blur-sm" onClick={() => setTextPosition(null)}>
+            <div className="rounded-lg border bg-background p-4 shadow-xl" onClick={(e) => e.stopPropagation()}>
+              <div className="mb-3 text-sm font-medium">输入标注文字</div>
+              <input
+                type="text"
+                value={textInput}
+                onChange={(e) => setTextInput(e.target.value)}
+                onKeyDown={(e) => {
+                  if (e.key === "Enter") handleAddText();
+                }}
+                className="mb-3 w-64 rounded-md border bg-muted px-3 py-2 text-foreground outline-none focus:border-primary"
+                placeholder="输入文字..."
+                autoFocus
+              />
+              <div className="flex justify-end gap-2">
+                <Button variant="ghost" size="sm" onClick={() => setTextPosition(null)}>
+                  取消
+                </Button>
+                <Button size="sm" onClick={handleAddText} disabled={!textInput.trim()}>
+                  添加
+                </Button>
+              </div>
+            </div>
+          </div>
+        )}
+
+        {/* Angle Edit Dialog */}
+        {showAngleEditDialog && originalImageUrl && (
+          <div onClick={(e) => e.stopPropagation()} onMouseDown={(e) => e.stopPropagation()}>
+            <AngleEditDialog
+              open={showAngleEditDialog}
+              onOpenChange={setShowAngleEditDialog}
+              imageUrl={originalImageUrl}
+              onComplete={handleAngleEditComplete}
+            />
+          </div>
+        )}
+      </DialogContent>
+    </Dialog>
+  );
 }