FiDA_Front/src/views/home/agent/index.vue

<template>
	<div class="agent-wrapper flex space-between">
		<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, 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'>('report')

	const versionTreeData = ref({
		drawer:false,
		list:computed(()=>{
			return []
		})
	})
</script>

<style lang="less" scoped>
	.agent-wrapper {
		width: 100%;
		height: 100%;
		border-top: 0.1rem solid #c9c9c9;
		padding: 0rem 2.3rem 6rem 2.8rem;
		flex-direction: column;
		.openVersionTree{
			padding: 2rem 0rem;
			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: 2.2rem;
					z-index: -1;
				}
			}
		}

		.content-wrapper{
			display: flex;
			flex: 1;
			justify-content: space-between;
			// overflow: hidden;
		}

		.c-svg {
			width: initial;
		}

		.preview-wrapper {
			width: 91.2rem;
		}
	}
</style>