提交测试versionTree

package-lock.json

@@ -9,6 +9,7 @@
       "version": "0.0.0",
       "hasInstallScript": true,
       "dependencies": {
+        "@vue-flow/core": "^1.48.2",
         "axios": "^1.3.6",
         "crypto-js": "^4.2.0",
         "element-plus": "^2.13.2",
@@ -1023,6 +1024,22 @@
         "typescript": "*"
       }
     },
+    "node_modules/@vue-flow/core": {
+      "version": "1.48.2",
+      "resolved": "https://registry.npmmirror.com/@vue-flow/core/-/core-1.48.2.tgz",
+      "integrity": "sha512-raxhgKWE+G/mcEvXJjGFUDYW9rAI3GOtiHR3ZkNpwBWuIaCC1EYiBmKGwJOoNzVFgwO7COgErnK7i08i287AFA==",
+      "license": "MIT",
+      "dependencies": {
+        "@vueuse/core": "^10.5.0",
+        "d3-drag": "^3.0.0",
+        "d3-interpolate": "^3.0.1",
+        "d3-selection": "^3.0.0",
+        "d3-zoom": "^3.0.0"
+      },
+      "peerDependencies": {
+        "vue": "^3.3.0"
+      }
+    },
     "node_modules/@vue-macros/common": {
       "version": "3.1.1",
       "resolved": "https://registry.npmjs.org/@vue-macros/common/-/common-3.1.1.tgz",
@@ -2233,6 +2250,111 @@
       "integrity": "sha512-z1HGKcYy2xA8AGQfwrn0PAy+PB7X/GSj3UVJW9qKyn43xWa+gl5nXmU4qqLMRzWVLFC8KusUX8T/0kCiOYpAIQ==",
       "license": "MIT"
     },
