对话页面接入版本树

src/api/versitonTree.ts

@@ -0,0 +1,28 @@
+import request from '@/utils/request'
+
+/**
+ * 获取节点详情
+ * @param data 获取节点详情的参数
+ * @param data.projectId 项目id
+ * @param data.id 节点id
+ * @returns 获取节点详情
+ */
+export const getChatNodeDetail = (data) => {
+	return request({
+		url: `/api/project/${data.projectId}/chat/node/${data.id}`,
+		method: 'get',
+	})
+}
+
+/**
+ * 获取版本树
+ * @param data 获取版本树的参数
+ * @param data.projectId 项目id
+ * @returns 获取版本树
+*/
+export const versionTree = (data) => {
+	return request({
+		url: `/api/project/${data.projectId}/chat/tree`,
+		method: 'get',
+	})
+}

src/assets/icons/versionExport.svg

@@ -0,0 +1,4 @@
+<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M5.669 7.56092C5.37611 7.25718 4.90123 7.25718 4.60834 7.56092C4.31545 7.86466 4.31545 8.35713 4.60834 8.66087L8.35834 12.5498C8.65123 12.8535 9.12611 12.8535 9.419 12.5498L13.169 8.66087C13.4619 8.35712 13.4619 7.86466 13.169 7.56092C12.8761 7.25718 12.4012 7.25718 12.1083 7.56092L9.63867 10.1221L9.63867 2.66645C9.63867 2.23689 9.30289 1.88867 8.88867 1.88867C8.47446 1.88867 8.13867 2.23689 8.13867 2.66645L8.13867 10.1221L5.669 7.56092Z" fill="#5A5A5A"/>
+<path d="M3.63867 14.3331C3.22446 14.3331 2.88867 14.6813 2.88867 15.1109C2.88867 15.5404 3.22446 15.8887 3.63867 15.8887H14.1387C14.5529 15.8887 14.8887 15.5404 14.8887 15.1109C14.8887 14.6813 14.5529 14.3331 14.1387 14.3331L3.63867 14.3331Z" fill="#5A5A5A"/>
+</svg>

src/components/versionTree/index.vue

@@ -89,6 +89,14 @@ const {} = toRefs(data)
 					</div>
 				</div>
 			</div>
+			<div class="expandBtnBox">
+				<div class="btn" @click="openTree(true)">
+					<div class="versionExport">
+						<SvgIcon name="versionExport" size="17" color="rgba(0, 0, 0, 0.6)" />
+					</div>
+					<span>{{ $t('VersionTree.export') }}</span>	
+				</div>
+			</div>
 			<!-- <div class="expandBtnBox">
 				<div class="btn" @click="openTree(true)">
 					<div class="bg left" :class="{'active':treeState}"></div>
@@ -135,96 +143,47 @@ const {} = toRefs(data)
 		display: flex;
 		flex-direction: column;
 	}
