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

refactor: merge

Browse Source
This commit is contained in:
SikongJueluo
2025-07-09 17:08:12 +08:00
parent 497fa731ca de28471f87
commit 2a766c3f6b
20 changed files with 1002 additions and 988 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/views/AdminView.vue
View File

@@ -115,7 +115,7 @@ import { isNull, isUndefined } from "lodash";
import { ref } from "vue";
import { RemoteUpdateClient } from "@/APIClient";
import { useDialogStore } from "@/stores/dialog";
import { Common } from "@/Common";
import { Common } from "@/utils/Common";
const dialog = useDialogStore();

791
src/views/ProjectView.vue
View File

@@ -1,31 +1,37 @@
<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>
<!-- 拖拽分割线 -->
<div
class="resizer bg-base-100 hover:bg-primary hover:opacity-70 active:bg-primary active:opacity-90 transition-colors"
@mousedown="startResize"></div>
<!-- 右侧编辑区域 -->
<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-show="!showDocPanel" :componentData="selectedComponentData"
:componentConfig="selectedComponentConfig" @updateProp="updateComponentProp"
@updateDirectProp="updateComponentDirectProp" />
<div v-show="showDocPanel" class="doc-panel overflow-y-auto h-full">
<MarkdownRenderer :content="documentContent" />
<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" />
</SplitterPanel>
<!-- 拖拽分割线 -->
<SplitterResizeHandle id="splitter-group-resize-handle" class="w-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"
>
<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>
</div>
</div>
</SplitterPanel>
</SplitterGroup>
</div>
<!-- 元器件选择组件 -->
<ComponentSelector :open="showComponentsMenu" @update:open="showComponentsMenu = $event"
@@ -34,29 +40,26 @@
</template>
<script setup lang="ts">
// 引入wokwi-elements和组件
// import "@wokwi/elements"; // 不再需要全局引入 wokwi
import { ref, computed, onMounted, onUnmounted, shallowRef } from "vue"; // 引入 defineAsyncComponent 和 shallowRef
import DiagramCanvas from "@/components/DiagramCanvas.vue";
import ComponentSelector from "@/components/ComponentSelector.vue";
import { ref, onMounted, watch } from "vue";
import { SplitterGroup, SplitterPanel, SplitterResizeHandle } from "reka-ui";
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 type { DiagramData, DiagramPart } from "@/components/diagramManager";
import {
type PropertyConfig,
generatePropertyConfigs,
generatePropsFromDefault,
generatePropsFromAttrs,
} from "@/components/equipments/componentConfig"; // 引入组件配置工具
// --- 文档面板控制 ---
const showDocPanel = ref(false);
const documentContent = ref("");
import { useProvideComponentManager } from "@/components/LabCanvas";
import type { DiagramData, DiagramPart } from "@/components/LabCanvas";
// 获取路由参数
import { useRoute } from "vue-router";
const route = useRoute();
// 提供组件管理服务
const componentManager = useProvideComponentManager();
// --- 文档面板控制 ---
const showDocPanel = ref(false);
const documentContent = ref("");
// 切换文档面板和属性面板
async function toggleDocPanel() {
showDocPanel.value = !showDocPanel.value;
@@ -99,610 +102,11 @@ async function loadDocumentContent() {
}
}
// 检查是否有例程参数，如果有则自动打开文档面板
onMounted(async () => {
if (route.query.tutorial) {
showDocPanel.value = true;
await loadDocumentContent();
}
});
// --- 元器件管理 ---
// --- UI 状态管理 ---
const showComponentsMenu = ref(false);
const diagramData = ref<DiagramData>({
version: 1,
author: "admin",
editor: "me",
parts: [],
connections: [],
});
const selectedComponentId = ref<string | null>(null);
const selectedComponentData = computed(() => {
return (
diagramData.value.parts.find((p) => p.id === selectedComponentId.value) ||
null
);
});
const diagramCanvas = ref(null);
// 存储动态导入的组件模块
interface ComponentModule {
default: any;
getDefaultProps?: () => Record<string, any>;
config?: {
props?: Array<PropertyConfig>;
};
}
const componentModules = shallowRef<Record<string, ComponentModule>>({});
const selectedComponentConfig = shallowRef<{ props: PropertyConfig[] } | null>(
null,
); // 存储选中组件的配置
// 动态加载组件定义
async function loadComponentModule(type: string) {
if (!componentModules.value[type]) {
try {
// 假设组件都在 src/components/equipments/ 目录下，且文件名与 type 相同
const module = await import(`../components/equipments/${type}.vue`);
// 使用 markRaw 包装模块，避免不必要的响应式处理
componentModules.value = {
...componentModules.value,
[type]: module,
};
// console.log(`Loaded module for ${type}:`, module);
} catch (error) {
console.error(`Failed to load component module ${type}:`, error);
return null;
}
}
return componentModules.value[type];
}
// 处理组件模块加载请求
async function handleLoadComponentModule(type: string) {
// console.log("Handling load component module request for:", type);
await loadComponentModule(type);
}
// --- 分割面板 ---
const leftPanelWidth = ref(60);
const isResizing = ref(false);
// 分割面板拖拽相关函数
function startResize(e: MouseEvent) {
isResizing.value = true;
document.addEventListener("mousemove", onResize);
document.addEventListener("mouseup", stopResize);
e.preventDefault(); // 防止文本选择
}
function onResize(e: MouseEvent) {
if (!isResizing.value) return;
// 获取容器宽度和鼠标位置
const container = document.querySelector(
".flex-1.overflow-hidden",
) as HTMLElement;
if (!container) return;
const containerWidth = container.clientWidth;
const mouseX = e.clientX;
// 计算左侧面板应占的百分比
let newWidth = (mouseX / containerWidth) * 100;
// 限制最小宽度和最大宽度
newWidth = Math.max(20, Math.min(newWidth, 80));
// 更新宽度
leftPanelWidth.value = newWidth;
}
function stopResize() {
isResizing.value = false;
document.removeEventListener("mousemove", onResize);
document.removeEventListener("mouseup", stopResize);
}
// --- 元器件操作 ---
function openComponentsMenu() {
showComponentsMenu.value = true;
}
// 处理 ComponentSelector 组件添加元器件事件
async function handleAddComponent(componentData: {
type: string;
name: string;
props: Record<string, any>;
}) {
// 加载组件模块以便后续使用
const componentModule = await loadComponentModule(componentData.type);
// 获取画布容器和位置信息
const canvasInstance = diagramCanvas.value as any;
// 获取当前画布的位置信息
let position = { x: 100, y: 100 };
let scale = 1;
try {
if (
canvasInstance &&
canvasInstance.getCanvasPosition &&
canvasInstance.getScale
) {
position = canvasInstance.getCanvasPosition();
scale = canvasInstance.getScale();
// 获取画布容器
const canvasContainer = canvasInstance.$el as HTMLElement;
if (canvasContainer) {
// 计算可视区域中心点在画布坐标系中的位置
const viewportWidth = canvasContainer.clientWidth;
const viewportHeight = canvasContainer.clientHeight;
// 计算画布中心点的坐标
position.x = (viewportWidth / 2 - position.x) / scale;
position.y = (viewportHeight / 2 - position.y) / scale;
}
}
} catch (error) {
console.error("获取画布位置时出错:", error);
}
// 添加一些随机偏移，避免元器件重叠
const offsetX = Math.floor(Math.random() * 100) - 50;
const offsetY = Math.floor(Math.random() * 100) - 50;
// 获取组件的能力页面
let capsPage = null;
if (
componentModule &&
componentModule.default &&
typeof componentModule.default.getCapabilities === "function"
) {
try {
capsPage = componentModule.default.getCapabilities();
// console.log(`获取到${componentData.type}组件的能力页面`);
} catch (error) {
// console.error(`获取${componentData.type}组件能力页面失败:`, error);
}
}
// 创建新组件，使用diagramManager接口定义
const newComponent: DiagramPart = {
id: `component-${Date.now()}`,
type: componentData.type,
x: Math.round(position.x + offsetX),
y: Math.round(position.y + offsetY),
attrs: componentData.props,
rotate: 0,
group: "",
positionlock: false,
hidepins: true,
isOn: true,
index: 0,
};
console.log("添加新组件:", newComponent);
// 通过画布实例添加组件
if (
canvasInstance &&
canvasInstance.getDiagramData &&
canvasInstance.updateDiagramDataDirectly
) {
const currentData = canvasInstance.getDiagramData();
currentData.parts.push(newComponent);
canvasInstance.updateDiagramDataDirectly(currentData);
}
}
// 处理模板添加事件
async function handleAddTemplate(templateData: {
id: string;
name: string;
template: any;
}) {
console.log("添加模板:", templateData);
console.log("=== 模板组件数量:", templateData.template?.parts?.length || 0);
// 获取画布实例
const canvasInstance = diagramCanvas.value as any;
if (
!canvasInstance ||
!canvasInstance.getDiagramData ||
!canvasInstance.updateDiagramDataDirectly
) {
console.error("没有可用的画布实例添加模板");
return;
}
// 获取当前图表数据
const currentData = canvasInstance.getDiagramData();
console.log("=== 当前图表组件数量:", currentData.parts.length);
// 生成唯一ID前缀，以确保添加的组件ID不重复
const idPrefix = `template-${Date.now()}-`;
// 处理模板组件并添加到图表
if (templateData.template && templateData.template.parts) {
// 获取当前视口中心位置
let viewportCenter = { x: 300, y: 200 }; // 默认值
try {
if (
canvasInstance &&
canvasInstance.getCanvasPosition &&
canvasInstance.getScale
) {
const position = canvasInstance.getCanvasPosition();
const scale = canvasInstance.getScale();
// 获取画布容器
const canvasContainer = canvasInstance.$el as HTMLElement;
if (canvasContainer) {
// 计算可视区域中心点在画布坐标系中的位置
const viewportWidth = canvasContainer.clientWidth;
const viewportHeight = canvasContainer.clientHeight;
// 计算视口中心点的坐标 (与handleAddComponent函数中的方法相同)
viewportCenter.x = (viewportWidth / 2 - position.x) / scale;
viewportCenter.y = (viewportHeight / 2 - position.y) / scale;
// console.log(
// `=== 计算的视口中心: x=${viewportCenter.x}, y=${viewportCenter.y}, scale=${scale}`,
// );
}
}
} catch (error) {
console.error("获取视口中心位置时出错:", error);
}
// console.log("=== 使用视口中心添加模板组件:", viewportCenter);
// 找到模板中的主要组件（假设是第一个组件）
const mainPart = templateData.template.parts[0];
// 创建带有新位置的组件
const newParts = await Promise.all(
templateData.template.parts.map(async (part: any) => {
// 创建组件副本并分配新ID
const newPart = JSON.parse(JSON.stringify(part));
newPart.id = `${idPrefix}${part.id}`;
// 尝试加载组件模块并获取能力页面
try {
const componentModule = await loadComponentModule(part.type);
if (
componentModule &&
componentModule.default &&
typeof componentModule.default.getCapabilities === "function"
) {
newPart.capsPage = componentModule.default.getCapabilities();
console.log(`加载模板组件${part.type}组件的能力页面成功`);
}
} catch (error) {
console.error(`加载模板组件${part.type}的能力页面失败:`, error);
}
// 计算相对于主要组件的偏移量，保持模板内部组件的相对位置关系
if (typeof newPart.x === "number" && typeof newPart.y === "number") {
const oldX = newPart.x;
const oldY = newPart.y;
// 计算相对位置（相对于主要组件）
const relativeX = part.x - mainPart.x;
const relativeY = part.y - mainPart.y;
// 应用到视口中心位置
newPart.x = viewportCenter.x + relativeX;
newPart.y = viewportCenter.y + relativeY;
// console.log(
// `=== 组件[${newPart.id}]位置调整: (${oldX},${oldY}) -> (${newPart.x},${newPart.y})`,
// );
}
return newPart;
}),
);
// 向图表添加新组件
currentData.parts.push(...newParts);
// 处理连接关系
if (templateData.template.connections) {
// 创建一个映射表用于转换旧组件ID到新组件ID
const idMap: Record<string, string> = {};
templateData.template.parts.forEach((part: any) => {
idMap[part.id] = `${idPrefix}${part.id}`;
});
// 添加连接，更新组件ID引用
const newConnections = templateData.template.connections.map(
(conn: any) => {
// 处理连接数据 (格式为 [from, to, type, path])
if (Array.isArray(conn)) {
const [from, to, type, path] = conn;
// 从连接字符串中提取组件ID和引脚ID
const fromParts = from.split(":");
const toParts = to.split(":");
if (fromParts.length === 2 && toParts.length === 2) {
const fromComponentId = fromParts[0];
const fromPinId = fromParts[1];
const toComponentId = toParts[0];
const toPinId = toParts[1];
// 创建新的连接字符串，使用新的组件ID
const newFrom = `${idMap[fromComponentId] || fromComponentId}:${fromPinId}`;
const newTo = `${idMap[toComponentId] || toComponentId}:${toPinId}`;
return [newFrom, newTo, type, path];
}
}
return conn; // 如果格式不匹配，保持原样
},
);
// 添加到当前连接列表
currentData.connections.push(...newConnections);
}
// 更新图表数据
canvasInstance.updateDiagramDataDirectly(currentData);
console.log("=== 更新图表数据完成，新组件数量:", currentData.parts.length);
// 显示成功消息
showToast(`已添加 ${templateData.name} 模板`, "success");
} else {
console.error("模板格式错误，缺少parts数组");
showToast("模板格式错误", "error");
}
}
// 处理组件选中事件
async function handleComponentSelected(componentData: DiagramPart | null) {
selectedComponentId.value = componentData ? componentData.id : null;
selectedComponentConfig.value = null; // 重置配置
if (componentData) {
// 先加载组件模块
const moduleRef = await loadComponentModule(componentData.type);
if (moduleRef) {
try {
// 创建属性配置数组
const propConfigs: PropertyConfig[] = [];
// 创建一个映射来跟踪已添加的属性名
const addedProps = new Set<string>();
// 1. 首先从getDefaultProps方法获取默认配置
if (typeof moduleRef.getDefaultProps === "function") {
const defaultProps = moduleRef.getDefaultProps();
const defaultPropConfigs = generatePropsFromDefault(defaultProps);
// 添加默认配置并记录属性名
defaultPropConfigs.forEach((config) => {
propConfigs.push(config);
addedProps.add(config.name);
});
}
// 2. 添加组件直接属性，这些属性会覆盖默认配置
const directPropConfigs = generatePropertyConfigs(componentData);
// 过滤掉已经添加过的属性名
const newDirectProps = directPropConfigs.filter(
(config) => !addedProps.has(config.name),
);
propConfigs.push(...newDirectProps);
// 3. 最后添加attrs中的属性
if (componentData.attrs) {
const attrs = componentData.attrs;
const attrPropConfigs = generatePropsFromAttrs(attrs);
// 更新已存在的属性值，或添加新属性
attrPropConfigs.forEach((attrConfig) => {
const existingIndex = propConfigs.findIndex(
(p) => p.name === attrConfig.name,
);
if (existingIndex >= 0) {
// 更新已存在的属性值
propConfigs[existingIndex] = attrConfig;
} else {
// 添加新属性
propConfigs.push(attrConfig);
}
});
}
selectedComponentConfig.value = { props: propConfigs };
console.log(
`Built config for ${componentData.type}:`,
selectedComponentConfig.value,
);
} catch (error) {
console.error(
`Error building config for ${componentData.type}:`,
error,
);
selectedComponentConfig.value = { props: [] };
}
} else {
console.warn(`Module for component ${componentData.type} not found.`);
selectedComponentConfig.value = { props: [] };
}
}
}
// 处理图表数据更新事件
function handleDiagramUpdated(data: DiagramData) {
diagramData.value = data;
}
// 处理组件移动事件
function handleComponentMoved(moveData: { id: string; x: number; y: number }) {
const part = diagramData.value.parts.find((p) => p.id === moveData.id);
if (part) {
part.x = moveData.x;
part.y = moveData.y;
}
}
// 处理组件删除事件
function handleComponentDelete(componentId: string) {
// 查找要删除的组件
const component = diagramData.value.parts.find((p) => p.id === componentId);
if (!component) return;
// 收集需要删除的组件ID列表（包括当前组件和同组组件）
const componentsToDelete: string[] = [componentId];
// 如果组件属于一个组，则找出所有同组的组件
if (component.group && component.group !== "") {
const groupMembers = diagramData.value.parts.filter(
(p) => p.group === component.group && p.id !== componentId,
);
// 将同组组件ID添加到删除列表
componentsToDelete.push(...groupMembers.map((p) => p.id));
console.log(
`删除组件 ${componentId} 及其组 ${component.group} 中的 ${groupMembers.length} 个组件`,
);
}
// 删除所有标记的组件
diagramData.value.parts = diagramData.value.parts.filter(
(p) => !componentsToDelete.includes(p.id),
);
// 同时删除与这些组件相关的所有连接
diagramData.value.connections = diagramData.value.connections.filter(
(connection) => {
for (const id of componentsToDelete) {
if (
connection[0].startsWith(`${id}:`) ||
connection[1].startsWith(`${id}:`)
) {
return false;
}
}
return true;
},
);
// 如果删除的是当前选中的组件，清除选中状态
if (
selectedComponentId.value &&
componentsToDelete.includes(selectedComponentId.value)
) {
selectedComponentId.value = null;
selectedComponentConfig.value = null;
}
}
// 更新组件属性的方法
function updateComponentProp(
componentId: string,
propName: string,
value: any,
) {
const canvasInstance = diagramCanvas.value as any;
if (
!canvasInstance ||
!canvasInstance.getDiagramData ||
!canvasInstance.updateDiagramDataDirectly
) {
console.error("没有可用的画布实例进行属性更新");
return;
}
// 检查值是否为对象，如果是对象并有value属性，则使用该属性值
if (value !== null && typeof value === "object" && "value" in value) {
value = value.value;
}
const currentData = canvasInstance.getDiagramData();
const part = currentData.parts.find((p: DiagramPart) => p.id === componentId);
if (part) {
// 检查是否为基本属性
if (propName in part) {
(part as any)[propName] = value;
} else {
// 否则当作attrs中的属性处理
if (!part.attrs) {
part.attrs = {};
}
part.attrs[propName] = value;
}
canvasInstance.updateDiagramDataDirectly(currentData);
console.log(
`更新组件${componentId}的属性${propName}为:`,
value,
typeof value,
);
}
}
// 更新组件的直接属性
function updateComponentDirectProp(
componentId: string,
propName: string,
value: any,
) {
const canvasInstance = diagramCanvas.value as any;
if (
!canvasInstance ||
!canvasInstance.getDiagramData ||
!canvasInstance.updateDiagramDataDirectly
) {
console.error("没有可用的画布实例进行属性更新");
return;
}
const currentData = canvasInstance.getDiagramData();
const part = currentData.parts.find((p: DiagramPart) => p.id === componentId);
if (part) {
// @ts-ignore: 动态属性赋值
part[propName] = value;
canvasInstance.updateDiagramDataDirectly(currentData);
console.log(
`更新组件${componentId}的直接属性${propName}为:`,
value,
typeof value,
);
}
}
// 专门用于更新组件的显示层级 - 这个方法可以删除，直接使用updateComponentProp即可
// 处理连线创建事件
function handleWireCreated(wireData: any) {
console.log("Wire created:", wireData);
}
// 处理连线删除事件
function handleWireDeleted(wireId: string) {
console.log("Wire deleted:", wireId);
}
// 导出当前diagram数据
function exportDiagram() {
// 直接使用DiagramCanvas组件提供的导出功能
const canvasInstance = diagramCanvas.value as any;
if (canvasInstance && canvasInstance.exportDiagram) {
canvasInstance.exportDiagram();
}
}
// --- 消息提示 ---
// --- 页面动画和通知 ---
const showNotification = ref(false);
const notificationMessage = ref("");
const notificationType = ref<"success" | "error" | "info">("info");
@@ -727,41 +131,68 @@ function showToast(
}, duration);
}
}
// 显示通知
// --- 组件属性处理辅助函数 ---
// 直接使用 componentConfig.ts 中导入的 getPropValue 函数
// --- 事件处理器（委托给组件管理器） ---
function openComponentsMenu() {
showComponentsMenu.value = true;
}
// 处理 ComponentSelector 组件添加元器件事件
async function handleAddComponent(componentData: {
type: string;
name: string;
props: Record<string, any>;
}) {
await componentManager.addComponent(componentData);
}
// 处理模板添加事件
async function handleAddTemplate(templateData: {
id: string;
name: string;
template: any;
}) {
const result = await componentManager.addTemplate(templateData);
if (result) {
showToast(result.message, result.success ? "success" : "error");
}
}
// 处理图表数据更新事件
function handleDiagramUpdated(data: DiagramData) {
console.log("Diagram data updated:", data);
}
// 更新组件属性的方法 - 委托给componentManager
function updateComponentProp(
componentId: string,
propName: string,
value: any,
) {
componentManager.updateComponentProp(componentId, propName, value);
}
// 更新组件的直接属性 - 委托给componentManager
function updateComponentDirectProp(
componentId: string,
propName: string,
value: any,
) {
componentManager.updateComponentDirectProp(componentId, propName, value);
}
// --- 生命周期钩子 ---
onMounted(async () => {
// 初始化画布设置
console.log("ProjectView mounted, diagram canvas ref:", diagramCanvas.value);
// 获取初始图表数据
const canvasInstance = diagramCanvas.value as any;
if (canvasInstance && canvasInstance.getDiagramData) {
diagramData.value = canvasInstance.getDiagramData();
// 预加载所有使用的组件模块，以确保它们在渲染时可用
const componentTypes = new Set<string>();
diagramData.value.parts.forEach((part) => {
componentTypes.add(part.type);
});
console.log("Preloading component modules:", Array.from(componentTypes));
// 并行加载所有组件模块
await Promise.all(
Array.from(componentTypes).map((type) => loadComponentModule(type)),
);
console.log("All component modules loaded");
// 检查是否有例程参数，如果有则自动打开文档面板
if (route.query.tutorial) {
showDocPanel.value = true;
await loadDocumentContent();
}
});
onUnmounted(() => {
document.removeEventListener("mousemove", onResize);
document.removeEventListener("mouseup", stopResize);
// 设置画布引用并初始化组件管理器
componentManager.setCanvasRef(diagramCanvas.value);
await componentManager.initialize();
});
</script>
@@ -769,26 +200,6 @@ onUnmounted(() => {
/* 样式保持不变 */
@import "../assets/main.css";
/* 分割线样式 */
.resizer {
width: 6px;
height: 100%;
cursor: col-resize;
transition: background-color 0.3s;
z-index: 10;
}
.resizer:hover,
.resizer:active {
width: 6px;
}
/* 调整大小时应用全局样式 */
:global(body.resizing) {
cursor: col-resize;
user-select: none;
}
.animate-slideRight {
animation: slideRight 0.3s ease-out forwards;
}

96
src/views/TestView.vue
View File

@@ -1,99 +1,5 @@
<template>
<div class="flex w-screen h-screen justify-center">
<div class="flex flex-col w-3/5 h-screen shadow-2xl p-10">
<div class="flex justify-center">
<h1 class="font-bold text-3xl">Jtag 下载</h1>
</div>
<div class="divider"></div>
<div class="w-full">
<div class="collapse bg-primary">
<input type="checkbox" />
<div class="collapse-title font-semibold text-lg text-white">
自定义开发板参数
</div>
<div class="collapse-content bg-primary-content text-sm">
<div class="form-control w-full my-3">
<label class="label">
<span class="label-text text-gray-700">开发板IP地址</span>
</label>
<label class="input w-full">
<img class="h-[1em] opacity-50" src="@/assets/pwd.svg" alt="User img" />
<input type="text" class="grow" placeholder="IP地址" v-model="boardAddress" />
</label>
</div>
<div class="form-control w-full my-3">
<label class="label">
<span class="label-text text-gray-700">开发板端口号</span>
</label>
<label class="input w-full">
<img class="h-[1em] opacity-50" src="@/assets/pwd.svg" alt="User img" />
<input type="text" class="grow" placeholder="端口号" v-model="boardPort" />
</label>
</div>
</div>
</div>
</div>
<div class="divider"></div>
<UploadCard :upload-event="uploadBitstream" :download-event="downloadBitstream">
</UploadCard>
</div>
</div>
</template>
<script setup lang="ts">
import { JtagClient, type FileParameter } from "@/APIClient";
import UploadCard from "@/components/UploadCard.vue";
import { useDialogStore } from "@/stores/dialog";
import { Common } from "@/Common";
import { toNumber, isUndefined } from "lodash";
import { ref } from "vue";
const jtagController = new JtagClient();
const dialog = useDialogStore();
// Models with default values
const boardAddress = ref("127.0.0.1"); // 默认IP地址
const boardPort = ref("1234"); // 默认端口号
async function uploadBitstream(bitstream: File): Promise<boolean> {
if (isUndefined(boardAddress.value) || isUndefined(boardPort.value)) {
dialog.error("开发板地址或端口空缺");
return false;
}
try {
const resp = await jtagController.uploadBitstream(
boardAddress.value,
Common.toFileParameterOrNull(bitstream),
);
return resp;
} catch (e) {
dialog.error("上传错误");
console.error(e);
return false;
}
}
async function downloadBitstream(): Promise<boolean> {
if (isUndefined(boardAddress.value) || isUndefined(boardPort.value)) {
dialog.error("开发板地址或端口空缺");
return false;
}
try {
const resp = await jtagController.downloadBitstream(
boardAddress.value,
toNumber(boardPort.value),
);
return resp;
} catch (e) {
dialog.error("上传错误");
console.error(e);
return false;
}
}
</script>
<style scoped lang="postcss">
@import "../assets/main.css";
</style>
</script>