fix: marked don't render images

src/views/ProjectView.vue

@@ -1,34 +1,64 @@
 <template>
   <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>
+        @mousedown="startResize"
+      ></div>
 
       <!-- 右侧编辑区域 -->
-      <div class="bg-base-200 h-full overflow-hidden flex flex-col" :style="{ width: 100 - leftPanelWidth + '%' }">
+      <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 bg-base-100 rounded-md h-full">
-              <MarkdownRenderer :content="documentContent" />
-            </div>
+          <PropertyPanel
+            v-if="!showDocPanel"
+            :componentData="selectedComponentData"
+            :componentConfig="selectedComponentConfig"
+            @updateProp="updateComponentProp"
+            @updateDirectProp="updateComponentDirectProp"
+          />
+          <div
+            v-else
+            class="doc-panel overflow-y-auto bg-base-100 rounded-md 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>
 
@@ -50,16 +80,19 @@ import {
 
 // --- 文档面板控制 ---
 const showDocPanel = ref(false);
-const documentContent = ref('');
+const documentContent = ref("");
 
 // 切换文档面板和属性面板
 async function toggleDocPanel() {
   showDocPanel.value = !showDocPanel.value;
-  
+
   // 如果切换到文档面板，则获取文档内容
   if (showDocPanel.value) {
-    const response = await fetch("/public/doc/01_water_led/water_led.md");
-    documentContent.value = await response.text();
+    const response = await fetch("/doc/01_water_led/water_led.md");
+    documentContent.value = (await response.text()).replace(
+      /.\/images/gi,
+      "/doc/01_water_led/images",
+    );
   }
 }
 
@@ -791,6 +824,6 @@ body {
   padding: 1rem;
   background-color: hsl(var(--b1));
   border-radius: 0.5rem;
-  box-shadow: 0 1px 3px rgba(0,0,0,0.1);
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
 }
 </style>