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

feat: 添加功能底栏

Browse Source
This commit is contained in:
SikongJueluo
2025-07-09 20:48:11 +08:00
parent cbb3543c4a
commit bbad7388d8
5 changed files with 163 additions and 73 deletions
Download Patch File Download Diff File Expand all files Collapse all files

141
src/views/ProjectView.vue
View File

@@ -1,41 +1,89 @@
<template>
<div class="h-screen flex flex-col overflow-hidden">
<div class="flex flex-1 overflow-hidden relative">
<SplitterGroup id="splitter-group" direction="horizontal" class="w-full h-full">
<!-- 左侧图形化区域 -->
<SplitterPanel
id="splitter-group-panel-canvas"
:default-size="60"
:min-size="30"
class="relative bg-base-200 overflow-hidden h-full"
>
<DiagramCanvas ref="diagramCanvas" :showDocPanel="showDocPanel"
@diagram-updated="handleDiagramUpdated" @open-components="openComponentsMenu"
@toggle-doc-panel="toggleDocPanel" />
<SplitterGroup
id="splitter-group-v"
direction="vertical"
class="w-full h-full"
>
<SplitterPanel id="splitter-group-v-panel-project">
<SplitterGroup
id="splitter-group-h"
direction="horizontal"
class="w-full h-full"
>
<!-- 左侧图形化区域 -->
<SplitterPanel
id="splitter-group-h-panel-canvas"
:default-size="60"
:min-size="30"
class="relative bg-base-200 overflow-hidden h-full"
>
<DiagramCanvas
ref="diagramCanvas"
:showDocPanel="showDocPanel"
@diagram-updated="handleDiagramUpdated"
@open-components="openComponentsMenu"
@toggle-doc-panel="toggleDocPanel"
/>
</SplitterPanel>
<!-- 拖拽分割线 -->
<SplitterResizeHandle
id="splitter-group-h-resize-handle"
class="w-2 bg-base-100 hover:bg-primary hover:opacity-70 transition-colors"
/>
<!-- 右侧编辑区域 -->
<SplitterPanel
id="splitter-group-h-panel-properties"
:min-size="20"
class="bg-base-200 h-full overflow-hidden flex flex-col"
>
<div class="overflow-y-auto flex-1">
<!-- 使用条件渲染显示不同的面板 -->
<PropertyPanel
v-show="!showDocPanel"
:componentData="componentManager.selectedComponentData.value"
:componentConfig="
componentManager.selectedComponentConfig.value
"
@updateProp="updateComponentProp"
@updateDirectProp="updateComponentDirectProp"
/>
<div
v-show="showDocPanel"
class="doc-panel overflow-y-auto h-full"
>
<MarkdownRenderer :content="documentContent" />
</div>
</div>
</SplitterPanel>
</SplitterGroup>
</SplitterPanel>
<!-- 拖拽分割线 -->
<SplitterResizeHandle id="splitter-group-resize-handle" class="w-2 bg-base-100 hover:bg-primary hover:opacity-70 transition-colors" />
<!-- 右侧编辑区域 -->
<SplitterResizeHandle
id="splitter-group-v-resize-handle"
class="h-2 bg-base-100 hover:bg-primary hover:opacity-70 transition-colors"
/>
<!-- 功能底栏 -->
<SplitterPanel
id="splitter-group-panel-properties"
:min-size="20"
class="bg-base-200 h-full overflow-hidden flex flex-col"
id="splitter-group-v-panel-bar"
:default-size="20"
:min-size="15"
class="w-full overflow-hidden"
>
<div class="overflow-y-auto flex-1">
<!-- 使用条件渲染显示不同的面板 -->
<PropertyPanel v-show="!showDocPanel" :componentData="componentManager.selectedComponentData.value"
:componentConfig="componentManager.selectedComponentConfig.value" @updateProp="updateComponentProp"
@updateDirectProp="updateComponentDirectProp" />
<div v-show="showDocPanel" class="doc-panel overflow-y-auto h-full">
<MarkdownRenderer :content="documentContent" />
</div>
</div>
<FunctionBar class="mx-4 mt-1" />
</SplitterPanel>
</SplitterGroup>
</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>
@@ -46,16 +94,19 @@ import DiagramCanvas from "@/components/LabCanvas/DiagramCanvas.vue";
import ComponentSelector from "@/components/LabCanvas/ComponentSelector.vue";
import PropertyPanel from "@/components/PropertyPanel.vue";
import MarkdownRenderer from "@/components/MarkdownRenderer.vue";
import FunctionBar from "@/components/FunctionBar.vue";
import { useProvideComponentManager } from "@/components/LabCanvas";
import type { DiagramData, DiagramPart } from "@/components/LabCanvas";
import type { DiagramData } from "@/components/LabCanvas";
import { useAlertStore } from "@/components/Alert";
// 获取路由参数
import { useRoute } from "vue-router";
const route = useRoute();
// 提供组件管理服务
const componentManager = useProvideComponentManager();
const alert = useAlertStore();
// --- 文档面板控制 ---
const showDocPanel = ref(false);
const documentContent = ref("");
@@ -106,34 +157,6 @@ async function loadDocumentContent() {
const showComponentsMenu = ref(false);
const diagramCanvas = ref(null);
// --- 页面动画和通知 ---
const showNotification = ref(false);
const notificationMessage = ref("");
const notificationType = ref<"success" | "error" | "info">("info");
function showToast(
message: string,
type: "success" | "error" | "info" = "info",
duration = 3000,
) {
const canvasInstance = diagramCanvas.value as any;
if (canvasInstance && canvasInstance.showToast) {
canvasInstance.showToast(message, type, duration);
} else {
// 后备方案：使用原来的通知系统
notificationMessage.value = message;
notificationType.value = type;
showNotification.value = true;
// 设置自动消失
setTimeout(() => {
showNotification.value = false;
}, duration);
}
}
// --- 事件处理器（委托给组件管理器） ---
function openComponentsMenu() {
showComponentsMenu.value = true;
}
@@ -155,7 +178,7 @@ async function handleAddTemplate(templateData: {
}) {
const result = await componentManager.addTemplate(templateData);
if (result) {
showToast(result.message, result.success ? "success" : "error");
alert?.show(result.message, result.success ? "success" : "error");
}
}