shalu-agent-workflow/packages/workflow/src/components/elements/handles/HandlePort.vue

<template>
	<div :class="[position, type]" class="renderType flex items-center">
		<div :class="type" class="handlePort transition-transform duration-150 relative"></div>
		<div v-if="label" class="w-max ml-8px text-12px text-#666">{{ label }}</div>
	</div>
</template>

<script setup lang="ts">
defineProps<{
	position: string
	type: 'source' | 'target'
	label?: string
}>()
</script>

<style lang="less" scoped>
.handlePort {
	width: 12px;
	height: 12px;
	background-color: #fff;
	border: 1px solid #989898;
	border-radius: 50%;
	cursor: default;
	flex-shrink: 0;
}

.source:hover {
	transform: scale(1.2);
	border-width: 1.2px;
	cursor: crosshair;
}

.renderType {
	&.top {
		margin-bottom: -16px;
		transform: translate(0%, -50%);
	}

	&.right {
		margin-left: -16px;
		transform: translate(50%, 0%);
	}

	&.left {
		margin-right: -16px;
		transform: translate(-50%, 0%);
	}

	&.bottom {
		margin-top: -16px;
		transform: translate(0%, 50%);
	}
}
</style>