From 82ca52d438fce07789760a130e7b97c2b17bff18 Mon Sep 17 00:00:00 2001
From: Xin Wang <your-email@example.com>
Date: Mon, 8 Jun 2026 00:02:18 +0800
Subject: [PATCH] Add connection testing feature to ComponentsModelsPage

Implemented a new connection testing functionality in ComponentsModelsPage, allowing users to test API connectivity. Added state management for testing status and results, along with UI updates to display connection success or failure. Enhanced button interactions for improved user experience during testing.
---
 src/components/pages/ComponentsModelsPage.tsx | 90 +++++++++++++++----
 1 file changed, 74 insertions(+), 16 deletions(-)

diff --git a/src/components/pages/ComponentsModelsPage.tsx b/src/components/pages/ComponentsModelsPage.tsx
index 5d4405e..bb61df5 100644
--- a/src/components/pages/ComponentsModelsPage.tsx
+++ b/src/components/pages/ComponentsModelsPage.tsx
@@ -2,15 +2,19 @@
 
 import {
   Brain,
+  CheckCircle2,
   ChevronLeft,
   ChevronRight,
   Eye,
   EyeOff,
+  Loader2,
   MoreHorizontal,
   Pencil,
+  Plug,
   Plus,
   Search,
   Trash2,
+  XCircle,
 } from "lucide-react";
 
 import { Button } from "@/components/ui/button";
@@ -192,8 +196,28 @@ export function ComponentsModelsPage() {
   const [form, setForm] = useState<ModelForm>(emptyForm);
   const [showKey, setShowKey] = useState(false);
 
+  const [testing, setTesting] = useState(false);
+  const [testResult, setTestResult] = useState<"idle" | "ok" | "fail">("idle");
+
   function updateForm<K extends keyof ModelForm>(key: K, value: ModelForm[K]) {
     setForm((prev) => ({ ...prev, [key]: value }));
+    // 任何配置变更后，旧的测试结果不再可信，重置为待测状态
+    setTestResult("idle");
+  }
+
+  async function handleTestConnection() {
+    setTesting(true);
+    setTestResult("idle");
+    try {
+      // TODO: 接入真实疎通接口（按 form.interfaceType 区分调用方式）
+      await new Promise((resolve) => setTimeout(resolve, 900));
+      const reachable = Boolean(form.apiUrl.trim() && form.apiKey.trim());
+      setTestResult(reachable ? "ok" : "fail");
+    } catch {
+      setTestResult("fail");
+    } finally {
+      setTesting(false);
+    }
   }
 
   function handleTypeChange(type: ModelType) {
@@ -206,12 +230,14 @@ export function ComponentsModelsPage() {
         ? prev.interfaceType
         : options[0],
     }));
+    setTestResult("idle");
   }
 
   function openCreate() {
     setEditingId(null);
     setForm(emptyForm);
     setShowKey(false);
+    setTestResult("idle");
     setDialogOpen(true);
   }
 
@@ -225,6 +251,7 @@ export function ComponentsModelsPage() {
       apiKey: model.apiKey,
     });
     setShowKey(false);
+    setTestResult("idle");
     setDialogOpen(true);
   }
 
@@ -576,22 +603,53 @@ export function ComponentsModelsPage() {
             </label>
           </div>
 
-          <DialogFooter>
-            <Button
-              variant="outline"
-              className="border-hairline-strong text-muted-foreground hover:text-foreground"
-              onClick={() => setDialogOpen(false)}
-            >
-              取消
-            </Button>
-            <Button
-              className="gap-2"
-              disabled={!canSave}
-              onClick={() => setDialogOpen(false)}
-            >
-              <Brain size={16} />
-              {editingId ? "保存" : "添加"}
-            </Button>
+          <DialogFooter className="sm:items-center sm:justify-between">
+            <div className="flex items-center gap-3">
+              <Button
+                variant="outline"
+                size="sm"
+                className="gap-2 border-hairline-strong text-muted-foreground hover:text-foreground"
+                disabled={!canSave || testing}
+                onClick={handleTestConnection}
+              >
+                {testing ? (
+                  <Loader2 size={14} className="animate-spin" />
+                ) : (
+                  <Plug size={14} />
+                )}
+                测试连接
+              </Button>
+              {testResult === "ok" && (
+                <span className="flex items-center gap-1.5 text-xs text-emerald-500">
+                  <CheckCircle2 size={14} />
+                  连接成功
+                </span>
+              )}
+              {testResult === "fail" && (
+                <span className="flex items-center gap-1.5 text-xs text-destructive">
+                  <XCircle size={14} />
+                  连接失败
+                </span>
+              )}
+            </div>
+
+            <div className="flex items-center gap-2">
+              <Button
+                variant="outline"
+                className="border-hairline-strong text-muted-foreground hover:text-foreground"
+                onClick={() => setDialogOpen(false)}
+              >
+                取消
+              </Button>
+              <Button
+                className="gap-2"
+                disabled={!canSave}
+                onClick={() => setDialogOpen(false)}
+              >
+                <Brain size={16} />
+                {editingId ? "保存" : "添加"}
+              </Button>
+            </div>
           </DialogFooter>
         </DialogContent>
       </Dialog>