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-composer-tools .canvas-composer-mode-button span,
-    .canvas-model-picker-text,
+    .canvas-composer-tools .canvas-model-picker-text,
-    .canvas-select-chevron,
+    .canvas-composer-tools .canvas-select-chevron,
-    .canvas-composer-icon.ant-btn > span:not(.ant-btn-icon) {
+    .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-composer-tools .canvas-model-picker-text,
-        .canvas-select-chevron {
+        .canvas-composer-tools .canvas-select-chevron {
             display: inline;
         }
     }

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) {