自定义vue节点

+<!--
+ * @Date: 2025-03-11 17:25:14
+ * @LastEditors: hookehuyr hookehuyr@gmail.com
+ * @LastEditTime: 2025-03-11 18:30:47
+ * @FilePath: /logic-flow2/src/views/node-vue/ProgressNode.vue
+ * @Description: 文件描述
+-->
+<template>
+  <el-progress type="dashboard" :percentage="percentage" :width="80">
+    <template #default="{ percentage }">
+      <span class="percentage-value">{{ percentage }}%</span>
+    </template>
+  </el-progress>
+</template>
+
+<script setup>
+import { ref, inject, onMounted } from "vue";
+import { EventType } from "@logicflow/core";
+import { vueNodesMap } from "@logicflow/vue-node-registry";
+
+const percentage = ref(80);
+const getNode = inject("getNode");
+const getGraph = inject("getGraph");
+
+onMounted(() => {
+  const node = getNode();
+  const graph = getGraph();
+
+  graph.eventCenter.on(EventType.NODE_PROPERTIES_CHANGE, (eventData) => { // 监听节点属性变化事件（NODE_PROPERTIES_CHANGE）
+    const keys = eventData.keys; // 获取发生变化的属性名列表
+    const content = vueNodesMap[node.type]; // 从 vueNodesMap 中获取当前节点类型对应的配置信息
+
+    if (content && eventData.id === node.id) { // 确保只处理当前节点的属性变化事件,通过比对事件中的节点 ID 和当前节点的 ID
+      const { effect } = content; // 从节点配置中获取 effect 配置,effect 定义了哪些属性变化时需要触发更新
+
+      // 如果没有定义 effect，则默认更新；如果定义了 effect，则只有在 effect 中的属性发生变化时才更新
+      if (!effect || keys.some((key) => effect.includes(key))) {
+        console.log("eventData --->>>", eventData);
+        percentage.value = eventData.properties?.progress || 0;
+      }
+    }
+  });
+});
+</script>

+<!--
+ * @Date: 2025-03-11 17:20:37
+ * @LastEditors: hookehuyr hookehuyr@gmail.com
+ * @LastEditTime: 2025-03-11 18:15:05
+ * @FilePath: /logic-flow2/src/views/node-vue/index.vue
+ * @Description: 文件描述
+-->
+<template>
+  <div class="container">
+    <div ref="containerRef" id="graph" class="flow-container"></div>
+  </div>
+  <TeleportContainer :flow-id="flowId" />
+</template>
+
+<script setup>
+import { forEach, map, has } from "lodash-es";
+import LogicFlow, { ElementState, LogicFlowUtil } from "@logicflow/core";
+import { register, getTeleport } from "@logicflow/vue-node-registry";
+
+import ProgressNode from "./ProgressNode.vue";
+
+const containerRef = ref(null);
+const TeleportContainer = getTeleport();
+const flowId = ref("");
+
+onMounted(() => {
+  if (containerRef.value) {
+    const lf = new LogicFlow({
+      container: containerRef.value,
+      grid: true,
+    });
+
+    // 注册自定义 vue 节点
+    register(
+      {
+        type: "custom-vue-node",
+        component: ProgressNode,
+      },
+      lf
+    );
+
+    lf.on("graph:rendered", ({ graphModel }) => {
+      flowId.value = graphModel?.flowId || "";
+    });
+
+    // 注册事件
+    lf.render({});
+    const node1 = lf.addNode({
+      id: "vue-node-1",
+      type: "custom-vue-node",
+      x: 80,
+      y: 80,
+      properties: {
+        progress: 60,
+        width: 80,
+        height: 80,
+      },
+    });
+    console.log("node1 --->>>", node1);
+
+    const node2 = lf.addNode({
+      id: "vue-node-2",
+      type: "custom-vue-node",
+      x: 360,
+      y: 80,
+      properties: {
+        progress: 60,
+        width: 80,
+        height: 80,
+      },
+    });
+
+    // setInterval(() => {
+    //   const { properties } = node2.getData();
+    //   console.log("properties.progress --->>>", properties?.progress);
+    //   if (has(properties, "progress")) {
+    //     const progress = properties?.progress;
+    //     node2.setProperty("progress", (progress + 10) % 100);
+    //   }
+    // }, 2000);
+
+    setTimeout(() => {
+      const { properties } = node2.getData();
+      console.log("properties.progress --->>>", properties?.progress);
+      if (has(properties, "progress")) {
+        const progress = properties?.progress;
+        node2.setProperty("progress", (progress + 10) % 100);
+      }
+    }, 2000);
+  }
+});
+</script>
+
+<style scoped>
+.container {
+  width: 100vw;
+  height: 100vh;
+  display: flex;
+  flex-direction: column;
+}
+
+.flow-container {
+  flex: 1;
+  width: 100%;
+  height: 100%;
+}
+</style>