提交测试versionTree

src/views/home/versionTree/index.vue

@@ -0,0 +1,110 @@
+<script setup lang="ts">
+import { ref, onMounted, onUnmounted, reactive, toRefs } from "vue";
+import Tree from './tree/index.vue'
+const props = defineProps({
+	versionTreeData:{
+		type:Object,
+		default:()=>{
+			return {
+				drawer:false,
+				list:[],
+			}
+		},
+	},
+})
+//const emit = defineEmits([
+//])
+const treeState = ref(false)//
+
+const openTree = ()=>{
+	treeState.value = !treeState.value
+	
+}
+
+let data = reactive({
+})
+onMounted(()=>{
+})
+onUnmounted(()=>{
+})
+defineExpose({})
+const {} = toRefs(data);
+</script>
+<template>
+	<div class="versionTree">
+		<el-drawer 
+			v-model="versionTreeData.drawer" 
+			:close-on-press-escape="false"
+			:close-on-click-modal="false"
+			:size="treeState?'109rem':'49rem'"
+			body-class="versionTreeBody"
+			:with-header="false">
+			<div class="versionTreeTitle">
+				<span>Version Tree: Retro Sofa Sketch</span>
+				<div class="closeBtn" @click="versionTreeData.drawer = false">
+					<div class="closeIcon">
+						<SvgIcon name="close" />
+					</div>
+				</div>
+			</div>
+			<div style="display: flex;">
+				<el-button class="expandBtn" @click="openTree" style="width: 5rem;">+</el-button>
+				<el-button class="expandBtn" @click="openTree" style="width: 5rem;">-</el-button>
+			</div>
+			<div class="versionTreeBox">
+				<div class="tree">
+					<Tree :treeState="treeState"></Tree>
+				</div>
+				<div class="detail">
+
+				</div>
+			</div>
+		</el-drawer>
+	</div>
+</template>
+<style lang="less" scoped>
+	.versionTree{
+		--border-radius: 1rem;
+		:deep(.versionTreeBody){
+			--el-drawer-padding-primary: 0rem;
+			display: flex;
+			flex-direction: column;
+		}
+		.versionTreeTitle{
+			width: 100%;
+			height: 8rem;
+			display: flex;
+			align-items: center;
+			justify-content: space-between;
+			padding: 0 .8rem 0 1.2rem;
+			border-bottom: 1px solid #C9C9C9;
+			> span{
+				font-size: 2rem;
+				font-weight: 600;
+			}
+			> .closeBtn{
+				width: 2.4rem;
+				height: 2.4rem;
+				cursor: pointer;
+			}
+		}
+		.versionTreeBox{
+			flex: 1;
+			display: flex;
+			overflow: hidden;
+			> .tree{
+				flex: 1;
+				height: 100%;
+				overflow: hidden;
+				padding: 1.8rem 0 1.8rem 2.1rem;
+			}
+			> .detail{
+				width: 35rem;
+				margin: 1.4rem 3rem 0 3.4rem;
+				height: 100%;
+				overflow: auto;
+				background-color: #F5F5F5;
+			}
+		}
+	}
+</style>