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

src/components/Canvas/FlowCanvas/flow-canvas.vue

@@ -47,7 +47,7 @@
 			</template>
 		</VueFlow>
 	</div>
-	<header-tools @export="exportFlow" @import="importFlow" />
+	<header-tools @export="exportFlow" @import="importFlow" :downloadData="downloadData" />
 	<zoom
 		:zoom="stateManager.zoom.value"
 		:step="0.1"
@@ -107,9 +107,8 @@
 
 	const vueFlow = ref<any>()
 	const nodeTypes = ref([NODE_TYPE.INPUT, NODE_TYPE.SECONDARY, NODE_TYPE.OUTPUT, NODE_TYPE.ALONE])
-
 	// 状态管理器
-	const stateManager = new StateManager({ vueFlow })
+	const stateManager = new StateManager({ vueFlow,sketchId:props.config.imgId })
 	provide('stateManager', stateManager)
 
 	// 事件管理器
@@ -191,29 +190,34 @@
 	}
 	// 导出流程
 	const getFlowJson = () => {
-		if(!stateManager.isSave.value)return ''
 		return JSON.stringify(stateManager.nodes.value)
 	}
-	const exportFlow = () => {
+	const downloadData = ref<any>({
+		amount: 0,
+		progress: 0,
+		status: 'success',//success
+	})
+	const exportFlow = async () => {
 		// console.log(vueFlow.value)
 		// console.log(vueFlow.value.toImage)
 		let arr = stateManager.nodes.value.filter((v) => v.data.type === NODE_COMPONENT.RESULT_IMAGE)
 		let imgList = []
-		arr.forEach((v) => {
+		arr.forEach((v,i) => {
 			v.data.data.imageProcessTasks.forEach((item,index) => {
 				let url = item.url
 				let name = url?.split(".").pop().split("?").shift();
-				imgList.push({url:url,name:`${v.data.type}${index == 0?'':index}.${name}`})
+				imgList.push({url:url,name:`${v.data.type}${i}-${index == 0?'':index}.${name}`})
 			})
 		})
-		downImgListToZip(imgList)
-		console.log(imgList)
+		downloadData.value.amount = imgList.length
+		downloadData.value.status = 'loading'
+		await downImgListToZip(imgList,(progress)=>{
+			downloadData.value.progress = progress
+			if(progress == downloadData.value.amount){
+				downloadData.value.status = 'success'
+			}
+		})
 		return
-		// flowManager.exportFlow()
-		const str = getFlowJson()
-		stateManager.isSave.value = false
-		emit('exportFlow', str)
-		// localStorage.setItem('flow_json', str)
 	}
 	// 导入流程
 	const importFlow = async (json) => {