+    "node_modules/d3-color": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmmirror.com/d3-color/-/d3-color-3.1.0.tgz",
+      "integrity": "sha512-zg/chbXyeBtMQ1LbD/WSoW2DpC3I0mpmPdW+ynRTj/x2DAWYrIY7qeZIHidozwV24m4iavr15lNwIwLxRmOxhA==",
+      "license": "ISC",
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-dispatch": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmmirror.com/d3-dispatch/-/d3-dispatch-3.0.1.tgz",
+      "integrity": "sha512-rzUyPU/S7rwUflMyLc1ETDeBj0NRuHKKAcvukozwhshr6g6c5d8zh4c2gQjY2bZ0dXeGLWc1PF174P2tVvKhfg==",
+      "license": "ISC",
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-drag": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmmirror.com/d3-drag/-/d3-drag-3.0.0.tgz",
+      "integrity": "sha512-pWbUJLdETVA8lQNJecMxoXfH6x+mO2UQo8rSmZ+QqxcbyA3hfeprFgIT//HW2nlHChWeIIMwS2Fq+gEARkhTkg==",
+      "license": "ISC",
+      "dependencies": {
+        "d3-dispatch": "1 - 3",
+        "d3-selection": "3"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-ease": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmmirror.com/d3-ease/-/d3-ease-3.0.1.tgz",
+      "integrity": "sha512-wR/XK3D3XcLIZwpbvQwQ5fK+8Ykds1ip7A2Txe0yxncXSdq1L9skcG7blcedkOX+ZcgxGAmLX1FrRGbADwzi0w==",
+      "license": "BSD-3-Clause",
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-interpolate": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmmirror.com/d3-interpolate/-/d3-interpolate-3.0.1.tgz",
+      "integrity": "sha512-3bYs1rOD33uo8aqJfKP3JWPAibgw8Zm2+L9vBKEHJ2Rg+viTR7o5Mmv5mZcieN+FRYaAOWX5SJATX6k1PWz72g==",
+      "license": "ISC",
+      "dependencies": {
+        "d3-color": "1 - 3"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-selection": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmmirror.com/d3-selection/-/d3-selection-3.0.0.tgz",
+      "integrity": "sha512-fmTRWbNMmsmWq6xJV8D19U/gw/bwrHfNXxrIN+HfZgnzqTHp9jOmKMhsTUjXOJnZOdZY9Q28y4yebKzqDKlxlQ==",
+      "license": "ISC",
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-timer": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmmirror.com/d3-timer/-/d3-timer-3.0.1.tgz",
+      "integrity": "sha512-ndfJ/JxxMd3nw31uyKoY2naivF+r29V+Lc0svZxe1JvvIRmi8hUsrMvdOwgS1o6uBHmiz91geQ0ylPP0aj1VUA==",
+      "license": "ISC",
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-transition": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmmirror.com/d3-transition/-/d3-transition-3.0.1.tgz",
+      "integrity": "sha512-ApKvfjsSR6tg06xrL434C0WydLr7JewBB3V+/39RMHsaXTOG0zmt/OAXeng5M5LBm0ojmxJrpomQVZ1aPvBL4w==",
+      "license": "ISC",
+      "dependencies": {
+        "d3-color": "1 - 3",
+        "d3-dispatch": "1 - 3",
+        "d3-ease": "1 - 3",
+        "d3-interpolate": "1 - 3",
+        "d3-timer": "1 - 3"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "peerDependencies": {
+        "d3-selection": "2 - 3"
+      }
+    },
+    "node_modules/d3-zoom": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmmirror.com/d3-zoom/-/d3-zoom-3.0.0.tgz",
+      "integrity": "sha512-b8AmV3kfQaqWAuacbPuNbL6vahnOJflOhexLzMMNLga62+/nh0JzvJ0aO/5a5MVgUFGS7Hu1P9P03o3fJkDCyw==",
+      "license": "ISC",
+      "dependencies": {
+        "d3-dispatch": "1 - 3",
+        "d3-drag": "2 - 3",
+        "d3-interpolate": "1 - 3",
+        "d3-selection": "2 - 3",
+        "d3-transition": "2 - 3"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
     "node_modules/data-view-buffer": {
       "version": "1.0.2",
       "resolved": "https://registry.npmmirror.com/data-view-buffer/-/data-view-buffer-1.0.2.tgz",
@@ -9203,6 +9325,18 @@
         "@volar/vue-language-core": "1.4.4"
       }
     },
+    "@vue-flow/core": {
+      "version": "1.48.2",
+      "resolved": "https://registry.npmmirror.com/@vue-flow/core/-/core-1.48.2.tgz",
+      "integrity": "sha512-raxhgKWE+G/mcEvXJjGFUDYW9rAI3GOtiHR3ZkNpwBWuIaCC1EYiBmKGwJOoNzVFgwO7COgErnK7i08i287AFA==",
+      "requires": {
+        "@vueuse/core": "^10.5.0",
+        "d3-drag": "^3.0.0",
+        "d3-interpolate": "^3.0.1",
+        "d3-selection": "^3.0.0",
+        "d3-zoom": "^3.0.0"
+      }
+    },
     "@vue-macros/common": {
       "version": "3.1.1",
       "resolved": "https://registry.npmjs.org/@vue-macros/common/-/common-3.1.1.tgz",
@@ -10078,6 +10212,72 @@
       "resolved": "https://registry.npmmirror.com/csstype/-/csstype-3.2.3.tgz",
       "integrity": "sha512-z1HGKcYy2xA8AGQfwrn0PAy+PB7X/GSj3UVJW9qKyn43xWa+gl5nXmU4qqLMRzWVLFC8KusUX8T/0kCiOYpAIQ=="
     },
+    "d3-color": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmmirror.com/d3-color/-/d3-color-3.1.0.tgz",
+      "integrity": "sha512-zg/chbXyeBtMQ1LbD/WSoW2DpC3I0mpmPdW+ynRTj/x2DAWYrIY7qeZIHidozwV24m4iavr15lNwIwLxRmOxhA=="
+    },
+    "d3-dispatch": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmmirror.com/d3-dispatch/-/d3-dispatch-3.0.1.tgz",
+      "integrity": "sha512-rzUyPU/S7rwUflMyLc1ETDeBj0NRuHKKAcvukozwhshr6g6c5d8zh4c2gQjY2bZ0dXeGLWc1PF174P2tVvKhfg=="
+    },
+    "d3-drag": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmmirror.com/d3-drag/-/d3-drag-3.0.0.tgz",
+      "integrity": "sha512-pWbUJLdETVA8lQNJecMxoXfH6x+mO2UQo8rSmZ+QqxcbyA3hfeprFgIT//HW2nlHChWeIIMwS2Fq+gEARkhTkg==",
+      "requires": {
+        "d3-dispatch": "1 - 3",
+        "d3-selection": "3"
+      }
+    },
+    "d3-ease": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmmirror.com/d3-ease/-/d3-ease-3.0.1.tgz",
+      "integrity": "sha512-wR/XK3D3XcLIZwpbvQwQ5fK+8Ykds1ip7A2Txe0yxncXSdq1L9skcG7blcedkOX+ZcgxGAmLX1FrRGbADwzi0w=="
+    },
+    "d3-interpolate": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmmirror.com/d3-interpolate/-/d3-interpolate-3.0.1.tgz",
+      "integrity": "sha512-3bYs1rOD33uo8aqJfKP3JWPAibgw8Zm2+L9vBKEHJ2Rg+viTR7o5Mmv5mZcieN+FRYaAOWX5SJATX6k1PWz72g==",
+      "requires": {
+        "d3-color": "1 - 3"
+      }
+    },
+    "d3-selection": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmmirror.com/d3-selection/-/d3-selection-3.0.0.tgz",
+      "integrity": "sha512-fmTRWbNMmsmWq6xJV8D19U/gw/bwrHfNXxrIN+HfZgnzqTHp9jOmKMhsTUjXOJnZOdZY9Q28y4yebKzqDKlxlQ=="
+    },
+    "d3-timer": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmmirror.com/d3-timer/-/d3-timer-3.0.1.tgz",
+      "integrity": "sha512-ndfJ/JxxMd3nw31uyKoY2naivF+r29V+Lc0svZxe1JvvIRmi8hUsrMvdOwgS1o6uBHmiz91geQ0ylPP0aj1VUA=="
+    },
+    "d3-transition": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmmirror.com/d3-transition/-/d3-transition-3.0.1.tgz",
+      "integrity": "sha512-ApKvfjsSR6tg06xrL434C0WydLr7JewBB3V+/39RMHsaXTOG0zmt/OAXeng5M5LBm0ojmxJrpomQVZ1aPvBL4w==",
+      "requires": {
+        "d3-color": "1 - 3",
+        "d3-dispatch": "1 - 3",
+        "d3-ease": "1 - 3",
+        "d3-interpolate": "1 - 3",
+        "d3-timer": "1 - 3"
+      }
+    },
+    "d3-zoom": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmmirror.com/d3-zoom/-/d3-zoom-3.0.0.tgz",
+      "integrity": "sha512-b8AmV3kfQaqWAuacbPuNbL6vahnOJflOhexLzMMNLga62+/nh0JzvJ0aO/5a5MVgUFGS7Hu1P9P03o3fJkDCyw==",
+      "requires": {
+        "d3-dispatch": "1 - 3",
+        "d3-drag": "2 - 3",
+        "d3-interpolate": "1 - 3",
+        "d3-selection": "2 - 3",
+        "d3-transition": "2 - 3"
+      }
+    },
     "data-view-buffer": {
       "version": "1.0.2",
       "resolved": "https://registry.npmmirror.com/data-view-buffer/-/data-view-buffer-1.0.2.tgz",

package.json

@@ -13,6 +13,7 @@
     "postinstall": "husky install"
   },
   "dependencies": {
+    "@vue-flow/core": "^1.48.2",
     "axios": "^1.3.6",
     "crypto-js": "^4.2.0",
     "element-plus": "^2.13.2",

src/App.vue

@@ -13,6 +13,7 @@
 </script>
 
 <style lang="less">
+
 	#app {
 		font-size: 1.6rem;
 	}

