调整画布保存机制，把保存画布接口放到状态管理中，完善toRealStyle提示词

src/components/Canvas/FlowCanvas/manager/StateManager.ts

@@ -2,6 +2,8 @@ import { ref, computed } from "vue";
 import { NODE_TYPE, NODE_DATATYPE } from '../tools/index.d'
 import { ElMessageBox } from 'element-plus'
 import i18n from '@/lang'
+import { putSketchFlowCanvas } from '@/api/flow-canvas'
+
 const t = i18n.global.t
 
 export interface NodesItem {
@@ -37,8 +39,12 @@ export class StateManager {
 	toolManager: any
 	generateManager: any
 
-	// 是否有数据没保存
-	isSave: any
+	// 保存画布数据定时器
+	saveCanvasTime: any
+	// 保存画布数据定时器时间间隔
+	saveCanvasTimeInterval: any
+	// 打开画布线稿id
+	sketchId: any
 	// 设置管理器
 	setManager(options) {
 		options.eventManager && (this.eventManager = options.eventManager)
@@ -57,7 +63,10 @@ export class StateManager {
 		this.mxHistory = ref(50)
 		this.historyList = ref([])
 		this.historyIndex = ref(0)
-		this.isSave = ref(false)
+
+		this.sketchId = options.sketchId
+		this.saveCanvasTimeInterval = 6000
+		this.saveCanvasTime = null
 
 		this.activeNodeID = ref("")
 		this.nodes = ref<NodesItem[]>([]);
@@ -100,8 +109,6 @@ export class StateManager {
 			})
 			return arr
 		})
-		window.nodes = this.nodes
-		window.aaa = this
 
 	}
 	/** 设置激活节点 */
@@ -110,6 +117,7 @@ export class StateManager {
 	addNode(node: NodesItem) {
 		this.nodes.value.push(node);
 		this.recordState()
+		this.exportFlow()
 	}
 	/** 删除节点 */
 	async deleteNode(id: string, { isElMessageBox } = { isElMessageBox: false }) {
@@ -136,6 +144,7 @@ export class StateManager {
 		if (!deletePromise) return console.log('删除操作被取消')
 		this.nodes.value = this.nodes.value.filter((node: NodesItem) => node.id !== id)
 		this.recordState()
+		this.exportFlow()
 	}
 	/** 获取节点 */
 	getNodeById(id: string) { return this.nodes.value.find((node: NodesItem) => node.id === id) }
@@ -176,8 +185,22 @@ export class StateManager {
 		const size = this.historyList.value.length - this.mxHistory.value
 		if (size > 0) this.historyList.value.splice(0, size)
 		this.historyIndex.value = this.historyList.value.length - 1
-	
-		this.isSave.value = true
+	}
+	/** 画布数据存储 */
+	async exportFlow (time:number = 0){
+		if(!this.sketchId)return
+		clearTimeout(this.saveCanvasTime)
+		await new Promise((resolve) => {
+			this.saveCanvasTime = setTimeout(()=>{
+				putSketchFlowCanvas({ 
+					id: this.sketchId,
+					canvasData: JSON.stringify(this.nodes.value) }).then(() => {
+					resolve(true)
+				}).catch(() => {
+					resolve(true)
+				})
+			},time)
+		})
 	}
 	/** 撤回状态 */
 	undoState() {
@@ -186,6 +209,7 @@ export class StateManager {
 		if (!state) return
 		this.historyIndex.value = index
 		this.nodes.value = JSON.parse(state.nodes)
+		this.exportFlow(this.saveCanvasTimeInterval)
 	}
 	/** 重做状态 */
 	redoState() {
@@ -194,6 +218,7 @@ export class StateManager {
 		if (!state) return
 		this.historyIndex.value = index
 		this.nodes.value = JSON.parse(state.nodes)
+		this.exportFlow(this.saveCanvasTimeInterval)
 	}
 
 	/** 显示指定子节点和父节点连接线，隐藏父节点和其他子节点链接线， */
@@ -211,7 +236,7 @@ export class StateManager {
 	}
 
 	dispose() {
-		this.isSave.value = false
+		clearTimeout(this.saveCanvasTime)
 		this.historyList.value = []
 		this.historyIndex.value = 0
 	}