新增配置模型测试按钮

frontend/src/views/model/ModelCreateView.vue

@@ -8,6 +8,7 @@ import {
   createModel,
   updateModel,
   getLocalModels,
+  testOnlineModel,
 } from '@/api/modules/model'
 import { MODEL_TYPE_MAP } from '@/constants'
 import type { ModelForm, ModelSource } from '@/types'
@@ -35,6 +36,10 @@ const form = reactive<ModelForm>({
   online_model_name: '',
 })
 
+// 在线模型测试
+const testLoading = ref(false)
+const testResult = ref<{ success: boolean; error?: string; model?: string; usage?: object } | null>(null)
+
 const rules: FormRules = {
   name: [
     { required: true, message: '请输入模型名称', trigger: 'blur' },
@@ -74,7 +79,7 @@ async function loadEditData() {
       path: model.path || '',
       api_url: model.api_url || '',
       api_key: model.api_key || '',
-      online_model_name: model.model_name || '',
+      online_model_name: model.online_model_name || '',
     })
   } catch {
     // ignore
@@ -133,6 +138,36 @@ async function handleSubmit() {
   })
 }
 
+async function handleTestOnline() {
+  if (!form.api_url || !form.online_model_name) {
+    ElMessage.warning('请先填写 API 地址和模型名称')
+    return
+  }
+  testLoading.value = true
+  testResult.value = null
+  try {
+    const start = Date.now()
+    const res = await testOnlineModel({
+      api_url: form.api_url,
+      api_key: form.api_key,
+      online_model_name: form.online_model_name,
+    })
+    const data = res as any
+    if (data.success) {
+      data.latency_ms = Date.now() - start
+      ElMessage.success(`模型 ${data.model || form.online_model_name} 连接成功 (${data.latency_ms}ms)`)
+    } else {
+      ElMessage.error(data.error || '连接失败')
+    }
+    testResult.value = data
+  } catch (e: any) {
+    ElMessage.error(e?.message || e?.response?.data?.message || '测试请求失败')
+    testResult.value = { success: false, error: String(e) }
+  } finally {
+    testLoading.value = false
+  }
+}
+
 function handleCancel() {
   router.back()
 }
@@ -217,7 +252,25 @@ onMounted(() => {
           <el-input v-model="form.api_key" type="password" show-password placeholder="请输入 API Key" />
         </el-form-item>
         <el-form-item label="模型名称" prop="online_model_name">
-          <el-input v-model="form.online_model_name" placeholder="如：gpt-4、qwen-turbo" />
+          <div class="model-test-row">
+            <el-input v-model="form.online_model_name" placeholder="如：gpt-4、qwen-turbo" />
+            <el-button
+              type="primary"
+              :loading="testLoading"
+              :disabled="!form.api_url || !form.online_model_name"
+              @click="handleTestOnline"
+            >测试连接</el-button>
+          </div>
+          <!-- 测试结果 -->
+          <div v-if="testResult" class="test-result" :class="{ success: testResult.success, error: !testResult.success }">
+            <template v-if="testResult.success">
+              <i class="fa fa-check-circle" /> 连接成功 · 模型：{{ testResult.model }} · 耗时：{{ testResult.latency_ms }}ms
+              <span v-if="testResult.usage" class="usage-info">tokens: {{ (testResult.usage as any)?.total_tokens }}</span>
+            </template>
+            <template v-else>
+              <i class="fa fa-exclamation-circle" /> {{ testResult.error }}
+            </template>
+          </div>
         </el-form-item>
       </template>
 
@@ -255,4 +308,41 @@ onMounted(() => {
   color: #64748b;
   cursor: help;
 }
+
+.model-test-row {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) auto;
+  align-items: center;
+  gap: 8px;
+  width: 100%;
+}
+
+.test-result {
+  margin-top: 8px;
+  padding: 10px 14px;
+  border-radius: 6px;
+  font-size: 13px;
+
+  &.success {
+    background: #f0fdf4;
+    color: #166534;
+    border: 1px solid #bbf7d0;
+  }
+
+  &.error {
+    background: #fef2f2;
+    color: #991b1b;
+    border: 1px solid #fecaca;
+  }
+
+  i {
+    margin-right: 6px;
+  }
+
+  .usage-info {
+    margin-left: 12px;
+    color: #64748b;
+    font-size: 12px;
+  }
+}
 </style>