From db1e6138e4aa5ea9962e452e5a37b8ed0eb21123 Mon Sep 17 00:00:00 2001
From: Your Name <your.email@example.com>
Date: Sun, 1 Mar 2026 02:17:25 +0800
Subject: [PATCH] fix(canvas): make compare toggle unobstructed and keep
 consistent icon

---
 components/canvas/nodes/ImageNode.tsx | 39 ++++++++++++++-------------
 1 file changed, 20 insertions(+), 19 deletions(-)

diff --git a/components/canvas/nodes/ImageNode.tsx b/components/canvas/nodes/ImageNode.tsx
index 8ca067d48..d51c049d2 100644
--- a/components/canvas/nodes/ImageNode.tsx
+++ b/components/canvas/nodes/ImageNode.tsx
@@ -1716,7 +1716,12 @@ export function ImageNode({ node, isSelected }: ImageNodeProps) {
             {isSelected && !isMultiSelected && hasCompareSource && !isThisNodePicking && (
               <button
                 type="button"
-                className="absolute bottom-2 right-2 z-[140] inline-flex h-8 w-8 items-center justify-center rounded-full border border-white/70 bg-black/70 text-white transition-colors hover:bg-black/80"
+                className={cn(
+                  "absolute right-2 top-1/2 z-[180] inline-flex h-10 w-10 -translate-y-1/2 items-center justify-center rounded-full border text-white transition-colors",
+                  isCompareMode
+                    ? "border-sky-200 bg-sky-500/90 shadow-[0_0_0_2px_rgba(255,255,255,0.55)]"
+                    : "border-white/75 bg-black/75 hover:bg-black/85"
+                )}
                 onPointerDown={(event) => {
                   event.stopPropagation();
                 }}
@@ -1724,25 +1729,21 @@ export function ImageNode({ node, isSelected }: ImageNodeProps) {
                   event.stopPropagation();
                   setIsCompareMode((prev) => !prev);
                 }}
-                title={isCompareMode ? "退出对比" : "开启对比"}
-                aria-label={isCompareMode ? "退出对比" : "开启对比"}
+                title={isCompareMode ? "对比已开启" : "开启对比"}
+                aria-label={isCompareMode ? "对比已开启" : "开启对比"}
               >
-                {isCompareMode ? (
-                  <X className="h-4 w-4" />
-                ) : (
-                  <svg
-                    viewBox="0 0 24 24"
-                    className="h-4 w-4"
-                    fill="none"
-                    stroke="currentColor"
-                    strokeWidth="2"
-                    strokeLinecap="round"
-                    strokeLinejoin="round"
-                  >
-                    <rect x="3" y="5" width="18" height="14" rx="2" />
-                    <path d="M12 5v14" />
-                  </svg>
-                )}
+                <svg
+                  viewBox="0 0 24 24"
+                  className="h-5 w-5"
+                  fill="none"
+                  stroke="currentColor"
+                  strokeWidth="2"
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                >
+                  <rect x="3" y="5" width="18" height="14" rx="2" />
+                  <path d="M12 5v14" />
+                </svg>
               </button>
             )}
           </div>