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

<!--
 * @Author: liuJie
 * @Date: 2026-01-25 15:18:09
 * @LastEditors: liuJie
 * @LastEditTime: 2026-01-25 19:05:43
 * @Describe: http节点
-->
<script setup lang="ts">
import { Position } from '@vue-flow/core'
import CanvasHandle from '../handles/CanvasHandle.vue'
import { Icon } from '@repo/ui'

interface HttpConfig {
	method?: 'GET' | 'POST' | 'PUT' | 'DELETE' | 'PATCH'
	url?: string
	timeout?: number
}

interface Props {
	data: {
		label?: string
		description?: string
		config?: HttpConfig
		[key: string]: any
	}
	selected?: boolean
}

const props = withDefaults(defineProps<Props>(), {
	selected: false
})

console.log(props.data.id, '1212121')
// 请求方法对应的颜色
const methodColors: Record<string, string> = {
	GET: '#1890ff',
	POST: '#52c41a',
	PUT: '#faad14',
	DELETE: '#ff4d4f',
	PATCH: '#722ed1'
}

const currentMethod = props.data.config?.method || 'GET'
const methodColor = methodColors[currentMethod]
</script>

<template>
	<div
		class="relative min-w-[240px] transition-all duration-300 ease-out hover:-translate-y-0.5"
		:class="{ 'scale-105': selected }"
	>
		<!-- 节点主体 -->
		<div
			class="bg-gradient-to-br from-white to-blue-50 border-2 rounded-xl shadow-md transition-all duration-300 relative overflow-hidden"
			:class="
				selected
					? 'border-blue-500 shadow-blue-200 shadow-lg'
					: 'border-blue-300 hover:shadow-lg hover:shadow-blue-100'
			"
		>
			<!-- 左侧装饰条 -->
			<div
				class="absolute left-0 top-0 bottom-0 w-1 bg-gradient-to-b from-blue-500 to-blue-400 rounded-l-xl"
			></div>

			<!-- 头部 -->
			<div class="flex items-center gap-3 px-4 py-3 border-b border-blue-100">
				<!-- 图标 -->
				<div
					class="relative flex-shrink-0 flex items-center justify-center w-10 h-10 bg-gradient-to-br from-blue-500 to-blue-400 rounded-lg shadow-md shadow-blue-200"
				>
					<div
						class="absolute inset-0 bg-gradient-to-br from-white/30 to-transparent rounded-lg"
					></div>
					<Icon icon="lucide:cloud" 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 || 'HTTP 请求' }}
					</div>
					<div v-if="data.description" class="text-xs text-gray-500 mt-0.5 truncate">
						{{ data.description }}
					</div>
				</div>

				<!-- 请求方法标签 -->
				<div
					class="flex-shrink-0 px-2 py-1 rounded text-xs font-bold text-white"
					:style="{ backgroundColor: methodColor }"
				>
					{{ currentMethod }}
				</div>
			</div>

			<!-- 配置信息 -->
			<div class="px-4 py-3 space-y-2">
				<!-- URL -->
				<div class="flex items-start gap-2">
					<Icon icon="lucide:link" color="#94a3b8" :size="14" class="flex-shrink-0 mt-0.5" />
					<div class="flex-1 min-w-0">
						<div class="text-xs text-gray-500 mb-0.5">请求地址</div>
						<div class="text-xs text-gray-700 font-mono bg-gray-50 px-2 py-1 rounded truncate">
							{{ data.config?.url || '未配置' }}
						</div>
					</div>
				</div>

				<!-- 超时时间 -->
				<div v-if="data.config?.timeout" class="flex items-center gap-2">
					<Icon icon="lucide:clock" color="#94a3b8" :size="14" class="flex-shrink-0" />
					<div class="text-xs text-gray-600">
						<span class="text-gray-500">超时:</span>
						<span class="font-medium ml-1">{{ data.config.timeout }}ms</span>
					</div>
				</div>
			</div>

			<!-- 底部状态栏 -->
			<div
				class="flex items-center justify-between px-4 py-2 bg-blue-50/50 border-t border-blue-100"
			>
				<div class="flex items-center gap-1.5">
					<div class="w-1.5 h-1.5 bg-blue-500 rounded-full"></div>
					<span class="text-xs text-gray-500">就绪</span>
				</div>
				<Icon
					icon="lucide:settings"
					color="#94a3b8"
					:size="14"
					class="cursor-pointer hover:text-blue-500 transition-colors"
				/>
			</div>
		</div>

		<!-- 输入连接点 -->
		<CanvasHandle
			handle-id="http-node-input"
			type="target"
			:connections-count="1"
			:position="Position.Left"
		/>

		<!-- 输出连接点 -->
		<CanvasHandle
			handle-id="http-node-output"
			type="source"
			:connections-count="1"
			:position="Position.Right"
		/>
	</div>
</template>

<style scoped lang="less"></style>