shalu-agent-workflow/packages/workflow/src/components/elements/node-temp/EndNode.vue

<!--
 * @Author: liuJie
 * @Date: 2026-01-25 15:24:20
 * @LastEditors: liuJie
 * @LastEditTime: 2026-01-25 18:49:09
 * @Describe: 结束节点
-->
<script lang="ts" setup>
import { Position } from '@vue-flow/core'
import CanvasHandle from '../handles/CanvasHandle.vue'
import type { NodeProps } from '@vue-flow/core'
import { Icon } from '@repo/ui'

const props = withDefaults(defineProps<NodeProps>(), {
	selected: true
})
</script>
<template>
	<div
		class="relative min-w-[200px] transition-all duration-300 ease-out hover:-translate-y-0.5"
		:class="{ 'scale-105': selected }"
	>
		<!-- 节点主体 -->
		<div
			class="flex items-center gap-3 px-4 py-3 bg-gradient-to-br from-white to-green-50 border-2 rounded-xl shadow-md transition-all duration-300 relative overflow-hidden"
			:class="
				selected
					? 'border-green-500 shadow-green-200 shadow-lg'
					: 'border-green-300 hover:shadow-lg hover:shadow-green-100'
			"
		>
			<!-- 左侧装饰条 -->
			<div
				class="absolute right-0 top-0 bottom-0 w-1 bg-gradient-to-b from-green-500 to-green-400 rounded-l-xl"
			></div>

			<!-- 图标区域 -->
			<div
				class="relative flex-shrink-0 flex items-center justify-center w-10 h-10 bg-gradient-to-br from-green-500 to-green-400 rounded-lg shadow-md shadow-green-200"
			>
				<!-- 光泽效果 -->
				<div
					class="absolute inset-0 bg-gradient-to-br from-white/30 to-transparent rounded-lg"
				></div>

				<!-- 图标 -->
				<Icon icon="lucide:unplug" color="#ffffff" class="relative z-10" :size="20" />
			</div>

			<!-- 内容区域 -->
			<div class="flex-1 min-w-0">
				<div class="text-sm font-semibold text-gray-800 truncate">
					{{ data.label || '结束' }}
				</div>
				<div v-if="data.description" class="text-xs text-gray-500 mt-0.5 truncate">
					{{ data.description }}
				</div>
			</div>
		</div>

		<!-- 输入连接点 -->
		<CanvasHandle
			handle-id="code-node-input"
			type="target"
			:connections-count="1"
			:position="Position.Left"
		/>
	</div>
</template>
<style lang="less" scoped>
@keyframes pulse {
	0%,
	100% {
		opacity: 1;
	}

	50% {
		opacity: 0.5;
	}
}

@keyframes ping {
	75%,
	100% {
		transform: scale(2);
		opacity: 0;
	}
}
</style>