feat: 删除无用数据与冗余逻辑以提升性能

src/components/LabCanvas/DiagramCanvas.vue

@@ -44,7 +44,11 @@
       }"
     >
       <!-- 渲染连线 -->
-      <svg class="wires-layer absolute top-0 left-0 w-full h-full z-50" width="10000" height="10000">
+      <svg
+        class="wires-layer absolute top-0 left-0 w-full h-full z-50"
+        width="10000"
+        height="10000"
+      >
         <!-- 已完成的连线 -->
         <WireComponent
           v-for="(wire, index) in wireItems"
@@ -94,7 +98,9 @@
           top: component.y + 'px',
           left: component.x + 'px',
           zIndex: component.index ?? 0,
-          transform: component.rotate ? `rotate(${component.rotate}deg)` : 'none',
+          transform: component.rotate
+            ? `rotate(${component.rotate}deg)`
+            : 'none',
           opacity: component.isOn ? 1 : 0.6,
           display: 'block',
         }"
@@ -185,8 +191,6 @@ import {
   saveDiagramData,
   updatePartPosition,
   updatePartAttribute,
-  deletePart,
-  deleteConnection,
   parseConnectionPin,
   connectionArrayToWireItem,
   validateDiagramData,
@@ -208,10 +212,7 @@ function handleContextMenu(e: MouseEvent) {
 }
 
 // 定义组件发出的事件
-const emit = defineEmits([
-  "toggle-doc-panel",
-  "open-components",
-]);
+const emit = defineEmits(["toggle-doc-panel", "open-components"]);
 
 // 定义组件接受的属性
 const props = defineProps<{
@@ -367,7 +368,7 @@ const isWireCreationEventActive = ref(false);
 // 画布拖拽事件
 useEventListener(document, "mousemove", (e: MouseEvent) => {
   if (isDragEventActive.value) {
-    onDrag(e);
+    onCanvasDrag(e);
   }
   if (isComponentDragEventActive.value) {
     onComponentDrag(e);
@@ -469,7 +470,7 @@ function startMiddleDrag(e: MouseEvent) {
 }
 
 // 拖拽画布过程
-function onDrag(e: MouseEvent) {
+function onCanvasDrag(e: MouseEvent) {
   if (!isDragging.value && !isMiddleDragging.value) return;
 
   const newX = e.clientX - dragStart.x;
@@ -579,8 +580,7 @@ function onComponentDrag(e: MouseEvent) {
     const groupComponents = diagramParts.value.filter(
       (p) =>
         p.group === draggedComponent.group &&
-        p.id !== draggingComponentId.value &&
-        !p.positionlock,
+        p.id !== draggingComponentId.value,
     );
 
     // 更新这些组件的位置
@@ -608,16 +608,12 @@ function onComponentDrag(e: MouseEvent) {
 function stopComponentDrag() {
   // 如果有组件被拖拽，保存当前状态
   if (draggingComponentId.value) {
-    // console.log(`组件拖拽结束: ${draggingComponentId.value}`);
-
-    // 保存图表数据
-    saveDiagramData(diagramData.value);
-
-    // 清除拖动状态
     draggingComponentId.value = null;
   }
 
   isComponentDragEventActive.value = false;
+  
+  saveDiagramData(diagramData.value);
 }
 
 // 更新组件属性
@@ -637,7 +633,6 @@ function updateComponentProp(
       propName,
       value,
     );
-    saveDiagramData(diagramData.value);
   }
 }
 
@@ -815,9 +810,6 @@ function handlePinClick(componentId: string, pinInfo: any, event: MouseEvent) {
       connections: [...diagramData.value.connections, newConnection],
     };
 
-    // 保存图表数据
-    saveDiagramData(diagramData.value);
-
     // 重置连线创建状态
     resetWireCreation();
     isWireCreationEventActive.value = false;
@@ -863,12 +855,10 @@ function onCreatingWireMouseMove(e: MouseEvent) {
 
 // 删除组件
 function deleteComponent(componentId: string) {
-  diagramData.value = deletePart(diagramData.value, componentId);
   // 直接通过componentManager删除组件
   if (componentManager) {
     componentManager.deleteComponent(componentId);
   }
-  saveDiagramData(diagramData.value);
 
   // 清除选中状态
   if (selectedComponentId.value === componentId) {
@@ -922,9 +912,6 @@ function handleFileSelected(event: Event) {
       // 更新画布数据
       diagramData.value = parsed as DiagramData;
 
-      // 保存到本地文件
-      saveDiagramData(diagramData.value);
-
       alertStore?.show(`成功导入diagram文件`, "success");
     } catch (error) {
       console.error("解析JSON文件出错:", error);
@@ -988,22 +975,6 @@ function exportDiagram() {
 
 // --- 生命周期钩子 ---
 onMounted(async () => {
-  // 设置componentManager的画布引用
-  if (componentManager) {
-    // 创建一个包含必要方法的画布API对象
-    const canvasAPI = {
-      getDiagramData: () => diagramData.value,
-      updateDiagramDataDirectly: (data: DiagramData) => {
-        diagramData.value = data;
-        saveDiagramData(data);
-      },
-      getCanvasPosition: () => componentManager.getCanvasPosition(),
-      getScale: () => componentManager.getCanvasScale(),
-      $el: canvasContainer.value,
-    };
-    componentManager.setCanvasRef(canvasAPI);
-  }
-
   // 加载图表数据
   try {
     diagramData.value = await loadDiagramData();
@@ -1061,7 +1032,6 @@ function updateDiagramDataDirectly(data: DiagramData) {
   }
 
   diagramData.value = data;
-  saveDiagramData(data);
 }
 
 // 暴露方法给父组件
@@ -1070,21 +1040,16 @@ defineExpose({
   getDiagramData: () => diagramData.value,
   updateDiagramDataDirectly,
 });
-
-// 监视器 - 当图表数据更改时保存
-watch(
-  diagramData,
-  (newData) => {
-    saveDiagramData(newData);
-  },
-  { deep: true },
-);
 </script>
 
 <style scoped>
 /* 基础容器样式 - 使用 Tailwind 类替代 */
 .diagram-container {
-  background-size: 20px 20px, 20px 20px, 100px 100px, 100px 100px;
+  background-size:
+    20px 20px,
+    20px 20px,
+    100px 100px,
+    100px 100px;
   background-position: 0 0;
 }
 
@@ -1130,7 +1095,13 @@ watch(
   pointer-events: auto;
 }
 
-.component-wrapper :deep(svg *:not([class*="interactive"]):not(rect.glow):not(circle[fill-opacity]):not([fill-opacity])) {
+.component-wrapper
+  :deep(
+    svg
+      *:not([class*="interactive"]):not(rect.glow):not(
+        circle[fill-opacity]
+      ):not([fill-opacity])
+  ) {
   pointer-events: none;
 }