From e38770a496b85e3c03be69f655eca349fb01b68b Mon Sep 17 00:00:00 2001
From: SikongJueluo <selfconfusion@gmail.com>
Date: Sun, 13 Jul 2025 16:00:49 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E5=88=A0=E9=99=A4=E6=97=A0=E7=94=A8?=
 =?UTF-8?q?=E5=87=BD=E6=95=B0=E4=B8=8E=E4=BF=A1=E5=8F=B7=EF=BC=8C=E4=BF=AE?=
 =?UTF-8?q?=E5=A4=8D=E5=85=A8=E5=B1=8Fbug?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/LabCanvas/DiagramCanvas.vue | 131 +++------------------
 src/views/Project/Index.vue                |  11 +-
 2 files changed, 20 insertions(+), 122 deletions(-)

diff --git a/src/components/LabCanvas/DiagramCanvas.vue b/src/components/LabCanvas/DiagramCanvas.vue
index 5c4a282..773867c 100644
--- a/src/components/LabCanvas/DiagramCanvas.vue
+++ b/src/components/LabCanvas/DiagramCanvas.vue
@@ -1,6 +1,6 @@
 <template>
   <div
-    class="flex-1 h-full w-full bg-base-200 relative overflow-hidden diagram-container"
+    class="flex-1 h-full w-full bg-base-200 relative overflow-hidden diagram-container flex flex-col select-none"
     ref="canvasContainer"
     @mousedown="handleCanvasMouseDown"
     @mousedown.middle.prevent="startMiddleDrag"
@@ -38,13 +38,13 @@
 
     <div
       ref="canvas"
-      class="diagram-canvas"
+      class="diagram-canvas relative select-none"
       :style="{
         transform: `translate(${componentManager.canvasPosition.x}px, ${componentManager.canvasPosition.y}px) scale(${componentManager.canvasScale.value})`,
       }"
     >
       <!-- 渲染连线 -->
-      <svg class="wires-layer" 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"
@@ -83,34 +83,24 @@
       <div
         v-for="component in diagramParts"
         :key="component.id"
-        class="component-wrapper"
+        class="component-wrapper absolute p-0 inline-block overflow-visible select-none"
         :class="{
           'component-hover': hoveredComponent === component.id,
           'component-selected': selectedComponentId === component.id,
-          'component-disabled': !component.isOn,
+          'cursor-not-allowed grayscale-70 opacity-60': !component.isOn,
           'component-hidepins': component.hidepins,
         }"
         :style="{
           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',
         }"
         @mousedown.left.stop="startComponentDrag($event, component)"
-        @mouseover="
-          (event) => {
-            hoveredComponent = component.id;
-          }
-        "
-        @mouseleave="
-          (event) => {
-            hoveredComponent = null;
-          }
-        "
+        @mouseover="hoveredComponent = component.id"
+        @mouseleave="hoveredComponent = null"
       >
         <!-- 动态渲染组件 -->
         <component
@@ -219,10 +209,7 @@ function handleContextMenu(e: MouseEvent) {
 
 // 定义组件发出的事件
 const emit = defineEmits([
-  "diagram-updated",
   "toggle-doc-panel",
-  "wire-created",
-  "wire-deleted",
   "open-components",
 ]);
 
@@ -615,9 +602,6 @@ function onComponentDrag(e: MouseEvent) {
       y: Math.round(newY),
     });
   }
-
-  // 通知图表已更新
-  emit("diagram-updated", diagramData.value);
 }
 
 // 停止拖拽组件
@@ -653,7 +637,6 @@ function updateComponentProp(
       propName,
       value,
     );
-    emit("diagram-updated", diagramData.value);
     saveDiagramData(diagramData.value);
   }
 }
@@ -832,10 +815,6 @@ function handlePinClick(componentId: string, pinInfo: any, event: MouseEvent) {
       connections: [...diagramData.value.connections, newConnection],
     };
 
-    // 通知连线创建
-    emit("wire-created", newConnection);
-    emit("diagram-updated", diagramData.value);
-
     // 保存图表数据
     saveDiagramData(diagramData.value);
 
@@ -882,14 +861,6 @@ function onCreatingWireMouseMove(e: MouseEvent) {
   updateMousePosition(e);
 }
 
