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

src/views/Project/Index.vue

@@ -29,6 +29,7 @@
               <DiagramCanvas
                 ref="diagramCanvas"
                 :showDocPanel="showDocPanel"
+                :exam-id="(route.query.examId as string) || ''"
                 @open-components="openComponentsMenu"
                 @toggle-doc-panel="toggleDocPanel"
               />
@@ -59,7 +60,10 @@
                   v-show="showDocPanel"
                   class="doc-panel overflow-y-auto h-full"
                 >
-                  <MarkdownRenderer :content="documentContent" />
+                  <MarkdownRenderer 
+                    :content="documentContent" 
+                    :examId="(route.query.examId as string) || ''"
+                  />
                 </div>
               </div>
             </SplitterPanel>
@@ -115,7 +119,6 @@ import MarkdownRenderer from "@/components/MarkdownRenderer.vue";
 import BottomBar from "@/views/Project/BottomBar.vue";
 import RequestBoardDialog from "@/views/Project/RequestBoardDialog.vue";
 import { useProvideComponentManager } from "@/components/LabCanvas";
-import type { DiagramData } from "@/components/LabCanvas";
 import { useAlertStore } from "@/components/Alert";
 import { AuthManager } from "@/utils/AuthManager";
 import { useEquipments } from "@/stores/equipments";
@@ -182,29 +185,37 @@ async function toggleDocPanel() {
 // 加载文档内容
 async function loadDocumentContent() {
   try {
-    // 从路由参数中获取教程ID
-    const tutorialId = (route.query.tutorial as string) || "02"; // 默认加载02例程
-
-    // 构建文档路径
-    let docPath = `/doc/${tutorialId}/doc.md`;
-
-    // 检查当前路径是否包含下划线（例如 02_key 格式）
-    // 如果不包含，那么使用更新的命名格式
-    if (!tutorialId.includes("_")) {
-      docPath = `/doc/${tutorialId}/doc.md`;
+    // 检查是否有实验ID参数
+    const examId = route.query.examId as string;
+    if (examId) {
+      // 如果有实验ID，从API加载实验文档
+      console.log('加载实验文档:', examId);
+      const client = AuthManager.createAuthenticatedExamClient();
+      
+      // 获取markdown类型的资源列表
+      const resources = await client.getExamResourceList(examId, 'doc');
+      
+      if (resources && resources.length > 0) {
+        // 获取第一个markdown资源
+        const markdownResource = resources[0];
+        
+        // 使用动态API获取资源文件内容
+        const response = await client.getExamResourceById(markdownResource.id);
+        
+        if (!response || !response.data) {
+          throw new Error('获取markdown文件失败');
+        }
+        
+        const content = await response.data.text();
+        
+        // 更新文档内容，暂时不处理图片路径，由MarkdownRenderer处理
+        documentContent.value = content;
+      } else {
+        documentContent.value = "# 暂无实验文档\n\n该实验尚未提供文档内容。";
+      }
+    } else {
+      documentContent.value = "# 无文档";
     }
-
-    // 获取文档内容
-    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`,
-    );
   } catch (error) {
     console.error("加载文档失败:", error);
     documentContent.value = "# 文档加载失败\n\n无法加载请求的文档。";
@@ -312,8 +323,8 @@ onMounted(async () => {
   // 检查并初始化用户实验板
   await checkAndInitializeBoard();
 
-  // 检查是否有例程参数，如果有则自动打开文档面板
-  if (route.query.tutorial) {
+  // 检查是否有例程参数或实验ID参数，如果有则自动打开文档面板
+  if (route.query.tutorial || route.query.examId) {
     showDocPanel.value = true;
     await loadDocumentContent();
   }