sketch生成基础结构

src/views/home/versionTree/index.vue

@@ -2,6 +2,9 @@
 import { ref, onMounted, onUnmounted, reactive, toRefs } from "vue";
 import Tree from './tree/index.vue'
 import Detail from './detail/index.vue'
+import { versionsList } from './tools/versionsData'
+import { findAndAddChild, findAndRemoveChild } from './tools/tools'
+
 const props = defineProps({
 	versionTreeData:{
 		type:Object,
@@ -15,13 +18,51 @@ const props = defineProps({
 })
 //const emit = defineEmits([
 //])
+
+const treeRef = ref(null)
+const treeKey = ref(0)
 const treeState = ref(true)//
 
-const selectItem = ref({})
+const selectItem:any = ref({})
 
-const openTree = ()=>{
-	treeState.value = !treeState.value
-	
+const openTree = (state)=>{
+	treeState.value = state
+}
+
+const versionRestore = ()=>{
+	let id = ''
+	if(selectItem.value?.child?.length > 0){
+		function findMaxForYourFormat(items) {
+			let max = 0
+			
+			for (const item of items) {
+				// 直接分割并取最后一部分
+				const parts = item.id.split('-')
+				const lastNumber = parseInt(parts[parts.length - 1], 10)
+				
+				if (lastNumber > max) {
+				max = lastNumber
+				}
+			}
+			
+			return max
+		}
+		id = `${selectItem.value?.id}-${findMaxForYourFormat(selectItem.value?.child) + 1}`
+	}else{
+		id = `${selectItem.value?.id}-1`
+	}
+	let addObj = {
+		id,
+		name:`V${id}`
+	}
+	findAndAddChild(versionsList, selectItem.value?.id, addObj)
+	selectItem.value = {...addObj}
+	treeKey.value++
+}
+const versionDelete = (versionDetail)=>{
+	if(!selectItem.value.id)return
+	findAndRemoveChild(versionsList, selectItem.value.id)
+	treeKey.value++
 }
 
 let data = reactive({
@@ -50,16 +91,32 @@ const {} = toRefs(data);
 					</div>
 				</div>
 			</div>
-			<div style="display: flex;" class="expandBtnBox">
-				<el-button class="expandBtn" @click="openTree" style="width: 5rem;">+</el-button>
-				<el-button class="expandBtn" @click="openTree" style="width: 5rem;">-</el-button>
+			<div class="expandBtnBox">
+				<div class="btn" @click="openTree(true)">
+					<div class="bg left" :class="{'active':treeState}"></div>
+					<span>{{ $t('VersionTree.linearNodeTree') }}</span>	
+				</div>
+				<div class="btn" @click="openTree(false)">
+					<div class="bg right" :class="{'active':!treeState}"></div>
+					<span>{{ $t('VersionTree.branchingNodeTree') }}</span>	
+				</div>
 			</div>
 			<div class="versionTreeBox">
 				<div class="tree">
-					<Tree :treeState="treeState" v-model:selectItem="selectItem"></Tree>
+					<Tree 
+						ref="treeRef"
+						:versionsList="versionsList"
+						:treeState="treeState" 
+						v-model:selectItem="selectItem"
+						:key="treeKey"
+					></Tree>
 				</div>
 				<div class="detail">
-					<Detail v-model:selectItem="selectItem"></Detail>
+					<Detail 
+						v-model:selectItem="selectItem"
+						@versionRestore="versionRestore"
+						@versionDelete="versionDelete"
+					></Detail>
 				</div>
 			</div>
 		</el-drawer>
@@ -71,7 +128,7 @@ const {} = toRefs(data);
 		--treeItem-width: 5.4rem;
 		--treeItem-height: 5.4rem;
 		--treeItem-raduis: 50%;
-		--treeItem-border: 2px solid #000;
+		--treeItem-border: 2px solid #C1C1C1;
 		--treeItem-background: #ffffff;
 		--treeItem-active-background: #e6e6e6;
 
@@ -100,7 +157,43 @@ const {} = toRefs(data);
 			}
 		}
 		.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;