fix

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

@@ -14,7 +14,7 @@
 			<template v-for="v in nodeTypes" :key="v" #[`node-${v}`]="nodeProps">
 				<node :type="v" :stateManager="stateManager" :node="nodeProps">
 					<component
-						:is="nodeProps.data.component"
+						:is="components[nodeProps.data.component]"
 						:node="nodeProps"
 						:data="nodeProps.data.data"
 						v-bind="nodeProps.data"
@@ -23,7 +23,7 @@
 			</template>
 		</VueFlow>
 	</div>
-	<header-tools @export="exportFlow" />
+	<header-tools @export="exportFlow" @import="importFlow" />
 	<zoom
 		:zoom="stateManager.zoom.value"
 		:step="0.1"
@@ -34,13 +34,20 @@
 
 <script setup lang="ts">
 	import { VueFlow, useVueFlow } from '@vue-flow/core'
+	import { computed, ref, markRaw, onMounted, reactive, nextTick, provide } from 'vue'
 	import { useLayout } from '@/utils/treeDiagram'
-	import { NODE_TYPE } from './tools/index.d'
+	import { NODE_TYPE, NODE_COMPONENT } from './tools/index.d'
 	// 组件
 	import headerTools from './components/header-tools.vue'
 	import zoom from '../components/zoom.vue'
+	// 节点
 	import node from './components/node.vue'
-	import { computed, ref, markRaw, onMounted, reactive, nextTick, provide } from 'vue'
+	import resultImage from './components/result/result-image.vue'
+	import card from './components/cards/index.vue'
+	const components = {
+		[NODE_COMPONENT.RESULT_IMAGE]: resultImage,
+		[NODE_COMPONENT.CARD]: card
+	}
 
 	// 管理器
 	import { StateManager } from './manager/StateManager'
@@ -83,7 +90,7 @@
 	const { layout } = useLayout()
 	const index = ref(0)
 	async function layoutGraph(direction) {
-		if (index.value > 0) return
+		// if (index.value > 0) return
 		index.value++
 		setTimeout(() => {
 			stateManager.nodes.value = layout(
@@ -99,8 +106,24 @@
 
 	const exportFlow = () => {
 		// flowManager.exportFlow()
-		const json = JSON.parse(JSON.stringify(stateManager.nodes.value))
-		console.log(json)
+		const str = JSON.stringify(stateManager.nodes.value)
+		const json = JSON.parse(str)
+		localStorage.setItem('flow_json', str)
+	}
+	const importFlow = async () => {
+		try {
+			stateManager.nodes.value = []
+			await nextTick()
+			const json = JSON.parse(localStorage.getItem('flow_json') || '[]')
+			stateManager.nodes.value = json
+			setTimeout(() => {
+				nextTick(() => {
+					fitView({ maxZoom: 1 })
+				})
+			}, 0)
+		} catch (error) {
+			console.log(error)
+		}
 	}
 
 	onMounted(() => {