shalu-agent-workflow/apps/web/src/components/VarLabel/index.vue

<script setup lang="ts">
import type { NodeVar } from '@/types/var'
import type { Ref } from 'vue'

import { computed, inject } from 'vue'
import { nodeMap } from '@/nodes'
import { Icon } from '@repo/ui'

const props = defineProps<{
	label: string
	nodeVars?: NodeVar[]
}>()

const injectedNodeVars = inject<Ref<NodeVar[]>>('nodeVars')

const valueInfo = computed(() => {
	// 根据#{xxx.var}解析变量
	// 解析格式 #{env.xxx} 或 #{nodeId.xxx}
	if (!props.label?.startsWith('#{') || !props.label?.endsWith('}')) {
		return {
			type: 'env',
			name: props.label || '',
			value: props.label || ''
		}
	}

	const expr = props.label.slice(2, -1) // 去掉 #{ 和 }
	const [prefix, ...rest] = expr.split('.')
	const varName = rest.join('.')

	if (!prefix || !varName) {
		return {
			type: 'env',
			name: props.label || '',
			value: props.label || ''
		}
	}

	if (prefix === 'env') {
		// 环境变量
		return {
			type: 'env',
			name: 'env',
			value: varName
		}
	} else if (prefix.startsWith('sys')) {
		// 系统变量
		return {
			type: 'sys',
			name: 'sys',
			value: varName
		}
	} else {
		// 节点变量，需要解析节点类型名称
		const availableNodeVars = props.nodeVars ?? injectedNodeVars?.value

		if (availableNodeVars?.length) {
			const node = availableNodeVars.find((item) => item.id === prefix)

			return {
				type: 'node',
				icon: nodeMap?.[node?.type!]?.icon,
				nodeType: node?.type || '',
				nodeName: node?.name || '',
				name: varName,
				value: varName
			}
		} else {
			return {
				type: 'node',
				nodeType: '',
				nodeName: '',
				name: varName,
				value: varName
			}
		}
	}
})
</script>

<template>
	<div class="var-label" :key="valueInfo.type + valueInfo.value">
		<div v-if="valueInfo.type === 'env'" class="flex gap-1 items-center truncate">
			<span class="var-select__item-prefix env text-6px">
				<span>ENV</span>
			</span>
			<span class="text-gray-600">{{ valueInfo.value }}</span>
		</div>

		<div v-else-if="valueInfo.type === 'sys'" class="flex gap-1 items-center truncate">
			<span class="var-select__item-prefix sys text-6px">
				<span>SYS</span>
			</span>
			<span class="text-gray-600">{{ valueInfo.value }}</span>
		</div>

		<div
			v-else
			class="flex gap-1 items-center truncate"
			:title="valueInfo.nodeName + ' / ' + valueInfo.value"
		>
			<span
				class="var-select__item-prefix env text-10px"
				:style="{ background: nodeMap[valueInfo?.nodeType ?? '']?.iconColor ?? '' }"
			>
				<Icon v-if="valueInfo?.icon" :icon="valueInfo?.icon!" :size="18" />
				<span v-else class="text-6px">VAR</span>
			</span>
			{{ valueInfo.nodeName }}
			{{ valueInfo.nodeName ? '/' : '' }}
			<span class="text-gray-600">{{ valueInfo.value }}</span>
			<Icon icon="lucide:circle-alert" color="red" />
		</div>
	</div>
</template>

<style lang="less" scoped>
.var-label {
	--el-tag-font-size: 12px;
	--el-tag-border-radius: 4px;
	--el-tag-bg-color: #f2f2f5;
	background-color: var(--el-tag-bg-color);
	vertical-align: middle;
	height: 24px;
	font-size: var(--el-tag-font-size);
	border-radius: var(--el-tag-border-radius);
	box-sizing: border-box;
	white-space: nowrap;
	border-width: 1px;
	justify-content: center;
	align-items: center;
	padding: 0 4px;
	line-height: 1;
	display: inline-flex;
}

.var-select__item-prefix {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 20px;
	height: 20px;
	border-radius: 6px;
	color: #fff;
	flex-shrink: 0;

	&.env {
		background: #6366f1;
	}

	&.sys {
		background: #f97316;
	}
}

.node-name {
	max-width: 120px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
</style>