fix: marked don't render images

package-lock.json

@@ -10,7 +10,6 @@
       "dependencies": {
         "@svgdotjs/svg.js": "^3.2.4",
         "@types/lodash": "^4.17.16",
-        "all": "^0.0.0",
         "async-mutex": "^0.5.0",
         "lodash": "^4.17.21",
         "log-symbols": "^7.0.0",
@@ -1996,12 +1995,6 @@
       "dev": true,
       "license": "MIT"
     },
-    "node_modules/all": {
-      "version": "0.0.0",
-      "resolved": "https://registry.npmjs.org/all/-/all-0.0.0.tgz",
-      "integrity": "sha512-0oKlfNVv2d+d7c1gwjGspzgbwot47PGQ4b3v1ccx4mR8l9P/Y6E6Dr/yE8lNT63EcAKEbHo6UG3odDpC/NQcKw==",
-      "license": "MIT"
-    },
     "node_modules/ansi-styles": {
       "version": "6.2.1",
       "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-6.2.1.tgz",

package.json

@@ -16,7 +16,6 @@
   "dependencies": {
     "@svgdotjs/svg.js": "^3.2.4",
     "@types/lodash": "^4.17.16",
-    "all": "^0.0.0",
     "async-mutex": "^0.5.0",
     "lodash": "^4.17.21",
     "log-symbols": "^7.0.0",

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"
+      <div
-          @component-selected="handleComponentSelected" @component-moved="handleComponentMoved"
+        class="relative bg-base-200 overflow-hidden h-full"
-          @component-delete="handleComponentDelete" @wire-created="handleWireCreated" @wire-deleted="handleWireDeleted"
+        :style="{ width: leftPanelWidth + '%' }"
-          @diagram-updated="handleDiagramUpdated" @open-components="openComponentsMenu"
+      >
-          @load-component-module="handleLoadComponentModule" @toggle-doc-panel="toggleDocPanel" />
+        <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"
+          <PropertyPanel
-            @updateProp="updateComponentProp" @updateDirectProp="updateComponentDirectProp" />
+            v-if="!showDocPanel"
-            <div v-else class="doc-panel overflow-y-auto bg-base-100 rounded-md h-full">
+            :componentData="selectedComponentData"
-              <MarkdownRenderer :content="documentContent" />
+            :componentConfig="selectedComponentConfig"
-            </div>
+            @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"
+    <ComponentSelector
-      @add-component="handleAddComponent" @add-template="handleAddTemplate" @close="showComponentsMenu = false" />
+      :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");
+    const response = await fetch("/doc/01_water_led/water_led.md");
-    documentContent.value = await response.text();
+    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>