style(canvas): 调整画布组件样式和交互行为

- 更新CSS选择器以正确隐藏和显示画布工具栏元素
- 为模型选择器下拉菜单添加data-canvas-no-zoom属性防止缩放冲突
- 在模型选择器中阻止指针和鼠标事件传播避免意外操作
- 为模型图标添加深色模式反转效果提升视觉一致性

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]");
 

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;
         }
     }