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

56
components.d.ts vendored Normal file
View File

@@ -0,0 +1,56 @@
/* eslint-disable */
// @ts-nocheck
// Generated by unplugin-vue-components
// Read more: https://github.com/vuejs/core/pull/3399
// biome-ignore lint: disable
export {}
/* prettier-ignore */
declare module 'vue' {
export interface GlobalComponents {
BaseBoard: typeof import('./src/components/equipments/BaseBoard.vue')['default']
Canvas: typeof import('./src/components/Canvas.vue')['default']
CollapsibleSection: typeof import('./src/components/CollapsibleSection.vue')['default']
ComponentSelector: typeof import('./src/components/LabCanvas/ComponentSelector.vue')['default']
DDR: typeof import('./src/components/equipments/DDR.vue')['default']
DDS: typeof import('./src/components/equipments/DDS.vue')['default']
DDSPropertyEditor: typeof import('./src/components/equipments/DDSPropertyEditor.vue')['default']
DiagramCanvas: typeof import('./src/components/LabCanvas/DiagramCanvas.vue')['default']
Dialog: typeof import('./src/components/Dialog.vue')['default']
ETH: typeof import('./src/components/equipments/ETH.vue')['default']
HDMI: typeof import('./src/components/equipments/HDMI.vue')['default']
LabCanvas: typeof import('./src/components/LabCanvasNew/LabCanvas.vue')['default']
LabCanvasNew: typeof import('./src/components/LabCanvas/LabCanvasNew.vue')['default']
LabComponentsDrawer: typeof import('./src/components/LabCanvasNew/LabComponentsDrawer.vue')['default']
LabComponentsDrawerNew: typeof import('./src/components/LabCanvas/LabComponentsDrawerNew.vue')['default']
LoginCard: typeof import('./src/components/LoginCard.vue')['default']
MarkdownRenderer: typeof import('./src/components/MarkdownRenderer.vue')['default']
MechanicalButton: typeof import('./src/components/equipments/MechanicalButton.vue')['default']
MotherBoard: typeof import('./src/components/equipments/MotherBoard.vue')['default']
MotherBoardCaps: typeof import('./src/components/equipments/MotherBoardCaps.vue')['default']
Navbar: typeof import('./src/components/Navbar.vue')['default']
PG2L100H_FBG676: typeof import('./src/components/equipments/PG2L100H_FBG676.vue')['default']
Pin: typeof import('./src/components/equipments/Pin.vue')['default']
PopButton: typeof import('./src/components/PopButton.vue')['default']
PropertyEditor: typeof import('./src/components/PropertyEditor.vue')['default']
PropertyPanel: typeof import('./src/components/PropertyPanel.vue')['default']
RekaSplitterGroup: typeof import('reka-ui')['SplitterGroup']
RouterLink: typeof import('vue-router')['RouterLink']
RouterView: typeof import('vue-router')['RouterView']
SD: typeof import('./src/components/equipments/SD.vue')['default']
SevenSegmentDisplay: typeof import('./src/components/equipments/SevenSegmentDisplay.vue')['default']
SFP: typeof import('./src/components/equipments/SFP.vue')['default']
Sidebar: typeof import('./src/components/Sidebar.vue')['default']
SMA: typeof import('./src/components/equipments/SMA.vue')['default']
SMT_LED: typeof import('./src/components/equipments/SMT_LED.vue')['default']
SplitterGroup: typeof import('reka-ui')['SplitterGroup']
SplitterPanel: typeof import('reka-ui')['SplitterPanel']
SplitterResizeHandle: typeof import('reka-ui')['SplitterResizeHandle']
Switch: typeof import('./src/components/equipments/Switch.vue')['default']
ThemeControlButton: typeof import('./src/components/ThemeControlButton.vue')['default']
ThemeControlToggle: typeof import('./src/components/ThemeControlToggle.vue')['default']
TutorialCarousel: typeof import('./src/components/TutorialCarousel.vue')['default']
UploadCard: typeof import('./src/components/UploadCard.vue')['default']
Wire: typeof import('./src/components/equipments/Wire.vue')['default']
}
}

10
src/assets/base.css Normal file
View File

@@ -0,0 +1,10 @@
@import "tailwindcss";
@plugin "daisyui" {
themes: winter --default, night --prefersdark;
}
@custom-variant dark (&:where([data-theme=night], [data-theme=night] *));
@custom-variant light (&:where([data-theme=winter], [data-theme=winter] *));

9
src/assets/main.css
View File