src/assets/icons/close.svg

@@ -0,0 +1,3 @@
+<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M0.292893 0.292894C0.683418 -0.097631 1.31658 -0.0976307 1.70711 0.292894L6.65685 5.24264L11.6066 0.292894C11.9971 -0.0976317 12.6303 -0.0976307 13.0208 0.292894C13.4113 0.683418 13.4113 1.31658 13.0208 1.70711L8.07107 6.65685L13.0208 11.6066C13.4113 11.9971 13.4113 12.6303 13.0208 13.0208C12.6303 13.4113 11.9971 13.4113 11.6066 13.0208L6.65685 8.07107L1.70711 13.0208C1.31658 13.4113 0.683418 13.4113 0.292893 13.0208C-0.0976311 12.6303 -0.0976311 11.9971 0.292893 11.6066L5.24264 6.65685L0.292893 1.70711C-0.0976311 1.31658 -0.0976311 0.683418 0.292893 0.292894Z" fill="#0D0D0D"/>
+</svg>

src/router/index.ts

@@ -33,6 +33,11 @@ const router = createRouter({
 					path: '',
 					name: 'test',
 					component: () => import('../views/home/test.vue')
+				},
+				{
+					path: '/home/versionTree',
+					name: 'versionTree',
+					component: () => import('../views/home/versionTree.vue')
 				}
 			]
 		},

src/views/home/VersionTree.vue

