From 83031e0864e916aeabdecff6bc0c9a10b960ad39 Mon Sep 17 00:00:00 2001
From: HouYunFei <1844025705@qq.com>
Date: Sat, 23 May 2026 16:18:14 +0800
Subject: [PATCH] =?UTF-8?q?style(canvas):=20=E8=B0=83=E6=95=B4=E7=94=BB?=
 =?UTF-8?q?=E5=B8=83=E7=BB=84=E4=BB=B6=E6=A0=B7=E5=BC=8F=E5=92=8C=E4=BA=A4?=
 =?UTF-8?q?=E4=BA=92=E8=A1=8C=E4=B8=BA?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 更新CSS选择器以正确隐藏和显示画布工具栏元素
- 为模型选择器下拉菜单添加data-canvas-no-zoom属性防止缩放冲突
- 在模型选择器中阻止指针和鼠标事件传播避免意外操作
- 为模型图标添加深色模式反转效果提升视觉一致性
---
 .../canvas/components/infinite-canvas.tsx     |  3 ++-
 web/src/app/globals.css                       | 20 +++++++++----------
 web/src/components/model-picker.tsx           | 11 ++++++++--
 3 files changed, 21 insertions(+), 13 deletions(-)

diff --git a/web/src/app/(user)/canvas/components/infinite-canvas.tsx b/web/src/app/(user)/canvas/components/infinite-canvas.tsx
index 7ed1753..f9293da 100644
--- a/web/src/app/(user)/canvas/components/infinite-canvas.tsx
+++ b/web/src/app/(user)/canvas/components/infinite-canvas.tsx
@@ -65,7 +65,7 @@ export function InfiniteCanvas({ containerRef, viewport, backgroundMode = "lines
 
     const handleWheel = (event: React.WheelEvent<HTMLDivElement>) => {
         const target = event.target instanceof Element ? event.target : null;
-        if (target?.closest(".ant-modal,.ant-popover,.ant-dropdown,.ant-select-dropdown,.ant-picker-dropdown")) return;
+        if (target?.closest("[data-canvas-no-zoom],.ant-modal,.ant-popover,.ant-dropdown,.ant-select-dropdown,.ant-picker-dropdown")) return;
 
         const delta = -event.deltaY;
         const factor = Math.pow(1.1, delta / 100);
@@ -87,6 +87,7 @@ export function InfiniteCanvas({ containerRef, viewport, backgroundMode = "lines
 
     const handlePointerDown = (event: React.PointerEvent<HTMLDivElement>) => {
         const target = event.target instanceof Element ? event.target : null;
+        if (target?.closest("[data-canvas-no-zoom]")) return;
         if (target?.closest("[data-connection-create-menu]")) return;
         const isBackgroundClick = !target?.closest("[data-node-id],[data-connection-id]");
 
diff --git a/web/src/app/globals.css b/web/src/app/globals.css
index 74431ae..c72a9b5 100644
--- a/web/src/app/globals.css
+++ b/web/src/app/globals.css
@@ -332,14 +332,14 @@
         width: 32px;
     }
 
-    .canvas-composer-mode-button span,
-    .canvas-model-picker-text,
-    .canvas-select-chevron,
-    .canvas-composer-icon.ant-btn > span:not(.ant-btn-icon) {
+    .canvas-composer-tools .canvas-composer-mode-button span,
+    .canvas-composer-tools .canvas-model-picker-text,
+    .canvas-composer-tools .canvas-select-chevron,
+    .canvas-composer-tools .canvas-composer-icon.ant-btn > span:not(.ant-btn-icon) {
         display: none;
     }
 
-    .canvas-composer-model-picker {
+    .canvas-composer-tools .canvas-composer-model-picker {
         width: 32px;
         min-width: 32px;
         justify-content: center;
@@ -353,7 +353,7 @@
             width: auto;
         }
 
-        .canvas-composer-mode-button span {
+        .canvas-composer-tools .canvas-composer-mode-button span {
             display: inline;
             font-size: 12px;
             line-height: 1;
@@ -365,12 +365,12 @@
             width: auto !important;
         }
 
-        .canvas-composer-icon.ant-btn > span:not(.ant-btn-icon) {
+        .canvas-composer-tools .canvas-composer-icon.ant-btn > span:not(.ant-btn-icon) {
             display: inline-flex;
             min-width: 0;
         }
 
-        .canvas-composer-model-picker {
+        .canvas-composer-tools .canvas-composer-model-picker {
             width: auto;
             min-width: 9rem;
             justify-content: flex-start;
@@ -378,8 +378,8 @@
             padding-inline: 0.75rem;
         }
 
-        .canvas-model-picker-text,
-        .canvas-select-chevron {
+        .canvas-composer-tools .canvas-model-picker-text,
+        .canvas-composer-tools .canvas-select-chevron {
             display: inline;
         }
     }
diff --git a/web/src/components/model-picker.tsx b/web/src/components/model-picker.tsx
index ac826c3..2a55df5 100644
--- a/web/src/components/model-picker.tsx
+++ b/web/src/components/model-picker.tsx
@@ -49,7 +49,14 @@ export function ModelPicker({ config, value, onChange, className, fullWidth = fa
                 <ModelIcon model={current} />
                 <span className="canvas-model-picker-text min-w-0 flex-1 truncate text-left">{current || placeholder}</span>
             </SelectTrigger>
-            <SelectContent className="z-50 w-80 max-w-[calc(100vw-24px)] rounded-xl border border-border/70 bg-popover p-1 shadow-xl" position="popper" align="start">
+            <SelectContent
+                data-canvas-no-zoom
+                className="z-50 w-80 max-w-[calc(100vw-24px)] rounded-xl border border-border/70 bg-popover p-1 shadow-xl"
+                position="popper"
+                align="start"
+                onPointerDown={(event) => event.stopPropagation()}
+                onMouseDown={(event) => event.stopPropagation()}
+            >
                 {options.length ? (
                     options.map((model) => (
                         <SelectItem key={model} value={model} textValue={model}>
@@ -77,7 +84,7 @@ function ModelLabel({ model }: { model: string }) {
 
 function ModelIcon({ model }: { model: string }) {
     const icon = resolveModelIcon(model);
-    return icon ? <img src={icon} alt="" className="size-4 shrink-0" /> : <Cpu className="size-4 shrink-0 opacity-70" />;
+    return icon ? <img src={icon} alt="" className="size-4 shrink-0 dark:invert" /> : <Cpu className="size-4 shrink-0 opacity-70" />;
 }
 
 function resolveModelIcon(model: string) {