fix: jam when doc panel open

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
-        class="relative bg-base-200 overflow-hidden h-full"
-        :style="{ width: leftPanelWidth + '%' }"
-      >
-        <DiagramCanvas
-          ref="diagramCanvas"
-          :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 class="relative bg-base-200 overflow-hidden h-full" :style="{ width: leftPanelWidth + '%' }">
+        <DiagramCanvas ref="diagramCanvas" :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"
-      ></div>      <!-- 右侧编辑区域 -->
-      <div
-        class="bg-base-200 h-full overflow-hidden flex flex-col"
-        :style="{ width: 100 - leftPanelWidth + '%' }"
-      >
+        @mousedown="startResize"></div>
+      <!-- 右侧编辑区域 -->
+      <div class="bg-base-200 h-full overflow-hidden flex flex-col" :style="{ width: 100 - leftPanelWidth + '%' }">
         <div class="overflow-y-auto flex-1">
           <!-- 使用条件渲染显示不同的面板 -->
-          <PropertyPanel
-            v-if="!showDocPanel"
-            :componentData="selectedComponentData"
-            :componentConfig="selectedComponentConfig"
-            @updateProp="updateComponentProp"
-            @updateDirectProp="updateComponentDirectProp"
-          />          <div
-            v-else
-            class="doc-panel overflow-y-auto h-full"
-          >
+          <PropertyPanel v-show="!showDocPanel" :componentData="selectedComponentData"
+            :componentConfig="selectedComponentConfig" @updateProp="updateComponentProp"
+            @updateDirectProp="updateComponentDirectProp" />
+          <div v-show="showDocPanel" class="doc-panel overflow-y-auto h-full">
             <MarkdownRenderer :content="documentContent" />
           </div>
         </div>
       </div>
     </div>
     <!-- 元器件选择组件 -->
-    <ComponentSelector
-      :open="showComponentsMenu"
-      @update:open="showComponentsMenu = $event"
-      @add-component="handleAddComponent"
-      @add-template="handleAddTemplate"
-      @close="showComponentsMenu = false"
-    />
+    <ComponentSelector :open="showComponentsMenu" @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,29 +71,32 @@ 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`;
     }
-    
+
     // 获取文档内容
     const response = await fetch(docPath);
     if (!response.ok) {
       throw new Error(`Failed to load document: ${response.status}`);
     }
-    
+
     // 更新文档内容，并替换图片路径
-    documentContent.value = (await response.text())
-      .replace(/.\/images/gi, `/doc/${tutorialId}/images`);
+    documentContent.value = (await response.text()).replace(
+      /.\/images/gi,
+      `/doc/${tutorialId}/images`,
+    );
   } catch (error) {
-    console.error('加载文档失败:', error);
-    documentContent.value = '# 文档加载失败\n\n无法加载请求的文档。';  }
+    console.error("加载文档失败:", error);
+    documentContent.value = "# 文档加载失败\n\n无法加载请求的文档。";
+  }
 }
 
 // 检查是否有例程参数，如果有则自动打开文档面板
@@ -843,8 +820,10 @@ body {
   padding: 1.5rem;
   max-width: 100%;
   margin: 0;
-  background-color: transparent; /* 使用透明背景 */
-  border: none; /* 确保没有边框 */
+  background-color: transparent;
+  /* 使用透明背景 */
+  border: none;
+  /* 确保没有边框 */
 }
 
 /* 文档切换按钮样式 */