fix

package-lock.json

@@ -12,6 +12,7 @@
         "@vue-flow/core": "^1.48.2",
         "axios": "^1.3.6",
         "crypto-js": "^4.2.0",
+        "dagre": "^0.8.5",
         "element-plus": "^2.13.2",
         "gsap": "^3.13.0",
         "markdown-it": "^14.1.0",
@@ -2401,6 +2402,16 @@
         "node": ">=12"
       }
     },
+    "node_modules/dagre": {
+      "version": "0.8.5",
+      "resolved": "https://registry.npmmirror.com/dagre/-/dagre-0.8.5.tgz",
+      "integrity": "sha512-/aTqmnRta7x7MCCpExk7HQL2O4owCT2h8NT//9I1OQ9vt29Pa0BzSAkR5lwFUcQ7491yVi/3CXU9jQ5o0Mn2Sw==",
+      "license": "MIT",
+      "dependencies": {
+        "graphlib": "^2.1.8",
+        "lodash": "^4.17.15"
+      }
+    },
     "node_modules/data-view-buffer": {
       "version": "1.0.2",
       "resolved": "https://registry.npmmirror.com/data-view-buffer/-/data-view-buffer-1.0.2.tgz",
@@ -3680,6 +3691,15 @@
       "integrity": "sha512-bzh50DW9kTPM00T8y4o8vQg89Di9oLJVLW/KaOGIXJWP/iqCN6WKYkbNOF04vFLJhwcpYUh9ydh/+5vpOqV4YQ==",
       "dev": true
     },
+    "node_modules/graphlib": {
+      "version": "2.1.8",
+      "resolved": "https://registry.npmmirror.com/graphlib/-/graphlib-2.1.8.tgz",
+      "integrity": "sha512-jcLLfkpoVGmH7/InMC/1hIvOPSUh38oJtGhvrOFGzioE1DZ+0YW16RgmOJhHiuWTvGiJQ9Z1Ik43JvkRPRvE+A==",
+      "license": "MIT",
+      "dependencies": {
+        "lodash": "^4.17.15"
+      }
+    },
     "node_modules/gsap": {
       "version": "3.13.0",
       "resolved": "https://registry.npmmirror.com/gsap/-/gsap-3.13.0.tgz",
@@ -10373,6 +10393,15 @@
         "d3-transition": "2 - 3"
       }
     },
+    "dagre": {
+      "version": "0.8.5",
+      "resolved": "https://registry.npmmirror.com/dagre/-/dagre-0.8.5.tgz",
+      "integrity": "sha512-/aTqmnRta7x7MCCpExk7HQL2O4owCT2h8NT//9I1OQ9vt29Pa0BzSAkR5lwFUcQ7491yVi/3CXU9jQ5o0Mn2Sw==",
+      "requires": {
+        "graphlib": "^2.1.8",
+        "lodash": "^4.17.15"
+      }
+    },
     "data-view-buffer": {
       "version": "1.0.2",
       "resolved": "https://registry.npmmirror.com/data-view-buffer/-/data-view-buffer-1.0.2.tgz",
@@ -11359,6 +11388,14 @@
       "integrity": "sha512-bzh50DW9kTPM00T8y4o8vQg89Di9oLJVLW/KaOGIXJWP/iqCN6WKYkbNOF04vFLJhwcpYUh9ydh/+5vpOqV4YQ==",
       "dev": true
     },
