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 gap-1">
            <!-- 左侧变量选择 -->
            <div class="relative w-3/4">
                <ElSelect placeholder="选择变量" v-model="condition.leftValue">
                    <ElOption v-for="variable in availableVariables" :key="variable.id" :value="variable.name"
                        :label="variable.name" />
                </ElSelect>
            </div>

            <!-- 运算符选择 -->
            <ElSelect v-model="condition.operator" @change="handleConditionChange"
                class="w-1/4 text-sm border border-gray-200 rounded-lg  bg-white ">
                <ElOption v-for="li in operators" :key="li.value" :value="li.value" :label="li.label" />
            </ElSelect>

            <!-- 右侧值输入 -->
            <div class="relative w-3/4">
                <ElInput v-model="condition.rightValue" type="text" placeholder="输入值" @input="handleConditionChange"
                    class="w-full text-sm border border-gray-200 rounded-lg" />
            </div>

            <!-- 删除按钮 -->
            <ElButton v-if="conditions.length > 1" @click="removeCondition(index)"
                class="p-2 w-1/4 opacity-50 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>

        <!-- 添加条件按钮 -->
        <div class="text-right" v-if="conditions[0]?.id !== 'else'">
            <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:git-branch-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
}
interface Variable {
    id: string
    name: string
    type: string
    source: string
}
// 可用变量列表
const availableVariables: Variable[] = [
    { id: 'var_1', name: 'sys.user_id', type: 'String', source: 'HTTP 请求' },
    { id: 'var_2', name: 'sys.app_id', type: 'Number', source: 'HTTP 请求' },
    { id: 'var_3', name: 'result', type: 'String', source: '代码执行' },
    { id: 'var_4', name: 'output_format', type: 'String', source: 'SQL查询' },
    { id: 'var_5', name: 'user_name', type: 'String', source: 'HTTP 请求' },
    { id: 'var_6', name: 'user_email', type: 'String', source: 'HTTP 请求' },
]

interface OperatorsType {
    value: string
    label: string
}
// 运算符列表
const operators: OperatorsType[] = [
    { value: 'equals', label: '等于' },
    { value: 'notEquals', label: '不等于' },
    { value: 'contains', label: '包含' },
    { value: 'notContains', label: '不包含' },
    { value: 'greaterThan', label: '大于' },
    { value: 'lessThan', label: '小于' },
    { value: 'greaterOrEqual', label: '大于等于' },
    { value: 'lessOrEqual', label: '小于等于' }
]

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



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


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: '',
        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>