From 1f1f3fd2766c2e0f930b514444bc43dfdd78a275 Mon Sep 17 00:00:00 2001
From: 134 <a134@134deMacBook-Pro.local>
Date: Wed, 17 Jun 2026 11:43:40 +0800
Subject: [PATCH] fix: unify canvas processing placeholders

---
 components/canvas/nodes/ImageNode.tsx         |  5 +++-
 .../image-node/image-node-empty-state.tsx     | 23 ++++++++++++-------
 2 files changed, 19 insertions(+), 9 deletions(-)

diff --git a/components/canvas/nodes/ImageNode.tsx b/components/canvas/nodes/ImageNode.tsx
index 75c07321e..5c1c08f48 100644
--- a/components/canvas/nodes/ImageNode.tsx
+++ b/components/canvas/nodes/ImageNode.tsx
@@ -8524,7 +8524,10 @@ export function ImageNode({
 
         {/* 处理中遮罩 */}
         {isProcessing && (
-          <ImageNodeProcessingOverlay />
+          <ImageNodeProcessingOverlay
+            detailProgressLabel={detailProgressLabel || undefined}
+            generationProgress={generationProgress}
+          />
         )}
 
         {/* 工具栏使用 Portal 渲染到 body，避免被裁剪 */}
diff --git a/components/canvas/nodes/image-node/image-node-empty-state.tsx b/components/canvas/nodes/image-node/image-node-empty-state.tsx
index baccdb896..f0f926c0c 100644
--- a/components/canvas/nodes/image-node/image-node-empty-state.tsx
+++ b/components/canvas/nodes/image-node/image-node-empty-state.tsx
@@ -24,15 +24,22 @@ export function ImageNodeDeferredLoadState() {
   );
 }
 
-export function ImageNodeProcessingOverlay() {
+export function ImageNodeProcessingOverlay({
+  detailProgressLabel,
+  generationProgress,
+}: {
+  detailProgressLabel?: string;
+  generationProgress?: number | null;
+}) {
   return (
-    <div className="absolute inset-0 flex items-center justify-center bg-white">
-      <div className="flex flex-col items-center">
-        <span className="mb-3 flex h-12 w-12 items-center justify-center rounded-[18px] border border-[#dde5f4] bg-[#f6f8ff] text-[#5b76fe] shadow-[0_0_0_1px_rgba(219,226,238,0.22)]">
-          <Loader2 className="h-5 w-5 animate-spin" />
-        </span>
-        <span className="text-sm font-medium text-[#3f4b63]">处理中...</span>
-      </div>
+    <div className="absolute inset-0 overflow-hidden rounded-[inherit] bg-white/96 backdrop-blur-[1px]">
+      <GenerationDotPlaceholder
+        className="h-full w-full rounded-none"
+        compact
+        phase="processing"
+        progress={generationProgress}
+        title={detailProgressLabel || "正在处理图片"}
+      />
     </div>
   );
 }