From 26244a724cc4017c11c9bc8bba7f127412868d09 Mon Sep 17 00:00:00 2001
From: Your Name <your.email@example.com>
Date: Mon, 2 Mar 2026 16:19:04 +0800
Subject: [PATCH] fix(canvas): shrink compare toggle and hide it in compare
 mode

---
 components/canvas/nodes/ImageNode.tsx | 25 +++++++------------------
 1 file changed, 7 insertions(+), 18 deletions(-)

diff --git a/components/canvas/nodes/ImageNode.tsx b/components/canvas/nodes/ImageNode.tsx
index b713e9cb6..5891a1e45 100644
--- a/components/canvas/nodes/ImageNode.tsx
+++ b/components/canvas/nodes/ImageNode.tsx
@@ -359,18 +359,18 @@ export function ImageNode({ node, isSelected }: ImageNodeProps) {
   const hasCompareSource = Boolean(data.src) && Boolean(compareSource);
   const compareButtonVisualSize = useMemo(() => {
     const minSide = Math.max(1, Math.min(node.size.width || 0, node.size.height || 0));
-    return Math.round(Math.max(32, Math.min(42, minSide * 0.12)));
+    return Math.round(Math.max(24, Math.min(32, minSide * 0.09)));
   }, [node.size.height, node.size.width]);
   const compareButtonHitSize = useMemo(
-    () => Math.max(44, compareButtonVisualSize + 12),
+    () => Math.max(34, compareButtonVisualSize + 8),
     [compareButtonVisualSize]
   );
   const compareButtonIconSize = useMemo(
-    () => Math.round(Math.max(14, Math.min(20, compareButtonVisualSize * 0.45))),
+    () => Math.round(Math.max(12, Math.min(16, compareButtonVisualSize * 0.5))),
     [compareButtonVisualSize]
   );
   const compareButtonInset = useMemo(
-    () => Math.max(6, Math.min(12, Math.round(compareButtonVisualSize * 0.24))),
+    () => Math.max(6, Math.min(10, Math.round(compareButtonVisualSize * 0.22))),
     [compareButtonVisualSize]
   );
   
@@ -1728,16 +1728,10 @@ export function ImageNode({ node, isSelected }: ImageNodeProps) {
               </div>
             )}
 
-            {hasCompareSource && !isThisNodePicking && (isCompareMode || (isSelected && !isMultiSelected)) && (
+            {hasCompareSource && !isThisNodePicking && !isCompareMode && isSelected && !isMultiSelected && (
               <button
                 type="button"
-                className={cn(
-                  "pointer-events-auto absolute top-1/2 z-[220] inline-flex -translate-y-1/2 items-center justify-center rounded-full text-white transition-all data-[state=on]:scale-100",
-                  isCompareMode
-                    ? "shadow-[0_0_0_3px_rgba(255,255,255,0.45),0_10px_22px_rgba(14,165,233,0.35)]"
-                    : "shadow-[0_8px_18px_rgba(0,0,0,0.28)]"
-                )}
-                data-state={isCompareMode ? "on" : "off"}
+                className="pointer-events-auto absolute top-1/2 z-[220] inline-flex -translate-y-1/2 items-center justify-center rounded-full text-white shadow-[0_8px_16px_rgba(0,0,0,0.22)] transition-all"
                 data-canvas-no-drag="true"
                 style={{
                   width: `${compareButtonHitSize}px`,
@@ -1756,12 +1750,7 @@ export function ImageNode({ node, isSelected }: ImageNodeProps) {
                 aria-label={isCompareMode ? "对比已开启" : "开启对比"}
               >
                 <span
-                  className={cn(
-                    "inline-flex items-center justify-center rounded-full border text-white transition-colors",
-                    isCompareMode
-                      ? "border-sky-100 bg-sky-500/95"
-                      : "border-white/80 bg-black/78 hover:bg-black/88"
-                  )}
+                  className="inline-flex items-center justify-center rounded-full border border-white/80 bg-black/78 text-white transition-colors hover:bg-black/88"
                   style={{
                     width: `${compareButtonVisualSize}px`,
                     height: `${compareButtonVisualSize}px`,