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

<template>
    <div class="space-y-3">
        <!-- 失败时重试 -->
        <div class="space-y-2">
            <div class="flex items-center justify-between beautify">
                <label class="text-sm font-medium text-gray-700">失败时重试</label>
                <el-switch v-model="retryState" @change="toggleRetry" />
            </div>
            <div class="space-y-2" v-if="config.retryEnabled">
                <div class="pl-[10px] flex item-center justify-between">
                    <p class="m-0 text-sm text-gray-600 w-1/2">最大重试次数</p>
                    <el-slider v-model="config.maxRetries" class="w-1/2" show-input :min="0" :max="10" size="default" />
                </div>
                <div class="pl-[10px] flex item-center justify-between">
                    <p class="m-0 text-sm text-gray-600 w-1/2">重试间隔（ms）</p>
                    <el-slider v-model="config.retryInterval" class="w-1/2" :min="100" :max="5000" show-input
                        size="default" />
                </div>
            </div>
        </div>
    </div>
</template>

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

interface TestConfig {
    retryEnabled: boolean
    maxRetries?: number
    retryInterval?: number
}

interface Props {
    modelValue: TestConfig
}

interface Emits {
    (e: 'update:modelValue', value: TestConfig): void
}

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

const retryState = ref(false)
const config = ref<TestConfig>(props.modelValue || {
    retryEnabled: false,
    maxRetries: 0,
    retryInterval: 100
})

watch(
    () => props.modelValue,
    (newVal) => {
        config.value = newVal || {
            retryEnabled: false,
        }
    }
)

const toggleRetry = () => {
    config.value.retryEnabled = !config.value.retryEnabled
    handleConfigChange()
}

const handleConfigChange = () => {
    emit('update:modelValue', config.value)
}
</script>
<style lang="less" scoped>
.beautify {
    padding-bottom: 6px;
    border-bottom: 1px solid #eee;
}
</style>