+    "graphlib": {
+      "version": "2.1.8",
+      "resolved": "https://registry.npmmirror.com/graphlib/-/graphlib-2.1.8.tgz",
+      "integrity": "sha512-jcLLfkpoVGmH7/InMC/1hIvOPSUh38oJtGhvrOFGzioE1DZ+0YW16RgmOJhHiuWTvGiJQ9Z1Ik43JvkRPRvE+A==",
+      "requires": {
+        "lodash": "^4.17.15"
+      }
+    },
     "gsap": {
       "version": "3.13.0",
       "resolved": "https://registry.npmmirror.com/gsap/-/gsap-3.13.0.tgz",

package.json

@@ -16,6 +16,7 @@
     "@vue-flow/core": "^1.48.2",
     "axios": "^1.3.6",
     "crypto-js": "^4.2.0",
+    "dagre": "^0.8.5",
     "element-plus": "^2.13.2",
     "gsap": "^3.13.0",
     "markdown-it": "^14.1.0",

src/assets/css/style.css

@@ -10,6 +10,9 @@ p {
   margin: 0;
   padding: 0;
 }
+* {
+  box-sizing: border-box;
+}
 html,
 body,
 #app {
@@ -25,28 +28,3 @@ body,
     transform: rotate(360deg);
   }
 }
-.flex {
-  display: flex;
-}
-.flex-col {
-  flex-direction: column;
-}
-.flex-1 {
-  flex: 1;
-}
-.flex-center {
-  align-items: center;
-  justify-content: center;
-}
-.flex-between {
-  justify-content: space-between;
-}
-.align-center {
-  align-items: center;
-}
-.relative {
-  position: relative;
-}
-.absolute {
-  position: absolute;
-}

src/assets/css/style.less

@@ -11,6 +11,10 @@ p {
   padding: 0;
 }
 
+*{
+	box-sizing: border-box;
+}
+
 html,
 body,
 #app {

src/views/home/versionTree/index.vue

@@ -14,7 +14,7 @@ const props = defineProps({
 })
 //const emit = defineEmits([
 //])
