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

65
src/views/ProjectView.vue
View File

@ -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">
<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,7 +80,7 @@ import {
// --- 文档面板控制 ---
const showDocPanel = ref(false);
const documentContent = ref('');
const documentContent = ref("");
// 切换文档面板和属性面板
async function toggleDocPanel() {
@ -58,8 +88,11 @@ async function toggleDocPanel() {
// 如果切换到文档面板，则获取文档内容
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",
);
}
}