add: markdown viewer

src/components/DiagramCanvas.vue

@@ -3,8 +3,7 @@
       @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" stroke="currentColor">
@@ -23,6 +22,11 @@
           <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4" />
         </svg>
         添加组件
+      </button>      <button class="btn btn-sm btn-primary" @click="emit('toggle-doc-panel')">
+        <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 mr-1" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+          <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 ? '属性面板' : '文档' }}
       </button>
     </div>
     
@@ -148,11 +152,12 @@ function handleContextMenu(e: MouseEvent) {
 }
 
 // 定义组件发出的事件
-const emit = defineEmits(['diagram-updated', 'component-selected', 'component-moved', 'component-delete', 'wire-created', 'wire-deleted', 'load-component-module', 'open-components']);
+const emit = defineEmits(['diagram-updated', 'component-selected', 'component-moved', 'component-delete', 'wire-created', 'wire-deleted', 'load-component-module', 'open-components', 'toggle-doc-panel']);
 
 // 定义组件接受的属性
 const props = defineProps<{
-  componentModules: Record<string, any>
+  componentModules: Record<string, any>;
+  showDocPanel?: boolean;  // 添加属性接收文档面板的显示状态
 }>();
 
 // --- 画布状态 ---