shalu-agent-workflow/apps/web/src/components/SetterCommon/Code/OutputVariables.vue

<!--
 * @Author: liuJie
 * @Date: 2026-01-27 14:38:32
 * @LastEditors: liuJie
 * @LastEditTime: 2026-01-27 17:26:25
 * @Describe: file describe
-->
<template>
    <div class="">
        <div class="flex items-center justify-between">
            <label class="text-sm font-medium text-gray-700">
                输出变量
                <span class="text-red-500">*</span>
            </label>
            <ElButton @click="addOutput" class="p-1 hover:bg-gray-100 rounded transition-colors" title="添加输出">
                <Icon icon="lucide:plus" :height="16" :width="16" class="text-gray-600" />
            </ElButton>
        </div>

        <div class="space-y-2">
            <div v-for="(output, index) in outputs" :key="output.id" class="flex items-center gap-2 group">
                <ElInput v-model="output.name" type="text" placeholder="result"
                    class="w-1/3 px-3 py-2 text-sm border border-gray-200 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
                    @input="handleOutputChange" />
                <ElSelect v-model="output.type" @change="handleOutputChange"
                    class="w-1/3 px-3 py-2 text-sm border border-gray-200 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 bg-white min-w-[100px]">
                    <el-option value="String">String</el-option>
                    <el-option value="Number">Number</el-option>
                    <el-option value="Boolean">Boolean</el-option>
                    <el-option value="Object">Object</el-option>
                    <el-option value="Array">Array</el-option>
                </ElSelect>
                <ElButton @click="removeOutput(index)"
                    class="w-1/3 p-1 opacity-0 group-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 v-if="outputs.length === 0" class="text-sm text-gray-400 text-center py-4">
                请添加至少一个输出变量
            </div>
        </div>
    </div>
</template>

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

interface OutputVariable {
    id: string
    name: string
    type: string
}

interface Props {
    modelValue: OutputVariable[]
}

interface Emits {
    (e: 'update:modelValue', value: OutputVariable[]): void
}

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

const outputs = ref<OutputVariable[]>(props.modelValue || [])

watch(
    () => props.modelValue,
    (newVal) => {
        outputs.value = newVal || []
    }
)

const addOutput = () => {
    const newOutput: OutputVariable = {
        id: `output_${Date.now()}`,
        name: 'result',
        type: 'String'
    }
    outputs.value.push(newOutput)
    handleOutputChange()
}

const removeOutput = (index: number) => {
    outputs.value.splice(index, 1)
    handleOutputChange()
}

const handleOutputChange = () => {
    emit('update:modelValue', outputs.value)
}
</script>