src/components/Lee-Logic-Flow/index.vuesrc/components/Lee-Logic-Flow/utils/lifecycle-hooks.ts

<template>  <divclass="lee-logic-flow">    <LeeLeftMenuOperation />    <!-- LogicFlow 画布 -->    <divref="leeLogicFlowContainer"class="lf-container"></div>  </div></template><scriptsetuplang="ts">import { ref, shallowRef } from "vue";import { useLifecycleHooks } from "./utils/lifecycle-hooks";import LogicFlow from "@logicflow/core";import LeeLeftMenuOperation from "./components/Lee-Left-Menu-Operation/index.vue";import LeeTopMenuOperation from "./components/Lee-Top-Menu-Operation/index.vue";import LeeBottomMenuOperation from "./components/Lee-Bottom-Menu-Operation/index.vue";// LogicFlow 实例const lf = shallowRef<LogicFlow | null>(null);const leeLogicFlowContainer = ref<HTMLElement | null>(null);const { useOnMountedHooks, useOnUnmountedHooks } = useLifecycleHooks(  lf,  leeLogicFlowContainer);// 正确调用 onMounted 和 onUnmounted，它们需要传入回调函数作为参数useOnMountedHooks();useOnUnmountedHooks();</script><stylescopedlang="scss">.lee-logic-flow {  height: 100%;  width: 100%;  display: flex;  position: relative;}.lf-container {  flex: 1;  position: relative;  box-sizing: border-box;  height: 100%;  width: 100%;  overflow: hidden; /* 防止出现滚动条 */}</style>

import LogicFlow from "@logicflow/core";import "@logicflow/core/dist/index.css";import { ref, shallowRef, onMounted, onUnmounted } from "vue";const lsData = {  // 节点  nodes: [    {      id: 50,      type: "rect",      x: 100,      y: 150,      text: "你好",    },    {      id: 21,      type: "circle",      x: 300,      y: 150,    },  ],  // 边  edges: [    {      type: "polyline",      sourceNodeId: 50,      targetNodeId: 21,    },  ],};export function useLifecycleHooks(lfNew: any, containerRef: any) {  // LogicFlow 容器引用  const lfContainer = containerRef;  const lf = lfNew;  let resizeObserver: ResizeObserver | null = null;  // 初始化 LogicFlow  function useOnMountedHooks() {    onMounted(() => {      if (!lfContainer.value) return;      // 设置容器的宽度和高度      const container = lfContainer.value;      container.style.width = '100%';      container.style.height = '100%';      lf.value = new LogicFlow({        container: container,        width: container.offsetWidth,        height: container.offsetHeight,        grid: {          size: 20,          visible: true,          type: "dot",          config: {            color: "rgba(102, 126, 234, 0.2)",          },        },        background: {          color: "rgba(30, 30, 46, 0.5)",        },        keyboard: {          enabled: true, // 启用键盘快捷键        },        edgeType: "bezier", // 默认边类型为贝塞尔曲线        isSilentMode: false, // 非静默模式，允许删除等操作        stopScrollGraph: true, // 禁止鼠标滚动移动画布（改用滚轮缩放）        stopZoomGraph: false, // 允许缩放画布        style: {          rect: {            rx: 8,            ry: 8,          },        },      });      // 添加滚轮缩放功能      if (container) {        container.addEventListener(          "wheel",          (e: WheelEvent) => {            e.preventDefault();            if (!lf.value) return;            // 获取当前缩放比例            const currentZoom = lf.value.getTransform().SCALE_X || 1;            // 计算新的缩放比例            const delta = e.deltaY > 0 ? -0.1 : 0.1;            let newZoom = currentZoom + delta;            // 限制缩放范围 0.2 - 4            newZoom = Math.max(0.2, Math.min(4, newZoom));            // 应用缩放            lf.value.zoom(newZoom);          },          { passive: false }        );        // 监听容器大小变化        resizeObserver = new ResizeObserver(entries => {          if (lf.value && entries.length > 0) {            const { width, height } = entries[0].contentRect;            lf.value.resize(width, height);          }        });        resizeObserver.observe(container);      }      // 渲染示例数据      renderExample();    });  }  // 组件卸载时移除事件监听  function useOnUnmountedHooks() {    onUnmounted(() => {      document.removeEventListener("keydown", handleKeyDown);      if (resizeObserver) {        resizeObserver.disconnect();        resizeObserver = null;      }    });  }  // 添加键盘删除功能  const handleKeyDown = (e: KeyboardEvent) => {    if (!lf.value) return;    // 检查是否按下 Delete 或 Backspace 键    if (e.key === "Delete" || e.key === "Backspace") {      // 获取当前选中的元素      const selectElements = lf.value.getSelectElements();      if (        selectElements &&        selectElements.nodes &&        selectElements.nodes.length > 0      ) {        // 删除选中的节点        selectElements.nodes.forEach((node: any) => {          // 先获取与该节点相关的所有边          const graphData = lf.value!.getGraphData() as any;          const relatedEdges = graphData.edges.filter(            (edge: any) =>              edge.sourceNodeId === node.id || edge.targetNodeId === node.id          );          // 删除相关的边          relatedEdges.forEach((edge: any) => {            lf.value!.deleteEdge(edge.id);          });          // 删除节点          lf.value!.deleteNode(node.id);        });        // 阻止默认行为（防止浏览器后退）        e.preventDefault();      } else if (        selectElements &&        selectElements.edges &&        selectElements.edges.length > 0      ) {        // 删除选中的边        selectElements.edges.forEach((edge: any) => {          lf.value!.deleteEdge(edge.id);        });        // 阻止默认行为        e.preventDefault();      }    }  };  // 添加键盘事件监听  document.addEventListener("keydown", handleKeyDown);  // 渲染示例流程  const renderExample = () => {    if (!lf.value) return;    lf.value.render(lsData);  };  return {    useOnMountedHooks,    useOnUnmountedHooks,    lf,    lfContainer,  };}