From 0870739a7d28479612663a8dacc1154c259258cb Mon Sep 17 00:00:00 2001
From: Your Name <your.email@example.com>
Date: Sat, 11 Apr 2026 23:36:46 +0800
Subject: [PATCH] fix: stabilize flow board node insertion

---
 components/canvas/EnhanceProWorkspace.tsx   | 58 ++++++---------------
 components/canvas/RealtimeCanvasDialog.tsx  | 34 ++++++------
 components/flow-board/drawnix-workspace.tsx | 26 +++++++--
 3 files changed, 58 insertions(+), 60 deletions(-)

diff --git a/components/canvas/EnhanceProWorkspace.tsx b/components/canvas/EnhanceProWorkspace.tsx
index 9b1aeb600..41bb67205 100644
--- a/components/canvas/EnhanceProWorkspace.tsx
+++ b/components/canvas/EnhanceProWorkspace.tsx
@@ -359,6 +359,7 @@ function buildEnhanceSourcePayload(
 
 interface EnhanceProWorkspaceProps {
   sourceImageUrl?: string | null;
+  onRequestAddImage?: () => void;
   onApplyResult: (payload: {
     imageUrl: string;
     prompt: string;
@@ -371,6 +372,7 @@ interface EnhanceProWorkspaceProps {
 
 export function EnhanceProWorkspace({
   sourceImageUrl,
+  onRequestAddImage,
   onApplyResult,
 }: EnhanceProWorkspaceProps) {
   const [isSubmitting, setIsSubmitting] = useState(false);
@@ -734,47 +736,21 @@ export function EnhanceProWorkspace({
             </div>
           </div>
         ) : (
-          <div className="relative w-full max-w-[42rem] px-6">
-            <div className="relative rounded-[38px] border border-[#e6e6e6] bg-white px-8 py-8 shadow-[0_0_0_1px_rgba(0,0,0,0.03),0_30px_60px_rgba(0,0,0,0.06)] backdrop-blur-sm">
-              <div className="flex items-start gap-4">
-                <div className="flex h-16 w-16 shrink-0 items-center justify-center rounded-[24px] border border-[#ececec] bg-[#fafafa] text-[#111111] shadow-[0_14px_28px_rgba(0,0,0,0.06)]">
-                  <Sparkles className="h-8 w-8" />
-                </div>
-                <div className="min-w-0 text-left">
-                  <div className={SECTION_EYEBROW_CLASS}>Enhance Pro Studio</div>
-                  <div className="mt-3 font-semibold text-[34px] tracking-[-0.05em] text-[#111111] leading-[1.02]">
-                    还没有可增强的图片
-                  </div>
-                  <div className="mt-3 max-w-[30rem] text-[#666666] text-[15px] leading-7">
-                    先在主画布里选中一张图片，或者先在实时画布模式里生成结果，
-                    再切回这里进行精修、增强和细节重建。
-                  </div>
-                </div>
-              </div>
-              <div className="mt-7 grid gap-3 md:grid-cols-2">
-                <div className="rounded-[24px] border border-[#efefef] bg-[#fafafa] p-4 shadow-[inset_0_1px_0_rgba(255,255,255,0.92)]">
-                  <div className="text-[11px] font-semibold tracking-[0.16em] text-[#666666] uppercase">
-                    Step 01
-                  </div>
-                  <div className="mt-2 font-semibold text-[18px] tracking-[-0.03em] text-[#111111]">
-                    选中一张图
-                  </div>
-                  <div className="mt-1 text-[13px] leading-6 text-[#666666]">
-                    从主画布中选择要增强的图片，系统会自动把它带入当前工作台。
-                  </div>
-                </div>
-                <div className="rounded-[24px] border border-[#efefef] bg-[#fafafa] p-4 shadow-[inset_0_1px_0_rgba(255,255,255,0.92)]">
-                  <div className="text-[11px] font-semibold tracking-[0.16em] text-[#666666] uppercase">
-                    Step 02
-                  </div>
-                  <div className="mt-2 font-semibold text-[18px] tracking-[-0.03em] text-[#111111]">
-                    调参后开始增强
-                  </div>
-                  <div className="mt-1 text-[13px] leading-6 text-[#666666]">
-                    使用右侧工具卡片快速选择模式、强度和增强范围，生成后可直接发回画布。
-                  </div>
-                </div>
-              </div>
+          <div className="relative flex flex-col items-center justify-center gap-3 px-6 text-center">
+            <Button
+              className={cn(
+                "h-14 rounded-[22px] px-8 text-[15px] font-semibold tracking-[-0.02em]",
+                PRIMARY_ACTION_BUTTON_CLASS
+              )}
+              disabled={!onRequestAddImage}
+              onClick={onRequestAddImage}
+              type="button"
+            >
+              <ImageIcon className="mr-2 h-5 w-5" />
+              添加图片
+            </Button>
+            <div className="text-[#666666] text-[13px] leading-6">
+              选择本地图片后即可开始图像增强 Pro
             </div>
           </div>
         )}
diff --git a/components/canvas/RealtimeCanvasDialog.tsx b/components/canvas/RealtimeCanvasDialog.tsx
index 1febf064e..2a6451695 100644
--- a/components/canvas/RealtimeCanvasDialog.tsx
+++ b/components/canvas/RealtimeCanvasDialog.tsx
@@ -3336,9 +3336,27 @@ export function RealtimeCanvasDialog({
         </div>
       ) : null}
 
+      <input
+        accept="image/*"
+        className="hidden"
+        multiple
+        onChange={handleSketchUpload}
+        ref={uploadInputRef}
+        type="file"
+      />
+      <input
+        accept="image/*"
+        className="hidden"
+        multiple
+        onChange={handleLayerSplitUpload}
+        ref={splitUploadInputRef}
+        type="file"
+      />
+
       {workspaceMode === "enhance-pro" ? (
         <EnhanceProWorkspace
           onApplyResult={handleApplyEnhanceResult}
+          onRequestAddImage={() => uploadInputRef.current?.click()}
           sourceImageUrl={enhanceSourceImageUrl}
         />
       ) : (
@@ -3592,22 +3610,6 @@ export function RealtimeCanvasDialog({
             </div>
           </div>
 
-          <input
-            accept="image/*"
-            className="hidden"
-            multiple
-            onChange={handleSketchUpload}
-            ref={uploadInputRef}
-            type="file"
-          />
-          <input
-            accept="image/*"
-            className="hidden"
-            multiple
-            onChange={handleLayerSplitUpload}
-            ref={splitUploadInputRef}
-            type="file"
-          />
           <div className="-translate-x-1/2 pointer-events-none absolute bottom-4 left-1/2 z-30 flex w-[min(600px,calc(100vw-2rem))] flex-col items-center gap-2.5">
             <TooltipProvider delayDuration={120}>
               <div
diff --git a/components/flow-board/drawnix-workspace.tsx b/components/flow-board/drawnix-workspace.tsx
index aa6aafbb0..aab5d2434 100644
--- a/components/flow-board/drawnix-workspace.tsx
+++ b/components/flow-board/drawnix-workspace.tsx
@@ -319,9 +319,20 @@ function normalizeFlowBoardElementText(element: unknown): PlaitElement {
 }
 
 function normalizeFlowBoardChildren(children: unknown): PlaitElement[] {
-  return Array.isArray(children)
-    ? children.map((element) => normalizeFlowBoardElementText(element))
-    : [];
+  if (!Array.isArray(children)) {
+    return [];
+  }
+
+  let changed = false;
+  const nextChildren = children.map((element) => {
+    const nextElement = normalizeFlowBoardElementText(element);
+    if (nextElement !== element) {
+      changed = true;
+    }
+    return nextElement;
+  });
+
+  return changed ? nextChildren : (children as PlaitElement[]);
 }
 
 function seedFlowBoardDefaultTextColor() {
@@ -1009,6 +1020,9 @@ export function DrawnixWorkspace({
 
   const handleValueChange = useCallback(
     (children: PlaitElement[]) => {
+      if (snapshotRef.current.children === children) {
+        return;
+      }
       updateSnapshot({ children });
       refreshMarkerSelectionState();
     },
@@ -1017,6 +1031,9 @@ export function DrawnixWorkspace({
 
   const handleViewportChange = useCallback(
     (viewport: Viewport) => {
+      if (snapshotRef.current.viewport === viewport) {
+        return;
+      }
       updateSnapshot({ viewport });
     },
     [updateSnapshot]
@@ -1024,6 +1041,9 @@ export function DrawnixWorkspace({
 
   const handleThemeChange = useCallback(
     (themeColorMode: ThemeColorMode) => {
+      if (snapshotRef.current.theme?.themeColorMode === themeColorMode) {
+        return;
+      }
       updateSnapshot({ theme: { themeColorMode } });
     },
     [updateSnapshot]