From 59e8324196ad34ddb73b64a901cf35ca974e27c3 Mon Sep 17 00:00:00 2001
From: zttProjectSpace <zhangtantan@h-partners.com>
Date: Fri, 17 Jan 2025 17:39:03 +0800
Subject: [PATCH 1/3] =?UTF-8?q?=E5=B7=A5=E4=BD=9C=E6=B5=81=E7=BC=96?=
 =?UTF-8?q?=E6=8E=92=E7=BC=A9=E6=94=BE=E5=8A=9F=E8=83=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 package.json                                  |   1 +
 src/assets/images/optimize.png                | Bin 0 -> 372 bytes
 .../createapp/components/CustomControl.vue    | 167 +++++++++++++
 src/views/createapp/components/workFlow.vue   |  53 +++-
 .../components/workFlowConfig/useLayout.js    |  62 +++++
 .../workFlowConfig/useRunProcess.js           | 234 ++++++++++++++++++
 .../createapp/components/workFlowStyle.scss   |  14 ++
 7 files changed, 527 insertions(+), 4 deletions(-)
 create mode 100644 src/assets/images/optimize.png
 create mode 100644 src/views/createapp/components/CustomControl.vue
 create mode 100644 src/views/createapp/components/workFlowConfig/useLayout.js
 create mode 100644 src/views/createapp/components/workFlowConfig/useRunProcess.js

diff --git a/package.json b/package.json
index db0abf1..cf1244b 100644
--- a/package.json
+++ b/package.json
@@ -23,6 +23,7 @@
     "@codemirror/theme-one-dark": "^6.1.2",
     "@computing/opendesign-icons": "file:lib\\opendesign-icons-1.0.3.tgz",
     "@computing/opendesign2": "file:lib\\opendesign2-2.0.11.tgz",
+    "@dagrejs/dagre": "1.1.2",
     "axios": "1.7.9",
     "babel-loader": "^9.2.1",
     "codemirror": "^6.0.1",