@@ -1,11 +1,4 @@
@import "tailwindcss";
@plugin "daisyui" {
themes: winter --default, night --prefersdark;
}
@custom-variant dark (&:where([data-theme=night], [data-theme=night] *));
@custom-variant light (&:where([data-theme=winter], [data-theme=winter] *));
@import "base.css";
/* 禁止所有图像和SVG选择 */
img, svg {

6
src/components/ComponentSelector.vue → src/components/LabCanvas/ComponentSelector.vue
View File

@@ -181,8 +181,8 @@
<script setup lang="ts">
import { ref, computed, shallowRef, onMounted } from "vue";
import motherboardSvg from "../components/equipments/svg/motherboard.svg";
import buttonSvg from "../components//equipments/svg/button.svg";
import motherboardSvg from "@/components/equipments/svg/motherboard.svg";
import buttonSvg from "@/components//equipments/svg/button.svg";
// Props 定义
interface Props {
@@ -258,7 +258,7 @@ async function loadComponentModule(type: string) {
if (!componentModules.value[type]) {
try {
// 假设组件都在 src/components/equipments/ 目录下，且文件名与 type 相同
const module = await import(`../components/equipments/${type}.vue`);
const module = await import(`@/components/equipments/${type}.vue`);
// 将模块添加到缓存中
componentModules.value = {

304
src/components/DiagramCanvas.vue → src/components/LabCanvas/DiagramCanvas.vue
View File

@@ -83,14 +83,15 @@
}
">
<!-- 动态渲染组件 -->
<component :is="getComponentDefinition(component.type)" v-if="props.componentModules[component.type]"
v-bind="prepareComponentProps(component.attrs || {}, component.id)" @update:bindKey="
<component :is="componentManager.getComponentDefinition(component.type)"
v-if="componentManager.componentModules.value[component.type] && componentManager.getComponentDefinition(component.type)"
v-bind="componentManager.prepareComponentProps(component.attrs || {}, component.id)" @update:bindKey="
(value: string) =>
updateComponentProp(component.id, 'bindKey', value)
" @pin-click="
(pinInfo: any) =>
handlePinClick(component.id, pinInfo, pinInfo.originalEvent)
" :ref="(el: any) => setComponentRef(component.id, el)" />
" :ref="(el: any) => componentManager.setComponentRef(component.id, el)" />
<!-- Fallback if component module not loaded yet -->
<div v-else
@@ -98,6 +99,7 @@
<div class="flex flex-col items-center">
<div class="loading loading-spinner loading-xs mb-1"></div>
<span>Loading {{ component.type }}...</span>
<small class="mt-1 text-xs">{{ componentManager.componentModules.value[component.type] ? 'Module loaded but invalid' : 'Module not found' }}</small>
</div>
</div>
</div>
@@ -136,7 +138,8 @@ import {
watch,
provide,
} from "vue";
import WireComponent from "./equipments/Wire.vue";
import { useEventListener } from "@vueuse/core";
import WireComponent from "@/components/equipments/Wire.vue";
// 导入 diagram 管理器
import {
@@ -149,16 +152,17 @@ import {
parseConnectionPin,
connectionArrayToWireItem,
validateDiagramData,
} from "./diagramManager";
} from "./composable/diagramManager";
import type {
DiagramData,
DiagramPart,
ConnectionArray,
WireItem,
} from "./diagramManager";
} from "./composable/diagramManager";
import { CanvasCurrentSelectedComponentID } from "./InjectKeys";
import { CanvasCurrentSelectedComponentID } from "../InjectKeys";
import { useComponentManager } from "./composable/componentManager";
// 右键菜单处理函数
function handleContextMenu(e: MouseEvent) {
@@ -168,22 +172,23 @@ function handleContextMenu(e: MouseEvent) {
// 定义组件发出的事件
const emit = defineEmits([
"diagram-updated",
"component-selected",
"component-moved",
"component-delete",
"toggle-doc-panel",
"wire-created",
"wire-deleted",
"load-component-module",
"open-components",
]);
// 定义组件接受的属性
const props = defineProps<{
componentModules: Record<string, any>;
showDocPanel?: boolean; // 添加属性接收文档面板的显示状态
}>();
// 获取componentManager实例
const componentManager = useComponentManager();
if (!componentManager) {
throw new Error("DiagramCanvas must be used within a component manager provider");
}
// --- 画布状态 ---
const canvasContainer = ref<HTMLElement | null>(null);
const canvas = ref<HTMLElement | null>(null);
@@ -209,8 +214,8 @@ const diagramData = ref<DiagramData>({
connections: [],
});
// 组件引用跟踪
const componentRefs = ref<Record<string, any>>({});
// 组件引用跟踪（保留以便向后兼容）
const componentRefs = computed(() => componentManager?.componentRefs.value || {});
// 计算属性：从 diagramData 中提取组件列表，并按index属性排序
const diagramParts = computed<DiagramPart[]>(() => {
@@ -254,7 +259,7 @@ const wireItems = computed<WireItem[]>(() => {
startPos.y = startComp.y;
// 尝试获取引脚精确位置（如果有实现）
const startCompRef = componentRefs.value?.[startCompId];
const startCompRef = componentManager?.getComponentRef(startCompId);
if (startCompRef && typeof startCompRef.getPinPosition === "function") {
try {
const pinPos = startCompRef.getPinPosition(startPinId);
@@ -280,7 +285,7 @@ const wireItems = computed<WireItem[]>(() => {
endPos.y = endComp.y;
// 尝试获取引脚精确位置
const endCompRef = componentRefs.value?.[endCompId];
const endCompRef = componentManager?.getComponentRef(endCompId);
if (endCompRef && typeof endCompRef.getPinPosition === "function") {
try {
const pinPos = endCompRef.getPinPosition(endPinId);
@@ -325,6 +330,37 @@ const toastTimers: number[] = [];
// 文件选择引用
const fileInput = ref<HTMLInputElement | null>(null);
// VueUse事件监听器状态管理
const isDragEventActive = ref(false);
const isComponentDragEventActive = ref(false);
const isWireCreationEventActive = ref(false);
// 使用VueUse设置事件监听器
// 画布拖拽事件
useEventListener(document, 'mousemove', (e: MouseEvent) => {
if (isDragEventActive.value) {
onDrag(e);
}
if (isComponentDragEventActive.value) {
onComponentDrag(e);
}
if (isWireCreationEventActive.value) {
onCreatingWireMouseMove(e);
}
});
useEventListener(document, 'mouseup', () => {
if (isDragEventActive.value) {
stopDrag();
}
if (isComponentDragEventActive.value) {
stopComponentDrag();
}
});
// 键盘事件
useEventListener(window, 'keydown', handleKeyDown);
// --- 缩放功能 ---
const MIN_SCALE = 0.2;
const MAX_SCALE = 10.0;
@@ -362,73 +398,16 @@ function onZoom(e: WheelEvent) {
scale.value = newScale;
}
// --- 动态组件渲染 ---
const getComponentDefinition = (type: string) => {
const module = props.componentModules[type];
if (!module) return null;
// 确保我们返回一个有效的组件定义
if (module.default) {
return module.default;
} else if (module.__esModule && module.default) {
// 有时 Vue 的动态导入会将默认导出包装在 __esModule 属性下
return module.default;
} else {
console.warn(
`Module for ${type} found but default export is missing`,
module,
);
return null;
}
};
function prepareComponentProps(
attrs: Record<string, any>,
componentId?: string,
): Record<string, any> {
const result: Record<string, any> = { ...attrs };
if (componentId) {
result.componentId = componentId;
}
// console.log(`组件属性 ID: ${componentId}`, result);
return result;
}
// 设置组件引用
function setComponentRef(componentId: string, el: any) {
if (componentRefs.value) {
if (el) {
componentRefs.value[componentId] = el;
} else {
delete componentRefs.value[componentId];
}
}
}
// 重置组件引用缓存
function resetComponentRefs() {
componentRefs.value = {};
}
// 加载组件模块
async function loadComponentModule(type: string) {
if (!props.componentModules[type]) {
try {
// 通知父组件需要加载此类型的组件
emit("load-component-module", type);
} catch (error) {
console.error(`Failed to request component module ${type}:`, error);
}
}
}
// --- 画布交互逻辑 ---
function handleCanvasMouseDown(e: MouseEvent) {
// 如果是直接点击画布（而不是元器件），清除选中状态
if (e.target === canvasContainer.value || e.target === canvas.value) {
if (selectedComponentId.value !== null) {
selectedComponentId.value = null;
emit("component-selected", null);
// 直接通过componentManager选择组件
if (componentManager) {
componentManager.selectComponent(null);
}
}
}
@@ -450,8 +429,7 @@ function startDrag(e: MouseEvent) {
dragStart.x = e.clientX - position.x;
dragStart.y = e.clientY - position.y;
document.addEventListener("mousemove", onDrag);
document.addEventListener("mouseup", stopDrag);
isDragEventActive.value = true;
e.preventDefault();
}
@@ -466,8 +444,7 @@ function startMiddleDrag(e: MouseEvent) {
dragStart.x = e.clientX - position.x;
dragStart.y = e.clientY - position.y;
document.addEventListener("mousemove", onDrag);
document.addEventListener("mouseup", stopDrag);
isDragEventActive.value = true;
e.preventDefault();
}
@@ -483,9 +460,7 @@ function onDrag(e: MouseEvent) {
function stopDrag() {
isDragging.value = false;
isMiddleDragging.value = false;
document.removeEventListener("mousemove", onDrag);
document.removeEventListener("mouseup", stopDrag);
isDragEventActive.value = false;
}
// --- 组件拖拽交互 ---
@@ -505,7 +480,10 @@ function startComponentDrag(e: MouseEvent, component: DiagramPart) {
// 仍然选中组件，无论是否为交互元素
if (selectedComponentId.value !== component.id) {
selectedComponentId.value = component.id;
emit("component-selected", component);
// 直接通过componentManager选择组件
if (componentManager) {
componentManager.selectComponent(component);
}
}
// 如果组件锁定位置或是交互元素，则不启动拖拽
@@ -537,9 +515,8 @@ function startComponentDrag(e: MouseEvent, component: DiagramPart) {
componentDragOffset.x = mouseX_canvas - component.x;
componentDragOffset.y = mouseY_canvas - component.y;
// 添加全局监听器
document.addEventListener("mousemove", onComponentDrag);
document.addEventListener("mouseup", stopComponentDrag);
// 激活组件拖拽事件监听
isComponentDragEventActive.value = true;
}
// 拖拽组件过程
@@ -568,14 +545,6 @@ function onComponentDrag(e: MouseEvent) {
);
if (!draggedComponent) return;
// 更新组件位置
// diagramData.value = updatePartPosition(
// diagramData.value,
// draggingComponentId.value,
// Math.round(newX),
// Math.round(newY),
// );
// 如果组件属于组，移动组内所有其他组件
if (draggedComponent.group) {
const deltaX = Math.round(newX) - draggedComponent.x;
@@ -600,12 +569,14 @@ function onComponentDrag(e: MouseEvent) {
}
}
// 通知父组件位置已更新
emit("component-moved", {
id: draggingComponentId.value,
x: Math.round(newX),
y: Math.round(newY),
});
// 通知componentManager位置已更新
if (componentManager) {
componentManager.moveComponent({
id: draggingComponentId.value,
x: Math.round(newX),
y: Math.round(newY),
});
}
// 通知图表已更新
emit("diagram-updated", diagramData.value);
@@ -624,8 +595,7 @@ function stopComponentDrag() {
draggingComponentId.value = null;
}
document.removeEventListener("mousemove", onComponentDrag);
document.removeEventListener("mouseup", stopComponentDrag);
isComponentDragEventActive.value = false;
}
// 更新组件属性
@@ -634,14 +604,20 @@ function updateComponentProp(
propName: string,
value: any,
) {
diagramData.value = updatePartAttribute(
diagramData.value,
componentId,
propName,
value,
);
emit("diagram-updated", diagramData.value);
saveDiagramData(diagramData.value);
// 直接通过componentManager更新组件属性
if (componentManager) {
componentManager.updateComponentProp(componentId, propName, value);
} else {
// 后备方案：直接更新数据
diagramData.value = updatePartAttribute(
diagramData.value,
componentId,
propName,
value,
);
emit("diagram-updated", diagramData.value);
saveDiagramData(diagramData.value);
}
}
// --- 连线操作 ---
@@ -671,8 +647,6 @@ function handlePinClick(componentId: string, pinInfo: any, event: MouseEvent) {
console.log("鼠标位置:", mousePosition);
if (!isCreatingWire.value) {
// 开始创建连线
const containerRect = canvasContainer.value.getBoundingClientRect();
// 获取初始位置信息
let pinPosition = pinInfo.position;
console.log("Pin信息:", pinInfo);
@@ -681,7 +655,7 @@ function handlePinClick(componentId: string, pinInfo: any, event: MouseEvent) {
console.log("引脚ID:", pinId);
// 从组件引用中获取组件实例
const component = componentRefs.value[componentId];
const component = componentManager?.getComponentRef(componentId);
console.log("组件引用:", component);
// 查找组件部件对象以获取组件位置
@@ -742,7 +716,7 @@ function handlePinClick(componentId: string, pinInfo: any, event: MouseEvent) {
pinId,
pinInfo.constraint,
);
document.addEventListener("mousemove", onCreatingWireMouseMove);
isWireCreationEventActive.value = true;
} else {
// 完成连线创建
if (
@@ -757,7 +731,7 @@ function handlePinClick(componentId: string, pinInfo: any, event: MouseEvent) {
// 获取终点引脚位置
let endPosition = { x: 0, y: 0 };
const componentPart = diagramParts.value.find((p) => p.id === componentId);
const endComponent = componentRefs.value[componentId];
const endComponent = componentManager?.getComponentRef(componentId);
console.log("终点组件部件:", componentPart);
console.log("终点组件引用:", endComponent);
@@ -819,7 +793,7 @@ function handlePinClick(componentId: string, pinInfo: any, event: MouseEvent) {
// 重置连线创建状态
resetWireCreation();
document.removeEventListener("mousemove", onCreatingWireMouseMove);
isWireCreationEventActive.value = false;
}
}
@@ -852,7 +826,7 @@ function resetWireCreation() {
// 取消连线创建
function cancelWireCreation() {
resetWireCreation();
document.removeEventListener("mousemove", onCreatingWireMouseMove);
isWireCreationEventActive.value = false;
}
// 连线创建过程中的鼠标移动
@@ -871,7 +845,10 @@ function deleteWire(wireIndex: number) {
// 删除组件
function deleteComponent(componentId: string) {
diagramData.value = deletePart(diagramData.value, componentId);
emit("component-delete", componentId);
// 直接通过componentManager删除组件
if (componentManager) {
componentManager.deleteComponent(componentId);
}
emit("diagram-updated", diagramData.value);
saveDiagramData(diagramData.value);
@@ -1021,8 +998,23 @@ function showToast(
// --- 生命周期钩子 ---
onMounted(async () => {
// 重置组件引用
resetComponentRefs();
// 设置componentManager的画布引用
if (componentManager) {
// 创建一个包含必要方法的画布API对象
const canvasAPI = {
getDiagramData: () => diagramData.value,
updateDiagramDataDirectly: (data: DiagramData) => {
diagramData.value = data;
saveDiagramData(data);
emit("diagram-updated", data);
},
getCanvasPosition: () => ({ x: position.x, y: position.y }),
getScale: () => scale.value,
$el: canvasContainer.value,
showToast
};
componentManager.setCanvasRef(canvasAPI);
}
// 加载图表数据
try {
@@ -1039,12 +1031,10 @@ onMounted(async () => {
Array.from(componentTypes),
);
// 通知父组件需要加载组件模块
componentTypes.forEach((type) => {
if (!props.componentModules[type]) {
emit("load-component-module", type);
}
});
// 直接通过componentManager预加载组件模块
if (componentManager) {
await componentManager.preloadComponentModules(Array.from(componentTypes));
}
} catch (error) {
console.error("加载图表数据失败:", error);
}
@@ -1054,9 +1044,6 @@ onMounted(async () => {
position.x = canvasContainer.value.clientWidth / 2 - 5000; // 画布宽度的一半
position.y = canvasContainer.value.clientHeight / 2 - 5000; // 画布高度的一半
}
// 添加键盘事件监听器
window.addEventListener("keydown", handleKeyDown);
});
// 处理键盘事件
@@ -1075,32 +1062,15 @@ function handleKeyDown(e: KeyboardEvent) {
}
onUnmounted(() => {
// 清理事件监听器
document.removeEventListener("mousemove", onComponentDrag);
document.removeEventListener("mouseup", stopComponentDrag);
document.removeEventListener("mousemove", onDrag);
document.removeEventListener("mouseup", stopDrag);
document.removeEventListener("mousemove", onCreatingWireMouseMove);
// 移除键盘事件监听器
window.removeEventListener("keydown", handleKeyDown);
// 清除所有toast定时器
toastTimers.forEach((timerId) => clearTimeout(timerId));
// 重置事件状态
isDragEventActive.value = false;
isComponentDragEventActive.value = false;
isWireCreationEventActive.value = false;
});
// --- 对外API ---
// 获取当前图表数据
function getDiagramData() {
return diagramData.value;
}
// 设置图表数据
function setDiagramData(data: DiagramData) {
diagramData.value = data;
emit("diagram-updated", data);
}
// 无加载动画的数据更新方法
function updateDiagramDataDirectly(data: DiagramData) {
// 检查组件是否仍然挂载
@@ -1115,7 +1085,7 @@ function updateDiagramDataDirectly(data: DiagramData) {
emit("diagram-updated", data);
}
// 暴露方法给父组件
// 暴露方法给父组件 - 简化版本，主要用于数据访问
defineExpose({
// 基本数据操作
getDiagramData: () => diagramData.value,
@@ -1154,23 +1124,6 @@ defineExpose({
});
},
// 文件操作
openDiagramFileSelector,
exportDiagram,
// 组件操作
getSelectedComponent: () => {
if (!selectedComponentId.value) return null;
return (
diagramParts.value.find((p) => p.id === selectedComponentId.value) || null
);
},
deleteSelectedComponent: () => {
if (selectedComponentId.value) {
deleteComponent(selectedComponentId.value);
}
},
// 画布状态
getCanvasPosition: () => ({ x: position.x, y: position.y }),
getScale: () => scale.value,
@@ -1187,15 +1140,6 @@ watch(
},
{ deep: true },
);
// 当组件模块加载完成后，确保组件引用正确建立
watch(
() => props.componentModules,
() => {
// 这里不需要特别处理，Vue 会自动通过 setComponentRef 函数更新引用
},
{ deep: true },
);
</script>
<style scoped>

646
src/components/LabCanvas/composable/componentManager.ts Normal file
View File

@@ -0,0 +1,646 @@
import { ref, shallowRef, computed } from "vue";
import { createInjectionState } from "@vueuse/core";
import type { DiagramData, DiagramPart } from "./diagramManager";
import type { PropertyConfig } from "@/components/equipments/componentConfig";
import {
generatePropertyConfigs,
generatePropsFromDefault,
generatePropsFromAttrs,
} from "@/components/equipments/componentConfig";
// 存储动态导入的组件模块
interface ComponentModule {
default: any;
getDefaultProps?: () => Record<string, any>;
config?: {
props?: Array<PropertyConfig>;
};
__esModule?: boolean; // 添加 __esModule 属性
}
// 定义组件管理器的状态和方法
const [useProvideComponentManager, useComponentManager] = createInjectionState(
() => {
// --- 状态管理 ---
const componentModules = ref<Record<string, ComponentModule>>({});
const selectedComponentId = ref<string | null>(null);
const selectedComponentConfig = shallowRef<{ props: PropertyConfig[] } | null>(null);
const diagramCanvas = ref<any>(null);
const componentRefs = ref<Record<string, any>>({});
// 计算当前选中的组件数据
const selectedComponentData = computed(() => {
if (!diagramCanvas.value || !selectedComponentId.value) return null;
const canvasInstance = diagramCanvas.value as any;
if (canvasInstance && canvasInstance.getDiagramData) {
const data = canvasInstance.getDiagramData();
return data.parts.find((p: DiagramPart) => p.id === selectedComponentId.value) || null;
}
return null;
});
// --- 组件模块管理 ---
/**
* 动态加载组件模块
*/
async function loadComponentModule(type: string) {
console.log(`尝试加载组件模块: ${type}`);
console.log(`当前已加载的模块:`, Object.keys(componentModules.value));
if (!componentModules.value[type]) {
try {
console.log(`正在动态导入模块: @/components/equipments/${type}.vue`);
const module = await import(`@/components/equipments/${type}.vue`);
console.log(`成功导入模块 ${type}:`, module);
// 直接设置新的对象引用以触发响应性
componentModules.value = {
...componentModules.value,
[type]: module,
};
console.log(`模块 ${type} 已添加到 componentModules`);
console.log(`更新后的模块列表:`, Object.keys(componentModules.value));
} catch (error) {
console.error(`Failed to load component module ${type}:`, error);
return null;
}
} else {
console.log(`模块 ${type} 已经存在`);
}
return componentModules.value[type];
}
/**
* 预加载所有组件模块
*/
async function preloadComponentModules(componentTypes: string[]) {
console.log("Preloading component modules:", componentTypes);
await Promise.all(
componentTypes.map((type) => loadComponentModule(type))
);
console.log("All component modules loaded");
}
// --- 组件操作 ---
/**
* 添加新组件到画布
*/
async function addComponent(componentData: {
type: string;
name: string;
props: Record<string, any>;
}) {
console.log("=== 开始添加组件 ===");
console.log("组件数据:", componentData);
const canvasInstance = diagramCanvas.value as any;
if (!canvasInstance) {
console.error("没有可用的画布实例");
return;
}
// 预加载组件模块，确保组件能正常渲染
console.log(`预加载组件模块: ${componentData.type}`);
const componentModule = await loadComponentModule(componentData.type);
if (!componentModule) {
console.error(`无法加载组件模块: ${componentData.type}`);
return;
}
console.log(`组件模块加载成功: ${componentData.type}`, componentModule);
// 获取画布位置信息
let position = { x: 100, y: 100 };
let scale = 1;
try {
if (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);
}
}
// 创建新组件
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,
};
// 通过画布实例添加组件
if (canvasInstance.getDiagramData && canvasInstance.updateDiagramDataDirectly) {
const currentData = canvasInstance.getDiagramData();
currentData.parts.push(newComponent);
// 使用 updateDiagramDataDirectly 避免触发加载状态
canvasInstance.updateDiagramDataDirectly(currentData);
console.log("组件添加完成:", newComponent);
// 等待Vue的下一个tick，确保组件模块已经更新
await new Promise(resolve => setTimeout(resolve, 50));
}
}
/**
* 添加模板到画布
*/
async function addTemplate(templateData: {
id: string;
name: string;
template: any;
}) {
console.log("添加模板:", templateData);
const canvasInstance = diagramCanvas.value as any;
if (!canvasInstance?.getDiagramData || !canvasInstance?.updateDiagramDataDirectly) {
console.error("没有可用的画布实例添加模板");
return;
}
const currentData = canvasInstance.getDiagramData();
console.log("=== 当前图表组件数量:", currentData.parts.length);
// 生成唯一ID前缀
const idPrefix = `template-${Date.now()}-`;
if (templateData.template?.parts) {
// 获取视口中心位置
let viewportCenter = { x: 300, y: 200 };
try {
if (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;
viewportCenter.x = (viewportWidth / 2 - position.x) / scale;
viewportCenter.y = (viewportHeight / 2 - position.y) / scale;
}
}
} catch (error) {
console.error("获取视口中心位置时出错:", error);
}
const mainPart = templateData.template.parts[0];
// 创建新组件
const newParts = await Promise.all(
templateData.template.parts.map(async (part: any) => {
const newPart = JSON.parse(JSON.stringify(part));
newPart.id = `${idPrefix}${part.id}`;
// 加载组件模块并获取能力页面
try {
const componentModule = await loadComponentModule(part.type);
if (
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 relativeX = part.x - mainPart.x;
const relativeY = part.y - mainPart.y;
newPart.x = viewportCenter.x + relativeX;
newPart.y = viewportCenter.y + relativeY;
}
return newPart;
})
);
currentData.parts.push(...newParts);
// 处理连接关系
if (templateData.template.connections) {
const idMap: Record<string, string> = {};
templateData.template.parts.forEach((part: any) => {
idMap[part.id] = `${idPrefix}${part.id}`;
});
const newConnections = templateData.template.connections.map((conn: any) => {
if (Array.isArray(conn)) {
const [from, to, type, path] = conn;
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];
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);
return { success: true, message: `已添加 ${templateData.name} 模板` };
} else {
console.error("模板格式错误，缺少parts数组");
return { success: false, message: "模板格式错误" };
}
}
/**
* 删除组件
*/
function deleteComponent(componentId: string) {
const canvasInstance = diagramCanvas.value as any;
if (!canvasInstance?.getDiagramData || !canvasInstance?.updateDiagramDataDirectly) {
return;
}
const currentData = canvasInstance.getDiagramData();
const component = currentData.parts.find((p: DiagramPart) => p.id === componentId);
if (!component) return;
const componentsToDelete: string[] = [componentId];
// 处理组件组
if (component.group && component.group !== "") {
const groupMembers = currentData.parts.filter(
(p: DiagramPart) => p.group === component.group && p.id !== componentId
);
componentsToDelete.push(...groupMembers.map((p: DiagramPart) => p.id));
console.log(`删除组件 ${componentId} 及其组 ${component.group} 中的 ${groupMembers.length} 个组件`);
}
// 删除组件
currentData.parts = currentData.parts.filter(
(p: DiagramPart) => !componentsToDelete.includes(p.id)
);
// 删除相关连接
currentData.connections = currentData.connections.filter((connection: any) => {
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;
}
canvasInstance.updateDiagramDataDirectly(currentData);
}
/**
* 选中组件
*/
async function selectComponent(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>();
// 从 getDefaultProps 方法获取默认配置
if (typeof moduleRef.getDefaultProps === "function") {
const defaultProps = moduleRef.getDefaultProps();
const defaultPropConfigs = generatePropsFromDefault(defaultProps);
defaultPropConfigs.forEach((config) => {
propConfigs.push(config);
addedProps.add(config.name);
});
}
// 添加组件直接属性
const directPropConfigs = generatePropertyConfigs(componentData);
const newDirectProps = directPropConfigs.filter(
(config) => !addedProps.has(config.name)
);
propConfigs.push(...newDirectProps);
// 添加 attrs 中的属性
if (componentData.attrs) {
const attrPropConfigs = generatePropsFromAttrs(componentData.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 updateComponentProp(componentId: string, propName: string, value: any) {
const canvasInstance = diagramCanvas.value as any;
if (!canvasInstance?.getDiagramData || !canvasInstance?.updateDiagramDataDirectly) {
console.error("没有可用的画布实例进行属性更新");
return;
}
// 检查值格式
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 {
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?.getDiagramData || !canvasInstance?.updateDiagramDataDirectly) {
console.error("没有可用的画布实例进行属性更新");
return;
}
const currentData = canvasInstance.getDiagramData();
const part = currentData.parts.find((p: DiagramPart) => p.id === componentId);
if (part) {
(part as any)[propName] = value;
canvasInstance.updateDiagramDataDirectly(currentData);
console.log(`更新组件${componentId}的直接属性${propName}为:`, value, typeof value);
}
}
/**
* 移动组件
*/
function moveComponent(moveData: { id: string; x: number; y: number }) {
const canvasInstance = diagramCanvas.value as any;
if (!canvasInstance?.getDiagramData || !canvasInstance?.updateDiagramDataDirectly) {
return;
}
const currentData = canvasInstance.getDiagramData();
const part = currentData.parts.find((p: DiagramPart) => p.id === moveData.id);
if (part) {
part.x = moveData.x;
part.y = moveData.y;
canvasInstance.updateDiagramDataDirectly(currentData);
}
}
/**
* 设置画布实例引用
*/
function setCanvasRef(canvasRef: any) {
diagramCanvas.value = canvasRef;
}
/**
* 设置组件DOM引用
*/
function setComponentRef(componentId: string, el: any) {
if (el) {
componentRefs.value[componentId] = el;
} else {
delete componentRefs.value[componentId];
}
}
/**
* 获取组件DOM引用
*/
function getComponentRef(componentId: string) {
return componentRefs.value[componentId];
}
/**
* 获取当前图表数据
*/
function getDiagramData() {
const canvasInstance = diagramCanvas.value;
if (canvasInstance && canvasInstance.getDiagramData) {
return canvasInstance.getDiagramData();
}
return { parts: [], connections: [], version: 1, author: "admin", editor: "me" };
}
/**
* 更新图表数据
*/
function updateDiagramData(data: any) {
const canvasInstance = diagramCanvas.value;
if (canvasInstance && canvasInstance.updateDiagramDataDirectly) {
canvasInstance.updateDiagramDataDirectly(data);
}
}
/**
* 获取画布位置和缩放信息
*/
function getCanvasInfo() {
const canvasInstance = diagramCanvas.value;
if (!canvasInstance) return { position: { x: 0, y: 0 }, scale: 1 };
const position = canvasInstance.getCanvasPosition ? canvasInstance.getCanvasPosition() : { x: 0, y: 0 };
const scale = canvasInstance.getScale ? canvasInstance.getScale() : 1;
return { position, scale };
}
/**
* 显示通知
*/
function showToast(message: string, type: "success" | "error" | "info" = "info") {
const canvasInstance = diagramCanvas.value;
if (canvasInstance && canvasInstance.showToast) {
canvasInstance.showToast(message, type);
}
}
/**
* 获取组件定义
*/
function getComponentDefinition(type: string) {
const module = componentModules.value[type];
if (!module) {
console.warn(`No module found for component type: ${type}`);
// 尝试异步加载组件模块
loadComponentModule(type);
return null;
}
// 确保我们返回一个有效的组件定义
if (module.default) {
return module.default;
} else if (module.__esModule && module.default) {
// 有时 Vue 的动态导入会将默认导出包装在 __esModule 属性下
return module.default;
} else {
console.warn(
`Module for ${type} found but default export is missing`,
module,
);
return null;
}
}
/**
* 准备组件属性
*/
function prepareComponentProps(
attrs: Record<string, any>,
componentId?: string,
): Record<string, any> {
const result: Record<string, any> = { ...attrs };
if (componentId) {
result.componentId = componentId;
}
return result;
}
/**
* 初始化组件管理器
*/
async function initialize() {
const canvasInstance = diagramCanvas.value as any;
if (canvasInstance?.getDiagramData) {
const diagramData = canvasInstance.getDiagramData();
// 收集所有组件类型
const componentTypes = new Set<string>();
diagramData.parts.forEach((part: DiagramPart) => {
componentTypes.add(part.type);
});
// 预加载组件模块
await preloadComponentModules(Array.from(componentTypes));
}
}
return {
// 状态
componentModules,
selectedComponentId,
selectedComponentData,
selectedComponentConfig,
componentRefs,
// 方法
loadComponentModule,
preloadComponentModules,
addComponent,
addTemplate,
deleteComponent,
selectComponent,
updateComponentProp,
updateComponentDirectProp,
moveComponent,
setCanvasRef,
setComponentRef,
getComponentRef,
getDiagramData,
updateDiagramData,
getCanvasInfo,
showToast,
getComponentDefinition,
prepareComponentProps,
initialize,
};
}
);
export { useProvideComponentManager, useComponentManager };

0
src/components/diagramManager.ts → src/components/LabCanvas/composable/diagramManager.ts
View File

1
src/components/wireManager.ts → src/components/LabCanvas/composable/wireManager.ts
View File

@@ -83,4 +83,3 @@ export function setMousePosition(x: number, y: number) {
mousePosition.y = y;
}
// 其它Wire相关操作可继续扩展...

8
src/components/LabCanvas/index.ts Normal file
View File

@@ -0,0 +1,8 @@
// 导出组件管理器服务
export { useProvideComponentManager, useComponentManager } from './composable/componentManager';
// 导出图表管理器
export type { DiagramData, DiagramPart } from './composable/diagramManager';
// 导出连线管理器
export type { WireItem } from './composable/wireManager';

2
src/components/PropertyEditor.vue
View File

@@ -128,7 +128,7 @@
<script setup lang="ts">
import { ref } from "vue";
import CollapsibleSection from "./CollapsibleSection.vue";
import { type DiagramPart } from "@/components/diagramManager";
import { type DiagramPart } from "@/components/LabCanvas/composable/diagramManager";
import {
type PropertyConfig,
getPropValue,

2
src/components/PropertyPanel.vue
View File

@@ -68,7 +68,7 @@
<script setup lang="ts">
// 导入所需的类型和组件
import { type DiagramPart } from "@/components/diagramManager"; // 图表部件类型定义
import { type DiagramPart } from "@/components/LabCanvas/composable/diagramManager"; // 图表部件类型定义
import { type PropertyConfig } from "@/components/equipments/componentConfig"; // 属性配置类型定义
import CollapsibleSection from "./CollapsibleSection.vue"; // 可折叠区域组件
import PropertyEditor from "./PropertyEditor.vue"; // 属性编辑器组件

2
src/components/equipments/componentConfig.ts
View File

@@ -1,5 +1,5 @@
// componentConfig.ts 提供通用的组件配置功能
import type { DiagramPart } from '../diagramManager';
import type { DiagramPart } from '../LabCanvas/composable/diagramManager';
// 属性配置接口
export interface PropertyConfig {

7
src/main.ts
View File

@@ -2,13 +2,10 @@ import './assets/main.css'
import { createApp } from 'vue'
import { createPinia } from 'pinia'
import VueKonva from "vue-konva"
import App from '@/App.vue'
import router from './router'
// import { Client } from './APIClient'
const app = createApp(App).use(router).use(createPinia()).mount('#app')
// 初始化约束通信
// initConstraintCommunication();
const app = createApp(App).use(router).use(createPinia()).use(VueKonva).mount('#app')

2
src/stores/equipments.ts
View File

@@ -1,7 +1,7 @@
import { ref, reactive, watchPostEffect } from 'vue'
import { defineStore } from 'pinia'
import { isString, toNumber } from 'lodash';
import { Common } from '@/Common';
import { Common } from '@/utils/Common';
import z from "zod"
import { isNumber } from 'mathjs';
import { JtagClient, MatrixKeyClient, PowerClient } from "@/APIClient";

2
src/Common.ts → src/utils/Common.ts
View File

@@ -1,4 +1,4 @@
import { type FileParameter } from "./APIClient";
import { type FileParameter } from "@/APIClient";
import { isNull, isUndefined } from "lodash";
export namespace Common {

30
src/utils/VueKonvaType.ts Normal file
View File

@@ -0,0 +1,30 @@
import Konva from "konva";
import type { VueElement } from "vue";
interface VNode extends VueElement {
getNode(): Konva.Node
}
interface VLayer extends VueElement {
getNode(): Konva.Layer
}
interface VGroup extends VueElement {
getNode(): Konva.Group
}
interface VStage extends VueElement {
getNode(): Konva.Stage
}
interface VTransformer extends VueElement {
getNode(): Konva.Transformer
}
export type {
VNode,
VLayer,
VGroup,
VStage,
VTransformer,
}

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>

14
vite.config.ts
View File

@@ -6,6 +6,8 @@ import vueJsx from '@vitejs/plugin-vue-jsx'
import vueDevTools from 'vite-plugin-vue-devtools'
import tailwindcss from '@tailwindcss/postcss'
import autoprefixer from 'autoprefixer'
import Components from 'unplugin-vue-components/vite'
import RekaResolver from 'reka-ui/resolver'
// https://vite.dev/config/
export default defineConfig({
@@ -20,6 +22,18 @@ export default defineConfig({
}),
vueJsx(),
vueDevTools(),
Components(
{
dts: true,
resolvers: [
RekaResolver()
// RekaResolver({
// prefix: '' // use the prefix option to add Prefix to the imported components
// })
],
}
)
],
resolve: {
alias: {