diff --git a/src/api/versitonTree.ts b/src/api/versitonTree.ts
new file mode 100644
index 0000000..d94f482
--- /dev/null
+++ b/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',
+	})
+}
\ No newline at end of file
diff --git a/src/assets/icons/versionExport.svg b/src/assets/icons/versionExport.svg
new file mode 100644
index 0000000..3659447
--- /dev/null
+++ b/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>
diff --git a/src/views/home/versionTree/components/dialog.vue b/src/components/versionTree/components/dialog.vue
similarity index 100%
rename from src/views/home/versionTree/components/dialog.vue
rename to src/components/versionTree/components/dialog.vue
diff --git a/src/views/home/versionTree/detail/chatDetail.vue b/src/components/versionTree/detail/chatDetail.vue
similarity index 100%
rename from src/views/home/versionTree/detail/chatDetail.vue
rename to src/components/versionTree/detail/chatDetail.vue
diff --git a/src/views/home/versionTree/detail/index.vue b/src/components/versionTree/detail/index.vue
similarity index 100%
rename from src/views/home/versionTree/detail/index.vue
rename to src/components/versionTree/detail/index.vue
diff --git a/src/views/home/versionTree/detail/versionDetail.vue b/src/components/versionTree/detail/versionDetail.vue
similarity index 100%
rename from src/views/home/versionTree/detail/versionDetail.vue
rename to src/components/versionTree/detail/versionDetail.vue
diff --git a/src/views/home/versionTree/index.vue b/src/components/versionTree/index.vue
similarity index 71%
rename from src/views/home/versionTree/index.vue
rename to src/components/versionTree/index.vue
index 1c06692..26c6a3b 100644
--- a/src/views/home/versionTree/index.vue
+++ b/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;
 		}
diff --git a/src/views/home/versionTree/tools/tools.js b/src/components/versionTree/tools/tools.js
similarity index 100%
rename from src/views/home/versionTree/tools/tools.js
rename to src/components/versionTree/tools/tools.js
diff --git a/src/views/home/versionTree/tools/versionsData.js b/src/components/versionTree/tools/versionsData.js
similarity index 100%
rename from src/views/home/versionTree/tools/versionsData.js
rename to src/components/versionTree/tools/versionsData.js
diff --git a/src/views/home/versionTree/tree/index.vue b/src/components/versionTree/tree/index.vue
similarity index 100%
rename from src/views/home/versionTree/tree/index.vue
rename to src/components/versionTree/tree/index.vue
diff --git a/src/views/home/versionTree/tree/view1Item.vue b/src/components/versionTree/tree/view1Item.vue
similarity index 100%
rename from src/views/home/versionTree/tree/view1Item.vue
rename to src/components/versionTree/tree/view1Item.vue
diff --git a/src/views/home/versionTree/tree/view2/InputNode.vue b/src/components/versionTree/tree/view2/InputNode.vue
similarity index 100%
rename from src/views/home/versionTree/tree/view2/InputNode.vue
rename to src/components/versionTree/tree/view2/InputNode.vue
diff --git a/src/views/home/versionTree/tree/view2/index.vue b/src/components/versionTree/tree/view2/index.vue
similarity index 100%
rename from src/views/home/versionTree/tree/view2/index.vue
rename to src/components/versionTree/tree/view2/index.vue
diff --git a/src/views/home/versionTree/tree/view2/secondaryNode.vue b/src/components/versionTree/tree/view2/secondaryNode.vue
similarity index 100%
rename from src/views/home/versionTree/tree/view2/secondaryNode.vue
rename to src/components/versionTree/tree/view2/secondaryNode.vue
diff --git a/src/views/home/versionTree/tree/view2/speciaiEdge.vue b/src/components/versionTree/tree/view2/speciaiEdge.vue
similarity index 100%
rename from src/views/home/versionTree/tree/view2/speciaiEdge.vue
rename to src/components/versionTree/tree/view2/speciaiEdge.vue
diff --git a/src/lang/en.ts b/src/lang/en.ts
index 35681f3..f29ce59 100644
--- a/src/lang/en.ts
+++ b/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: {
diff --git a/src/lang/zh-cn.ts b/src/lang/zh-cn.ts
index 4f31f70..c3bce96 100644
--- a/src/lang/zh-cn.ts
+++ b/src/lang/zh-cn.ts
@@ -123,6 +123,7 @@ export default {
 		restoreHint:'恢复后将显示该对话。',
 		cancel: '取消',
 		Confirm: '确认',
+		export: '导出',
 	},
 	//generateSketch
 	generateSketch: {
diff --git a/src/views/home/VersionTree.vue b/src/views/home/VersionTree.vue
index e46372f..977e9b9 100644
--- a/src/views/home/VersionTree.vue
+++ b/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>
diff --git a/src/views/home/agent/index.vue b/src/views/home/agent/index.vue
index cdd17ae..0f0ba57 100644
--- a/src/views/home/agent/index.vue
+++ b/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;
diff --git a/src/views/home/generateSketch/index.vue b/src/views/home/generateSketch/index.vue
index c96924a..11cd357 100644
--- a/src/views/home/generateSketch/index.vue
+++ b/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>