diff --git a/src/assets/images/optimize.png b/src/assets/images/optimize.png
new file mode 100644
index 0000000000000000000000000000000000000000..88e11108d0461300d803debf22a43b6cc57523a5
GIT binary patch
literal 372
zcmV-)0gL{LP)<h;3K|Lk000e1NJLTq001BW001Be1^@s6b9#F800004b3#c}2nYxW
zd<bNS0003iNkl<ZScUCYL2iUF5VKMLMf!+p-@tj*GwiwIOus<;h=z|by^t<SGO&cG
zs?_*`h#2EI$v8m4e+OfO{V;YUYXMBOO5}EJE}cf&4`T<iorTY@&5PX<P-(^L&jEmJ
z`(acC+{tI1W5H959Dq7YCy->lNB#%`2OKnu-T0<M2M{`tfVbh(tnFU*4@lPjQu!0h
zBA}vtt@pFsp9ZAyKF==zBDeLcJ3$1jh)iyLMrHldECPI6myK#fWZF8eKx7jVus<Xb
zJaYVwAaFoLCXfbX+rNLbYNcm;Dgp<t&86ESCt&wFVQj4nG-L~-)Bp<vxL&`fd`*~A
z<B%teP6SxiFiNRW1^gC@fWIdoC5+AlSe7t46JTm5)EbMsWGHulLp22j0Pqb50L1Wi
SAk};T0000<MNUMnLSTa4BbPM*

literal 0
HcmV?d00001

diff --git a/src/views/createapp/components/CustomControl.vue b/src/views/createapp/components/CustomControl.vue
new file mode 100644
index 0000000..5d4b546
--- /dev/null
+++ b/src/views/createapp/components/CustomControl.vue
@@ -0,0 +1,167 @@
+<template>
+  <div class="controlBox">
+    <div class="controlSearch"><IconSearch /></div>
+    <div class="controlScaleNumber">
+      {{ `${zommChangeValue * 100}%` }}
+    </div>
+    <el-dropdown placement="top" @visible-change="handleVisibleChange" popper-class="controlChange" class="controlBtn">
+      <span class="el-dropdown-link">
+        <IconChevronDown v-if="!dropDownVisible" />
+        <IconChevronUp v-else />
+      </span>
+      <template #dropdown>
+        <el-dropdown-menu>
+          <el-dropdown-item
+            class="reduce"
+            @click="handleSacl(zommChangeValue <= 0.5 ? zommChangeValue : zommChangeValue - 0.1)"
+            >缩小</el-dropdown-item
+          >
+          <el-dropdown-item
+            class="amplify"
+            @click="handleSacl(zommChangeValue >= 2 ? zommChangeValue : zommChangeValue + 0.1)"
+            >放大</el-dropdown-item
+          >
+          <el-dropdown-item class="adaptive" @click="handleSacl(1)">自适应</el-dropdown-item>
+          <el-dropdown-item class="scaleOther scaleHalf" divided @click="handleSacl(0.5)">缩放到50%</el-dropdown-item>
+          <el-dropdown-item class="scaleOther" @click="handleSacl(1)">缩放到100%</el-dropdown-item>
+          <el-dropdown-item class="scaleOther" @click="handleSacl(1.5)">缩放到150%</el-dropdown-item>
+          <el-dropdown-item class="scaleTwice" @click="handleSacl(2)">缩放到200%</el-dropdown-item>
+        </el-dropdown-menu>
+      </template>
+    </el-dropdown>
+    <div class="dividerBox"></div>
+    <div class="optimize" @click="layoutGraph('LR')">
+      <img src="@/assets/images/optimize.png" />
+    </div>
+  </div>
+</template>
+<script setup lang="ts">
+import { ref, watch } from 'vue';
+import { IconChevronDown, IconChevronUp, IconSearch } from '@computing/opendesign-icons';
+interface ControlProps {
+  handleChangeZoom: any;
+  flowZoom: number;
+  layoutGraph: any;
+}
+const props = withDefaults(defineProps<ControlProps>(), {});
+const zommChangeValue = ref(1);
+const dropDownVisible = ref(false);
+const handleSacl = zoomValue => {
+  zommChangeValue.value = zoomValue;
+  props.handleChangeZoom(zoomValue);
+};
+const handleVisibleChange = visible => {
+  dropDownVisible.value = visible;
+};
+
+watch(
+  () => props.flowZoom,
+  () => {
+    zommChangeValue.value = props.flowZoom;
+  },
+);
+</script>
+
+<style lang="scss">
+.controlBox {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  width: 144px;
+  position: absolute;
+  bottom: 24px;
+  left: 24px;
+  z-index: 999;
+  display: flex;
+  padding: 12px 16px;
+  border-radius: 8px;
+  box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.1);
+  background: var(--o-bg-color-base);
+  .controlSearch {
+    width: 16px;
+    height: 16px;
+  }
+  .el-dropdown-link {
+    width: 16px;
+    height: 16px;
+  }
+
+  .dividerBox {
+    width: 1px;
+    height: 16px;
+    background: var(--o-border-color-light);
+  }
+
+  .optimize {
+    width: 16px;
+    height: 16px;
+    cursor: pointer;
+    img {
+      width: 16px;
+      height: 16px;
+    }
+  }
+}
+
+.controlChange {
+  width: 120px;
+  height: 177px;
+  border: unset !important;
+  border-radius: 8px !important;
+  box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.1) !important;
+  background: var(--o-bg-color-base) !important;
+  margin-left: -34px;
+  margin-bottom: 6px;
+  .el-dropdown-menu__item {
+    height: 16px;
+    padding-left: 16px !important;
+    min-height: unset !important;
+    font-size: 12px;
+    line-height: 16px;
+    color: var(--o-text-color-secondary);
+  }
+
+  .reduce {
+    margin-top: 4px;
+  }
+  .reduce,
+  .amplify,
+  .scaleOther {
+    margin-bottom: 8px;
+  }
+
+  .scaleTwice {
+    margin-bottom: 4px;
+  }
+
+  .scaleHalf {
+    margin-top: 4px !important;
+  }
+  .el-dropdown-menu__item--divided {
+    margin: 4px 0 !important;
+  }
+}
+
+.controlBtn {
+  width: 16px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  color: var(--o-text-color-secondary) !important;
+
+  .el-dropdown-link:focus-visible {
+    outline: unset !important;
+  }
+
+  .el-dropdown-link,
+  .o-dropdown-link {
+    display: flex;
+    align-items: center;
+    cursor: pointer;
+    color: var(--o-text-color-secondary) !important;
+  }
+}
+.controlBtn:focus-visible {
+  outline: unset !important;
+}
+</style>
diff --git a/src/views/createapp/components/workFlow.vue b/src/views/createapp/components/workFlow.vue
index 896d3bb..ee37e99 100644
--- a/src/views/createapp/components/workFlow.vue
+++ b/src/views/createapp/components/workFlow.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import './workFlowStyle.scss';
-import { ref } from 'vue';
+import { nextTick, ref } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { ElTooltip } from 'element-plus';
 import { VueFlow, useVueFlow, Panel } from '@vue-flow/core';
@@ -8,11 +8,13 @@ import { Background } from '@vue-flow/background';
 import { MiniMap } from '@vue-flow/minimap';
 import CustomEdge from './workFlowConfig/CustomEdge.vue';
 import CustomNode from './workFlowConfig/CustomNode.vue';
+import CustomControl from './CustomControl.vue';
 import CustomSaENode from './workFlowConfig/CustomSaENode.vue';
 import useDragAndDrop from './workFlowConfig/useDnD';
 import WorkFlowDialog from './workFlowConfig/workFlowDialog.vue';
+import { useRunProcess } from './workFlowConfig/useRunProcess';
+import { useLayout } from './workFlowConfig/useLayout';
 import { IconSearch, IconCaretRight, IconCaretDown, IconPlusCircle } from '@computing/opendesign-icons';
-
 const { t } = useI18n();
 const copilotAside = ref<HTMLElement>();
 const isCopilotAsideVisible = ref(true);
@@ -23,6 +25,8 @@ const workFlowItem = ref();
 const isAddWorkFlow = ref(false);
 const editData = ref();
 const dialogType = ref('');
+const flowZoom = ref(1);
+const cancelOnError = ref(true);
 function hanleAsideVisible(): void {
   if (!copilotAside.value) return;
   if (isCopilotAsideVisible.value) {
@@ -32,7 +36,10 @@ function hanleAsideVisible(): void {
   }
 }
 
-const { onInit, onConnect, addEdges, updateNode, getNodes, getEdges, findNode, removeNodes } = useVueFlow();
+const { onConnect, addEdges, getNodes, getEdges, findNode, removeNodes, setViewport, getViewport, fitView } =
+  useVueFlow();
+const { graph, layout } = useLayout();
+const { run, stop, reset, isRunning } = useRunProcess({ graph, cancelOnError: cancelOnError.value });
 
 const { onDragOver, onDrop, onDragLeave, isDragOver, onDragStart } = useDragAndDrop();
 // 这里是初始化的开始结束的节点
@@ -59,6 +66,17 @@ const nodes = ref([
     },
     position: { x: 600, y: 160 },
   },
+  {
+    id: '3',
+    type: 'custom-end',
+    data: {
+      label: '结束',
+      desc: '',
+      nodePosition: 'Left',
+      target: 'target',
+    },
+    position: { x: 600, y: 160 },
+  },
 ]);
 // 开始的边默认为空数组【当然回显时应该有值】
 const edges = ref([]);
@@ -95,6 +113,14 @@ const nodeStancesList = ref([
   },
 ]);
 
+const handleChangeZoom = zoomValue => {
+  setViewport({
+    zoom: zoomValue,
+    x: 0,
+    y: 0,
+  });
+};
+
 onConnect(e => {
   addEdges({
     ...e,
@@ -120,6 +146,23 @@ const delNode = id => {
     node ? removeNodes(node) : '';
   }
 };
+
+const handleZommOnScroll = () => {
+  const zoomObj = getViewport();
+  flowZoom.value = Number(zoomObj.zoom.toFixed(1));
+};
+
+async function layoutGraph(direction) {
+  await stop();
+
+  reset(nodes.value);
+
+  nodes.value = layout(nodes.value, edges.value, direction);
+
+  nextTick(() => {
+    fitView();
+  });
+}
 </script>
 <template>
   <div class="workFlowContainer" @drop="onDrop">
@@ -180,9 +223,11 @@ const delNode = id => {
         class="my-diagram-class"
         @dragover="onDragOver"
         @dragleave="onDragLeave"
+        @paneScroll="handleZommOnScroll"
       >
         <Background pattern-color="#aaa" :gap="8" />
-        <MiniMap />
+        <MiniMap :width="220" mask-color="#f4f6fa" :mask-stroke-width="250" />
+        <CustomControl :handleChangeZoom="handleChangeZoom" :flowZoom="flowZoom" :layoutGraph="layoutGraph" />
         <!-- 自定义节点 -->
         <template #node-custom="customNodeProps">
           <CustomNode v-bind="customNodeProps" @delNode="delNode"></CustomNode>
diff --git a/src/views/createapp/components/workFlowConfig/useLayout.js b/src/views/createapp/components/workFlowConfig/useLayout.js
new file mode 100644
index 0000000..1dd933a
--- /dev/null
+++ b/src/views/createapp/components/workFlowConfig/useLayout.js
@@ -0,0 +1,62 @@
+import dagre from '@dagrejs/dagre';
+import { Position, useVueFlow } from '@vue-flow/core';
+import { ref } from 'vue';
+
+/**
+ * Composable to run the layout algorithm on the graph.
+ * It uses the `dagre` library to calculate the layout of the nodes and edges.
+ *
+ * @see https://github.com/dagrejs/dagre/wiki
+ */
+export function useLayout() {
+  const { findNode } = useVueFlow();
+
+  const graph = ref(new dagre.graphlib.Graph());
+
+  function layout(nodes, edges, direction) {
+    // we create a new graph instance, in case some nodes/edges were removed, otherwise dagre would act as if they were still there
+    const dagreGraph = new dagre.graphlib.Graph();
+
+    graph.value = dagreGraph;
+
+    dagreGraph.setDefaultEdgeLabel(() => ({}));
+
+    const isHorizontal = direction === 'LR';
+    dagreGraph.setGraph({ rankdir: direction });
+
+    for (const node of nodes) {
+      // if you need width+height of nodes for your layout, you can use the dimensions property of the internal node (`GraphNode` type)
+      const graphNode = findNode(node.id);
+
+      if (!graphNode) {
+        console.error(`Node with id ${node.id} not found in the graph`);
+        continue;
+      }
+
+      dagreGraph.setNode(node.id, {
+        width: graphNode.dimensions.width || 150,
+        height: graphNode.dimensions.height || 50,
+      });
+    }
+
+    for (const edge of edges) {
+      dagreGraph.setEdge(edge.source, edge.target);
+    }
+
+    dagre.layout(dagreGraph);
+
+    // set nodes with updated positions
+    return nodes.map(node => {
+      const nodeWithPosition = dagreGraph.node(node.id);
+
+      return {
+        ...node,
+        targetPosition: isHorizontal ? Position.Left : Position.Top,
+        sourcePosition: isHorizontal ? Position.Right : Position.Bottom,
+        position: { x: nodeWithPosition.x, y: nodeWithPosition.y },
+      };
+    });
+  }
+
+  return { graph, layout };
+}
diff --git a/src/views/createapp/components/workFlowConfig/useRunProcess.js b/src/views/createapp/components/workFlowConfig/useRunProcess.js
new file mode 100644
index 0000000..a8a332a
--- /dev/null
+++ b/src/views/createapp/components/workFlowConfig/useRunProcess.js
@@ -0,0 +1,234 @@
+import { ref, toRef, toValue } from 'vue';
+import { useVueFlow } from '@vue-flow/core';
+
+export const ProcessStatus = {
+  ERROR: 'error',
+  SKIPPED: 'skipped',
+  CANCELLED: 'cancelled',
+  FINISHED: 'finished',
+  RUNNING: 'running',
+};
+
+/**
+ * Composable to simulate running a process tree.
+ *
+ * It loops through each node, pretends to run an async process, and updates the node's data indicating whether the process has finished.
+ * When one node finishes, the next one starts.
+ *
+ * When a node has multiple descendants, it will run them in parallel.
+ *
+ * @param options
+ * @param options.graph The graph object containing the nodes and edges.
+ * @param options.cancelOnError Whether to cancel the process if an error occurs.
+ */
+export function useRunProcess({ graph: dagreGraph, cancelOnError = true }) {
+  const { updateNodeData, getConnectedEdges } = useVueFlow();
+
+  const graph = toRef(() => toValue(dagreGraph));
+
+  const isRunning = ref(false);
+
+  /** Map of running tasks with the node ID as the key and the timeout as the value. */
+  const runningTasks = new Map();
+
+  /** Set of node ids of nodes that have been executed  */
+  const executedNodes = new Set();
+
+  /** Set of node ids yet to be executed */
+  const upcomingTasks = new Set();
+
+  /**
+   * Run the process on a node.
+   * It will mark the node as running, simulate an async process, and then mark the node as finished or errored.
+   *
+   * @param nodeId The ID of the node to run.
+   * @param isStart Whether this is a starting node.
+   */
+  async function runNode(nodeId, isStart = false) {
+    if (executedNodes.has(nodeId)) {
+      return;
+    }
+
+    // save the upcoming task in case it gets cancelled before we even start it
+    upcomingTasks.add(nodeId);
+
+    // get all incoming edges to this node
+    const incomers = getConnectedEdges(nodeId).filter(connection => connection.target === nodeId);
+
+    // wait for edge animations to finish before starting the process
+    await Promise.all(incomers.map(incomer => until(() => !incomer.data?.isAnimating)));
+
+    // remove the upcoming task since we are about to start it
+    upcomingTasks.clear();
+
+    if (!isRunning.value) {
+      // The process was stopped
+      return;
+    }
+
+    // mark the node as executed, so it doesn't run again
+    executedNodes.add(nodeId);
+
+    updateNodeStatus(nodeId, ProcessStatus.RUNNING);
+
+    // simulate an async process with a random timeout between 1-2 seconds
+    const delay = Math.floor(Math.random() * 2000) + 1000;
+
+    return new Promise(resolve => {
+      const timeout = setTimeout(
+        async () => {
+          // get all children of this node
+          const children = graph.value.successors(nodeId) || [];
+
+          // randomly decide whether the node will throw an error
+          const willThrowError = Math.random() < 0.15;
+
+          // we avoid throwing an error on the starting node
+          if (!isStart && willThrowError) {
+            updateNodeStatus(nodeId, ProcessStatus.ERROR);
+
+            // if cancelOnError is true, we stop the process and mark all descendants as skipped
+            if (toValue(cancelOnError)) {
+              await skipDescendants(nodeId);
+              runningTasks.delete(nodeId);
+
+              resolve(true);
+              return;
+            }
+          }
+
+          updateNodeStatus(nodeId, ProcessStatus.FINISHED);
+
+          runningTasks.delete(nodeId);
+
+          if (children.length > 0) {
+            // run the process on the children in parallel
+            await Promise.all(children.map(child => runNode(child)));
+          }
+
+          resolve(true);
+        },
+        // if this is a starting node, we don't want to wait
+        isStart ? 0 : delay,
+      );
+
+      // save the timeout so we can cancel it if needed
+      runningTasks.set(nodeId, timeout);
+    });
+  }
+
+  /**
+   * Run a sequence of nodes.
+   * It will start with the nodes that have no predecessors and then run the process on each node in sequence.
+   * If a node has multiple descendants, it will run them in parallel.
+   * If an error occurs, it will stop the process and mark all descendants as skipped.
+   * If cancelOnError is true, it will stop the process if an error occurs.
+   * If the process is stopped, it will mark all running nodes as cancelled.
+   *
+   * @param nodes The nodes to run.
+   */
+  async function run(nodes) {
+    // if the process is already running, we don't want to start it again
+    if (isRunning.value) {
+      return;
+    }
+
+    // reset all nodes to their initial state
+    reset(nodes);
+
+    isRunning.value = true;
+
+    // get all starting nodes (nodes with no predecessors)
+    const startingNodes = nodes.filter(node => graph.value.predecessors(node.id)?.length === 0);
+
+    // run the process on all starting nodes in parallel
+    await Promise.all(startingNodes.map(node => runNode(node.id, true)));
+
+    clear();
+  }
+
+  /**
+   * Reset all nodes to their initial state.
+   *
+   * @param nodes The nodes to reset.
+   */
+  function reset(nodes) {
+    clear();
+
+    for (const node of nodes) {
+      updateNodeStatus(node.id, null);
+    }
+  }
+
+  /**
+   * Skip all descendants of a node.
+   *
+   * @param nodeId The ID of the node to skip descendants for.
+   */
+  async function skipDescendants(nodeId) {
+    const children = graph.value.successors(nodeId) || [];
+
+    for (const child of children) {
+      updateNodeStatus(child, ProcessStatus.SKIPPED);
+      await skipDescendants(child);
+    }
+  }
+
+  /**
+   * Stop the process.
+   *
+   * It will mark all running nodes as cancelled and skip all upcoming tasks.
+   */
+  async function stop() {
+    isRunning.value = false;
+
+    for (const nodeId of upcomingTasks) {
+      clearTimeout(runningTasks.get(nodeId));
+      runningTasks.delete(nodeId);
+      updateNodeStatus(nodeId, ProcessStatus.CANCELLED);
+      await skipDescendants(nodeId);
+    }
+
+    for (const [nodeId, task] of runningTasks) {
+      clearTimeout(task);
+      runningTasks.delete(nodeId);
+      updateNodeStatus(nodeId, ProcessStatus.CANCELLED);
+      await skipDescendants(nodeId);
+    }
+
+    executedNodes.clear();
+    upcomingTasks.clear();
+  }
+
+  /**
+   * Clear all running tasks and executed nodes.
+   */
+  function clear() {
+    isRunning.value = false;
+    executedNodes.clear();
+    runningTasks.clear();
+  }
+
+  /**
+   * Update the status of a node.
+   *
+   * @param nodeId The ID of the node to update.
+   * @param status The new status of the node.
+   */
+  function updateNodeStatus(nodeId, status) {
+    updateNodeData(nodeId, { status });
+  }
+
+  return { run, stop, reset, isRunning };
+}
+
+async function until(condition) {
+  return new Promise(resolve => {
+    const interval = setInterval(() => {
+      if (condition()) {
+        clearInterval(interval);
+        resolve(true);
+      }
+    }, 100);
+  });
+}
diff --git a/src/views/createapp/components/workFlowStyle.scss b/src/views/createapp/components/workFlowStyle.scss
index 4a5e3af..258318f 100644
--- a/src/views/createapp/components/workFlowStyle.scss
+++ b/src/views/createapp/components/workFlowStyle.scss
@@ -129,6 +129,20 @@
   .vue-flow__minimap {
     transform-origin: bottom right;
     background-color: var(--o-bg-color-base);
+    bottom: 57px;
+    margin-left: 24px;
+    border-radius: 8px;
+    width: 144px;
+    height: 96px;
+    svg {
+      width: 144px;
+      height: 96px;
+      border-radius: 8px;
+      path {
+        padding: 10px;
+        height: 100px !important;
+      }
+    }
   }
 
   .vue-flow__panel.right {
-- 
Gitee


From df523cc62ab6da790bbaa2413d3ee806d6b1391a Mon Sep 17 00:00:00 2001
From: zttProjectSpace <zhangtantan@h-partners.com>
Date: Fri, 17 Jan 2025 17:39:22 +0800
Subject: [PATCH 2/3] =?UTF-8?q?=E5=B7=A5=E4=BD=9C=E6=B5=81=E7=BC=96?=
 =?UTF-8?q?=E6=8E=92=E7=BC=A9=E6=94=BE=E5=8A=9F=E8=83=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/createapp/components/workFlow.vue | 13 +------------
 1 file changed, 1 insertion(+), 12 deletions(-)

diff --git a/src/views/createapp/components/workFlow.vue b/src/views/createapp/components/workFlow.vue
index ee37e99..6596c71 100644
--- a/src/views/createapp/components/workFlow.vue
+++ b/src/views/createapp/components/workFlow.vue
@@ -65,18 +65,7 @@ const nodes = ref([
       target: 'target',
     },
     position: { x: 600, y: 160 },
-  },
-  {
-    id: '3',
-    type: 'custom-end',
-    data: {
-      label: '结束',
-      desc: '',
-      nodePosition: 'Left',
-      target: 'target',
-    },
-    position: { x: 600, y: 160 },
-  },
+  } 
 ]);
 // 开始的边默认为空数组【当然回显时应该有值】
 const edges = ref([]);
-- 
Gitee


From 7cbbfd536f358bd58a6d444d93536e73e71a1ff7 Mon Sep 17 00:00:00 2001
From: zttProjectSpace <zhangtantan@h-partners.com>
Date: Fri, 17 Jan 2025 17:46:27 +0800
Subject: [PATCH 3/3] =?UTF-8?q?=E5=B7=A5=E4=BD=9C=E6=B5=81=E7=BC=96?=
 =?UTF-8?q?=E6=8E=92=E7=BC=A9=E6=94=BE=E5=8A=9F=E8=83=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/createapp/components/workFlow.vue   |   8 +-
 .../workFlowConfig/useRunProcess.js           | 234 ------------------
 2 files changed, 1 insertion(+), 241 deletions(-)
 delete mode 100644 src/views/createapp/components/workFlowConfig/useRunProcess.js

diff --git a/src/views/createapp/components/workFlow.vue b/src/views/createapp/components/workFlow.vue
index 6596c71..0e20d77 100644
--- a/src/views/createapp/components/workFlow.vue
+++ b/src/views/createapp/components/workFlow.vue
@@ -12,7 +12,6 @@ import CustomControl from './CustomControl.vue';
 import CustomSaENode from './workFlowConfig/CustomSaENode.vue';
 import useDragAndDrop from './workFlowConfig/useDnD';
 import WorkFlowDialog from './workFlowConfig/workFlowDialog.vue';
-import { useRunProcess } from './workFlowConfig/useRunProcess';
 import { useLayout } from './workFlowConfig/useLayout';
 import { IconSearch, IconCaretRight, IconCaretDown, IconPlusCircle } from '@computing/opendesign-icons';
 const { t } = useI18n();
@@ -26,7 +25,6 @@ const isAddWorkFlow = ref(false);
 const editData = ref();
 const dialogType = ref('');
 const flowZoom = ref(1);
-const cancelOnError = ref(true);
 function hanleAsideVisible(): void {
   if (!copilotAside.value) return;
   if (isCopilotAsideVisible.value) {
@@ -38,8 +36,7 @@ function hanleAsideVisible(): void {
 
 const { onConnect, addEdges, getNodes, getEdges, findNode, removeNodes, setViewport, getViewport, fitView } =
   useVueFlow();
-const { graph, layout } = useLayout();
-const { run, stop, reset, isRunning } = useRunProcess({ graph, cancelOnError: cancelOnError.value });
+const {  layout } = useLayout();
 
 const { onDragOver, onDrop, onDragLeave, isDragOver, onDragStart } = useDragAndDrop();
 // 这里是初始化的开始结束的节点
@@ -142,9 +139,6 @@ const handleZommOnScroll = () => {
 };
 
 async function layoutGraph(direction) {
-  await stop();
-
-  reset(nodes.value);
 
   nodes.value = layout(nodes.value, edges.value, direction);
 
diff --git a/src/views/createapp/components/workFlowConfig/useRunProcess.js b/src/views/createapp/components/workFlowConfig/useRunProcess.js
deleted file mode 100644
index a8a332a..0000000
--- a/src/views/createapp/components/workFlowConfig/useRunProcess.js
+++ /dev/null
@@ -1,234 +0,0 @@
-import { ref, toRef, toValue } from 'vue';
-import { useVueFlow } from '@vue-flow/core';
-
-export const ProcessStatus = {
-  ERROR: 'error',
-  SKIPPED: 'skipped',
-  CANCELLED: 'cancelled',
-  FINISHED: 'finished',
-  RUNNING: 'running',
-};
-
-/**
- * Composable to simulate running a process tree.
- *
- * It loops through each node, pretends to run an async process, and updates the node's data indicating whether the process has finished.
- * When one node finishes, the next one starts.
- *
- * When a node has multiple descendants, it will run them in parallel.
- *
- * @param options
- * @param options.graph The graph object containing the nodes and edges.
- * @param options.cancelOnError Whether to cancel the process if an error occurs.
- */
-export function useRunProcess({ graph: dagreGraph, cancelOnError = true }) {
-  const { updateNodeData, getConnectedEdges } = useVueFlow();
-
-  const graph = toRef(() => toValue(dagreGraph));
-
-  const isRunning = ref(false);
-
-  /** Map of running tasks with the node ID as the key and the timeout as the value. */
-  const runningTasks = new Map();
-
-  /** Set of node ids of nodes that have been executed  */
-  const executedNodes = new Set();
-
-  /** Set of node ids yet to be executed */
-  const upcomingTasks = new Set();
-
-  /**
-   * Run the process on a node.
-   * It will mark the node as running, simulate an async process, and then mark the node as finished or errored.
-   *
-   * @param nodeId The ID of the node to run.
-   * @param isStart Whether this is a starting node.
-   */
-  async function runNode(nodeId, isStart = false) {
-    if (executedNodes.has(nodeId)) {
-      return;
-    }
-
-    // save the upcoming task in case it gets cancelled before we even start it
-    upcomingTasks.add(nodeId);
-
-    // get all incoming edges to this node
-    const incomers = getConnectedEdges(nodeId).filter(connection => connection.target === nodeId);
-
-    // wait for edge animations to finish before starting the process
-    await Promise.all(incomers.map(incomer => until(() => !incomer.data?.isAnimating)));
-
-    // remove the upcoming task since we are about to start it
-    upcomingTasks.clear();
-
-    if (!isRunning.value) {
-      // The process was stopped
-      return;
-    }
-
-    // mark the node as executed, so it doesn't run again
-    executedNodes.add(nodeId);
-
-    updateNodeStatus(nodeId, ProcessStatus.RUNNING);
-
-    // simulate an async process with a random timeout between 1-2 seconds
-    const delay = Math.floor(Math.random() * 2000) + 1000;
-
-    return new Promise(resolve => {
-      const timeout = setTimeout(
-        async () => {
-          // get all children of this node
-          const children = graph.value.successors(nodeId) || [];
-
-          // randomly decide whether the node will throw an error
-          const willThrowError = Math.random() < 0.15;
-
-          // we avoid throwing an error on the starting node
-          if (!isStart && willThrowError) {
-            updateNodeStatus(nodeId, ProcessStatus.ERROR);
-
-            // if cancelOnError is true, we stop the process and mark all descendants as skipped
-            if (toValue(cancelOnError)) {
-              await skipDescendants(nodeId);
-              runningTasks.delete(nodeId);
-
-              resolve(true);
-              return;
-            }
-          }
-
-          updateNodeStatus(nodeId, ProcessStatus.FINISHED);
-
-          runningTasks.delete(nodeId);
-
-          if (children.length > 0) {
-            // run the process on the children in parallel
-            await Promise.all(children.map(child => runNode(child)));
-          }
-
-          resolve(true);
-        },
-        // if this is a starting node, we don't want to wait
-        isStart ? 0 : delay,
-      );
-
-      // save the timeout so we can cancel it if needed
-      runningTasks.set(nodeId, timeout);
-    });
-  }
-
-  /**
-   * Run a sequence of nodes.
-   * It will start with the nodes that have no predecessors and then run the process on each node in sequence.
-   * If a node has multiple descendants, it will run them in parallel.
-   * If an error occurs, it will stop the process and mark all descendants as skipped.
-   * If cancelOnError is true, it will stop the process if an error occurs.
-   * If the process is stopped, it will mark all running nodes as cancelled.
-   *
-   * @param nodes The nodes to run.
-   */
-  async function run(nodes) {
-    // if the process is already running, we don't want to start it again
-    if (isRunning.value) {
-      return;
-    }
-
-    // reset all nodes to their initial state
-    reset(nodes);
-
-    isRunning.value = true;
-
-    // get all starting nodes (nodes with no predecessors)
-    const startingNodes = nodes.filter(node => graph.value.predecessors(node.id)?.length === 0);
-
-    // run the process on all starting nodes in parallel
-    await Promise.all(startingNodes.map(node => runNode(node.id, true)));
-
-    clear();
-  }
-
-  /**
-   * Reset all nodes to their initial state.
-   *
-   * @param nodes The nodes to reset.
-   */
-  function reset(nodes) {
-    clear();
-
-    for (const node of nodes) {
-      updateNodeStatus(node.id, null);
-    }
-  }
-
-  /**
-   * Skip all descendants of a node.
-   *
-   * @param nodeId The ID of the node to skip descendants for.
-   */
-  async function skipDescendants(nodeId) {
-    const children = graph.value.successors(nodeId) || [];
-
-    for (const child of children) {
-      updateNodeStatus(child, ProcessStatus.SKIPPED);
-      await skipDescendants(child);
-    }
-  }
-
-  /**
-   * Stop the process.
-   *
-   * It will mark all running nodes as cancelled and skip all upcoming tasks.
-   */
-  async function stop() {
-    isRunning.value = false;
-
-    for (const nodeId of upcomingTasks) {
-      clearTimeout(runningTasks.get(nodeId));
-      runningTasks.delete(nodeId);
-      updateNodeStatus(nodeId, ProcessStatus.CANCELLED);
-      await skipDescendants(nodeId);
-    }
-
-    for (const [nodeId, task] of runningTasks) {
-      clearTimeout(task);
-      runningTasks.delete(nodeId);
-      updateNodeStatus(nodeId, ProcessStatus.CANCELLED);
-      await skipDescendants(nodeId);
-    }
-
-    executedNodes.clear();
-    upcomingTasks.clear();
-  }
-
-  /**
-   * Clear all running tasks and executed nodes.
-   */
-  function clear() {
-    isRunning.value = false;
-    executedNodes.clear();
-    runningTasks.clear();
-  }
-
-  /**
-   * Update the status of a node.
-   *
-   * @param nodeId The ID of the node to update.
-   * @param status The new status of the node.
-   */
-  function updateNodeStatus(nodeId, status) {
-    updateNodeData(nodeId, { status });
-  }
-
-  return { run, stop, reset, isRunning };
-}
-
-async function until(condition) {
-  return new Promise(resolve => {
-    const interval = setInterval(() => {
-      if (condition()) {
-        clearInterval(interval);
-        resolve(true);
-      }
-    }, 100);
-  });
-}
-- 
Gitee