fix: 删除无用函数与信号，修复全屏bug

2025-07-13 16:00:49 +08:00
parent a76ee74656
commit e38770a496
2 changed files with 20 additions and 122 deletions
--- 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"]),
--- 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,