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

<template>
    <!-- 异常处理 -->
    <div class="space-y-2 flex items-center justify-between">
        <label class="text-sm font-medium text-gray-700 flex items-center gap-1">
            异常处理
            <Icon icon="lucide:info" :height="14" :width="14" class="text-gray-400" />
        </label>
        <ElSelect v-model="config.errorHandling" @change="handleConfigChange" size="default"
            class="!w-[120px] text-sm bg-white !mt-0">
            <el-option value="none" label="无"></el-option>
            <el-option value="default" label="默认值"></el-option>
            <el-option value="errBranch" label="异常分支"></el-option>
        </ElSelect>
    </div>
    <div class="!mt-0">
        <div v-if="config.errorHandling === 'default'">
            <p class="text-sm text-gray-600 m-0 mb-1">当发生异常时，指定默认输出内容。( result Object )</p>
            <!-- 代码编辑器 -->
            <CodeEditor v-model="config.errorCodeReturn" v-model:language="config.language" :tools="false"
                theme="vs-light" />
        </div>
        <div v-else-if="config.errorHandling === 'errBranch'">
            <p class="text-sm m-0 mb-1 text-gray-600">在画布自定义失败分支逻辑。</p>
            <p class="text-sm text-gray-400 m-0">当节点发生异常时，将自动执行失败分支。失败分支允许您灵活地提供错误消息、报告、修复或跳过操作。</p>
        </div>
    </div>
</template>
<script lang="ts" setup>
import { ref, watch } from "vue"
import { Icon } from '@iconify/vue'
import CodeEditor from '@/components/SetterCommon/Code/CodeEditor.vue'
interface ErrorHandlerConfig {
    errorHandling: string
    errorCodeReturn: string
    language: string
}
interface Props {
    modelValue: ErrorHandlerConfig
}

interface Emits {
    (e: 'update:modelValue', value: ErrorHandlerConfig): void
}
const props = defineProps<Props>()
const emit = defineEmits<Emits>()

watch(
    () => props.modelValue,
    (newVal) => {
        config.value = newVal || {
            errorHandling: 'none',
            errorCodeReturn: '',
            language: 'javascript',
        }
        console.log(config.value.errorCodeReturn)
    }
)
const config = ref<ErrorHandlerConfig>(props.modelValue || {
    errorHandling: 'none',
    errorCodeReturn: '',
    language: 'javascript',
})

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