fix: jam when doc panel open

src/components/DiagramCanvas.vue

@@ -1,7 +1,8 @@
 <template>
   <div class="flex-1 h-full w-full bg-base-200 relative overflow-hidden diagram-container" ref="canvasContainer"
     @mousedown="handleCanvasMouseDown" @mousedown.middle.prevent="startMiddleDrag" @wheel.prevent="onZoom"
-    @contextmenu.prevent="handleContextMenu"> <!-- 工具栏 -->
+    @contextmenu.prevent="handleContextMenu">
+    <!-- 工具栏 -->
     <div class="absolute top-2 right-2 flex gap-2 z-30">
       <button class="btn btn-sm btn-primary" @click="openDiagramFileSelector">
         <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 mr-1" fill="none" viewBox="0 0 24 24"
@@ -32,7 +33,7 @@
           <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
             d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
         </svg>
-        {{ props.showDocPanel ? '属性面板' : '文档' }}
+        {{ props.showDocPanel ? "属性面板" : "文档" }}
       </button>
     </div>
 
@@ -64,16 +65,23 @@
         'component-disabled': !component.isOn,
         'component-hidepins': component.hidepins,
       }" :style="{
-        top: component.y + 'px',
-        left: component.x + 'px',
-        zIndex: component.index ?? 0,
-        transform: component.rotate
-          ? `rotate(${component.rotate}deg)`
-          : 'none',
-        opacity: component.isOn ? 1 : 0.6,
-        display: 'block',
-      }" @mousedown.left.stop="startComponentDrag($event, component)" @mouseover="hoveredComponent = component.id"
-        @mouseleave="hoveredComponent = null">
+          top: component.y + 'px',
+          left: component.x + 'px',
+          zIndex: component.index ?? 0,
+          transform: component.rotate
+            ? `rotate(${component.rotate}deg)`
+            : 'none',
+          opacity: component.isOn ? 1 : 0.6,
+          display: 'block',
+        }" @mousedown.left.stop="startComponentDrag($event, component)" @mouseover="
+          (event) => {
+            hoveredComponent = component.id;
+          }
+        " @mouseleave="
+          (event) => {
+            hoveredComponent = null;
+          }
+        ">
         <!-- 动态渲染组件 -->
         <component :is="getComponentDefinition(component.type)" v-if="props.componentModules[component.type]"
           v-bind="prepareComponentProps(component.attrs || {}, component.id)" @update:bindKey="
@@ -98,10 +106,10 @@
     <!-- 通知组件 -->
     <div v-if="showNotification" class="toast toast-top toast-center z-50 w-fit-content">
       <div :class="`alert ${notificationType === 'success'
-        ? 'alert-success'
-        : notificationType === 'error'
-          ? 'alert-error'
-          : 'alert-info'
+          ? 'alert-success'
+          : notificationType === 'error'
+            ? 'alert-error'
+            : 'alert-info'
         }`">
         <span>{{ notificationMessage }}</span>
       </div>
@@ -173,7 +181,7 @@ const emit = defineEmits([
 // 定义组件接受的属性
 const props = defineProps<{
   componentModules: Record<string, any>;
-  showDocPanel?: boolean;  // 添加属性接收文档面板的显示状态
+  showDocPanel?: boolean; // 添加属性接收文档面板的显示状态
 }>();
 
 // --- 画布状态 ---