feat: 添加vue-flow流程图示例

package.json

@@ -55,6 +55,7 @@
     "@pureadmin/descriptions": "^1.2.1",
     "@pureadmin/table": "^3.1.2",
     "@pureadmin/utils": "^2.4.7",
+    "@vue-flow/core": "^1.33.4",
     "@vueuse/core": "^10.9.0",
     "@vueuse/motion": "^2.1.0",
     "@wangeditor/editor": "^5.1.23",
@@ -114,6 +115,7 @@
     "@iconify/vue": "^4.1.1",
     "@intlify/unplugin-vue-i18n": "^2.0.0",
     "@pureadmin/theme": "^3.2.0",
+    "@types/dagre": "^0.7.52",
     "@types/gradient-string": "^1.1.5",
     "@types/intro.js": "^5.1.5",
     "@types/js-cookie": "^3.0.6",
@@ -130,6 +132,7 @@
     "boxen": "^7.1.1",
     "cloc": "^2.11.0",
     "cssnano": "^6.1.0",
+    "dagre": "^0.8.5",
     "eslint": "^8.57.0",
     "eslint-config-prettier": "^9.1.0",
     "eslint-define-config": "^2.1.0",

src/router/enums.ts

@@ -1,29 +1,31 @@
 // 完整版菜单比较多，将 rank 抽离出来，在此方便维护
 
 const home = 0, // 平台规定只有 home 路由的 rank 才能为 0 ，所以后端在返回 rank 的时候需要从非 0 开始
-  components = 1,
-  able = 2,
-  table = 3,
-  list = 4,
-  result = 5,
-  error = 6,
-  frame = 7,
-  nested = 8,
-  permission = 9,
-  system = 10,
-  monitor = 11,
-  tabs = 12,
-  about = 13,
-  editor = 14,
-  flowchart = 15,
-  formdesign = 16,
-  board = 17,
-  ppt = 18,
-  guide = 19,
-  menuoverflow = 20;
+  vueflow = 1,
+  components = 2,
+  able = 3,
+  table = 4,
+  list = 5,
+  result = 6,
+  error = 7,
+  frame = 8,
+  nested = 9,
+  permission = 10,
+  system = 11,
+  monitor = 12,
+  tabs = 13,
+  about = 14,
+  editor = 15,
+  flowchart = 16,
+  formdesign = 17,
+  board = 18,
+  ppt = 19,
+  guide = 20,
+  menuoverflow = 21;
 
 export {
   home,
+  vueflow,
   components,
   able,
   table,

src/router/modules/vueflow.ts

@@ -0,0 +1,21 @@
+import { vueflow } from "@/router/enums";
+
+export default {
+  path: "/vue-flow",
+  redirect: "/vue-flow/index",
+  meta: {
+    icon: "ep:set-up",
+    title: "vue-flow",
+    rank: vueflow
+  },
+  children: [
+    {
+      path: "/vue-flow/index",
+      name: "VueFlow",
+      component: () => import("@/views/vue-flow/layouting/index.vue"),
+      meta: {
+        title: "vue-flow"
+      }
+    }
+  ]
+} satisfies RouteConfigsTable;

src/views/vue-flow/layouting/animationEdge.vue

@@ -0,0 +1,123 @@
+<script setup lang="ts">
+import type { EdgeProps } from "@vue-flow/core";
+import { ref, toRef, computed, watch } from "vue";
+import { TransitionPresets, executeTransition } from "@vueuse/core";
+import {
+  BaseEdge,
+  EdgeLabelRenderer,
+  getSmoothStepPath,
+  useNodesData
+} from "@vue-flow/core";
+
+const props = defineProps<EdgeProps>();
+
+const edgePoint = ref(0);
+
+const sourceNodeData = useNodesData(() => props.source);
+
+const isFinished = toRef(() => sourceNodeData.value.isFinished);
+
+const isAnimating = ref(false);
+
+const edgeColor = toRef(() => {
+  if (sourceNodeData.value.hasError) {
+    return "#f87171";
+  }
+
+  if (sourceNodeData.value.isFinished) {
+    return "#10b981";
+  }
+
+  if (sourceNodeData.value.isCancelled) {
+    return "#fbbf24";
+  }
+
+  if (sourceNodeData.value.isSkipped) {
+    return "#f59e0b";
+  }
+
+  return "#6b7280";
+});
+
+const edgeRef = ref<InstanceType<typeof BaseEdge>>();
+
+const circlePosition = ref({ x: 0, y: 0 });
+
+const currentLength = ref(0);
+
+const path = computed(() => getSmoothStepPath(props));
+
+watch(edgePoint, point => {
+  const pathEl = edgeRef.value?.pathEl;
+
+  if (!pathEl || point === 0) {
+    return;
+  }
+
+  const currLength = pathEl.getTotalLength();
+
+  if (currentLength.value !== currLength) {
+    return runAnimation();
+  }
+
+  circlePosition.value = pathEl.getPointAtLength(point);
+});
+
+watch(isFinished, async (isFinished, _, onCleanup) => {
+  if (isFinished) {
+    await runAnimation();
+
+    edgePoint.value = 0;
+    currentLength.value = 0;
+    circlePosition.value = { x: 0, y: 0 };
+  }
+});
+
+async function runAnimation() {
+  const pathEl = edgeRef.value?.pathEl;
+
+  if (!pathEl) {
+    return;
+  }
+
+  isAnimating.value = true;
+
+  const totalLength = pathEl.getTotalLength();
+
+  const from = edgePoint.value || 0;
+
+  if (currentLength.value !== totalLength) {
+    currentLength.value = totalLength;
+  }
+
+  await executeTransition(edgePoint, from, totalLength, {
+    transition: TransitionPresets.easeInOutCubic
+  });
+
+  isAnimating.value = false;
+}
+</script>
+
+<template>
+  <BaseEdge
+    v-bind="$attrs"
+    :id="id"
+    ref="edgeRef"
+    :path="path[0]"
+    :marker-end="markerEnd"
+    :style="{ stroke: edgeColor }"
+  />
+
+  <EdgeLabelRenderer v-if="isAnimating">
+    <div
+      :style="{
+        position: 'absolute',
+        transform: `translate(-50%, -50%) translate(${circlePosition.x}px,${circlePosition.y}px)`,
+        pointerEvents: 'all'
+      }"
+      class="nodrag nopan"
+    >
+      📦
+    </div>
+  </EdgeLabelRenderer>
+</template>