接口联调树状图节点详情

src/stores/index.ts

@@ -8,4 +8,5 @@ export default store
 export * from './global'
 export * from './userInfo'
 export * from './projectData'
-export * from './agent'
+export * from './agent'
+export * from './versionTree'

src/stores/versionTree.ts

@@ -3,11 +3,25 @@ import { ref, computed } from 'vue'
 export const useVersionTreeStore = defineStore('versionTree', () => {
 	const state = ref({
 		nodeDetail: {
-
+			createTime:'',
+			userEndChat:{
+				content:'',
+				createTime:'',
+				image_url:'',
+			},
+			generateEndChat:{
+				content:'',
+				createTime:'',
+				image_url:'',
+			},
 		},// 节点详情
 	})
 
-	const setNodeDetail = (v: any) => { state.value.nodeDetail = v }
+	const setNodeDetail = (v: any) => { 
+		for(let key in v){
+			state.value.nodeDetail[key] = v[key]
+		}
+	 }
 
 	return {
 		state,

src/views/home/agent/components/versionTree/detail/chatDetail.vue

@@ -10,6 +10,14 @@ const props = defineProps({
 		type: String,
 		default: 'user'
 	},
+	chatDetail: {
+		type: Object,
+		default: () => ({
+			content:'',
+			creatTime:'',
+			image_url:'',
+		})
+	},
 })
 //const emit = defineEmits([
 //])
@@ -30,12 +38,13 @@ const {} = toRefs(data);
 				<span>{{ type == 'user'? $t('VersionTree.input'): $t('VersionTree.sketch') }}</span>
 			</div>
 			<div class="time">
-				<span>12:00:00</span>
+				<span>{{ new Date(chatDetail.createTime * 1000).toLocaleString() }}</span>
 			</div>
 		</div>
 		<div class="infoTitle">{{ type == 'user'? $t('VersionTree.userRequest'): $t('VersionTree.generateResult') }}</div>
 		<div class="history">
-		  	Design a modern yellow sofa that combines comfort, elegance, and contemporary aesthetics.
 The sofa features a warm, soft yellow tone (mustard or light ochre), with a minimalist silhouette and clean lines.
 Upholstered in high-quality fabric with a subtle texture, offering a cozy and inviting feel.
 The seat is deep and plush, with generous cushioning for relaxation, while the backrest and armrests are softly rounded to enhance comfort.
+			<span>{{ chatDetail.content }}</span>
+			<img v-if="chatDetail.image_url" :src="chatDetail.image_url" alt="">
 		</div>
 	</div>
 </template>
@@ -90,6 +99,16 @@ const {} = toRefs(data);
 			flex: 1;
 			overflow-y: auto;
 			margin-left: 3rem;
+			> span{
+
+			}
+			> img{
+				width: 100%;
+				height: auto;
+				margin-top: 1.2rem;
+				border-radius: 1.3rem;
+				border: 1px solid #C9C9C9;
+			}
 			&::-webkit-scrollbar {
 				width: 4px;
 			}

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

@@ -1,8 +1,8 @@
 <script setup lang="ts">
-import { ref, onMounted, onUnmounted, reactive, watch } from "vue";
+import { ref, onMounted, onUnmounted, computed, watch } from "vue";
 import VersionDetail from './versionDetail.vue'
 import ChatDetail from './chatDetail.vue'
-import { useProjectStore } from '@/stores'
+import { useProjectStore, useVersionTreeStore } from '@/stores'
 import { getChatNodeDetail, getNodeAncestors } from '@/api/versitonTree'
 
 //const props = defineProps({
@@ -11,35 +11,57 @@ const emit = defineEmits([
 ])
 
 const projectStore = useProjectStore()
+const versiontreeStore = useVersionTreeStore()
 
 const detailData = ref({
-	id:1,
-	versionDetail:{
-		version:'1.0.0',
-		versionTime:'2023-08-01 10:00:00',
-		versionSketch:'Version 1 - Sketch',
-		versionSketchTime:'2023-08-01 10:00:00',
-	},
-	userChatDetail:{
-
-	}
+	chatEndDetail:computed(()=>{
+		return versiontreeStore.state.nodeDetail
+	}),
+	loading:false,
 })
 
 watch(()=>projectStore.state.nodeId, (newVal, oldVal) => {
-	console.log(newVal)
 	if(newVal){
+		detailData.value.loading = true
+
 		getChatNodeDetail({
 			projectId: projectStore.state.id,
 			id: newVal
-		}).then(res => {
-			console.log(res)
-		})
-		getNodeAncestors({
-			projectId: projectStore.state.id,
-			id: newVal
-		}).then(res => {
-			console.log(res)
+		}).then((res:any) => {
+			let userEndChat = {
+				content:'',
+				createTime:'',
+				image_url:'',
+			}
+			let generateEndChat = {
+				content:'',
+				createTime:'',
+				image_url:'',
+			}
+			res.dialogue.forEach(item => {
+				if(item.role == 'user'){
+					if(item.content){
+						userEndChat.content += item.content
+						userEndChat.createTime = item.createTime
+					}
+				}else if(item.role == "assistant"){
+					if(item.content){
+						generateEndChat.content += item.content
+						generateEndChat.createTime = item.createTime
+						if(item.image_url)generateEndChat.image_url = item.image_url
+					}
+				}
+			})
+			versiontreeStore.setNodeDetail({createTime:res.createTime,userEndChat,generateEndChat})
+			detailData.value.loading = false
 		})
+
+		// getNodeAncestors({
+		// 	projectId: projectStore.state.id,
+		// 	id: newVal
+		// }).then(res => {
+		// 	console.log(res)
+		// })
 	}
 },{ immediate: true })
 onMounted(()=>{
@@ -53,15 +75,16 @@ defineExpose({})
 	<div class="detailBox">
 		<div class="versionDetail">
 			<VersionDetail 
-				:versionDetail="detailData.versionDetail"
+				:versionDetail="detailData.chatEndDetail"
 			></VersionDetail>
 		</div>
 		<div class="useInput">
-			<ChatDetail type="user"></ChatDetail>
+			<ChatDetail type="user" :chatDetail="detailData.chatEndDetail.userEndChat"></ChatDetail>
 		</div>
 		<div class="systemInput">
-			<ChatDetail type="robot"></ChatDetail>
+			<ChatDetail type="robot" :chatDetail="detailData.chatEndDetail.generateEndChat"></ChatDetail>
 		</div>
+		<div class="loading" v-if="detailData.loading" v-loading="true"></div>
 	</div>
 </template>
 <style lang="less" scoped>
@@ -71,7 +94,15 @@ defineExpose({})
 		position: relative;
 		display: flex;
 		flex-direction: column;
-		> div{
+		> .loading{
+			position: absolute;
+			z-index: 999999999;
+			top: 0;
+			left: 0;
+			width: 100%;
+			height: 100%;
+		}
+		> .versionDetail,> .useInput,> .systemInput{
 			border-radius: var(--border-radius, 1rem);
 			border: 1px solid #D9D9D9;
 			background-color: #f7f7f7;

src/views/home/agent/components/versionTree/detail/versionDetail.vue

@@ -5,7 +5,12 @@ const { t: $t } = useI18n()
 const props = defineProps({
 	versionDetail: {
 		type: Object,
-		default: () => ({})
+		default: () => ({
+			version:'1.0.0',
+			createTime:'',
+			versionSketch:'Version 1 - Sketch',
+			versionSketchTime:'2023-08-01 10:00:00',
+		})
 	}
 })
 const emit = defineEmits([
@@ -29,10 +34,10 @@ const {} = toRefs(data);
 				{{ $t('VersionTree.versionInformation') }}
 			</span>
 		</div>
-		<div class="version">{{versionDetail.version}}</div>
-		<div class="time marBott1">{{versionDetail.versionTime}}</div>
-		<div class="version gray">{{versionDetail.versionSketch}}</div>
-		<div class="time gray">{{versionDetail.versionSketchTime}}</div>
+		<div class="version">{{versionDetail.version || '1.0.0'}}</div>
+		<div class="time marBott1">{{ new Date(versionDetail.createTime * 1000).toLocaleString() }}</div>
+		<div class="version gray">{{versionDetail.versionSketch || 'Version 1 - Sketch'}}</div>
+		<div class="time gray">{{versionDetail.versionSketchTime || '2023-08-01 10:00:00'}}</div>
 	</div>
 </template>
 <style lang="less" scoped>

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

@@ -47,7 +47,7 @@ const setVersionsList = (res)=>{
 	function traverseArray(items,father, callback) {
 		for (let i = 0; i < items.length; i++) {
 			const item = items[i]
-			if(!item.url)continue
+			// if(!item?.url)continue
 			callback(item, i,father)
 			if (item.children && Array.isArray(item.children) && item.children.length > 0) {
 				traverseArray(item.children, item, callback)

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

@@ -73,7 +73,7 @@ const initialize = ()=>{
 const setSelectItem = (item)=>{
 	if(!item.versionId)return
 	console.log(item)
-	// projectStore.setProject({latestNodeId: item.id})
+	projectStore.setProject({nodeId: item.id})
 	emit('update:selectItem', {...item})
 }
 

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

@@ -198,7 +198,10 @@ defineExpose({push})
 				overflow: hidden;
 				&.active{
 					// background-color: var(--treeItem-active-background);
-					border: 2px solid #000;
+					border: 2px solid #d9d9d9;
+					.mask{
+						display: none;
+					}
 				}
 				&.start{
 					background-color: #7A7A7A;

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

@@ -25,7 +25,8 @@ const props = defineProps<{
 		<!-- <div>{{ props.data.id }}</div> -->
 		<div class="item">
 			<!-- {{ props.data.url }} -->
-			<img :src="props.data.url" />
+			<img :src="props.data?.url" />
+			<div class="mask"></div>
 		</div>
 	</div>
 </template>
@@ -35,11 +36,20 @@ const props = defineProps<{
 	.item{
 		width: 100%;
 		height: 100%;
+		position: relative;
 		img{
 			width: 100%;
 			height: 100%;
 			object-fit: contain;
 		}
 	}
+	.mask{
+		position: absolute;
+		top: 0;
+		left: 0;
+		width: 100%;
+		height: 100%;
+		background-color: rgba(0, 0, 0, 0.3);
+	}
 }
 </style>