对话页面接入版本树

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;