-// 删除连线
-function deleteWire(wireIndex: number) {
-  diagramData.value = deleteConnection(diagramData.value, wireIndex);
-  emit("wire-deleted", wireIndex);
-  emit("diagram-updated", diagramData.value);
-  saveDiagramData(diagramData.value);
-}
-
 // 删除组件
 function deleteComponent(componentId: string) {
   diagramData.value = deletePart(diagramData.value, componentId);
@@ -897,7 +868,6 @@ function deleteComponent(componentId: string) {
   if (componentManager) {
     componentManager.deleteComponent(componentId);
   }
-  emit("diagram-updated", diagramData.value);
   saveDiagramData(diagramData.value);
 
   // 清除选中状态
@@ -955,9 +925,6 @@ function handleFileSelected(event: Event) {
       // 保存到本地文件
       saveDiagramData(diagramData.value);
 
-      // 发出更新事件
-      emit("diagram-updated", diagramData.value);
-
       alertStore?.show(`成功导入diagram文件`, "success");
     } catch (error) {
       console.error("解析JSON文件出错:", error);
@@ -1029,7 +996,6 @@ onMounted(async () => {
       updateDiagramDataDirectly: (data: DiagramData) => {
         diagramData.value = data;
         saveDiagramData(data);
-        emit("diagram-updated", data);
       },
       getCanvasPosition: () => componentManager.getCanvasPosition(),
       getScale: () => componentManager.getCanvasScale(),
@@ -1096,9 +1062,6 @@ function updateDiagramDataDirectly(data: DiagramData) {
 
   diagramData.value = data;
   saveDiagramData(data);
-
-  // 发出diagram-updated事件
-  emit("diagram-updated", data);
 }
 
 // 暴露方法给父组件
@@ -1119,48 +1082,23 @@ watch(
 </script>
 
 <style scoped>
+/* 基础容器样式 - 使用 Tailwind 类替代 */
 .diagram-container {
-  position: relative;
-  width: 100%;
-  height: 100%;
-  overflow: hidden;
-  background-size:
-    20px 20px,
-    20px 20px,
-    100px 100px,
-    100px 100px;
+  background-size: 20px 20px, 20px 20px, 100px 100px, 100px 100px;
   background-position: 0 0;
-  user-select: none;
-  -webkit-user-select: none;
-  -moz-user-select: none;
-  -ms-user-select: none;
-  display: flex;
-  flex-direction: column;
 }
 
+/* 画布样式 - 部分保留自定义属性 */
 .diagram-canvas {
-  position: relative;
   width: 10000px;
   height: 10000px;
   transform-origin: 0 0;
-  user-select: none;
-  -webkit-user-select: none;
-  -moz-user-select: none;
-  -ms-user-select: none;
 }
 
 /* 连线层样式 */
 .wires-layer {
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
   pointer-events: auto;
-  /* 修复：允许线被点击 */
-  z-index: 50;
   overflow: visible;
-  /* 确保超出SVG范围的内容也能显示 */
 }
 
 .wires-layer path {
@@ -1168,71 +1106,34 @@ watch(
   cursor: pointer;
 }
 
-/* 元器件容器样式 */
+/* 组件容器样式 */
 .component-wrapper {
-  position: absolute;
-  padding: 0;
-  /* 移除内边距，确保元素大小与内容完全匹配 */
   box-sizing: content-box;
-  /* 使用content-box确保内容尺寸不受padding影响 */
-  display: inline-block;
-  overflow: visible;
-  /* 允许内容溢出（用于显示边框） */
   cursor: move;
-  /* 显示移动光标 */
-  user-select: none;
-  -webkit-user-select: none;
-  -moz-user-select: none;
-  -ms-user-select: none;
 }
 
-/* 悬停状态 - 使用outline而非伪元素 */
+/* 悬停状态 */
 .component-hover {
   outline: 2px dashed #3498db;
   outline-offset: 2px;
-  z-index: 2;
 }
 
-/* 选中状态 - 使用outline而非伪元素 */
+/* 选中状态 */
 .component-selected {
   outline: 3px dashed;
   outline-color: #e74c3c #f39c12 #3498db #2ecc71;
   outline-offset: 3px;
 }
 
-/* 禁用状态 */
-.component-disabled {
-  cursor: not-allowed;
-  filter: grayscale(70%);
-}
-
-/* 隐藏引脚状态 */
-.component-hidepins :deep([data-pin-wrapper]) {
-  display: none;
-}
-
-/* 深度选择器 - 默认阻止SVG内部元素的鼠标事件，但允许SVG本身和特定交互元素 */
+/* SVG 交互样式 */
 .component-wrapper :deep(svg) {
   pointer-events: auto;
-  /* 确保SVG本身可以接收鼠标事件用于拖拽 */
-  user-select: none;
-  -webkit-user-select: none;
-  -moz-user-select: none;
-  -ms-user-select: none;
 }
 
-.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;
-  /* 非交互元素不接收鼠标事件 */
 }
 
-/* 允许特定SVG元素接收鼠标事件，用于交互 */
 .component-wrapper :deep(svg circle[fill-opacity]),
 .component-wrapper :deep(svg rect[fill-opacity]),
 .component-wrapper :deep(svg rect[class*="glow"]),
diff --git a/src/views/Project/Index.vue b/src/views/Project/Index.vue
index 9908784..f561ca5 100644
--- a/src/views/Project/Index.vue
+++ b/src/views/Project/Index.vue
@@ -29,7 +29,6 @@
               <DiagramCanvas
                 ref="diagramCanvas"
                 :showDocPanel="showDocPanel"
-                @diagram-updated="handleDiagramUpdated"
                 @open-components="openComponentsMenu"
                 @toggle-doc-panel="toggleDocPanel"
               />
@@ -157,7 +156,10 @@ function handleHorizontalSplitterResize(sizes: number[]) {
 
 function handleVerticalSplitterResize(sizes: number[]) {
   if (sizes && sizes.length > 0) {
-    verticalSplitterSize.value = sizes[0];
+    // 只在非全屏状态下保存分栏大小，避免全屏时的100%被保存
+    if (!isBottomBarFullscreen.value) {
+      verticalSplitterSize.value = sizes[0];
+    }
   }
 }
 
@@ -217,11 +219,6 @@ function openComponentsMenu() {
   showComponentsMenu.value = true;
 }
 
-// 处理图表数据更新事件
-function handleDiagramUpdated(data: DiagramData) {
-  console.log("Diagram data updated:", data);
-}
-
 // 更新组件属性的方法 - 委托给componentManager
 function updateComponentProp(
   componentId: string,