操作记录枚举

src/views/workflow/chart/context-menu-tool.vue

@@ -7,6 +7,7 @@
 <script setup lang="ts">
 import {getCurrentInstance, reactive} from "vue";
 import {useWorkflowStore} from "@/stores";
+import {GraphHistoryStep} from "@/views/workflow/types";
 
 const WorkflowStore = useWorkflowStore()
 const emits = defineEmits([])
@@ -19,11 +20,11 @@ const {proxy}: any = getCurrentInstance()
 const state: any = reactive({
 })
 const onDel = () => {
-  WorkflowStore.graph.startBatch('node-del')
+  WorkflowStore.graph.startBatch(GraphHistoryStep.NodeDel)
   WorkflowStore.graph.removeEdge(props.data.id)
   WorkflowStore.graph.removeNode(props.data.id)
   setTimeout(() => {
-    WorkflowStore.graph.stopBatch('node-del')
+    WorkflowStore.graph.stopBatch(GraphHistoryStep.NodeDel)
   }, 100)
   props.onClose(null, true)
 }

src/views/workflow/chart/index.vue

@@ -42,7 +42,7 @@
             </div>
           </el-tooltip>
         </div>
-        <div class="history">
+        <div>
           <el-tooltip content="撤销" effect="light" placement="top" :show-arrow="false">
             <div class="__hover-bg" :class="{__disabled: !state.history.canUndo}" @click="onUndo(1)">
               <SvgIcon name="back"/>
@@ -53,18 +53,27 @@
               <SvgIcon name="back" rotate="180"/>
             </div>
           </el-tooltip>
-          <el-popover :show-arrow="false">
+          <el-popover :show-arrow="false" :width="240">
             <template #reference>
               <div class="__hover-bg">
                 <SvgIcon name="history"/>
               </div>
             </template>
-            <div class="history">
-              <div>变更历史</div>
-              <div>
+            <div class="">
+              <div class="text-[18px]">变更历史</div>
+              <template v-if="state.history.steps.length < 2">
+                <div class="mt-2 h-[120px] flex flex-col justify-center items-center">
+                  <SvgIcon name="history" size="30" class="mb-3"/>
+                  尚未更改任何内容
+                </div>
+              </template>
+              <template v-else>
 
+              </template>
+              <div class="text-[12px] text-[#676f83]">
+                提示<br/>
+                您的编辑操作将被跟踪并存储在您的设备上，直到您离开编辑器。此历史记录将在您离开编辑器时被清除。
               </div>
-              变更心事
             </div>
           </el-popover>
         </div>
@@ -147,7 +156,6 @@ Graph.registerConnector(
 
     const v1 = { x: s.x + offset + control, y: s.y }
     const v2 = { x: e.x - offset - control, y: e.y }
-
     return Path.normalize(
       `M ${s.x} ${s.y}
        L ${s.x} ${s.y}
@@ -174,7 +182,7 @@ const state: any = reactive({
   history: {
     canUndo: false,
     canRedo: false,
-
+    steps: []
   }
 })
 const ref_chart = ref()
@@ -233,9 +241,20 @@ const initChart = () => {
       //     radius: 20,
       //   },
       // },
-      createEdge: () => new Shape.Edge({
-        attrs: lineStyle
-      })
+      createEdge: (args) => {
+        console.log(args)
+        return new Shape.Edge({
+          attrs: lineStyle,
+          tools: [
+            {
+              name: 'contextmenu',
+              args: {
+                data: {aaa: 123},
+              }
+            }
+          ]
+        })
+      }
     },
     onPortRendered: (args: any) => {
       const selectors = args.contentSelectors
@@ -274,7 +293,7 @@ const initEdges = () => {
       state.graph.addEdge(handleEdge(v))
     })
     state.isInitEdges = true
-    state.graph.cleanHistory()  // 初始化完成后清空历史队列
+    onHistoryClear()
   }
 }
 const initWatch = () => {
@@ -294,12 +313,14 @@ const initWatch = () => {
   state.graph.on('scale', ({ sx, sy, ox, oy }) => {
     state.zoom = sx
   })
-  state.graph.on('history:change', (p) => {
+  state.graph.on('history:change', ({cmds, options}) => {
     if (state.isInitEdges) {
-      console.log(123)
-      console.log(p)
+      console.log(cmds, options)
       state.history.canRedo = state.graph.canRedo()
       state.history.canUndo = state.graph.canUndo()
+      if (options.name) {
+        state.history.steps.unshift(options.name)
+      }
     }
   })
 }
@@ -350,6 +371,10 @@ const onRedo = (step) => {
     }
   }
 }
+const onHistoryClear = () => {
+  state.graph.cleanHistory()  // 初始化完成后清空历史队列
+  state.history.steps = ['root']
+}
 watch(() => props.data, (n) => {
   if (n) {
     initChart()

src/views/workflow/chart/node-add.vue

@@ -31,7 +31,7 @@
 import {getCurrentInstance, inject, reactive, ref} from "vue";
 import { ElPopover, ElTooltip } from 'element-plus';
 import {getNodeDefault} from "@/views/workflow/config";
-import {NodeType, NodeTypeObj} from "@/views/workflow/types";
+import {GraphHistoryStep, NodeType, NodeTypeObj} from "@/views/workflow/types";
 import {handleEdge, handleNode} from "@/views/workflow/handle";
 
 const emits = defineEmits([])
@@ -76,11 +76,11 @@ const onAddNode = (type) => {
   } else {
     node.data.edgeSource = `${props.node.id}_end`
   }
-  props.graph.startBatch('node-add')
+  props.graph.startBatch(GraphHistoryStep.NodeAdd)
   props.graph.addNode(handleNode(node))
   props.graph.addEdge(handleEdge(edge))
   setTimeout(() => {
-    props.graph.stopBatch('node-add')
+    props.graph.stopBatch(GraphHistoryStep.NodeAdd)
   }, 100)
 }
 </script>

src/views/workflow/types.ts

@@ -104,4 +104,12 @@ export const OptionsConditionType = [
 export enum ConditionMode {
   And = 'and',
   Or = 'or',
+}
+
+export enum GraphHistoryStep {
+  Move = 'move',
+  NodeAdd = 'node-add',
+  NodeDel = 'node-del',
+  EdgeAdd = 'edge-add',
+  EdgeDel = 'edge-del',
 }