preview的peport页面

2026-02-23 13:28:43 +08:00
parent d1e70c166c
commit 5c00b54f27
20 changed files with 112 additions and 16 deletions
--- a/src/views/home/agent/components/versionTree/tree/index.vue
+++ b/src/views/home/agent/components/versionTree/tree/index.vue
@@ -0,0 +1,142 @@
+<script setup lang="ts">
+import { ref, onMounted, onUnmounted, reactive, toRefs, watch, nextTick } from "vue";
+import view1Item from './view1Item.vue'
+import view2 from './view2/index.vue'
+
+const props = defineProps({
+	versionsList: {
+		type: Array,
+		default: () => []
+	},
+	treeState:{
+		default:false,
+	},
+	selectItem: {
+		type: Object,
+		default: () => ({})
+	} as any,
+})
+const emit = defineEmits([
+	'update:selectItem',
+	'versionRestore',
+	'versionDelete',
+])
+let data = reactive({
+})
+
+const view1Ref = ref(null)
+
+const isLoad = ref(false)
+const treeStateTime = ref(true)
+
+watch(()=>props.treeState,(newVal,oldVal)=>{
+	treeStateTime.value = false
+	setTimeout(()=>{
+		treeStateTime.value = true
+	},250)
+})
+
+const view2Ref = ref(null)
+const pushView2Item = (item)=>{
+	view2Ref.value.push(item)
+}
+
+const treeList = ref([
+	
+])
+
+function traverseArray(items, callback) {
+	for (let i = 0; i < items.length; i++) {
+		const item = items[i]
+		callback(item, i)
+		if (item.child && Array.isArray(item.child) && item.child.length > 0) {
+			traverseArray(item.child, callback)
+		}
+	}
+}
+const initialize = ()=>{
+	isLoad.value = false
+	treeList.value = []
+	treeList.value.push({id: null,name:'index',})
+	traverseArray(props.versionsList, (item, index) => {
+		treeList.value.push(item)
+	})
+	isLoad.value = true
+	if(!props.selectItem?.id)setSelectItem(treeList.value[treeList.value.length - 1])
+} 
+
+const setSelectItem = (item)=>{
+	if(!item.id)return
+	emit('update:selectItem', {...item})
+}
+
+// 滚动到选中项
+const scrollToActive = ()=>{
+	nextTick(() => {
+		const activeEl = view1Ref.value?.querySelector('.active')
+		console.log(activeEl)
+		activeEl.scrollIntoView({ 
+			behavior: 'smooth', 
+			block: 'nearest' 
+		})
+	})
+}
+
+watch(()=>treeStateTime.value,(newVal,oldVal)=>{
+	if((props.treeState + '') == 'false'){
+		// scrollToActive()
+	}
+})
+
+watch(()=>props.selectItem,(newVal,oldVal)=>{
+	// scrollToActive()
+},{immediate: true})
+
+onMounted(()=>{
+	initialize()
+})
+onUnmounted(()=>{
+})
+defineExpose({})
+const {} = toRefs(data);
+</script>
+<template>
+	<div class="tree" v-show="treeStateTime" v-if="isLoad">
+		<!-- <div v-show="!treeState" class="box view1" ref="view1Ref">
+			<view1Item v-for="item in treeList" :key="item.name" :selectItem="props.selectItem" :item="item" @click="setSelectItem(item)"></view1Item>
+		</div> -->
+		<div v-show="treeState" class="box view2">
+			<view2 
+				ref="view2Ref" 
+				@setSelectItem="setSelectItem"
+				:treeList="treeList"
+				:selectItem="props.selectItem"
+				@versionRestore="()=>emit('versionRestore')"
+				@versionDelete="emit('versionDelete')"
+			></view2>
+		</div>
+	</div>
+</template>
+<style lang="less" scoped>
+	.tree{
+		width: 100%;
+		height: 100%;
+		position: relative;
+		.box{
+			width: 100%;
+			height: 100%;
+			box-sizing: border-box;
+			&.view1{
+				overflow-y: auto;
+				&::-webkit-scrollbar {
+					display: none;
+				}
+			}
+			&.view2{
+				border: 1px solid #D9D9D9;
+				background-color: #f7f7f7;
+				border-radius: var(--border-radius, 1rem);
+			}
+		}
+	}
+</style>