SikongJueluo
/
FPGA_WebLab
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix: marked don't render images

This commit is contained in:
SikongJueluo 2025-05-19 21:56:30 +08:00
parent 0b0b4acb17
commit 7f37514dfa
No known key found for this signature in database
1 changed files with 53 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

67
src/views/ProjectView.vue
View File

@ -1,34 +1,64 @@
<template> <template>
<div class="h-screen flex flex-col overflow-hidden"> <div class="h-screen flex flex-col overflow-hidden">
<div class="flex flex-1 overflow-hidden relative"> <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>
<!-- 拖拽分割线 --> <!-- 拖拽分割线 -->
<div <div
class="resizer bg-base-100 hover:bg-primary hover:opacity-70 active:bg-primary active:opacity-90 transition-colors" 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"> <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"
: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" /> <MarkdownRenderer :content="documentContent" />
</div> </div>
</div> </div>
</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> </div>
</template> </template>
@ -50,7 +80,7 @@ import {
// --- 文档面板控制 --- // --- 文档面板控制 ---
const showDocPanel = ref(false); const showDocPanel = ref(false);
const documentContent = ref(''); const documentContent = ref("");
// 切换文档面板和属性面板 // 切换文档面板和属性面板
async function toggleDocPanel() { async function toggleDocPanel() {
@ -58,8 +88,11 @@ async function toggleDocPanel() {
// 如果切换到文档面板，则获取文档内容 // 如果切换到文档面板，则获取文档内容
if (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; padding: 1rem;
background-color: hsl(var(--b1)); background-color: hsl(var(--b1));
border-radius: 0.5rem; 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> </style>