调整版本树使用的数据结构和后端一致

src/views/home/agent/components/versionTree/index.vue

@@ -1,9 +1,11 @@
 <script setup lang="ts">
-import { ref, onMounted, onUnmounted, reactive, toRefs } from 'vue'
+import { ref, onMounted, onUnmounted, reactive, toRefs, watch } from 'vue'
 import Tree from './tree/index.vue'
 import Detail from './detail/index.vue'
-import { versionsList } from './tools/versionsData'
+// import { versionsList } from './tools/versionsData'
 import { findAndAddChild, findAndRemoveChild } from './tools/tools'
+import { useProjectStore } from '@/stores'
+import { versionTree, getChatNodeDetail } from '@/api/versitonTree'
 
 const props = defineProps({
 	versionTreeData: {
@@ -11,14 +13,79 @@ const props = defineProps({
 		default: () => {
 			return {
 				drawer: false,
-				list: []
+				// list: []
 			}
 		}
 	}
 })
+
 //const emit = defineEmits([
 //])
 
+const versionsList = ref([])
+
+const projectStore = useProjectStore()
+watch(()=>projectStore.state.id, (newVal, oldVal) => {
+	if(newVal){
+		versionTree({
+			projectId: projectStore.state.id
+		}).then(res => {
+			console.log(res)
+			
+			// versionsList.value = res.data
+		})
+	}
+})
+
+const setVersionsList = (res)=>{
+	versionsList.value = [{
+		"id": "node_001",
+		"url": "https://example.com/images/cover_001.jpg",
+		"children": [
+			{
+			"id": "node_002",
+			"url": "https://example.com/images/cover_002.jpg",
+			"children": [
+				{
+				"id": "node_003",
+				"url": "https://example.com/images/cover_003.jpg",
+				"children": []
+				},
+				{
+				"id": "node_004",
+				"url": "https://example.com/images/cover_004.jpg",
+				"children": []
+				}
+			]
+			},
+			{
+			"id": "node_005",
+			"url": "https://example.com/images/cover_005.jpg",
+			"children": [
+				{
+				"id": "node_006",
+				"url": "https://example.com/images/cover_006.jpg",
+				"children": []
+				}
+			]
+			}
+		]
+	}]
+	//设置versionId
+	function traverseArray(items,father, callback) {
+		for (let i = 0; i < items.length; i++) {
+			const item = items[i]
+			callback(item, i,father)
+			if (item.children && Array.isArray(item.children) && item.children.length > 0) {
+				traverseArray(item.children, item, callback)
+			}
+		}
+	}
+	traverseArray(versionsList.value,'',(item,i,father)=>{
+		item.versionId = father?`${father.versionId}-${i+1}`:'1'
+	})
+}
+
 const treeRef = ref(null)
 const treeKey = ref(0)
 const treeState = ref(true)//
@@ -31,13 +98,13 @@ const openTree = (state)=>{
 
 const versionRestore = ()=>{
 	let id = ''
-	if(selectItem.value?.child?.length > 0){
+	if(selectItem.value?.children?.length > 0){
 		function findMaxForYourFormat(items) {
 			let max = 0
 			
 			for (const item of items) {
 				// 直接分割并取最后一部分
-				const parts = item.id.split('-')
+				const parts = item?.versionId.split('-')
 				const lastNumber = parseInt(parts[parts.length - 1], 10)
 				
 				if (lastNumber > max) {
@@ -47,26 +114,26 @@ const versionRestore = ()=>{
 			
 			return max
 		}
-		id = `${selectItem.value?.id}-${findMaxForYourFormat(selectItem.value?.child) + 1}`
+		id = `${selectItem.value?.versionId}-${findMaxForYourFormat(selectItem.value?.children) + 1}`
 	}else{
-		id = `${selectItem.value?.id}-1`
+		id = `${selectItem.value?.versionId}-1`
 	}
 	let addObj = {
 		id,
 		name:`V${id}`
 	}
-	findAndAddChild(versionsList, selectItem.value?.id, addObj)
+	findAndAddChild(versionsList.value, selectItem.value?.versionId, addObj)
 	selectItem.value = {...addObj}
 	treeKey.value++
 }
 const versionDelete = (versionDetail)=>{
-	if(!selectItem.value.id)return
-	findAndRemoveChild(versionsList, selectItem.value.id)
+	if(!selectItem.value?.versionId)return
+	findAndRemoveChild(versionsList.value, selectItem.value?.versionId)
 	treeKey.value++
 }
 
 let data = reactive({})
-onMounted(() => {})
+onMounted(() => {setVersionsList('')})
 onUnmounted(() => {})
 defineExpose({})
 const {} = toRefs(data)

src/views/home/agent/components/versionTree/tools/tools.js

@@ -101,17 +101,17 @@ export function findAndAddChild(items, targetId, newChild) {
 		// 如果找到目标节点
 		if (item.id === targetId) {
 			// 初始化child数组（如果不存在）
-			if (!item.child) {
-				item.child = []
+			if (!item.children) {
+				item.children = []
 			}
 			// 添加新子节点
-			item.child.push(newChild)
+			item.children.push(newChild)
 			return true
 		}
 
 		// 递归搜索子节点
-		if (item.child && item.child.length > 0) {
-			const found = findAndAddChild(item.child, targetId, newChild)
+		if (item.children && item.children.length > 0) {
+			const found = findAndAddChild(item.children, targetId, newChild)
 			if (found) return true
 		}
 	}
@@ -135,8 +135,8 @@ export function findAndRemoveChild(items, targetId) {
 	  }
 	  
 	  // 递归搜索子节点
-	  if (item.child && item.child.length > 0) {
-		const found = findAndRemoveChild(item.child, targetId)
+	  if (item.children && item.children.length > 0) {
+		const found = findAndRemoveChild(item.children, targetId)
 		if (found) return true
 	  }
 	}

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

@@ -49,24 +49,25 @@ 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)
+		if (item.children && Array.isArray(item.children) && item.children.length > 0) {
+			traverseArray(item.children, callback)
 		}
 	}
 }
 const initialize = ()=>{
 	isLoad.value = false
 	treeList.value = []
-	treeList.value.push({id: null,name:'index',})
+	treeList.value.push({versionId: null,name:'index',})
 	traverseArray(props.versionsList, (item, index) => {
 		treeList.value.push(item)
 	})
+	console.log(treeList)
 	isLoad.value = true
-	if(!props.selectItem?.id)setSelectItem(treeList.value[treeList.value.length - 1])
+	if(!props.selectItem?.versionId)setSelectItem(treeList.value[treeList.value.length - 1])
 } 
 
 const setSelectItem = (item)=>{
-	if(!item.id)return
+	if(!item.versionId)return
 	emit('update:selectItem', {...item})
 }
 

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

@@ -55,12 +55,12 @@ async function layoutGraph(direction) {
 }
 
 const push = (item)=>{
-	if(!item.id){
+	if(!item.versionId){
 		nodes.value.push({ id: '0', type: 'InputNode', class: 'custom-node', position })
 	}else{
-		let className = `custom-node item${item.id.replace(/-/g, "_")}`
-		let id = item.id
-		let source = edges.value.length == 0?'0':item.id.slice(0, -2)
+		let className = `custom-node item${item.versionId.replace(/-/g, "_")}`
+		let id = item.versionId
+		let source = edges.value.length == 0?'0':item.versionId.slice(0, -2)
 		nodes.value.push({id,type:'SecondaryNode',class:className,position,data:item})
 		edges.value.push({ id, target:id, source, type: 'smoothstep' })
 	}
@@ -77,7 +77,7 @@ const toggleNodesDraggable = () => {
 }
 
 const handleVueFlowNodeClick = ({node}) => {
-	if(node.data.id)emit('setSelectItem', node.data)
+	if(node.data.versionId)emit('setSelectItem', node.data)
 }
 
 watch(()=>props.treeList.length, (newVal, oldVal) => {
@@ -87,7 +87,7 @@ watch(()=>props.treeList.length, (newVal, oldVal) => {
 		push(item)
 	})
 },{immediate:true})
-watch(()=>props.selectItem.id, (newVal, oldVal) => {
+watch(()=>props.selectItem.versionId, (newVal, oldVal) => {
 })
 
 const versionRestore = ()=>{

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

@@ -22,10 +22,24 @@ const props = defineProps<{
 		<Handle type="source" id="Bottom" :position="Position.Bottom" />
 		<!-- <Handle type="source" id="Right" :position="Position.Right" />
 		<Handle type="target" id="Left" :position="Position.Left" /> -->
-		<div>{{ props.data.id }}</div>
+		<!-- <div>{{ props.data.id }}</div> -->
+		<div class="item">
+			<!-- {{ props.data.url }} -->
+			<img :src="props.data.url" />
+		</div>
 	</div>
 </template>
 
 <style lang="less" scoped>
-
+.node{
+	.item{
+		width: 100%;
+		height: 100%;
+		img{
+			width: 100%;
+			height: 100%;
+			object-fit: contain;
+		}
+	}
+}
 </style>