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',
+          top: component.y + 'px',
-        left: component.x + 'px',
+          left: component.x + 'px',
-        zIndex: component.index ?? 0,
+          zIndex: component.index ?? 0,
-        transform: component.rotate
+          transform: component.rotate
-          ? `rotate(${component.rotate}deg)`
+            ? `rotate(${component.rotate}deg)`
-          : 'none',
+            : 'none',
-        opacity: component.isOn ? 1 : 0.6,
+          opacity: component.isOn ? 1 : 0.6,
-        display: 'block',
+          display: 'block',
-      }" @mousedown.left.stop="startComponentDrag($event, component)" @mouseover="hoveredComponent = component.id"
+        }" @mousedown.left.stop="startComponentDrag($event, component)" @mouseover="
-        @mouseleave="hoveredComponent = null">
+          (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'
+          ? 'alert-success'
-        : notificationType === 'error'
+          : notificationType === 'error'
-          ? 'alert-error'
+            ? 'alert-error'
-          : 'alert-info'
+            : 'alert-info'
         }`">
         <span>{{ notificationMessage }}</span>
       </div>
@@ -173,7 +181,7 @@ const emit = defineEmits([
 // 定义组件接受的属性
 const props = defineProps<{
   componentModules: Record<string, any>;
-  showDocPanel?: boolean;  // 添加属性接收文档面板的显示状态
+  showDocPanel?: boolean; // 添加属性接收文档面板的显示状态
 }>();
 
 // --- 画布状态 ---

src/views/ProjectView.vue

@@ -2,60 +2,34 @@
   <div class="h-screen flex flex-col overflow-hidden">
     <div class="flex flex-1 overflow-hidden relative">
       <!-- 左侧图形化区域 -->
-      <div
+      <div class="relative bg-base-200 overflow-hidden h-full" :style="{ width: leftPanelWidth + '%' }">
-        class="relative bg-base-200 overflow-hidden h-full"
+        <DiagramCanvas ref="diagramCanvas" :componentModules="componentModules" :showDocPanel="showDocPanel"
-        :style="{ width: leftPanelWidth + '%' }"
+          @component-selected="handleComponentSelected" @component-moved="handleComponentMoved"
-      >
+          @component-delete="handleComponentDelete" @wire-created="handleWireCreated" @wire-deleted="handleWireDeleted"
-        <DiagramCanvas
+          @diagram-updated="handleDiagramUpdated" @open-components="openComponentsMenu"
-          ref="diagramCanvas"
+          @load-component-module="handleLoadComponentModule" @toggle-doc-panel="toggleDocPanel" />
-          :componentModules="componentModules"
-          :showDocPanel="showDocPanel"
-          @component-selected="handleComponentSelected"
-          @component-moved="handleComponentMoved"
-          @component-delete="handleComponentDelete"
-          @wire-created="handleWireCreated"
-          @wire-deleted="handleWireDeleted"
-          @diagram-updated="handleDiagramUpdated"
-          @open-components="openComponentsMenu"
-          @load-component-module="handleLoadComponentModule"
-          @toggle-doc-panel="toggleDocPanel"
-        />
       </div>
 
       <!-- 拖拽分割线 -->
       <div
         class="resizer bg-base-100 hover:bg-primary hover:opacity-70 active:bg-primary active:opacity-90 transition-colors"
-        @mousedown="startResize"
+        @mousedown="startResize"></div>
-      ></div>      <!-- 右侧编辑区域 -->
+      <!-- 右侧编辑区域 -->
-      <div
+      <div class="bg-base-200 h-full overflow-hidden flex flex-col" :style="{ width: 100 - leftPanelWidth + '%' }">
-        class="bg-base-200 h-full overflow-hidden flex flex-col"
-        :style="{ width: 100 - leftPanelWidth + '%' }"
-      >
         <div class="overflow-y-auto flex-1">
           <!-- 使用条件渲染显示不同的面板 -->
-          <PropertyPanel
+          <PropertyPanel v-show="!showDocPanel" :componentData="selectedComponentData"
-            v-if="!showDocPanel"
+            :componentConfig="selectedComponentConfig" @updateProp="updateComponentProp"
-            :componentData="selectedComponentData"
+            @updateDirectProp="updateComponentDirectProp" />
-            :componentConfig="selectedComponentConfig"
+          <div v-show="showDocPanel" class="doc-panel overflow-y-auto h-full">
-            @updateProp="updateComponentProp"
-            @updateDirectProp="updateComponentDirectProp"
-          />          <div
-            v-else
-            class="doc-panel overflow-y-auto h-full"
-          >
             <MarkdownRenderer :content="documentContent" />
           </div>
         </div>
       </div>
     </div>
     <!-- 元器件选择组件 -->
-    <ComponentSelector
+    <ComponentSelector :open="showComponentsMenu" @update:open="showComponentsMenu = $event"
-      :open="showComponentsMenu"
+      @add-component="handleAddComponent" @add-template="handleAddTemplate" @close="showComponentsMenu = false" />
-      @update:open="showComponentsMenu = $event"
-      @add-component="handleAddComponent"
-      @add-template="handleAddTemplate"
-      @close="showComponentsMenu = false"
-    />
   </div>
 </template>
 
@@ -80,7 +54,7 @@ const showDocPanel = ref(false);
 const documentContent = ref("");
 
 // 获取路由参数
-import { useRoute } from 'vue-router';
+import { useRoute } from "vue-router";
 const route = useRoute();
 
 // 切换文档面板和属性面板
@@ -97,14 +71,14 @@ async function toggleDocPanel() {
 async function loadDocumentContent() {
   try {
     // 从路由参数中获取教程ID
-    const tutorialId = route.query.tutorial as string || '02'; // 默认加载02例程
+    const tutorialId = (route.query.tutorial as string) || "02"; // 默认加载02例程
 
     // 构建文档路径
     let docPath = `/doc/${tutorialId}/doc.md`;
 
     // 检查当前路径是否包含下划线（例如 02_key 格式）
     // 如果不包含，那么使用更新的命名格式
-    if (!tutorialId.includes('_')) {
+    if (!tutorialId.includes("_")) {
       docPath = `/doc/${tutorialId}/doc.md`;
     }
 
@@ -115,11 +89,14 @@ async function loadDocumentContent() {
     }
 
     // 更新文档内容，并替换图片路径
-    documentContent.value = (await response.text())
+    documentContent.value = (await response.text()).replace(
-      .replace(/.\/images/gi, `/doc/${tutorialId}/images`);
+      /.\/images/gi,
+      `/doc/${tutorialId}/images`,
+    );
   } catch (error) {
-    console.error('加载文档失败:', error);
+    console.error("加载文档失败:", error);
-    documentContent.value = '# 文档加载失败\n\n无法加载请求的文档。';  }
+    documentContent.value = "# 文档加载失败\n\n无法加载请求的文档。";
+  }
 }
 
 // 检查是否有例程参数，如果有则自动打开文档面板
@@ -843,8 +820,10 @@ body {
   padding: 1.5rem;
   max-width: 100%;
   margin: 0;
-  background-color: transparent; /* 使用透明背景 */
+  background-color: transparent;
-  border: none; /* 确保没有边框 */
+  /* 使用透明背景 */
+  border: none;
+  /* 确保没有边框 */
 }
 
 /* 文档切换按钮样式 */