shalu-agent-workflow/apps/web/src/components/SetterCommon/condition/ConditionBuilder.vue

<template>
	<div class="space-y-2">
		<!-- 条件行 -->
		<div
			v-for="(condition, index) in conditions"
			:key="condition.id"
			class="flex items-center"
		>
			<!-- 左侧变量选择 -->
			<div class="relative w-3/4">
					<ElSelect placeholder="选择变量" v-model="condition.leftValue">
						<el-option></el-option>
					</ElSelect>
<!--				<ElButton-->
<!--					@click="openVariablePicker(index, 'left')"-->
<!--					class="w-full px-3 py-2 text-sm text-left border border-gray-200 rounded-lg bg-white flex items-center justify-between group"-->
<!--				>-->
<!--          <span v-if="condition.leftValue" class="flex items-center gap-1">-->
<!--            <Icon icon="lucide:at-sign" :height="14" :width="14" class="text-red-500" />-->
<!--            <span class="text-red-600">{{ condition.leftValue }}</span>-->
<!--          </span>-->
<!--					<span v-else class="text-gray-400">选择变量</span>-->
<!--					<Icon icon="lucide:chevron-down" :height="14" :width="14" class="text-gray-400" />-->
<!--				</ElButton>-->
			</div>

			<!-- 运算符选择 -->
			<ElSelect
				v-model="condition.operator"
				@change="handleConditionChange"
				class="w-[60px] px-3 py-2 text-sm border border-gray-200 rounded-lg  bg-white ">
				<el-option value="equals">等于</el-option>
				<el-option value="notEquals">不等于</el-option>
				<el-option value="contains">包含</el-option>
				<el-option value="notContains">不包含</el-option>
				<el-option value="greaterThan">大于</el-option>
				<el-option value="lessThan">小于</el-option>
				<el-option value="greaterOrEqual">大于等于</el-option>
				<el-option value="lessOrEqual">小于等于</el-option>
			</ElSelect>

			<!-- 右侧值输入 -->
			<div class="relative w-3/4">
				<ElInput
					v-model="condition.rightValue"
					type="text"
					placeholder="输入值"
					@input="handleConditionChange"
					class="w-full px-3 py-2 text-sm border border-gray-200 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"
				/>
			</div>

			<!-- 删除按钮 -->
			<ElButton
				v-if="conditions.length > 1"
				@click="removeCondition(index)"
				class="p-2 w-1/4 opacity-0 hover:opacity-100 hover:bg-red-50 rounded transition-all"
				title="删除条件">
					<Icon icon="lucide:trash-2" :height="16" :width="16" class="text-red-500" />
			</ElButton>
		</div>

		<!-- AND 连接符 -->
<!--		<div v-if="showAndButton" class="flex items-center gap-2 pl-3">-->
<!--			<div class="flex items-center gap-2 px-3 py-1.5 bg-blue-50 text-blue-600 text-xs font-medium rounded">-->
<!--				<Icon icon="lucide:link" :height="12" :width="12" />-->
<!--				AND-->
<!--			</div>-->
<!--		</div>-->

		<!-- 添加条件按钮 -->
		<div class="text-center">
			<ElButton
				@click="addCondition"
				class="flex items-center gap-2 px-3 py-2 text-sm text-blue-600 hover:bg-blue-50 rounded-lg transition-colors"
			>
				<Icon icon="lucide:plus" :height="16" :width="16" />
				添加条件
			</ElButton>
		</div>

	</div>
</template>

<script setup lang="ts">
import { ref, computed, watch } from 'vue'
import { Icon } from '@iconify/vue'

interface Condition {
	id: string
	leftValue: string
	operator: string
	rightValue: string
}

interface Props {
	modelValue: Condition[]
}

interface Emits {
	(e: 'update:modelValue', value: Condition[]): void
	(e: 'openVariablePicker', index: number, side: 'left' | 'right'): void
}

const props = defineProps<Props>()
const emit = defineEmits<Emits>()

const conditions = ref<Condition[]>(props.modelValue || [
	{
		id: `condition_${Date.now()}`,
		leftValue: '',
		operator: 'equals',
		rightValue: ''
	}
])

const showAndButton = computed(() => conditions.value.length > 1)

watch(
	() => props.modelValue,
	(newVal) => {
		if (newVal && newVal.length > 0) {
			conditions.value = newVal
		}
	},
	{ deep: true }
)

const addCondition = () => {
	conditions.value.push({
		id: `condition_${Date.now()}`,
		leftValue: '',
		operator: 'equals',
		rightValue: ''
	})
	handleConditionChange()
}

const removeCondition = (index: number) => {
	conditions.value.splice(index, 1)
	handleConditionChange()
}

const handleConditionChange = () => {
	emit('update:modelValue', conditions.value)
}

const openVariablePicker = (index: number, side: 'left' | 'right') => {
	emit('openVariablePicker', index, side)
}
</script>