节点数据变化

src/stores/modules/workflow.ts

@@ -15,6 +15,7 @@ export const useWorkflowStore = defineStore('workflow', {
       vars: [],
     },
     nodeSize: {},
+    autoSaveFlag: false,
   }),
   getters: {},
   actions: {
@@ -52,12 +53,26 @@ export const useWorkflowStore = defineStore('workflow', {
       })
     },
     nodePanelShow(node) {
-      this.panel.node = node
-      this.panel.show = true
+      const f = () => {
+        this.panel.node = node
+        setTimeout(() => {
+          this.panel.show = true
+        }, 0)
+      }
+      if (this.panel.show) {
+        this.nodePanelClose()
+        setTimeout(() => {
+          f()
+        }, 0)
+      } else {
+        f()
+      }
     },
     nodePanelClose() {
-      this.panel.node = null
       this.panel.show = false
+      setTimeout(() => {
+        this.panel.node = null
+      }, 0)
     },
     layoutPort(nodeId: string, portId: string) {
       const dom = document.getElementById(portId)
@@ -101,5 +116,8 @@ export const useWorkflowStore = defineStore('workflow', {
       })
       return options
     },
+    autoSave() {
+      this.autoSaveFlag = !this.autoSaveFlag
+    },
   },
 })

src/views/workflow/chart/panel-index.vue

@@ -68,6 +68,15 @@ watch(
     }
   },
 )
+watch(
+  () => state.nodeData,
+  (n) => {
+    if (WorkflowStore.panel.show) {
+      WorkflowStore.autoSave()
+    }
+  },
+  { deep: true },
+)
 </script>
 
 <style lang="scss" scoped>

src/views/workflow/index.vue

@@ -28,7 +28,14 @@
 </template>
 
 <script setup lang="ts">
-import { getCurrentInstance, onMounted, provide, reactive, ref } from 'vue'
+import {
+  getCurrentInstance,
+  onMounted,
+  provide,
+  reactive,
+  ref,
+  watch,
+} from 'vue'
 import workflowChart from './chart/index.vue'
 import workflowPanel from './chart/panel-index.vue'
 import envVarsPanel from './instance/component/vars/evn-index.vue'
@@ -54,6 +61,12 @@ const state: any = reactive({
 })
 const ref_workflow = ref()
 
+watch(
+  () => WorkflowStore.autoSaveFlag,
+  () => {
+    console.log('自动保存')
+  },
+)
 const getJsonData = () => {
   const data = ref_workflow.value.toJSON()
   const offset = WorkflowStore.graph.translate()