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

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 {