Merge branch 'main' of http://18.167.251.121:10003/aidlab/FiDA_Front

src/views/home/index.vue

@@ -1,5 +1,5 @@
 <template>
-	<div class="home">
+	<div class="home background-pink">
 		<left-nav />
 		<div class="right-main">
 			<top-nav />
@@ -23,9 +23,6 @@
 		height: 100%;
 		overflow: hidden;
 		display: flex;
-		background-color: rgba(248, 247, 245, 1);
-		background-image: url('@/assets/images/home-bg.png');
-		background-size: 100% 100%;
 		user-select: none;
 		> .right-main {
 			flex: 1;

src/views/home/left-nav.vue

@@ -11,10 +11,10 @@
 			<span class="icon"><svg-icon name="add" size="16" /></span>
 			<span v-show="!isCollapse" class="text">New Project</span>
 		</button>
-		<div class="menu-item" @click="onHome">
+		<!-- <div class="menu-item" @click="onHome">
 			<span class="icon"><svg-icon name="home" size="24" /></span>
 			<span class="title" v-show="!isCollapse">Home</span>
-		</div>
+		</div> -->
 		<div class="menu-item" @click="onHistory" :class="{ active: showHistory }">
 			<span class="icon"><svg-icon name="history" size="24" /></span>
 			<span class="title" v-show="!isCollapse">History</span>
@@ -189,7 +189,6 @@
 					justify-content: space-between;
 					align-items: center;
 					padding: 0 0.8rem;
-					box-sizing: border-box;
 				}
 				> .title {
 					font-weight: 600;

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,11 @@ watch(()=>props.treeState,(newVal,oldVal)=>{
 	},250)
 })
 
+const view2Ref = ref(null)
+const pushView2Item = (item)=>{
+	view2Ref.value.push(item)
+}
+
 const view1List = ref([
 	{
 		name:'P1',
@@ -32,6 +38,8 @@ const view1List = ref([
 	}
 ])
 onMounted(()=>{
+	// addView2Item()
+	view2Ref.value.init(versionsList)
 })
 onUnmounted(()=>{
 })
@@ -40,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">
-			<view2 :list="view1List"></view2>
+		<div v-show="treeState" class="box view2">
+			<view2 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;
-		height: 5rem;
+		width: var(--treeItem-width);
+		height: var(--treeItem-height);
 		font-weight: 500;
 		display: flex;
 		align-items: center;
 		justify-content: center;
-		border-radius: 50%;
-		border: 2px solid #000;
+		border-radius: var(--treeItem-raduis);
+		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,42 +14,110 @@ const props = defineProps({
 })
 //const emit = defineEmits([
 //])
-let data = reactive({
-})
 
+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', position: { x: 250, y: 0 } },
-  { id: '2', type: 'output', label: 'Node 2', position: { x: 100, y: 100 } },
-  { id: '3', type: 'custom', label: 'Node 3', position: { x: 400, y: 100 } },
-  { id: '4', type: 'custom', label: 'Node 3', position: { x: 400, y: 200 } },
+//   { 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-1', type: 'SecondaryNode', class: 'custom-node', data: { id: '分 1-1' }, 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: 'custom' },
-  { id: 'e1-3', source: '1', target: '3', animated: true },
-  { id: 'e1-4', source: '1', target: '4', },
+//   { id: 'e1-2', source: '1', target: '2', type: 'smoothstep' },
+//   { 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 },
 ])
+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 className = 'custom-node'
+	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)
+}
+
+//是否可拖动节点
+const nodesDraggable = ref(false)
+const toggleNodesDraggable = () => {
+  	nodesDraggable.value = !nodesDraggable.value
+}
+
+const handleVueFlowNodeClick = (node: Node) => {
+	console.log(node)
+}
 
 onMounted(()=>{
 })
 onUnmounted(()=>{
 })
-defineExpose({})
-const {} = toRefs(data);
+defineExpose({init,push})
+// const {} = toRefs(data);
 </script>
 <template>
 	<div class="view2">
-		<VueFlow :nodes="nodes" :edges="edges">
-			<!-- bind your custom node type to a c omponent by using slots, slot names are always `node-<type>` -->
-			<template #node-custom="nodeProps">
-				<SpecialNode v-bind="nodeProps" />
-			</template>
+		<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">
+					<PrimaryNode v-bind="nodeProps" />
+				</template>
+				<template #node-SecondaryNode="nodeProps">
+					<SecondaryNode 
+						v-bind="nodeProps" 
+						:selectId="selectId"
+					/>
+				</template>
 
-			<!-- <template #edge-custom="edgeProps">
-				<SpecialEdge v-bind="edgeProps" />
-			</template> -->
-		</VueFlow>
+				<!-- <template #edge-custom="edgeProps">
+					<SpecialEdge v-bind="edgeProps" />
+				</template> -->
+			</VueFlow>
+		</div>
+		
 	</div>
 </template>
 <style lang="less">
@@ -59,5 +129,48 @@ const {} = toRefs(data);
 		width: 100%;
 		height: 100%;
 		overflow: hidden;
+		>.vueFlowBox{
+			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',
+			}
+		]
+	}
+  ]
+