diff --git a/src/api/agent.ts b/src/api/agent.ts
index ac409b4..4d77954 100644
--- a/src/api/agent.ts
+++ b/src/api/agent.ts
@@ -27,3 +27,16 @@ export interface CreateProjectParamsType {
 export const createProject = (data: CreateProjectParamsType): Promise<any> => {
 	return request({ url: '/api/project/init', method: 'post', data })
 }
+
+/**
+ * 获取项目信息
+ * @param data 获取项目信息参数
+ * @param data.id 项目id
+ * @returns 获取项目信息
+*/
+export const getProjectInfo = (data) => {
+	return request({
+		url: `/api/project/${data.id}`,
+		method: 'get',
+	})
+}
\ No newline at end of file
diff --git a/src/api/versitonTree.ts b/src/api/versitonTree.ts
index d94f482..d24f1f4 100644
--- a/src/api/versitonTree.ts
+++ b/src/api/versitonTree.ts
@@ -9,7 +9,7 @@ import request from '@/utils/request'
  */
 export const getChatNodeDetail = (data) => {
 	return request({
-		url: `/api/project/${data.projectId}/chat/node/${data.id}`,
+		url: `/api/version/${data.projectId}/chat/node/${data.id}`,
 		method: 'get',
 	})
 }
@@ -22,7 +22,20 @@ export const getChatNodeDetail = (data) => {
 */
 export const versionTree = (data) => {
 	return request({
-		url: `/api/project/${data.projectId}/chat/tree`,
+		url: `/api/version/${data.projectId}/chat/tree`,
+		method: 'get',
+	})
+}
+
+/**
+ * 获取版本树
+ * @param data 获取版本树的参数
+ * @param data.projectId 项目id
+ * @returns 获取版本树
+*/
+export const getNodeAncestors = (data) => {
+	return request({
+		url: `/api/version/${data.projectId}/chat/node/${data.id}/ancestors`,
 		method: 'get',
 	})
 }
\ No newline at end of file
diff --git a/src/stores/projectData.ts b/src/stores/projectData.ts
index d8e0d19..431d064 100644
--- a/src/stores/projectData.ts
+++ b/src/stores/projectData.ts
@@ -3,13 +3,12 @@ import { ref, computed } from 'vue'
 export const useProjectStore = defineStore('project', () => {
 	const state = ref({// 项目参数
 		id: '',
+		nodeId: '',
 	})
 
 	const setProject = (obj: any) => { 
 		for (const key in obj) {
-			if(state.value[key]){
-				state.value[key] = obj[key]
-			}
+			state.value[key] = obj[key]
 		}
 	}
 
@@ -23,3 +22,4 @@ export const useProjectStore = defineStore('project', () => {
 		setId
 	}
 })
+
diff --git a/src/stores/versionTree.ts b/src/stores/versionTree.ts
new file mode 100644
index 0000000..11b7089
--- /dev/null
+++ b/src/stores/versionTree.ts
@@ -0,0 +1,16 @@
+import { defineStore } from 'pinia'
+import { ref, computed } from 'vue'
+export const useVersionTreeStore = defineStore('versionTree', () => {
+	const state = ref({
+		nodeDetail: {
+
+		},// 节点详情
+	})
+
+	const setNodeDetail = (v: any) => { state.value.nodeDetail = v }
+
+	return {
+		state,
+		setNodeDetail,
+	}
+})
diff --git a/src/views/home/agent/components/Agent.vue b/src/views/home/agent/components/Agent.vue
index 32a7f7b..04cb668 100644
--- a/src/views/home/agent/components/Agent.vue
+++ b/src/views/home/agent/components/Agent.vue
@@ -20,7 +20,7 @@
 </template>
 
 <script setup lang="ts">
-	import { ref, reactive, computed, onUnmounted, onMounted, nextTick } from 'vue'
+	import { ref, reactive, computed, onUnmounted, onMounted, nextTick,watch } from 'vue'
 	import List from './List.vue'
 	import Input from '../../components/Input.vue'
 	import { fetchAgentReply } from '@/api/agent'
@@ -31,6 +31,8 @@
 	const userStore = useUserInfoStore()
 	const agentStore = useAgentStore()
 	const projectStore = useProjectStore()
+
+	const emits = defineEmits(['update:sketchList'])
 	const props = withDefaults(
 		defineProps<{
 			title: string
@@ -41,6 +43,7 @@
 	)
 
 	const messageList = ref([])
+
 	const listRef = ref()
 	const isGenerating = ref(false)
 	const isPaused = ref(false) // 标记是否为主动暂停
@@ -58,6 +61,13 @@
 		imageUrlList: []
 	})
 
+	const sketchList = ref([])
+watch(sketchList, (newVal) => {
+		console.log('添加图片链接--------');
+		
+		emits('update:sketchList', newVal)
+	}, { deep: true })
+
 	// 每次请求时创建新的 AbortController
 	let abort: AbortController
 
@@ -81,9 +91,9 @@
 		if (initialData) {
 			// 等待页面渲染完成后自动发送初始消息
 			params.configParams = {
-				type: initialData.type ,
+				type: initialData.type,
 				region: initialData.area,
-				style: initialData.style ,
+				style: initialData.style,
 				temperature: 0.7
 			}
 			handleSendMessage({
@@ -97,10 +107,13 @@
 		}
 	})
 
-	const handleSendMessage = async (message: {
-		text: string
-		images: Array<{ url: string; name: string }>
-	}, skipUserMessage = false) => {
+	const handleSendMessage = async (
+		message: {
+			text: string
+			images: Array<{ url: string; name: string }>
+		},
+		skipUserMessage = false
+	) => {
 		console.log('Message sent:', message)
 		isPaused.value = false
 		isGenerating.value = true
@@ -197,6 +210,7 @@
 						console.log('传输结束 end---', contentBody)
 						aiMessage.streaming = false
 						aiMessage.loading = false
+						isGenerating.value = false
 						flag = false
 						break
 					}
@@ -217,12 +231,21 @@
 							isNodeIdEvent = true
 							// continue
 						}
+						console.log('event', event)
+						if (event.includes('error')) {
+							aiMessage.text = '出现错误,请重试'
+							aiMessage.streaming = false
+							aiMessage.loading = false
+							isGenerating.value = false
+							flag = false
+							break
+						}
 
 						const dataLines = event
 							.split(/\n/)
 							.filter((line) => line.startsWith('data:'))
 							.map((line) => line.replace(/^data:\s*/, '').trim())
-						console.log('dataLInes', dataLines)
+						// console.log('dataLInes', dataLines)
 						if (isNodeIdEvent) {
 							params.versionID = dataLines[0]
 						}
@@ -232,10 +255,14 @@
 
 						try {
 							const jsonData = JSON.parse(jsonText)
-
+							console.log('jsonData', jsonData);
+							
 							// 赋值 project_id 和 version_id
-							if (jsonData.project_id) params.projectID = jsonData.project_id
-							if (jsonData.version_id) params.versionID = jsonData.version_id
+							// if (jsonData.project_id) params.projectID = jsonData.project_id
+							// if (jsonData.version_id) params.versionID = jsonData.version_id
+							if (jsonData.image_url) {
+								sketchList.value.push(jsonData.image_url)
+							}
 							if (
 								jsonData.content &&
 								jsonData.content.length > 0 &&
@@ -243,6 +270,7 @@
 							) {
 								contentBody += jsonData.content
 								aiMessage.text = contentBody
+								aiMessage.loading = false
 							}
 							if (jsonData.type === 'end') {
 								aiMessage.streaming = false
@@ -334,7 +362,9 @@
 	}
 	.agent-container {
 		// width: 39%;
-		width: 63.4rem;
+		// width: 63.4rem;
+		flex: 1;
+		margin-right: 2.7rem;
 		background-color: #fff;
 		border-radius: 2rem;
 		box-shadow: 0px 15px 21px 0px #0000000d;
diff --git a/src/views/home/agent/components/Preview.vue b/src/views/home/agent/components/Preview.vue
index 5a60cd7..69e7e72 100644
--- a/src/views/home/agent/components/Preview.vue
+++ b/src/views/home/agent/components/Preview.vue
@@ -4,13 +4,21 @@
 		:class="type === 'sketch' ? 'sketch-preview' : 'report-preview'"
 	>
 		<template v-if="type === 'sketch'">
-			<div class="sketch-item" v-for="item in 12">
+			<div
+				class="sketch-item"
+				v-for="(item, index) in sketchList"
+				:key="'sketch-item-' + index"
+			>
 				<Menu class="menu-btn" @click="handleClickMenu" />
 				<div class="edit-btn flex align-center space-between" @click="handleClickEdit">
 					<div>Edit</div>
-					<img src="@/assets/images/arrow-top-right.png" alt="" />
+					<img src="@/assets/images/arrow-top-right.png" />
 				</div>
-				<img :src="LoadingImg" alt="" />
+				<img
+					:src="getImageSrc(item, index)"
+					:alt="'sketch-' + index"
+					@load="handleImageLoad(index)"
+				/>
 			</div>
 		</template>
 		<div v-else class="reportBorder">
@@ -28,116 +36,127 @@
 						</div>
 					</div>
 					<div class="content">
-						# 一级标题   
+						# 一级标题
 						<br />
-						# 一级标题   
+						# 一级标题
 						<br />
-						# 一级标题   
+						# 一级标题
 						<br />
-						# 一级标题   
+						# 一级标题
 						<br />
-						# 一级标题   
+						# 一级标题
 						<br />
-						# 一级标题   
+						# 一级标题
 						<br />
-						# 一级标题   
+						# 一级标题
 						<br />
-						# 一级标题   
-						<br />				
-						# 一级标题   
+						# 一级标题
 						<br />
-						# 一级标题   
-						<br />				
-						# 一级标题  <br />
-						# 一级标题   
-						<br />				
-						# 一级标题  <br />
-						# 一级标题   
-						<br />				
-						# 一级标题  <br />
-						# 一级标题   
-						<br />				
-						# 一级标题  <br />
-						# 一级标题   
-						<br />				
-						# 一级标题  <br />
-						# 一级标题   
-						<br />				
-						# 一级标题  <br />
-						# 一级标题   
-						<br />				
-						# 一级标题  <br />
-						# 一级标题   
-						<br />				
-						# 一级标题  <br />
-						# 一级标题   
-						<br />				
-						# 一级标题  <br />
-						# 一级标题   
-						<br />				
-						# 一级标题  <br />				
-						# 一级标题  <br />
-						# 一级标题   
-						<br />				
-						# 一级标题  <br />
-						# 一级标题   
-						<br />				
-						# 一级标题  <br />
-						# 一级标题   
-						<br />				
-						# 一级标题  <br />
-						# 一级标题   
-						<br />				
-						# 一级标题  <br />
-						# 一级标题   
-						<br />				
-						# 一级标题  <br />
-						# 一级标题   
-						<br />				
-						# 一级标题  <br />
-						# 一级标题   
-						<br />				
-						# 一级标题  <br />
-						# 一级标题   
-						<br />				
-						# 一级标题  <br />
-						# 一级标题   
-						<br />				
-						# 一级标题  
+						# 一级标题
+						<br />
+						# 一级标题
+						<br />
+						# 一级标题 <br />
+						# 一级标题
+						<br />
+						# 一级标题 <br />
+						# 一级标题
+						<br />
+						# 一级标题 <br />
+						# 一级标题
+						<br />
+						# 一级标题 <br />
+						# 一级标题
+						<br />
+						# 一级标题 <br />
+						# 一级标题
+						<br />
+						# 一级标题 <br />
+						# 一级标题
+						<br />
+						# 一级标题 <br />
+						# 一级标题
+						<br />
+						# 一级标题 <br />
+						# 一级标题
+						<br />
+						# 一级标题 <br />
+						# 一级标题
+						<br />
+						# 一级标题 <br />
+						# 一级标题 <br />
+						# 一级标题
+						<br />
+						# 一级标题 <br />
+						# 一级标题
+						<br />
+						# 一级标题 <br />
+						# 一级标题
+						<br />
+						# 一级标题 <br />
+						# 一级标题
+						<br />
+						# 一级标题 <br />
+						# 一级标题
+						<br />
+						# 一级标题 <br />
+						# 一级标题
+						<br />
+						# 一级标题 <br />
+						# 一级标题
+						<br />
+						# 一级标题 <br />
+						# 一级标题
+						<br />
+						# 一级标题 <br />
+						# 一级标题
+						<br />
+						# 一级标题
 					</div>
 				</div>
 			</div>
-			
 		</div>
 	</div>
 </template>
 
 <script setup lang="ts">
-	import { ref } from 'vue'
+	import { ref, reactive } from 'vue'
 	import Menu from './Menu.vue'
-  import LoadingImg from '@/assets/images/sketch-loading.gif'
-  import reportNull from '@/assets/images/reportNull.png'
+	import LoadingImg from '@/assets/images/sketch-loading.gif'
+	import reportNull from '@/assets/images/reportNull.png'
+
+	// 存储每个图片的加载状态
+	const loadedStatus = reactive<Record<number, boolean>>({})
 
 	const props = withDefaults(
 		defineProps<{
 			type: 'sketch' | 'report'
+			sketchList: Array<string>
 		}>(),
 		{
-			type: 'sketch'
+			type: 'sketch',
+			sketchList: []
 		}
 	)
 
+	// 图片加载完成时触发
+	const handleImageLoad = (index: number) => {
+		loadedStatus[index] = true
+	}
 
-  const handleClickEdit = () => {
-    // 编辑按钮点击逻辑
-    console.log('Edit button clicked')
-  }
-  const handleClickMenu = () => {
-    // 菜单按钮点击逻辑
-    console.log('Menu button clicked')
-  }
-
+	// 获取当前显示的图片源
+	const getImageSrc = (item: string, index: number) => {
+		return loadedStatus[index] ? item : LoadingImg
+	}
 
+	const handleClickEdit = () => {
+		// 编辑按钮点击逻辑
+		console.log('Edit button clicked')
+	}
+	const handleClickMenu = () => {
+		// 菜单按钮点击逻辑
+		console.log('Menu button clicked')
+	}
 </script>
 
 <style lang="less" scoped>
@@ -172,13 +191,13 @@
 				font-size: 1.4rem;
 				padding: 0 0.9rem 0 1.4rem;
 				cursor: pointer;
-				img{
+				img {
 					width: 1.8rem;
 					height: 1.8rem;
 				}
 			}
 		}
-		.reportBorder{
+		.reportBorder {
 			position: relative;
 			display: flex;
 			align-items: center;
@@ -190,7 +209,11 @@
 			&::before {
 				content: '';
 				position: absolute;
-				background: linear-gradient(119.03deg, rgba(233, 121, 60, 0.3) 1.61%, rgba(255, 207, 144, 0.3) 101.01%);
+				background: linear-gradient(
+					119.03deg,
+					rgba(233, 121, 60, 0.3) 1.61%,
+					rgba(255, 207, 144, 0.3) 101.01%
+				);
 				border-radius: 2.3rem;
 				z-index: -1;
 				width: 100%;
@@ -205,20 +228,20 @@
 				height: calc(100% - var(--border-width) * 2);
 				border-radius: 2rem;
 				display: flex;
-				.report-content-null{
+				.report-content-null {
 					flex: 1;
 					display: flex;
 					align-items: center;
 					justify-content: center;
 				}
-				.report-content{
+				.report-content {
 					flex: 1;
 					display: flex;
 					flex-direction: column;
 					overflow: hidden;
-					.downBtnBox{
+					.downBtnBox {
 						padding: 2.2rem 5.2rem 0;
-						.downBtn{
+						.downBtn {
 							display: flex;
 							width: 11.2rem;
 							justify-content: center;
@@ -228,16 +251,16 @@
 							background-color: #ff7a51;
 							color: #fff;
 							cursor: pointer;
-							.icon{
-								margin-right: .02rem;
+							.icon {
+								margin-right: 0.02rem;
 							}
-							span{
+							span {
 								font-weight: 500;
 								font-size: 1.2rem;
 							}
 						}
 					}
-					.content{
+					.content {
 						word-break: break-word;
 						white-space: pre-wrap;
 						overflow-y: auto;
diff --git a/src/views/home/agent/components/versionTree/detail/index.vue b/src/views/home/agent/components/versionTree/detail/index.vue
index 2854e66..9c66d25 100644
--- a/src/views/home/agent/components/versionTree/detail/index.vue
+++ b/src/views/home/agent/components/versionTree/detail/index.vue
@@ -1,11 +1,17 @@
 <script setup lang="ts">
-import { ref, onMounted, onUnmounted, reactive, toRefs } from "vue";
+import { ref, onMounted, onUnmounted, reactive, watch } from "vue";
 import VersionDetail from './versionDetail.vue'
 import ChatDetail from './chatDetail.vue'
+import { useProjectStore } from '@/stores'
+import { getChatNodeDetail, getNodeAncestors } from '@/api/versitonTree'
+
 //const props = defineProps({
 //})
 const emit = defineEmits([
 ])
+
+const projectStore = useProjectStore()
+
 const detailData = ref({
 	id:1,
 	versionDetail:{
@@ -17,9 +23,25 @@ const detailData = ref({
 	userChatDetail:{
 
 	}
-	
-
 })
+
+watch(()=>projectStore.state.nodeId, (newVal, oldVal) => {
+	console.log(newVal)
+	if(newVal){
+		getChatNodeDetail({
+			projectId: projectStore.state.id,
+			id: newVal
+		}).then(res => {
+			console.log(res)
+		})
+		getNodeAncestors({
+			projectId: projectStore.state.id,
+			id: newVal
+		}).then(res => {
+			console.log(res)
+		})
+	}
+},{ immediate: true })
 onMounted(()=>{
 })
 onUnmounted(()=>{
diff --git a/src/views/home/agent/components/versionTree/index.vue b/src/views/home/agent/components/versionTree/index.vue
index 63921cb..6a291ef 100644
--- a/src/views/home/agent/components/versionTree/index.vue
+++ b/src/views/home/agent/components/versionTree/index.vue
@@ -5,7 +5,7 @@ import Detail from './detail/index.vue'
 // import { versionsList } from './tools/versionsData'
 import { findAndAddChild, findAndRemoveChild } from '../../../../../utils/treeDiagram'
 import { useProjectStore } from '@/stores'
-import { versionTree, getChatNodeDetail } from '@/api/versitonTree'
+import { versionTree } from '@/api/versitonTree'
 
 const props = defineProps({
 	versionTreeData: {
@@ -25,65 +25,39 @@ const props = defineProps({
 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
-		})
+let oldProjectId:any = ''
+watch(()=>props.versionTreeData?.drawer, (newVal, oldVal) => {
+	console.log(newVal,oldProjectId,projectStore.state.id)
+	if(newVal && oldProjectId !== projectStore.state.id && projectStore.state.id){
+		getVersionTree()
+		oldProjectId = JSON.parse(JSON.stringify(projectStore.state.id))
 	}
 })
 
+const getVersionTree = ()=>{
+	versionTree({
+		projectId: projectStore.state.id
+	}).then(res => {
+		setVersionsList([res])
+	})
+}
+
 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]
+			if(!item.url)continue
 			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)=>{
+	traverseArray(res,'',(item,i,father)=>{
 		item.versionId = father?`${father.versionId}-${i+1}`:'1'
 	})
+	versionsList.value = res
 }
 
 const treeRef = ref(null)
@@ -133,9 +107,9 @@ const versionDelete = (versionDetail)=>{
 }
 
 let data = reactive({})
-onMounted(() => {setVersionsList('')})
+// onMounted(() => {setVersionsList('')})
 onUnmounted(() => {})
-defineExpose({})
+defineExpose({getVersionTree})
 const {} = toRefs(data)
 </script>
 <template>
@@ -177,6 +151,7 @@ const {} = toRefs(data)
 			<div class="versionTreeBox">
 				<div class="tree">
 					<Tree 
+						v-if="versionsList.length > 0"
 						ref="treeRef"
 						:versionsList="versionsList"
 						:treeState="treeState" 
diff --git a/src/views/home/agent/components/versionTree/tree/index.vue b/src/views/home/agent/components/versionTree/tree/index.vue
index a885f26..ef7fa3c 100644
--- a/src/views/home/agent/components/versionTree/tree/index.vue
+++ b/src/views/home/agent/components/versionTree/tree/index.vue
@@ -2,6 +2,8 @@
 import { ref, onMounted, onUnmounted, reactive, toRefs, watch, nextTick } from "vue";
 import view1Item from './view1Item.vue'
 import view2 from './view2/index.vue'
+import { useProjectStore } from '@/stores'
+
 
 const props = defineProps({
 	versionsList: {
@@ -28,6 +30,8 @@ const view1Ref = ref(null)
 
 const isLoad = ref(false)
 const treeStateTime = ref(true)
+const projectStore = useProjectStore()
+
 
 watch(()=>props.treeState,(newVal,oldVal)=>{
 	treeStateTime.value = false
@@ -68,6 +72,8 @@ const initialize = ()=>{
 
 const setSelectItem = (item)=>{
 	if(!item.versionId)return
+	console.log(item)
+	// projectStore.setProject({latestNodeId: item.id})
 	emit('update:selectItem', {...item})
 }
 
diff --git a/src/views/home/agent/components/versionTree/tree/view2/index.vue b/src/views/home/agent/components/versionTree/tree/view2/index.vue
index efced12..a19a0f7 100644
--- a/src/views/home/agent/components/versionTree/tree/view2/index.vue
+++ b/src/views/home/agent/components/versionTree/tree/view2/index.vue
@@ -47,7 +47,6 @@ const { layout } = useLayout()
 async function layoutGraph(direction) {
 	setTimeout(() => {
 		nodes.value = layout(nodes.value, edges.value, direction)
-		console.log(nodes.value)
 		nextTick(() => {
 			fitView()
 		})
@@ -196,8 +195,10 @@ defineExpose({push})
 				cursor: pointer;
 				background-color: var(--treeItem-background);
 				box-sizing: border-box;
+				overflow: hidden;
 				&.active{
-					background-color: var(--treeItem-active-background);
+					// background-color: var(--treeItem-active-background);
+					border: 2px solid #000;
 				}
 				&.start{
 					background-color: #7A7A7A;
diff --git a/src/views/home/agent/index.vue b/src/views/home/agent/index.vue
index 8f916d1..40b6219 100644
--- a/src/views/home/agent/index.vue
+++ b/src/views/home/agent/index.vue
@@ -1,34 +1,58 @@
 <template>
 	<div class="agent-wrapper flex space-between">
 		<div class="openVersionTree">
-			<div class="btn" @click="versionTreeData.drawer = true">
-				Version Tree
-			</div>
+			<div class="btn" @click="versionTreeData.drawer = true">Version Tree</div>
 		</div>
 		<div class="content-wrapper">
-			<Agent :title="agentTitle" />
+			<Agent :title="agentTitle" @update:sketchList="updateSketchList" />
 			<div class="preview-wrapper">
-				<Preview :type="previewType" />
+				<Preview :type="previewType" :sketchList="sketchList" />
 			</div>
 		</div>
-		<VersionTreeIndex v-model:versionTreeData="versionTreeData" />
+		<VersionTreeIndex ref="VersionTreeIndexRef" v-model:versionTreeData="versionTreeData" />
 	</div>
 </template>
 
 <script setup lang="ts">
-	import { ref, computed } from 'vue'
+	import { ref, watch, onMounted } from 'vue'
 	import Agent from './components/Agent.vue'
 	import Preview from './components/Preview.vue'
 	import VersionTreeIndex from './components/versionTree/index.vue'
+	import { useProjectStore } from '@/stores'
+	import { getProjectInfo } from '@/api/agent'
+
 
 	const agentTitle = ref('Retro Sofa Sketch')
-	const previewType = ref<'sketch' | 'report'>('report')
+	const previewType = ref<'sketch' | 'report'>('sketch')
+
+	const VersionTreeIndexRef = ref()
+
+	const sketchList = ref([])
+	const updateSketchList = (newVal) => {
+		console.log('newVal', newVal)
+		sketchList.value = newVal
+		// VersionTreeIndexRef.value.getVersionTree()
+	}
 
 	const versionTreeData = ref({
-		drawer:false,
-		list:computed(()=>{
-			return []
-		})
+		drawer: false,
+	})
+
+	const projectStore = useProjectStore()
+	watch(()=>projectStore.state.id, (newVal, oldVal) => {
+		if(newVal){
+			getProjectInfo({ id: newVal }).then(res => {
+				projectStore.setProject(res.project)
+			})
+		}
+	})
+
+	onMounted(()=>{
+		if(projectStore.state.id){
+			getProjectInfo({ id: projectStore.state.id }).then(res => {
+				projectStore.setProject(res.project)
+			})
+		}
 	})
 </script>
 
@@ -39,13 +63,13 @@
 		border-top: 0.1rem solid #c9c9c9;
 		padding: 0rem 2.3rem 6rem 2.8rem;
 		flex-direction: column;
-		.openVersionTree{
+		.openVersionTree {
 			padding: 2rem 0rem;
 			width: 100%;
 			display: flex;
 			justify-content: flex-end;
 			height: min-content;
-			> .btn{
+			> .btn {
 				padding: 1.5rem 1.45rem;
 				font-weight: 500;
 				font-size: 1.4rem;
@@ -57,14 +81,18 @@
 					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%);
+					background: linear-gradient(
+						119.03deg,
+						rgba(233, 121, 60, 0.8) 1.61%,
+						rgba(255, 207, 144, 0.8) 101.01%
+					);
 					border-radius: 2.2rem;
 					z-index: -1;
 				}
 			}
 		}
 
-		.content-wrapper{
+		.content-wrapper {
 			display: flex;
 			flex: 1;
 			justify-content: space-between;
diff --git a/vite.config.ts.timestamp-1771986020299-a3f2241cb00dd.mjs b/vite.config.ts.timestamp-1771986020299-a3f2241cb00dd.mjs
deleted file mode 100644
index c1cd602..0000000
--- a/vite.config.ts.timestamp-1771986020299-a3f2241cb00dd.mjs
+++ /dev/null
@@ -1,84 +0,0 @@
-// vite.config.ts
-import { fileURLToPath, URL } from "node:url";
-import { defineConfig, loadEnv } from "file:///D:/project/FiDA_Front/node_modules/vite/dist/node/index.js";
-import vue from "file:///D:/project/FiDA_Front/node_modules/@vitejs/plugin-vue/dist/index.mjs";
-import AutoImport from "file:///D:/project/FiDA_Front/node_modules/unplugin-auto-import/dist/vite.js";
-import Components from "file:///D:/project/FiDA_Front/node_modules/unplugin-vue-components/dist/vite.mjs";
-import DefineOptions from "file:///D:/project/FiDA_Front/node_modules/unplugin-vue-define-options/dist/vite.js";
-import { createSvgIconsPlugin } from "file:///D:/project/FiDA_Front/node_modules/vite-plugin-svg-icons/dist/index.mjs";
-import path from "path";
-import { ElementPlusResolver } from "file:///D:/project/FiDA_Front/node_modules/unplugin-vue-components/dist/resolvers.mjs";
-var __vite_injected_original_dirname = "D:\\project\\FiDA_Front";
-var __vite_injected_original_import_meta_url = "file:///D:/project/FiDA_Front/vite.config.ts";
-var vite_config_default = defineConfig(({ mode }) => {
-  const env = loadEnv(mode, process.cwd());
-  return {
-    plugins: [
-      vue(),
-      DefineOptions(),
-      // ...
-      AutoImport({
-        resolvers: [ElementPlusResolver()]
-      }),
-      Components({
-        resolvers: [ElementPlusResolver()]
-      }),
-      createSvgIconsPlugin({
-        // 指定需要缓存的图标文件夹
-        iconDirs: [path.resolve(process.cwd(), "src/assets/icons")],
-        // 指定symbolId格式
-        symbolId: "icon-[dir]-[name]",
-        inject: "body-last"
-        // 注入位置优化
-      })
-    ],
-    define: {
-      __VUE_PROD_HYDRATION_MISMATCH_DETAILS__: false
-    },
-    css: {
-      preprocessorOptions: {
-        less: {
-          modifyVars: {
-            "primary-color": "#ec6800"
-          },
-          javascriptEnabled: true,
-          // 全局导入less变量文件
-          additionalData: `@import "${path.resolve(__vite_injected_original_dirname, "src/assets/css/style.less")}";`
-        }
-      }
-    },
-    resolve: {
-      alias: {
-        "@": fileURLToPath(new URL("./src", __vite_injected_original_import_meta_url)),
-        _c: fileURLToPath(new URL("./src/components", __vite_injected_original_import_meta_url))
-      }
-    },
-    server: {
-      host: "0.0.0.0",
-      // 允许局域网内的IP访问
-      port: 8060,
-      // 根据环境设置端口
-      open: false,
-      // 自动打开浏览器
-      strictPort: true,
-      // 如果端口已被占用，则尝试下一个可用端口
-      hmr: {
-        overlay: true
-      },
-      proxy: {
-        "/api": {
-          //'/api'是自行设置的请求前缀
-          target: env.VITE_APP_URL,
-          changeOrigin: true,
-          //用于控制请求头中的host值
-          rewrite: (path2) => path2.replace(/^\/api/, "/api")
-          //路径重写，（正则）匹配以api开头的路径为空（将请求前缀删除）
-        }
-      }
-    }
-  };
-});
-export {
-  vite_config_default as default
-};
-//# sourceMappingURL=data:application/json;base64,ewogICJ2ZXJzaW9uIjogMywKICAic291cmNlcyI6IFsidml0ZS5jb25maWcudHMiXSwKICAic291cmNlc0NvbnRlbnQiOiBbImNvbnN0IF9fdml0ZV9pbmplY3RlZF9vcmlnaW5hbF9kaXJuYW1lID0gXCJEOlxcXFxwcm9qZWN0XFxcXEZpREFfRnJvbnRcIjtjb25zdCBfX3ZpdGVfaW5qZWN0ZWRfb3JpZ2luYWxfZmlsZW5hbWUgPSBcIkQ6XFxcXHByb2plY3RcXFxcRmlEQV9Gcm9udFxcXFx2aXRlLmNvbmZpZy50c1wiO2NvbnN0IF9fdml0ZV9pbmplY3RlZF9vcmlnaW5hbF9pbXBvcnRfbWV0YV91cmwgPSBcImZpbGU6Ly8vRDovcHJvamVjdC9GaURBX0Zyb250L3ZpdGUuY29uZmlnLnRzXCI7aW1wb3J0IHsgZmlsZVVSTFRvUGF0aCwgVVJMIH0gZnJvbSAnbm9kZTp1cmwnXHJcblxyXG5pbXBvcnQgeyBkZWZpbmVDb25maWcsIGxvYWRFbnYgfSBmcm9tICd2aXRlJ1xyXG5pbXBvcnQgdnVlIGZyb20gJ0B2aXRlanMvcGx1Z2luLXZ1ZSdcclxuaW1wb3J0IEF1dG9JbXBvcnQgZnJvbSAndW5wbHVnaW4tYXV0by1pbXBvcnQvdml0ZSdcclxuaW1wb3J0IENvbXBvbmVudHMgZnJvbSAndW5wbHVnaW4tdnVlLWNvbXBvbmVudHMvdml0ZSdcclxuaW1wb3J0IERlZmluZU9wdGlvbnMgZnJvbSAndW5wbHVnaW4tdnVlLWRlZmluZS1vcHRpb25zL3ZpdGUnXHJcbmltcG9ydCB7IGNyZWF0ZVN2Z0ljb25zUGx1Z2luIH0gZnJvbSAndml0ZS1wbHVnaW4tc3ZnLWljb25zJ1xyXG5pbXBvcnQgcGF0aCBmcm9tICdwYXRoJ1xyXG5pbXBvcnQgeyBFbGVtZW50UGx1c1Jlc29sdmVyIH0gZnJvbSAndW5wbHVnaW4tdnVlLWNvbXBvbmVudHMvcmVzb2x2ZXJzJ1xyXG5cclxuLy8gY29uc29sZS5sb2cocHJvY2VzcylcclxuLy8gY29uc29sZS5sb2coaW1wb3J0Lm1ldGEuZW52LlZJVEVfQVBQX1VSTClcclxuXHJcbi8vIGh0dHBzOi8vdml0ZWpzLmRldi9jb25maWcvXHJcblxyXG5leHBvcnQgZGVmYXVsdCBkZWZpbmVDb25maWcoKHsgbW9kZSB9KSA9PiB7XHJcblx0Y29uc3QgZW52ID0gbG9hZEVudihtb2RlLCBwcm9jZXNzLmN3ZCgpKVxyXG5cclxuXHRyZXR1cm4ge1xyXG5cdFx0cGx1Z2luczogW1xyXG5cdFx0XHR2dWUoKSxcclxuXHRcdFx0RGVmaW5lT3B0aW9ucygpLFxyXG5cdFx0XHQvLyAuLi5cclxuXHRcdFx0QXV0b0ltcG9ydCh7XHJcblx0XHRcdFx0cmVzb2x2ZXJzOiBbRWxlbWVudFBsdXNSZXNvbHZlcigpXSxcclxuXHRcdFx0fSksXHJcblx0XHRcdENvbXBvbmVudHMoe1xyXG5cdFx0XHRcdHJlc29sdmVyczogW0VsZW1lbnRQbHVzUmVzb2x2ZXIoKV0sXHJcblx0XHRcdH0pLFxyXG5cdFx0XHRjcmVhdGVTdmdJY29uc1BsdWdpbih7XHJcblx0XHRcdFx0Ly8gXHU2MzA3XHU1QjlBXHU5NzAwXHU4OTgxXHU3RjEzXHU1QjU4XHU3Njg0XHU1NkZFXHU2ODA3XHU2NTg3XHU0RUY2XHU1OTM5XHJcblx0XHRcdFx0aWNvbkRpcnM6IFtwYXRoLnJlc29sdmUocHJvY2Vzcy5jd2QoKSwgJ3NyYy9hc3NldHMvaWNvbnMnKV0sXHJcblx0XHRcdFx0Ly8gXHU2MzA3XHU1QjlBc3ltYm9sSWRcdTY4M0NcdTVGMEZcclxuXHRcdFx0XHRzeW1ib2xJZDogJ2ljb24tW2Rpcl0tW25hbWVdJyxcclxuXHRcdFx0XHRpbmplY3Q6ICdib2R5LWxhc3QnIC8vIFx1NkNFOFx1NTE2NVx1NEY0RFx1N0Y2RVx1NEYxOFx1NTMxNlxyXG5cdFx0XHR9KVxyXG5cdFx0XSxcclxuXHRcdGRlZmluZToge1xyXG5cdFx0XHRfX1ZVRV9QUk9EX0hZRFJBVElPTl9NSVNNQVRDSF9ERVRBSUxTX186IGZhbHNlLFxyXG5cdFx0fSxcclxuXHRcdGNzczoge1xyXG5cdFx0XHRwcmVwcm9jZXNzb3JPcHRpb25zOiB7XHJcblx0XHRcdFx0bGVzczoge1xyXG5cdFx0XHRcdFx0bW9kaWZ5VmFyczoge1xyXG5cdFx0XHRcdFx0XHQncHJpbWFyeS1jb2xvcic6ICcjZWM2ODAwJ1xyXG5cdFx0XHRcdFx0fSxcclxuXHRcdFx0XHRcdGphdmFzY3JpcHRFbmFibGVkOiB0cnVlLFxyXG5cdFx0XHRcdFx0Ly8gXHU1MTY4XHU1QzQwXHU1QkZDXHU1MTY1bGVzc1x1NTNEOFx1OTFDRlx1NjU4N1x1NEVGNlxyXG5cdFx0XHRcdFx0YWRkaXRpb25hbERhdGE6IGBAaW1wb3J0IFwiJHtwYXRoLnJlc29sdmUoX19kaXJuYW1lLCAnc3JjL2Fzc2V0cy9jc3Mvc3R5bGUubGVzcycpfVwiO2BcclxuXHRcdFx0XHR9XHJcblx0XHRcdH1cclxuXHRcdH0sXHJcblx0XHRyZXNvbHZlOiB7XHJcblx0XHRcdGFsaWFzOiB7XHJcblx0XHRcdFx0J0AnOiBmaWxlVVJMVG9QYXRoKG5ldyBVUkwoJy4vc3JjJywgaW1wb3J0Lm1ldGEudXJsKSksXHJcblx0XHRcdFx0X2M6IGZpbGVVUkxUb1BhdGgobmV3IFVSTCgnLi9zcmMvY29tcG9uZW50cycsIGltcG9ydC5tZXRhLnVybCkpXHJcblx0XHRcdH1cclxuXHRcdH0sXHJcblx0XHRzZXJ2ZXI6IHtcclxuXHRcdFx0aG9zdDogJzAuMC4wLjAnLCAvLyBcdTUxNDFcdThCQjhcdTVDNDBcdTU3REZcdTdGNTFcdTUxODVcdTc2ODRJUFx1OEJCRlx1OTVFRVxyXG5cdFx0XHRwb3J0OiA4MDYwLCAvLyBcdTY4MzlcdTYzNkVcdTczQUZcdTU4ODNcdThCQkVcdTdGNkVcdTdBRUZcdTUzRTNcclxuXHRcdFx0b3BlbjogZmFsc2UsIC8vIFx1ODFFQVx1NTJBOFx1NjI1M1x1NUYwMFx1NkQ0Rlx1ODlDOFx1NTY2OFxyXG5cdFx0XHRzdHJpY3RQb3J0OiB0cnVlLCAvLyBcdTU5ODJcdTY3OUNcdTdBRUZcdTUzRTNcdTVERjJcdTg4QUJcdTUzNjBcdTc1MjhcdUZGMENcdTUyMTlcdTVDMURcdThCRDVcdTRFMEJcdTRFMDBcdTRFMkFcdTUzRUZcdTc1MjhcdTdBRUZcdTUzRTNcclxuXHRcdFx0aG1yOiB7XHJcblx0XHRcdFx0b3ZlcmxheTogdHJ1ZVxyXG5cdFx0XHR9LFxyXG5cdFx0XHRwcm94eToge1xyXG5cdFx0XHRcdCcvYXBpJzoge1xyXG5cdFx0XHRcdFx0Ly8nL2FwaSdcdTY2MkZcdTgxRUFcdTg4NENcdThCQkVcdTdGNkVcdTc2ODRcdThCRjdcdTZDNDJcdTUyNERcdTdGMDBcclxuXHRcdFx0XHRcdHRhcmdldDogZW52LlZJVEVfQVBQX1VSTCxcclxuXHRcdFx0XHRcdGNoYW5nZU9yaWdpbjogdHJ1ZSwgLy9cdTc1MjhcdTRFOEVcdTYzQTdcdTUyMzZcdThCRjdcdTZDNDJcdTU5MzRcdTRFMkRcdTc2ODRob3N0XHU1MDNDXHJcblx0XHRcdFx0XHRyZXdyaXRlOiAocGF0aCkgPT4gcGF0aC5yZXBsYWNlKC9eXFwvYXBpLywgJy9hcGknKSAvL1x1OERFRlx1NUY4NFx1OTFDRFx1NTE5OVx1RkYwQ1x1RkYwOFx1NkI2M1x1NTIxOVx1RkYwOVx1NTMzOVx1OTE0RFx1NEVFNWFwaVx1NUYwMFx1NTkzNFx1NzY4NFx1OERFRlx1NUY4NFx1NEUzQVx1N0E3QVx1RkYwOFx1NUMwNlx1OEJGN1x1NkM0Mlx1NTI0RFx1N0YwMFx1NTIyMFx1OTY2NFx1RkYwOVxyXG5cdFx0XHRcdH1cclxuXHRcdFx0fVxyXG5cdFx0fVxyXG5cdH1cclxufSlcclxuIl0sCiAgIm1hcHBpbmdzIjogIjtBQUF1UCxTQUFTLGVBQWUsV0FBVztBQUUxUixTQUFTLGNBQWMsZUFBZTtBQUN0QyxPQUFPLFNBQVM7QUFDaEIsT0FBTyxnQkFBZ0I7QUFDdkIsT0FBTyxnQkFBZ0I7QUFDdkIsT0FBTyxtQkFBbUI7QUFDMUIsU0FBUyw0QkFBNEI7QUFDckMsT0FBTyxVQUFVO0FBQ2pCLFNBQVMsMkJBQTJCO0FBVHBDLElBQU0sbUNBQW1DO0FBQThHLElBQU0sMkNBQTJDO0FBZ0J4TSxJQUFPLHNCQUFRLGFBQWEsQ0FBQyxFQUFFLEtBQUssTUFBTTtBQUN6QyxRQUFNLE1BQU0sUUFBUSxNQUFNLFFBQVEsSUFBSSxDQUFDO0FBRXZDLFNBQU87QUFBQSxJQUNOLFNBQVM7QUFBQSxNQUNSLElBQUk7QUFBQSxNQUNKLGNBQWM7QUFBQTtBQUFBLE1BRWQsV0FBVztBQUFBLFFBQ1YsV0FBVyxDQUFDLG9CQUFvQixDQUFDO0FBQUEsTUFDbEMsQ0FBQztBQUFBLE1BQ0QsV0FBVztBQUFBLFFBQ1YsV0FBVyxDQUFDLG9CQUFvQixDQUFDO0FBQUEsTUFDbEMsQ0FBQztBQUFBLE1BQ0QscUJBQXFCO0FBQUE7QUFBQSxRQUVwQixVQUFVLENBQUMsS0FBSyxRQUFRLFFBQVEsSUFBSSxHQUFHLGtCQUFrQixDQUFDO0FBQUE7QUFBQSxRQUUxRCxVQUFVO0FBQUEsUUFDVixRQUFRO0FBQUE7QUFBQSxNQUNULENBQUM7QUFBQSxJQUNGO0FBQUEsSUFDQSxRQUFRO0FBQUEsTUFDUCx5Q0FBeUM7QUFBQSxJQUMxQztBQUFBLElBQ0EsS0FBSztBQUFBLE1BQ0oscUJBQXFCO0FBQUEsUUFDcEIsTUFBTTtBQUFBLFVBQ0wsWUFBWTtBQUFBLFlBQ1gsaUJBQWlCO0FBQUEsVUFDbEI7QUFBQSxVQUNBLG1CQUFtQjtBQUFBO0FBQUEsVUFFbkIsZ0JBQWdCLFlBQVksS0FBSyxRQUFRLGtDQUFXLDJCQUEyQjtBQUFBLFFBQ2hGO0FBQUEsTUFDRDtBQUFBLElBQ0Q7QUFBQSxJQUNBLFNBQVM7QUFBQSxNQUNSLE9BQU87QUFBQSxRQUNOLEtBQUssY0FBYyxJQUFJLElBQUksU0FBUyx3Q0FBZSxDQUFDO0FBQUEsUUFDcEQsSUFBSSxjQUFjLElBQUksSUFBSSxvQkFBb0Isd0NBQWUsQ0FBQztBQUFBLE1BQy9EO0FBQUEsSUFDRDtBQUFBLElBQ0EsUUFBUTtBQUFBLE1BQ1AsTUFBTTtBQUFBO0FBQUEsTUFDTixNQUFNO0FBQUE7QUFBQSxNQUNOLE1BQU07QUFBQTtBQUFBLE1BQ04sWUFBWTtBQUFBO0FBQUEsTUFDWixLQUFLO0FBQUEsUUFDSixTQUFTO0FBQUEsTUFDVjtBQUFBLE1BQ0EsT0FBTztBQUFBLFFBQ04sUUFBUTtBQUFBO0FBQUEsVUFFUCxRQUFRLElBQUk7QUFBQSxVQUNaLGNBQWM7QUFBQTtBQUFBLFVBQ2QsU0FBUyxDQUFDQSxVQUFTQSxNQUFLLFFBQVEsVUFBVSxNQUFNO0FBQUE7QUFBQSxRQUNqRDtBQUFBLE1BQ0Q7QUFBQSxJQUNEO0FBQUEsRUFDRDtBQUNELENBQUM7IiwKICAibmFtZXMiOiBbInBhdGgiXQp9Cg==