fix

src/assets/css/style.css

@@ -1,9 +1,12 @@
 body,
 html,
-p,
+div,
 ul,
-ol,
+li,
-li {
+h1,
+h2,
+h3,
+p {
   margin: 0;
   padding: 0;
 }

src/views/home/versionTree/tree/index.vue

@@ -25,28 +25,9 @@ watch(()=>props.treeState,(newVal,oldVal)=>{
 
 const view2Ref = ref(null)
 const pushView2Item = (item)=>{
-	// if(node)view2Ref.value.pushNode(node)
-	// if(edge)view2Ref.value.pushEdge(edge)
 	view2Ref.value.push(item)
 }
 
-function traverseArray(items, callback) {
-	for (let i = 0; i < items.length; i++) {
-		const item = items[i]
-		callback(item, i)
-		if (item.children && Array.isArray(item.children) && item.children.length > 0) {
-			traverseArray(item.children, callback)
-		}
-	}
-}
-
-const addView2Item = ()=>{
-	traverseArray(versionsList, (item, index) => {
-		pushView2Item(item)
-	})
-	
-}
-
 const view1List = ref([
 	{
 		name:'P1',
@@ -57,7 +38,8 @@ const view1List = ref([
 	}
 ])
 onMounted(()=>{
-	addView2Item()
+	// addView2Item()
+	view2Ref.value.init(versionsList)
 })
 onUnmounted(()=>{
 })
@@ -66,11 +48,11 @@ const {} = toRefs(data);
 </script>
 <template>
 	<div class="tree" v-show="treeStateTime">
-		<div v-if="!treeState" class="box view1">
+		<div v-show="!treeState" class="box view1">
 			<view1Item v-for="item in view1List" :key="item.name" :item="item"></view1Item>
 		</div>
-		<div v-else class="box view2">
+		<div v-show="treeState" class="box view2">
-			<view2 :list="view1List" ref="view2Ref"></view2>
+			<view2 ref="view2Ref"></view2>
 		</div>
 	</div>
 </template>

src/views/home/versionTree/tree/view2/index.vue

@@ -16,23 +16,24 @@ const props = defineProps({
 //])
 
 let selectId = ref(2)
+const isLoad = ref(false)
 
 // 节点类型：input、output、default、custom
 // input:开始点，output：结尾点，default：普通节点，custom：自定义节点
 const position = { x: 0, y: 0 }
 const nodes = ref<Node[]>([
-  { id: '1', type: 'input', label: 'Node 1', class: 'custom-node start', position, sourcePosition: 'bottom' },
+//   { id: '1', type: 'input', label: 'Node 1', class: 'custom-node start', position, sourcePosition: 'bottom' },
-  { id: '2', type: 'PrimaryNode', class: 'custom-node', data: { id: '主 1' }, position },
+//   { id: '2', type: 'PrimaryNode', class: 'custom-node', data: { id: '主 1' }, position },
-  { id: '2-1', type: 'SecondaryNode', class: 'custom-node', data: { id: '分 1-1' }, position },
+//   { id: '2-1', type: 'SecondaryNode', class: 'custom-node', data: { id: '分 1-1' }, position },
-  { id: '3', type: 'PrimaryNode', class: 'custom-node', data: { id: '主 2' }, position },
+//   { id: '3', type: 'PrimaryNode', class: 'custom-node', data: { id: '主 2' }, position },
 ])
 
 // 边类型：custom、default
 // custom：自定义边，default：普通边，step：直角边，smoothstep：平滑边
 const edges = ref<Edge[]>([
-  { id: 'e1-2', source: '1', target: '2', type: 'smoothstep' },
+//   { id: 'e1-2', source: '1', target: '2', type: 'smoothstep' },
-  { id: 'e1-3', source: '2', target: '2-1', type: 'smoothstep', sourceHandle:'right',},
+//   { id: 'e1-3', source: '2', target: '2-1', type: 'smoothstep', sourceHandle:'right',},
-  { id: 'e1-4', source: '2', target: '3', type: 'smoothstep',sourceHandle:'bottom', animated: true },
+//   { id: 'e1-4', source: '2', target: '3', type: 'smoothstep',sourceHandle:'bottom', animated: true },
 ])
 const { fitView } = useVueFlow()
 const { layout } = useLayout()
@@ -51,8 +52,32 @@ const push = (item)=>{
 	if(nodes.value.length == 0){
 		nodes.value.push({ id: '0', type: 'input', label: 'Node 1', class: 'custom-node start', position, sourcePosition: 'bottom' })
 	}
-	let id = item.id.split('-')[0]
+	let className = 'custom-node'
-	nodes.value.push(item)
+	let id = item.id
+	let target = edges.value.length == 0?'0':item.id.slice(0, -2)
+	nodes.value.push({id,type:'SecondaryNode',class:className,position,data:item})
+	edges.value.push({ id, source: id, target, type: 'smoothstep' })
+	console.log()
+}
+
+function traverseArray(items, callback) {
+	for (let i = 0; i < items.length; i++) {
+		const item = items[i]
+		callback(item, i)
+		if (item.child && Array.isArray(item.child) && item.child.length > 0) {
+			traverseArray(item.child, callback)
+		}
+	}
+}
+
+const init = (list)=>{
+	isLoad.value = false
+	traverseArray(list, (item, index) => {
+		console.log()
+		push(item)
+	})
+	isLoad.value = true
+	console.log(nodes.value,edges.value)
 }
 
 //是否可拖动节点
@@ -69,11 +94,12 @@ onMounted(()=>{
 })
 onUnmounted(()=>{
 })
-defineExpose({push})
+defineExpose({init,push})
 // const {} = toRefs(data);
 </script>
 <template>
 	<div class="view2">
+		<div class="vueFlowBox" v-if="isLoad">
 			<div @click="toggleNodesDraggable">拖拽节点</div>
 			<VueFlow :nodes="nodes" @nodes-initialized="layoutGraph('LR')" :edges="edges" @node-click="handleVueFlowNodeClick" :nodes-draggable="nodesDraggable">
 				<template #node-PrimaryNode="nodeProps">
@@ -91,6 +117,8 @@ defineExpose({push})
 				</template> -->
 			</VueFlow>
 		</div>
+		
+	</div>
 </template>
 <style lang="less">
 @import "@vue-flow/core/dist/style.css";
@@ -101,7 +129,11 @@ defineExpose({push})
 		width: 100%;
 		height: 100%;
 		overflow: hidden;
-		
+		>.vueFlowBox{
+			width: 100%;
+			height: 100%;
+			overflow: hidden;
+		}
 		:deep(.custom-node){
 			--vf-handle: #000;
 			--vf-node-color: #000;