From c36d0f93d88b6f6a63413ec68efc642de255e04f Mon Sep 17 00:00:00 2001
From: Your Name <your.email@example.com>
Date: Sun, 18 Jan 2026 15:02:58 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E5=9B=BE=E7=89=87=E7=BC=96=E8=BE=91?=
 =?UTF-8?q?=E5=99=A8=E5=85=A5=E5=8F=A3=E4=BC=98=E5=8C=96=20-=20=E7=9B=B4?=
 =?UTF-8?q?=E6=8E=A5=E8=BF=9B=E5=85=A5=E7=BC=96=E8=BE=91=E5=99=A8=E4=B8=BB?=
 =?UTF-8?q?=E9=A1=B5=E9=9D=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 点击图片编辑器按钮后直接显示完整编辑器界面（包含工具栏）
- 在画布区域显示上传区域，而非独立的上传窗口
- 保持拖拽、点击、粘贴上传功能
---
 components/image-annotator.tsx | 75 ++++++++++++----------------------
 1 file changed, 25 insertions(+), 50 deletions(-)

diff --git a/components/image-annotator.tsx b/components/image-annotator.tsx
index a44aa3b7a..4deb1be7a 100644
--- a/components/image-annotator.tsx
+++ b/components/image-annotator.tsx
@@ -1551,6 +1551,31 @@ export function ImageAnnotator({ imageUrl, onConfirm, onCancel, initialResizeMod
               </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 格式，最大 10MB</p>
+                <Button variant="default">选择图片</Button>
+                <input 
+                  type="file" 
+                  ref={fileInputRef}
+                  className="hidden" 
+                  accept="image/png,image/jpeg,image/webp"
+                  onChange={handleImageUpload}
+                />
+              </div>
+            </div>
           ) : isResizeMode ? (
             /* 尺寸调整模式 - 左右对比布局 */
             <>
@@ -1728,55 +1753,5 @@ export function ImageAnnotator({ imageUrl, onConfirm, onCancel, initialResizeMod
     return null;
   }
 
-  // 如果没有图片，显示上传界面
-  if (!originalImageUrl) {
-    return createPortal(
-      <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/80 backdrop-blur-sm">
-        <div className="relative flex h-[80vh] w-[90vw] max-w-5xl flex-col overflow-hidden rounded-xl border bg-background shadow-2xl animate-in fade-in zoom-in-95 duration-200">
-          {/* Header */}
-          <div className="flex h-14 items-center justify-between border-b px-4">
-            <div className="flex items-center gap-2">
-              <span className="text-lg font-bold">图片编辑器</span>
-            </div>
-            <Button
-              variant="ghost"
-              size="icon"
-              onClick={onCancel}
-              className="h-8 w-8 rounded-full"
-            >
-              <X className="h-4 w-4" />
-            </Button>
-          </div>
-
-          {/* Upload Area */}
-          <div className="flex flex-1 flex-col items-center justify-center p-8 bg-muted/10">
-            <div 
-              className="w-full max-w-md 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 格式，最大 10MB</p>
-              <Button variant="default">选择图片</Button>
-              <input 
-                type="file" 
-                ref={fileInputRef}
-                className="hidden" 
-                accept="image/png,image/jpeg,image/webp"
-                onChange={handleImageUpload}
-              />
-            </div>
-          </div>
-        </div>
-      </div>,
-      document.body
-    );
-  }
-
   return createPortal(modalContent, document.body);
 }