add: 添加实验列表界面，实验增删完全依赖数据库实现

src/components/LabCanvas/DiagramCanvas.vue

@@ -119,6 +119,7 @@
             componentManager.prepareComponentProps(
               component.attrs || {},
               component.id,
+              props.examId,
             )
           "
           @update:bindKey="
@@ -175,9 +176,7 @@ import {
   ref,
   reactive,
   onMounted,
-  onUnmounted,
   computed,
-  watch,
   provide,
 } from "vue";
 import { useEventListener } from "@vueuse/core";
@@ -217,6 +216,7 @@ const emit = defineEmits(["toggle-doc-panel", "open-components"]);
 // 定义组件接受的属性
 const props = defineProps<{
   showDocPanel?: boolean; // 添加属性接收文档面板的显示状态
+  examId?: string; // 新增examId属性
 }>();
 
 // 获取componentManager实例
@@ -977,7 +977,8 @@ function exportDiagram() {
 onMounted(async () => {
   // 加载图表数据
   try {
-    diagramData.value = await loadDiagramData();
+    // 传入examId参数，让diagramManager处理动态加载
+    diagramData.value = await loadDiagramData(props.examId);
 
     // 预加载所有组件模块
     const componentTypes = new Set<string>();

src/components/LabCanvas/composable/componentManager.ts

@@ -763,11 +763,15 @@ const [useProvideComponentManager, useComponentManager] = createInjectionState(
     function prepareComponentProps(
       attrs: Record<string, any>,
       componentId?: string,
+      examId?: string,
     ): Record<string, any> {
       const result: Record<string, any> = { ...attrs };
       if (componentId) {
         result.componentId = componentId;
       }
+      if (examId) {
+        result.examId = examId;
+      }
       return result;
     }
 

src/components/LabCanvas/composable/diagramManager.ts

@@ -26,6 +26,8 @@ export interface DiagramPart {
 // 连接类型定义 - 使用元组类型表示四元素数组
 export type ConnectionArray = [string, string, number, string[]];
 
+import { AuthManager } from '@/utils/AuthManager';
+
 // 解析连接字符串为组件ID和引脚ID
 export function parseConnectionPin(connectionPin: string): { componentId: string; pinId: string } {
   const [componentId, pinId] = connectionPin.split(':');
@@ -80,22 +82,72 @@ export interface WireItem {
   showLabel: boolean;
 }
 
-// 从本地存储加载图表数据
-export async function loadDiagramData(): Promise<DiagramData> {
+// 从本地存储或动态API加载图表数据
+export async function loadDiagramData(examId?: string): Promise<DiagramData> {
   try {
-    // 先尝试从本地存储加载
-    const savedData = localStorage.getItem('diagramData');
-    if (savedData) {
-      return JSON.parse(savedData);
+    // 如果提供了examId，优先从API加载实验的diagram
+    if (examId) {
+      try {
+        const examClient = AuthManager.createAuthenticatedExamClient();
+        
+        // 获取diagram类型的资源列表
+        const resources = await examClient.getExamResourceList(examId, 'canvas');
+        
+        if (resources && resources.length > 0) {
+          // 获取第一个diagram资源
+          const diagramResource = resources[0];
+          
+          // 使用动态API获取资源文件内容
+          const response = await examClient.getExamResourceById(diagramResource.id);
+          
+          if (response && response.data) {
+            const text = await response.data.text();
+            const data = JSON.parse(text);
+            
+            // 验证数据格式
+            const validation = validateDiagramData(data);
+            if (validation.isValid) {
+              console.log('成功从API加载实验diagram:', examId);
+              return data;
+            } else {
+              console.warn('API返回的diagram数据格式无效:', validation.errors);
+            }
+          }
+        } else {
+          console.log('未找到实验diagram资源，使用默认加载方式');
+        }
+      } catch (error) {
+        console.warn('从API加载实验diagram失败，使用默认加载方式:', error);
+      }
     }
     
-    // 如果本地存储没有，从文件加载
+    // 如果没有examId或API加载失败，尝试从本地存储加载
+    const savedData = localStorage.getItem('diagramData');
+    if (savedData) {
+      const data = JSON.parse(savedData);
+      const validation = validateDiagramData(data);
+      if (validation.isValid) {
+        return data;
+      } else {
+        console.warn('本地存储的diagram数据格式无效:', validation.errors);
+      }
+    }
+    
+    // 如果本地存储也没有，从静态文件加载（作为最后的备选）
     const response = await fetch('/src/components/diagram.json');
     if (!response.ok) {
       throw new Error(`Failed to load diagram.json: ${response.statusText}`);
     }
     const data = await response.json();
-    return data;
+    
+    // 验证静态文件数据
+    const validation = validateDiagramData(data);
+    if (validation.isValid) {
+      return data;
+    } else {
+      console.warn('静态diagram文件数据格式无效:', validation.errors);
+      throw new Error('所有diagram数据源都无效');
+    }
   } catch (error) {
     console.error('Error loading diagram data:', error);
     // 返回空的默认数据结构