历史记录

src/views/workflow/chart/index.vue

@@ -44,33 +44,53 @@
         </div>
         <div>
           <el-tooltip content="撤销" effect="light" placement="top" :show-arrow="false">
-            <div class="__hover-bg" :class="{__disabled: !state.history.canUndo}" @click="onUndo(1)">
+            <div class="__hover-bg" :class="{__disabled: !state.history.canUndo}" @click="onHistoryDo(-1)">
               <SvgIcon name="back"/>
             </div>
           </el-tooltip>
           <el-tooltip content="重做" effect="light" placement="top" :show-arrow="false">
-            <div class="__hover-bg" :class="{__disabled: !state.history.canRedo}" @click="onRedo(1)">
+            <div class="__hover-bg" :class="{__disabled: !state.history.canRedo}" @click="onHistoryDo(1)">
               <SvgIcon name="back" rotate="180"/>
             </div>
           </el-tooltip>
-          <el-popover :show-arrow="false" :width="240">
+          <el-popover
+            :show-arrow="false"
+            :width="240"
+            :popper-style="{
+              padding: 0,
+            }">
             <template #reference>
               <div class="__hover-bg">
                 <SvgIcon name="history"/>
               </div>
             </template>
             <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]">
+              <div class="text-[18px] p-3 pb-1">变更历史</div>
+              <div class="px-1">
+                <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>
+                  <div class="mt-2 max-h-[300px] overflow-y-auto flex flex-col gap-1">
+                    <template v-for="(item, index) in state.history.steps">
+                      <div :class="`__hover-bg px-2 py-1.5 rounded-md text-[13px] ${state.history.current === index && 'bg-[#c8ceda33]'}`" @click="onHistoryDo(state.history.current - index)">
+                        {{MapGraphHistoryStep.get(item)}}
+                        （
+                        <template v-if="state.history.current < index">{{index - state.history.current}} 步后退</template>
+                        <template v-else-if="state.history.current > index">{{state.history.current - index}} 步前进</template>
+                        <template v-else>当前状态</template>
+                        )
+                      </div>
+                    </template>
+                  </div>
+                  <div class="bg-[#eaecf0] w-full h-[1px] my-2"/>
+                  <div class="__hover-bg px-2 py-1.5 rounded-md mb-2 text-[13px]" @click="onHistoryClear(state.history.steps[0])">清空历史记录</div>
+                </template>
+              </div>
+              <div class="text-[12px] text-[#676f83] p-3">
                 提示<br/>
                 您的编辑操作将被跟踪并存储在您的设备上，直到您离开编辑器。此历史记录将在您离开编辑器时被清除。
               </div>
@@ -93,7 +113,7 @@ import {handleEdge, handleNode} from "@/views/workflow/handle";
 import {Snapline} from '@antv/x6-plugin-snapline'
 import {ContextMenuTool} from "./context-menu-tool";
 import {useWorkflowStore} from "@/stores/modules/workflow";
-import {GraphHistoryStep, NodeType} from "@/views/workflow/types";
+import {GraphHistoryStep, MapGraphHistoryStep, NodeType} from "@/views/workflow/types";
 import { MiniMap } from '@antv/x6-plugin-minimap'
 import { History } from '@antv/x6-plugin-history'
 import {v4} from "uuid";
@@ -183,7 +203,8 @@ const state: any = reactive({
   history: {
     canUndo: false,
     canRedo: false,
-    steps: []
+    steps: [],
+    current: 0
   }
 })
 const ref_chart = ref()
@@ -318,7 +339,6 @@ const initWatch = () => {
   })
   state.graph.on('history:change', ({cmds, options}) => {
     if (state.isInitEdges) {
-      console.log(cmds, options)
       state.history.canRedo = state.graph.canRedo()
       state.history.canUndo = state.graph.canUndo()
       if (options.name) {
@@ -360,23 +380,27 @@ const graphZoom = (z) => {
     state.graph.zoomToFit({ maxScale: 1 })
   }
 }
-const onUndo = (step) => {
-  for (let i = 1; i <= step; i++) {
-    if (state.history.canUndo) {
-      state.graph.undo()
+const onHistoryDo = (step) => {
+  if (step > 0) {
+    for (let i = 1; i <= step; i++) {
+      if (state.history.canRedo) {
+        state.graph.redo()
+        state.history.current -= 1
+      }
     }
-  }
-}
-const onRedo = (step) => {
-  for (let i = 1; i <= step; i++) {
-    if (state.history.canRedo) {
-      state.graph.redo()
+  } else {
+    for (let i = -1; i >= step; i--) {
+      if (state.history.canUndo) {
+        state.graph.undo()
+        state.history.current += 1
+      }
     }
   }
 }
-const onHistoryClear = () => {
+const onHistoryClear = (first = '') => {
   state.graph.cleanHistory()  // 初始化完成后清空历史队列
-  state.history.steps = ['root']
+  state.history.steps = [first || GraphHistoryStep.Root]
+  state.history.current = 0
 }
 watch(() => props.data, (n) => {
   if (n) {

src/views/workflow/types.ts

@@ -107,9 +107,19 @@ export enum ConditionMode {
 }
 
 export enum GraphHistoryStep {
-  Move = 'move',
+  Root = 'root',
+  Move = 'mouse',
   NodeAdd = 'node-add',
   NodeDel = 'node-del',
-  EdgeAdd = 'edge-add',
+  EdgeAdd = 'add-edge',
   EdgeDel = 'edge-del',
-}
+}
+
+export const MapGraphHistoryStep = new Map([
+  [GraphHistoryStep.Root, '会话开始'],
+  [GraphHistoryStep.Move, '块已移动'],
+  [GraphHistoryStep.NodeAdd, '块已添加'],
+  [GraphHistoryStep.NodeDel, '块已删除'],
+  [GraphHistoryStep.EdgeAdd, '块已连接'],
+  [GraphHistoryStep.EdgeDel, '块已断开连接'],
+])