-const treeState = ref(false)//
+const treeState = ref(true)//
 
 const openTree = ()=>{
 	treeState.value = !treeState.value
@@ -65,6 +65,13 @@ const {} = toRefs(data);
 <style lang="less" scoped>
 	.versionTree{
 		--border-radius: 1rem;
+		--treeItem-width: 5.4rem;
+		--treeItem-height: 5.4rem;
+		--treeItem-raduis: 50%;
+		--treeItem-border: 2px solid #000;
+		--treeItem-background: #ffffff;
+		--treeItem-active-background: #e6e6e6;
+
 		:deep(.versionTreeBody){
 			--el-drawer-padding-primary: 0rem;
 			display: flex;

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

@@ -2,6 +2,7 @@
 import { ref, onMounted, onUnmounted, reactive, toRefs, watch } from "vue";
 import view1Item from './view1Item.vue'
 import view2 from './view2/index.vue'
+import { versionsList } from './view2/tools/versionsData'
 
 const props = defineProps({
 	treeState:{
@@ -22,6 +23,30 @@ watch(()=>props.treeState,(newVal,oldVal)=>{
 	},250)
 })
 
+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',
@@ -32,6 +57,7 @@ const view1List = ref([
 	}
 ])
 onMounted(()=>{
+	addView2Item()
 })
 onUnmounted(()=>{
 })
@@ -44,7 +70,7 @@ const {} = toRefs(data);
 			<view1Item v-for="item in view1List" :key="item.name" :item="item"></view1Item>
 		</div>
 		<div v-else class="box view2">
-			<view2 :list="view1List"></view2>
+			<view2 :list="view1List" ref="view2Ref"></view2>
 		</div>
 	</div>
 </template>

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

@@ -25,17 +25,18 @@ const {} = toRefs(data);
 <style lang="less" scoped>
 	.btn{
 		font-size: 1.2rem;
-		width: 5rem;
+		width: var(--treeItem-width);
-		height: 5rem;
+		height: var(--treeItem-height);
 		font-weight: 500;
 		display: flex;
 		align-items: center;
 		justify-content: center;
-		border-radius: 50%;
+		border-radius: var(--treeItem-raduis);
-		border: 2px solid #000;
+		border: var(--treeItem-border);
 		color: #000;
 		cursor: pointer;
 		margin-bottom: 4rem;
+		background-color: var(--treeItem-background);
 		position: relative;
 		&::after{
 			content: '';
@@ -53,7 +54,7 @@ const {} = toRefs(data);
 			background-origin: border-box;
 		}
 		&.active{
-			background-color: #e6e6e6;
+			background-color: var(--treeItem-active-background);
 		}
 	}
 	.btn:nth-child(1){

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

@@ -1,9 +1,11 @@
 <script setup lang="ts">
-import { ref, onMounted, onUnmounted, reactive, toRefs } from "vue";
+import { ref, onMounted, onUnmounted, reactive, nextTick } from "vue";
 import type { Node, Edge } from '@vue-flow/core'  
-import { VueFlow } from '@vue-flow/core'
+import { VueFlow, useVueFlow } from '@vue-flow/core'
 import SpecialEdge from './speciaiEdge.vue'
-import SpecialNode from './speciaiNode.vue'
+import PrimaryNode from './primaryNode.vue'//主
+import SecondaryNode from './secondaryNode.vue'//分支
+import { useLayout } from './tools/tools'
 const props = defineProps({
 	item: {
 		type: Object,
@@ -12,36 +14,76 @@ const props = defineProps({
 })
 //const emit = defineEmits([
 //])
-let data = reactive({
-})
 
+let selectId = ref(2)
+
+// 节点类型：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', position: { x: 250, y: 0 } },
+  { id: '1', type: 'input', label: 'Node 1', class: 'custom-node start', position, sourcePosition: 'bottom' },
-  { id: '2', type: 'output', label: 'Node 2', position: { x: 100, y: 100 } },
+  { id: '2', type: 'PrimaryNode', class: 'custom-node', data: { id: '主 1' }, position },
-  { id: '3', type: 'custom', label: 'Node 3', position: { x: 400, y: 100 } },
+  { id: '2-1', type: 'SecondaryNode', class: 'custom-node', data: { id: '分 1-1' }, position },
-  { id: '4', type: 'custom', label: 'Node 3', position: { x: 400, y: 200 } },
+  { 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: 'custom' },
+  { id: 'e1-2', source: '1', target: '2', type: 'smoothstep' },
-  { id: 'e1-3', source: '1', target: '3', animated: true },
+  { id: 'e1-3', source: '2', target: '2-1', type: 'smoothstep', sourceHandle:'right',},
-  { id: 'e1-4', source: '1', target: '4', },
+  { id: 'e1-4', source: '2', target: '3', type: 'smoothstep',sourceHandle:'bottom', animated: true },
 ])
+const { fitView } = useVueFlow()
+const { layout } = useLayout()
+async function layoutGraph(direction) {
+	setTimeout(() => {
+		nodes.value = layout(nodes.value, edges.value, direction)
+		console.log(nodes.value)
+		nextTick(() => {
+			fitView()
+		})
+	}, 0)
+}
 
+let elIndex = 1
+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]
+	nodes.value.push(item)
+}
+
+//是否可拖动节点
+const nodesDraggable = ref(false)
+const toggleNodesDraggable = () => {
+  	nodesDraggable.value = !nodesDraggable.value
+}
+
+const handleVueFlowNodeClick = (node: Node) => {
+	console.log(node)
+}
 
 onMounted(()=>{
 })
 onUnmounted(()=>{
 })
-defineExpose({})
+defineExpose({push})
-const {} = toRefs(data);
+// const {} = toRefs(data);
 </script>
 <template>
 	<div class="view2">
-		<VueFlow :nodes="nodes" :edges="edges">
+		<div @click="toggleNodesDraggable">拖拽节点</div>
-			<!-- bind your custom node type to a c omponent by using slots, slot names are always `node-<type>` -->
+		<VueFlow :nodes="nodes" @nodes-initialized="layoutGraph('LR')" :edges="edges" @node-click="handleVueFlowNodeClick" :nodes-draggable="nodesDraggable">
-			<template #node-custom="nodeProps">
+			<template #node-PrimaryNode="nodeProps">
-				<SpecialNode v-bind="nodeProps" />
+				<PrimaryNode v-bind="nodeProps" />
+			</template>
+			<template #node-SecondaryNode="nodeProps">
+				<SecondaryNode 
+					v-bind="nodeProps" 
+					:selectId="selectId"
+				 />
 			</template>
 
 			<!-- <template #edge-custom="edgeProps">
@@ -59,5 +101,44 @@ const {} = toRefs(data);
 		width: 100%;
 		height: 100%;
 		overflow: hidden;
+		
+		:deep(.custom-node){
+			--vf-handle: #000;
+			--vf-node-color: #000;
+			--vf-box-shadow: #000;
+			font-size: 1.2rem;
+			width: var(--treeItem-width);
+			height: var(--treeItem-height);
+			font-weight: 500;
+			display: flex;
+			align-items: center;
+			justify-content: center;
+			border-radius: var(--treeItem-raduis);
+			border: var(--treeItem-border);
+			color: #000;
+			cursor: pointer;
+			background-color: var(--treeItem-background);
+			box-sizing: border-box;
+			.vue-flow__handle-right{
+				transform: translate(calc(50% + 2px), -50%);
+			}
+			.vue-flow__handle-left{
+				transform: translate(calc(-50% - 2px), -50%);
+			}
+			.vue-flow__handle-top{
+				transform: translate(-50%, calc(-50% - 2px));
+			}
+			.vue-flow__handle-bottom{
+				transform: translate(-50%, calc(50% + 2px));
+			}
+			&.active{
+				background-color: var(--treeItem-active-background);
+			}
+			&.start{
+				background-color: #7A7A7A;
+				color: #FFF;
+				border: 2px solid #7A7A7A;
+			}
+		}
 	}
 </style>

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

@@ -0,0 +1,26 @@
+<script lang="ts" setup>
+import { Handle, Position } from '@vue-flow/core'
+import { ref } from 'vue'
+const props = defineProps<{
+	data: {
+		type: Object,
+		default: () => ({
+			id: '',
+		})
+	}
+}>()
+
+</script>
+
+<template>
+	<div class="node">
+		<Handle type="target" id="top" :position="Position.Top" />
+		<Handle type="source" id="bottom" :position="Position.Bottom" />
+		<Handle type="source" id="right" :position="Position.Right" />
+		<div>{{ props.data.id }}</div>
+	</div>
+</template>
+
+<style lang="less" scoped>
+
+</style>

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

@@ -0,0 +1,25 @@
+<script lang="ts" setup>
+import { Handle, Position } from '@vue-flow/core'
+import { ref } from 'vue'
+const props = defineProps<{
+	data: {
+		type: Object,
+		default: () => ({
+			id: '',
+		})
+	}
+}>()
+
+</script>
+
+<template>
+	<div class="node">
+		<Handle type="target" id="left" :position="Position.Left" />
+		<Handle type="source" id="right" :position="Position.Right" />
+		<div>{{ props.data.id }}</div>
+	</div>
+</template>
+
+<style lang="less" scoped>
+
+</style>

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

@@ -1,55 +0,0 @@
-<script lang="ts" setup>
-import { Handle, Position } from '@vue-flow/core'
-import { ref } from 'vue'
-
-const counter = ref(0)
-</script>
-
-<template>
-  <div class="custom-node">
-    <Handle type="target" :position="Position.Top" />
-    <button class="increment nodrag" @click="counter++">Increment</button>
-
-    <div v-if="counter > 0" class="counter">
-      <div class="count" v-for="count of counter" :key="`count-${count}`">{{ count }}</div>
-    </div>
-  </div>
-</template>
-
-<style>
-.custom-node {
-  min-width: 100px;
-  gap: 4px;
-  padding: 8px;
-  background: white;
-  border: 1px solid black;
-  border-radius: 4px;
-}
-
-.increment {
-  border-radius: 4px;
-  background: #42b983;
-  font-size: 10px;
-  color: #fff;
-  cursor: pointer;
-  border: none;
-}
-
-.increment:hover {
-  box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
-}
-
-.counter {
-  margin-top: 8px;
-  display: grid;
-  grid-template-columns: repeat(4, minmax(0, 1fr));
-  gap: 4px;
-}
-
-.count {
-  font-size: 6px;
-  color: #ff0072;
-  border: 1px solid rgba(0, 0, 0, 0.3);
-  border-radius: 8px;
-}
-</style>

src/views/home/versionTree/tree/view2/tools/tools.js

@@ -0,0 +1,57 @@
+// import dagre from '@dagrejs/dagre'
+import dagre from 'dagre'
+import { Position, useVueFlow } from '@vue-flow/core'
+import { ref } from 'vue'
+
+/**
+ * Composable to run the layout algorithm on the graph.
+ * It uses the `dagre` library to calculate the layout of the nodes and edges.
+ */
+export function useLayout() {
+  const { findNode } = useVueFlow()
+
+  const graph = ref(new dagre.graphlib.Graph())
+
+  const previousDirection = ref('LR')
+
+  function layout(nodes, edges, direction) {
+    // we create a new graph instance, in case some nodes/edges were removed, otherwise dagre would act as if they were still there
+    const dagreGraph = new dagre.graphlib.Graph()
+
+    graph.value = dagreGraph
+
+    dagreGraph.setDefaultEdgeLabel(() => ({}))
+
+    const isHorizontal = direction === 'LR'
+    dagreGraph.setGraph({ rankdir: direction })
+
+    previousDirection.value = direction
+
+    for (const node of nodes) {
+      // if you need width+height of nodes for your layout, you can use the dimensions property of the internal node (`GraphNode` type)
+      const graphNode = findNode(node.id)
+
+      dagreGraph.setNode(node.id, { width: graphNode.dimensions.width || 150, height: graphNode.dimensions.height || 50 })
+    }
+
+    for (const edge of edges) {
+      dagreGraph.setEdge(edge.source, edge.target)
+    }
+
+    dagre.layout(dagreGraph)
+
+    // set nodes with updated positions
+    return nodes.map((node) => {
+      const nodeWithPosition = dagreGraph.node(node.id)
+
+      return {
+        ...node,
+        targetPosition: isHorizontal ? Position.Left : Position.Top,
+        sourcePosition: isHorizontal ? Position.Right : Position.Bottom,
+        position: { x: nodeWithPosition.x, y: nodeWithPosition.y },
+      }
+    })
+  }
+
+  return { graph, layout, previousDirection }
+}

src/views/home/versionTree/tree/view2/tools/versionsData.js

@@ -0,0 +1,61 @@
+export const versionsList = [
+	{
+	  id: '1',
+	  name:'V1',
+	  child:[
+			{
+			id: '1-1',
+			name:'V1-1',
+			child:[
+				{
+				id: '1-1-1',
+				name:'V1-1-1',
+				}
+			]
+			},{
+				id: '1-2',
+				name:'V1-2',
+				child:[
+				{
+					id: '1-2-1',
+					name:'V1-2-1',
+				},{
+					id: '1-2-2',
+					name:'V1-2-2',
+				}
+				]
+			},{
+				id: '1-2',
+				name:'V1-2',
+				child:[
+				  	{
+						id: '1-2-1',
+						name:'V1-2-1',
+						child:[
+							{
+								id: '1-2-1-1',
+								name:'V1-2-1-1',
+							}
+						]
+					},{
+						id: '1-2-2',
+						name:'V1-2-2',
+						child:[
+							{
+								id: '1-2-2-1',
+								name:'V1-2-2-1',
+							},{
+								id: '1-2-2-2',
+								name:'V1-2-2-2',
+							}
+						]
+					},
+				]
+			},{
+				id: '1-3',
+				name:'V1-3',
+			}
+		]
+	}
+  ]
+