-	.versionTreeTitle {
+	.versionTreeTitle{
 		width: 100%;
 		height: 8rem;
 		display: flex;
 		align-items: center;
 		justify-content: space-between;
-		padding: 0 0.8rem 0 2.4rem;
-		border-bottom: 1px solid #c9c9c9;
-		> span {
+		padding: 0 .8rem 0 2.4rem;
+		border-bottom: 1px solid #C9C9C9;
+		> span{
 			font-size: 2rem;
 			font-weight: 600;
 			font-family: 'SemiBold';
 		}
-		.versionTreeTitle{
-			width: 100%;
-			height: 8rem;
-			display: flex;
-			align-items: center;
-			justify-content: space-between;
-			padding: 0 .8rem 0 2.4rem;
-			border-bottom: 1px solid #C9C9C9;
-			> span{
-				font-size: 2rem;
-				font-weight: 600;
-				font-family: 'SemiBold';
-			}
-			> .closeBtn{
-				width: 2.4rem;
-				height: 2.4rem;
-				cursor: pointer;
-			}
-		}
-		.expandBtnBox{
-			padding: .4rem .7rem;
-			border-radius: 1.1rem;
-			background-color: #f3f3f3;
-			display: flex;
-			margin-left: auto;
-			margin-top: 2.1rem;
-			margin-right: 3rem;
-			> .btn{
-				padding: .6rem .5rem;
-				position: relative;
-				cursor: pointer;
-				> .bg{
-					position: absolute;
-					background-color: #fff;
-					border-radius: .6rem;
-					width: 0;
-					height: 100%;
-					transition: all .3s;
-					top: 0;
-					&.active{
-						width: 100%;
-					}
-					&.left{
-						right: 0;
-					}
-					&.right{
-						left: 0;
-					}
-				}
-				> span{
-					position: relative;
-					font-size: 1.3rem;
-					line-height: 1.8rem;
-					font-weight: 500;
-					letter-spacing: -0.08px;
-				}
-			}
-		}
-		.versionTreeBox{
-			flex: 1;
-			display: flex;
-			overflow: hidden;
-			> .tree{
-				flex: 1;
-				height: 100%;
-				overflow: hidden;
-				padding: 2.1rem 0 5.4rem 2.2rem;
-			}
-			> .detail{
-				width: 35rem;
-				margin: 2.1rem 3rem 5.4rem 3.4rem;
-				height: calc(100% - 2.1rem - 5.4rem);
-				overflow: hidden;
-			}
+		> .closeBtn{
+			width: 2.4rem;
+			height: 2.4rem;
+			cursor: pointer;
 		}
 	}
-	.expandBtnBox {
+	.expandBtnBox{
+		margin-left: auto;
+		margin-top: 2.2rem;
+		margin-right: 3rem;
+		> .btn{
+			padding: .6rem 1.8rem;
+			cursor: pointer;
+			display: flex;
+			align-items: center;
+			justify-content: center;
+			border-radius: 8px;
+			border: 1.5px solid #D9D9D9;
+			color: rgba(0, 0, 0, 0.6);
+			> .versionExport{
+				margin-right: .6rem;
+			}
+			> span{
+				font-weight: 500;
+				font-size: 1.4rem;
+				letter-spacing: Letter Spacing;
+			}
+		}
 	}
 	.versionTreeBox {
 		flex: 1;
@@ -234,11 +193,11 @@ const {} = toRefs(data)
 			flex: 1;
 			height: 100%;
 			overflow: hidden;
-			padding: 2.1rem 0 5.4rem 2.2rem;
+			padding: 2.5rem 0 5.4rem 2.2rem;
 		}
 		> .detail {
 			width: 35rem;
-			margin: 2.1rem 3rem 5.4rem 3.4rem;
+			margin: 2.5rem 3rem 5.4rem 3.4rem;
 			height: calc(100% - 2.1rem - 5.4rem);
 			overflow: hidden;
 		}

src/lang/en.ts

@@ -128,6 +128,7 @@ export default {
 		restoreHint:'Once deleted, you won’t be able to view this conversation again.',
 		cancel: 'cancel',
 		Confirm: 'Confirm',
+		export: 'Export',
 	},
 	//generateSketch
 	generateSketch: {

src/lang/zh-cn.ts

@@ -123,6 +123,7 @@ export default {
 		restoreHint:'恢复后将显示该对话。',
 		cancel: '取消',
 		Confirm: '确认',
+		export: '导出',
 	},
 	//generateSketch
 	generateSketch: {

src/views/home/VersionTree.vue

@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import { ref, onMounted, onUnmounted, reactive, toRefs, computed } from "vue";
-import VersionTreeIndex from './versionTree/index.vue'
+import VersionTreeIndex from '@/components/versionTree/index.vue'
+
 import GenerateSketch from './generateSketch/index.vue'
 //const props = defineProps({
 //})
@@ -73,14 +74,25 @@ const generateSketch = ()=>{
 	sketchRestore('2')
 }
 
-const sketchRestore = (id)=>{
-	generateData.value.list.forEach((item)=>{
-		if(item.id == id){
-			item.type = 'waiting'
+const sketchRestore = (item)=>{
+	generateData.value.list.forEach((generateDataItem)=>{
+		if(item.id == generateDataItem.id){
+			generateDataItem.type = 'waiting'
 		}
 	})
 }
 
+const sketchDelete = (item)=>{
+	console.log(item)
+	generateData.value.list.forEach((generateDataItem,index)=>{
+		if(item.id == generateDataItem.id){
+			generateData.value.list.splice(index,1)
+		}
+	})
+}
+
+
+
 onMounted(()=>{
 })
 onUnmounted(()=>{
@@ -99,7 +111,7 @@ const {} = toRefs(data);
 		</div>
 		<VersionTreeIndex v-model:versionTreeData="versionTreeData" />
 		<div class="generateSketchBox">
-			<GenerateSketch v-model:generateData="generateData"></GenerateSketch>
+			<GenerateSketch v-model:generateData="generateData" @sketchRestore="sketchRestore" @sketchDelete="sketchDelete"></GenerateSketch>
 		</div>
 	</div>
 </template>

src/views/home/agent/index.vue

@@ -1,19 +1,35 @@
 <template>
 	<div class="agent-wrapper flex space-between">
-		<Agent :title="agentTitle" />
-		<div class="preview-wrapper">
-			<Preview :type="previewType" />
+		<div class="openVersionTree">
+			<div class="btn" @click="versionTreeData.drawer = true">
+				Version Tree
+			</div>
 		</div>
+		<div class="content-wrapper">
+			<Agent :title="agentTitle" />
+			<div class="preview-wrapper">
+				<Preview :type="previewType" />
+			</div>
+		</div>
+		<VersionTreeIndex v-model:versionTreeData="versionTreeData" />
 	</div>
 </template>
 
 <script setup lang="ts">
-	import { ref } from 'vue'
+	import { ref, computed } from 'vue'
 	import Agent from './components/Agent.vue'
 	import Preview from './components/Preview.vue'
+	import VersionTreeIndex from '@/components/versionTree/index.vue'
 
 	const agentTitle = ref('Retro Sofa Sketch')
 	const previewType = ref<'sketch' | 'report'>('sketch')
+
+	const versionTreeData = ref({
+		drawer:false,
+		list:computed(()=>{
+			return []
+		})
+	})
 </script>
 
 <style lang="less" scoped>
@@ -21,7 +37,39 @@
 		width: 100%;
 		height: 100%;
 		border-top: 0.1rem solid #c9c9c9;
-		padding: 8rem 2.3rem 6rem 2.8rem;
+		padding: 0rem 2.3rem 6rem 2.8rem;
+		flex-direction: column;
+		.openVersionTree{
+			padding: 2rem 2.5rem;
+			width: 100%;
+			display: flex;
+			justify-content: flex-end;
+			height: min-content;
+			> .btn{
+				padding: 1.5rem 1.45rem;
+				font-weight: 500;
+				font-size: 1.4rem;
+				border-radius: 2rem;
+				position: relative;
+				background: white;
+				cursor: pointer;
+				&::before {
+					content: '';
+					position: absolute;
+					inset: -1px;
+					background: linear-gradient(119.03deg, rgba(233, 121, 60, 0.8) 1.61%, rgba(255, 207, 144, 0.8) 101.01%);
+					border-radius: 2rem;
+					z-index: -1;
+				}
+			}
+		}
+
+		.content-wrapper{
+			display: flex;
+			flex: 1;
+			justify-content: space-between;
+			overflow: hidden;
+		}
 
 		.c-svg {
 			width: initial;

src/views/home/generateSketch/index.vue

@@ -12,8 +12,10 @@ const props = defineProps({
 		},
 	},
 })
-//const emit = defineEmits([
-//])
+const emit = defineEmits([
+	'sketchRestore',
+	'sketchDelete',
+])
 let data = reactive({
 })
 onMounted(()=>{
@@ -26,7 +28,7 @@ const {} = toRefs(data);
 <template>
 	<div class="generateSketch">
 		<div v-for="item in generateData.list" :key="item.id" class="item">
-			<GenerateItem :item="item" />
+			<GenerateItem :item="item" @sketchRestore="()=>emit('sketchRestore',item)" @sketchDelete="()=>emit('sketchDelete',item)" />
 		</div>
 	</div>
 </template>