画布

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

@@ -11,20 +11,12 @@
 			@node-drag-stop="(e) => eventManager.handleNodeDragStop(e)"
 			@viewport-change="(e) => eventManager.handleViewportChange(e)"
 		>
-			<template #node-InputNode="nodeProps">
-				<node type="InputNode" :stateManager="stateManager" :node="nodeProps">
-					<component
-						:is="nodeProps.data.component"
-						:node="nodeProps"
-						v-bind="nodeProps.data"
-					/>
-				</node>
-			</template>
-			<template #node-SecondaryNode="nodeProps">
-				<node type="SecondaryNode" :stateManager="stateManager" :node="nodeProps">
+			<template v-for="v in nodeTypes" :key="v" #[`node-${v}`]="nodeProps">
+				<node :type="v" :stateManager="stateManager" :node="nodeProps">
 					<component
 						:is="nodeProps.data.component"
 						:node="nodeProps"
+						:data="nodeProps.data.data"
 						v-bind="nodeProps.data"
 					/>
 				</node>
@@ -43,6 +35,7 @@
 <script setup lang="ts">
 	import { VueFlow, useVueFlow } from '@vue-flow/core'
 	import { useLayout } from '@/utils/treeDiagram'
+	import { NODE_TYPE } from './tools/index.d'
 	// 组件
 	import headerTools from './components/header-tools.vue'
 	import zoom from '../components/zoom.vue'
@@ -56,6 +49,7 @@
 	import { NodeManager } from './manager/NodeManager'
 
 	const vueFlow = ref<any>()
+	const nodeTypes = ref([NODE_TYPE.INPUT, NODE_TYPE.SECONDARY, NODE_TYPE.OUTPUT])
 
 	// 状态管理器
 	const stateManager = new StateManager({ vueFlow })
@@ -97,11 +91,16 @@
 	}
 
 	onMounted(() => {
-		window.vueFlow = vueFlow
-		window.nodes = nodes
-		nodeManager.createResultNode()
-		// nodeManager.createCardsSelect()
-		// nodeManager.createResultNode()
+		// window['vueFlow'] = vueFlow
+		// window['nodes'] = nodes
+		nodeManager.createResultNode({
+			data: {
+				isHeader: false,
+				data: {
+					url: 'https://s3-alpha-sig.figma.com/img/ea2f/590e/9638f62a2fc91e31f33db0022db1642c?Expires=1773014400&Key-Pair-Id=APKAQ4GOSFWCW27IBOMQ&Signature=M0B8oJJOk~dGG0aZAqOIocAp7T0LFdJ9FYmCrEZVTCRzYxM6SJRNtYMTX-rTO3Z~s14QINh~o-S41XiZnBv-0zcKjuWot~VVaNHfd0~1LesfNe2KwvCinT~72btFut1pheLnKE-wWCX5ewtonxU77bnw386YPMTqv7DBZzksf2udsJA7NmOYD6~TUG3Q2dWSt~zPH~lkaidscPqpCnCbqzljCEi4RiHY4U3A45l5XypcX2umqn1UaYUFCTqV9471J4qdB6Dg2pcKocdp-7-3s1De6Q~2SmBOrSgDQ~KEADCB2lhKfhxgWmy0lwMvhTd4l90ygVZDWZRABgjHNrGUvg__'
+				}
+			}
+		})
 	})
 </script>
 <style lang="less">