@@ -0,0 +1,35 @@
+<script setup lang="ts">
+import { ref, onMounted, onUnmounted, reactive, toRefs, computed } from "vue";
+import VersionTreeIndex from './versionTree/index.vue'
+//const props = defineProps({
+//})
+//const emit = defineEmits([
+//])
+let data = reactive({
+})
+const versionTreeData = ref({
+	drawer:false,
+	list:computed(()=>{
+		return []
+	})
+})
+onMounted(()=>{
+})
+onUnmounted(()=>{
+})
+defineExpose({})
+const {} = toRefs(data);
+</script>
+<template>
+	<div class="homeNavBox">
+		<el-button type="primary" @click="versionTreeData.drawer = true">open Version Tree</el-button>
+		<VersionTreeIndex v-model:versionTreeData="versionTreeData" />
+	</div>
+</template>
+<style lang="less" scoped>
+	.homeNavBox{
+		width: 100%;
+		height: 100%;
+		position: relative;
+	}
+</style>

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>

src/views/home/versionTree/tree/index.vue

@@ -0,0 +1,71 @@
+<script setup lang="ts">
+import { ref, onMounted, onUnmounted, reactive, toRefs, watch } from "vue";
+import view1Item from './view1Item.vue'
+import view2 from './view2/index.vue'
+
+const props = defineProps({
+	treeState:{
+		default:false,
+	},
+})
+//const emit = defineEmits([
+//])
+let data = reactive({
+})
+
+const treeStateTime = ref(true)
+
+watch(()=>props.treeState,(newVal,oldVal)=>{
+	treeStateTime.value = false
+	setTimeout(()=>{
+		treeStateTime.value = true
+	},250)
+})
+
+const view1List = ref([
+	{
+		name:'P1',
+	},{
+		name:'V1',
+	},{
+		name:'V1-1',
+	}
+])
+onMounted(()=>{
+})
+onUnmounted(()=>{
+})
+defineExpose({})
+const {} = toRefs(data);
+</script>
+<template>
+	<div class="tree" v-show="treeStateTime">
+		<div v-if="!treeState" class="box view1">
+			<view1Item v-for="item in view1List" :key="item.name" :item="item"></view1Item>
+		</div>
+		<div v-else class="box view2">
+			<view2 :list="view1List"></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;
+				
+			}
+			&.view2{
+				border: 1px solid #D9D9D9;
+				background-color: #f7f7f7;
+				border-radius: var(--border-radius, 1rem);
+			}
+		}
+	}
+</style>

src/views/home/versionTree/tree/view1Item.vue

