FiDA_Front/src/views/home/VersionTree.vue

<script setup lang="ts">
import { ref, onMounted, onUnmounted, reactive, toRefs, computed } from "vue";
import VersionTreeIndex from './versionTree/index.vue'
import GenerateSketch from './generateSketch/index.vue'
//const props = defineProps({
//})
//const emit = defineEmits([
//])
let data = reactive({
})
const versionTreeData = ref({
	drawer:false,
	list:computed(()=>{
		return []
	})
})
const generateData = ref({
	list:[
		{
			id:'1',
			type:'waiting',
		},
		{
			id:'2',
			type:'success',
			img:'/img/success.png',
		},
		{
			id:'3',
			type:'success',
			img:'/img/success.png',
		},
			{
			id:'4',
			type:'success',
			img:'/img/success.png',
		},
			{
			id:'5',
			type:'success',
			img:'/img/success.png',
		},
			{
			id:'6',
			type:'success',
			img:'/img/success.png',
		},
			{
			id:'7',
			type:'success',
			img:'/img/success.png',
		},
		{
			id:'8',
			type:'success',
			img:'/img/success.png',
		},
		{
			id:'9',
			type:'success',
			img:'/img/success.png',
		},
	]
})
const generateSketch = ()=>{
	generateData.value.list.push(
		{
			id:'2',
			type:'waiting',
			img:'/img/success.png',
		}
	)
	sketchRestore('2')
}

const sketchRestore = (id)=>{
	generateData.value.list.forEach((item)=>{
		if(item.id == id){
			item.type = 'waiting'
		}
	})
}

onMounted(()=>{
})
onUnmounted(()=>{
})
defineExpose({})
const {} = toRefs(data);
</script>
<template>
	<div class="homeNavBox">
		<div>
			<el-button type="primary" @click="versionTreeData.drawer = true">open Version Tree</el-button>
			<el-button type="primary" @click="generateSketch">Generate</el-button>
			<!-- <div class="test">
				彩色文字
			</div> -->
		</div>
		<VersionTreeIndex v-model:versionTreeData="versionTreeData" />
		<div class="generateSketchBox">
			<GenerateSketch v-model:generateData="generateData"></GenerateSketch>
		</div>
	</div>
</template>
<style lang="less" scoped>
	.homeNavBox{
		width: 100%;
		height: 100%;
		position: relative;
		display: flex;
		.test{
			font-size: 100px;
  font-weight: bold;
  
  /* 关键步骤1：设置背景图片 */
  background: url('https://img.soogif.com/yUgKq3cRdJeNjcMCK0m8s5g8ApeBakgv.gif');
  background-size: cover;
  
  /* 关键步骤2：将背景裁剪到文字形状 */
  -webkit-background-clip: text;
  background-clip: text;
  
  /* 关键步骤3：将文字颜色设为透明，让背景透出来 */
  color: transparent;
  
  /* 确保在Chrome/Safari中生效 */
  -webkit-text-fill-color: transparent;
		}
		> .generateSketchBox{
			height: 100%;
			width: 50%;
			overflow-y: auto;
			&::-webkit-scrollbar {
				display: none;
			}
		}
	}
</style>