sl-ai-ui/src/views/modleServiceProvide/components/ApiInfo.vue

<template>
    <el-form
            :model="form"
            label-position="top"
            label-width="120px"
            :rules="rules"
            ref="formRef"
    >

        <!-- 默认 API 地址 -->
        <el-row :gutter="20">
            <el-col :span="24">
                <el-form-item prop="defaultApiUrl" label="默认API地址">
                    <template #label>
                        <span class="el-form-item__label">默认API地址</span>
                    </template>
                    <el-input
                            v-model="form.defaultApiUrl"
                            placeholder="请输入默认API地址，如：https://api.openai.com/v1"
                    />
                    <div class="input-tips">用于连接服务器的API基础地址</div>
                </el-form-item>
            </el-col>
        </el-row>

        <!-- 认证方式 -->
        <el-row :gutter="20">
            <el-col :span="24">
                <el-form-item prop="authType" label="认证方式">
                    <template #label>
                        <span class="el-form-item__label">认证方式</span>
                    </template>
                    <el-select v-model="form.authType" placeholder="请选择认证方式" style="width: 100%">
                        <el-option
                                v-for="item in authTypeOption"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value"
                        />
                    </el-select>
                </el-form-item>
            </el-col>
        </el-row>

        <!-- 请求头Key -->
        <el-row :gutter="20">
            <el-col :span="24">
                <el-form-item prop="requestHeaderKey" label="请求头Key">
                    <template #label>
                        <span class="el-form-item__label">请求头Key</span>
                    </template>
                    <el-input v-model="form.requestHeaderKey" placeholder="请输入请求头Key，如：Authorization,X-API" />
                    <div class="input-tips">例如：Authorization, X-API 等</div>
                </el-form-item>
            </el-col>
        </el-row>

        <!-- 请求头Value前缀 -->
        <el-row :gutter="20">
            <el-col :span="24">
                <el-form-item prop="requestHeaderValuePrefix" label="请求头Value前缀">
                    <template #label>
                        <span class="el-form-item__label">请求头Value前缀</span>
                    </template>
                    <el-input v-model="form.requestHeaderValuePrefix" placeholder="请输入请求头Value前缀，如：Bearer,basic" />
                    <div class="input-tips">例如：Bearer, basic 等与API key拼接</div>
                </el-form-item>
            </el-col>
        </el-row>

        <!-- 请求超时时间 -->
        <el-row :gutter="20">
            <el-col :span="24">
                <el-form-item label="请求超时时间（毫秒）" prop="requestTimeout">
                    <el-input
                            v-model.number="form.requestTimeout"
                            placeholder="请输入请求超时时间（秒）"
                            style="width: 100%"
                    />
                </el-form-item>
            </el-col>
        </el-row>

        <!-- 重试次数 -->
        <el-row :gutter="20">
            <el-col :span="24">
                <el-form-item label="重试次数" prop="retryCount">
                    <template #label>
                        <span class="el-form-item__label">重试次数</span>
                    </template>
                    <el-input
                            v-model.number="form.retryCount"
                            placeholder="请输入重试次数"
                            style="width: 100%"
                    />
                </el-form-item>
            </el-col>
        </el-row>

        <!-- 拓展配置 -->
        <el-row :gutter="20">
            <el-col :span="24">
                <el-form-item label="拓展配置" prop="extraConfig">
                    <el-input
                            v-model="form.extraConfig"
                            type="textarea"
                            :rows="4"
                            placeholder="请输入拓展配置，例如：{ timeout: 5000, proxy: 'xxx' }"
                    />
                </el-form-item>
            </el-col>
        </el-row>



    </el-form>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { ElMessage } from 'element-plus'
const dialogVisible = ref(true)
// ================== 表单数据类型定义 ==================
interface Form {
    defaultApiUrl: string
    authType: string
    requestHeaderKey: string
    requestHeaderValuePrefix: string
    requestTimeout: number | null
    retryCount: number | null
    extraConfig: string
}

// ================== 表单数据初始化 ==================
const form = ref<Form>({
    defaultApiUrl: '',
    authType: 'API_KEY',
    requestHeaderKey: 'Authorization',
    requestHeaderValuePrefix: 'Bearer',
    requestTimeout: 6,
    retryCount: 3,
    extraConfig: ''
})

// ================== 认证方式选项 ==================
const authTypeOption = [
    { label: 'API Key', value: 'API_KEY' },
    { label: 'OAuth2', value: 'OAUTH2' },
    { label: 'None', value: 'NONE' }
]

// ================== 表单验证规则 ==================
const rules = {
    defaultApiUrl: [
        { required: true, message: '请输入默认 API 地址', trigger: 'blur' },
        { type: 'url', message: '请输入合法的 URL 地址', trigger: 'blur' }
    ],
    authType: [
        { required: true, message: '请选择认证方式', trigger: 'change' }
    ],
    requestHeaderKey: [
        { required: true, message: '请输入请求头 Key', trigger: 'blur' }
    ],
    requestHeaderValuePrefix: [
        { required: true, message: '请输入请求头 Value 前缀', trigger: 'blur' }
    ],
    retryCount: [
        { required: true, message: '请输入重试次数', trigger: 'blur' },
        { type: 'number', min: 0, max: 10, message: '重试次数应在 0~10 之间', trigger: 'blur' }
    ]
}

// ================== 表单引用 ==================
const formRef = ref()

// ================== 提交方法 ==================
const submitForm = () => {
    formRef.value.validate((valid: boolean) => {
        if (valid) {
            ElMessage.success('验证通过，准备提交')
            console.log('提交数据：', form.value)
            // 这里可以调用 API 提交数据
        } else {
            ElMessage.error('请检查表单输入')
            return false
        }
    })
}
</script>

<style scoped lang="scss">
.input-tips {
  font-size: 12px;
  color: #999;
  margin-top: 4px;
}
</style>