@@ -0,0 +1,70 @@
+<script setup lang="ts">
+import { ref, onMounted, onUnmounted, reactive, toRefs } from "vue";
+const props = defineProps({
+	item: {
+		type: Object,
+		default: () => ({})
+	}
+})
+//const emit = defineEmits([
+//])
+let data = reactive({
+})
+onMounted(()=>{
+})
+onUnmounted(()=>{
+})
+defineExpose({})
+const {} = toRefs(data);
+</script>
+<template>
+	<div class="btn">
+		{{ item.name }}
+	</div>
+</template>
+<style lang="less" scoped>
+	.btn{
+		font-size: 1.2rem;
+		width: 5rem;
+		height: 5rem;
+		font-weight: 500;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		border-radius: 50%;
+		border: 2px solid #000;
+		color: #000;
+		cursor: pointer;
+		margin-bottom: 4rem;
+		position: relative;
+		&::after{
+			content: '';
+			cursor: auto;	
+			position: absolute;
+			top: calc(100% + 2px);
+			height: 4rem;
+			left: 50%;
+			width: 1.8px;
+			transform: translateX(-50%);
+			background: 
+				repeating-linear-gradient(0deg, #333 0, #333 5px, transparent 5px, transparent 10px),
+				linear-gradient(white, white);
+			background-clip: padding-box, border-box;
+			background-origin: border-box;
+		}
+		&.active{
+			background-color: #e6e6e6;
+		}
+	}
+	.btn:nth-child(1){
+		background-color: #7A7A7A;
+		color: #FFF;
+		border: 2px solid #7A7A7A;
+	}
+	.btn:last-child{
+		margin-bottom: 0;
+		&::after{
+			display: none;
+		}
+	}
+</style>

src/views/home/versionTree/tree/view2/index.vue

@@ -0,0 +1,63 @@
+<script setup lang="ts">
+import { ref, onMounted, onUnmounted, reactive, toRefs } from "vue";
+import type { Node, Edge } from '@vue-flow/core'  
+import { VueFlow } from '@vue-flow/core'
+import SpecialEdge from './speciaiEdge.vue'
+import SpecialNode from './speciaiNode.vue'
+const props = defineProps({
+	item: {
+		type: Object,
+		default: () => ({})
+	}
+})
+//const emit = defineEmits([
+//])
+let data = reactive({
+})
+
+const nodes = ref<Node[]>([
+  { id: '1', type: 'input', label: 'Node 1', position: { x: 250, y: 0 } },
+  { id: '2', type: 'output', label: 'Node 2', position: { x: 100, y: 100 } },
+  { id: '3', type: 'custom', label: 'Node 3', position: { x: 400, y: 100 } },
+  { id: '4', type: 'custom', label: 'Node 3', position: { x: 400, y: 200 } },
+])
+
+const edges = ref<Edge[]>([
+  { id: 'e1-2', source: '1', target: '2', type: 'custom' },
+  { id: 'e1-3', source: '1', target: '3', animated: true },
+  { id: 'e1-4', source: '1', target: '4', },
+])
+
+
+onMounted(()=>{
+})
+onUnmounted(()=>{
+})
+defineExpose({})
+const {} = toRefs(data);
+</script>
+<template>
+	<div class="view2">
+		<VueFlow :nodes="nodes" :edges="edges">
+			<!-- bind your custom node type to a c omponent by using slots, slot names are always `node-<type>` -->
+			<template #node-custom="nodeProps">
+				<SpecialNode v-bind="nodeProps" />
+			</template>
+
+			<!-- <template #edge-custom="edgeProps">
+				<SpecialEdge v-bind="edgeProps" />
+			</template> -->
+		</VueFlow>
+	</div>
+</template>
+<style lang="less">
+@import "@vue-flow/core/dist/style.css";
+@import "@vue-flow/core/dist/theme-default.css";
+</style>
+<style lang="less" scoped>
+	.view2{
+		width: 100%;
+		height: 100%;
+		overflow: hidden;
+	}
+</style>

src/views/home/versionTree/tree/view2/speciaiEdge.vue

@@ -0,0 +1,45 @@
+<script lang="ts" setup>
+import { computed } from 'vue'
+import type { EdgeProps } from '@vue-flow/core'
+import { BaseEdge, EdgeLabelRenderer, getBezierPath, useVueFlow } from '@vue-flow/core'
+
+const props = defineProps<EdgeProps>()
+
+const { removeEdges } = useVueFlow()
+
+const path = computed(() => getBezierPath(props))
+</script>
+
+<script lang="ts">
+export default {
+  inheritAttrs: false,
+}
+</script>
+
+<template>
+  <BaseEdge :path="path[0]" />
+
+  <EdgeLabelRenderer>
+    <div
+      :style="{
+        pointerEvents: 'all',
+        position: 'absolute',
+        transform: `translate(-50%, -50%) translate(${path[1]}px,${path[2]}px)`,
+      }"
+      class="nodrag nopan"
+    >
+      <button class="edgebutton" @click="removeEdges(id)">×</button>
+    </div>
+  </EdgeLabelRenderer>
+</template>
+
+<style>
+.edgebutton {
+  border-radius: 999px;
+  cursor: pointer;
+}
+
+.edgebutton:hover {
+  box-shadow: 0 0 0 2px pink, 0 0 0 4px #f05f75;
+}
+</style>

src/views/home/versionTree/tree/view2/speciaiNode.vue

@@ -0,0 +1,55 @@
+<script lang="ts" setup>
+import { Handle, Position } from '@vue-flow/core'
+import { ref } from 'vue'
+
+const counter = ref(0)
+</script>
+
+<template>
+  <div class="custom-node">
+    <Handle type="target" :position="Position.Top" />
+    <button class="increment nodrag" @click="counter++">Increment</button>
+
+    <div v-if="counter > 0" class="counter">
+      <div class="count" v-for="count of counter" :key="`count-${count}`">{{ count }}</div>
+    </div>
+  </div>
+</template>
+
+<style>
+.custom-node {
+  min-width: 100px;
+  gap: 4px;
+  padding: 8px;
+  background: white;
+  border: 1px solid black;
+  border-radius: 4px;
+}
+
+.increment {
+  border-radius: 4px;
+  background: #42b983;
+  font-size: 10px;
+  color: #fff;
+  cursor: pointer;
+  border: none;
+}
+
+.increment:hover {
+  box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
+}
+
+.counter {
+  margin-top: 8px;
+  display: grid;
+  grid-template-columns: repeat(4, minmax(0, 1fr));
+  gap: 4px;
+}
+
+.count {
+  font-size: 6px;
+  color: #ff0072;
+  border: 1px solid rgba(0, 0, 0, 0.3);
+  border-radius: 8px;
+}
+</style>