提交测试versionTree

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>