From 42c5492c1dab8cc872aeebf34b659a89980baa38 Mon Sep 17 00:00:00 2001
From: sagitchu <sagitchu@gmail.com>
Date: Fri, 1 May 2026 23:36:14 +0800
Subject: [PATCH] feat: add tunnel probe target UI

---
 vite-frontend/src/api/types.ts                |  2 +
 .../src/pages/node/tunnel-monitor-view.tsx    | 45 +++++++++++---
 vite-frontend/src/pages/tunnel.tsx            | 61 +++++++++++++++++++
 vite-frontend/src/pages/tunnel/form.ts        | 19 ++++++
 4 files changed, 117 insertions(+), 10 deletions(-)

diff --git a/vite-frontend/src/api/types.ts b/vite-frontend/src/api/types.ts
index 39cfcbd..f69f7af 100644
--- a/vite-frontend/src/api/types.ts
+++ b/vite-frontend/src/api/types.ts
@@ -525,6 +525,8 @@ export interface TunnelQualityApiItem {
   exitToBingLatency: number;
   entryToExitLoss: number;
   exitToBingLoss: number;
+  probeTargetHost?: string;
+  probeTargetPort?: number;
   success: boolean;
   errorMessage?: string;
   timestamp: number;
diff --git a/vite-frontend/src/pages/node/tunnel-monitor-view.tsx b/vite-frontend/src/pages/node/tunnel-monitor-view.tsx
index 59e9db3..3eec8a3 100644
--- a/vite-frontend/src/pages/node/tunnel-monitor-view.tsx
+++ b/vite-frontend/src/pages/node/tunnel-monitor-view.tsx
@@ -63,6 +63,19 @@ const MONITOR_TUNNEL_QUALITY_ENABLED_CONFIG_KEY =
   "monitor_tunnel_quality_enabled";
 const MONITOR_TUNNEL_QUALITY_ENABLED_EVENT =
   "monitorTunnelQualityEnabledChanged";
+const DEFAULT_PROBE_TARGET_LABEL = "www.bing.com:443";
+
+const probeTargetLabel = (quality?: TunnelQualityApiItem | null) => {
+  if (!quality?.probeTargetHost || !quality.probeTargetPort) {
+    return DEFAULT_PROBE_TARGET_LABEL;
+  }
+
+  const host = quality.probeTargetHost.includes(":")
+    ? `[${quality.probeTargetHost}]`
+    : quality.probeTargetHost;
+
+  return `${host}:${quality.probeTargetPort}`;
+};
 
 const formatTimestamp = (ts: number, rangeMs?: number): string => {
   const date = new Date(ts);
@@ -177,7 +190,7 @@ function UptimeHistoryBar({
           }
 
           const displayLatency = latency >= 0 ? `${latency.toFixed(0)}ms` : "-";
-          const tooltip = `${timeStr} | ${displayLatency} | ${statusText}`;
+          const tooltip = `${timeStr} | ${displayLatency} | ${statusText} | 测试目标: ${probeTargetLabel(q)}`;
 
           return (
             <div
@@ -305,7 +318,7 @@ const QualityChartCard = React.memo(function QualityChartCard({
                       name === "entryToExit"
                         ? "入口→出口"
                         : name === "exitToBing"
-                          ? "出口→Bing"
+                          ? "出口→测试目标"
                           : name;
 
                     return [`${n.toFixed(1)}ms`, label];
@@ -1001,9 +1014,12 @@ export function TunnelMonitorView({
           </Card>
           <Card className="border border-divider/60 shadow-sm hover:shadow-md transition-shadow bg-gradient-to-br from-background to-default-50/50">
             <CardBody className="py-3 px-4 flex flex-col items-center justify-center min-h-[5rem]">
-              <span className="text-[11px] text-default-500 mb-1.5 flex items-center gap-1">
+              <span
+                className="text-[11px] text-default-500 mb-1.5 flex items-center gap-1"
+                title={probeTargetLabel(quality)}
+              >
                 <Globe className="w-3 h-3" />
-                出口 → Bing 延迟
+                出口 → 测试目标 延迟
               </span>
               <LatencyDisplay
                 loading={qualityLoading}
@@ -1027,8 +1043,11 @@ export function TunnelMonitorView({
           </Card>
           <Card className="border border-divider/60 shadow-sm hover:shadow-md transition-shadow bg-gradient-to-br from-background to-default-50/50">
             <CardBody className="py-3 px-4 flex flex-col items-center justify-center min-h-[5rem]">
-              <span className="text-[11px] text-default-500 mb-1.5">
-                出口 → Bing 丢包
+              <span
+                className="text-[11px] text-default-500 mb-1.5"
+                title={probeTargetLabel(quality)}
+              >
+                出口 → 测试目标 丢包
               </span>
               <span
                 className={`text-sm font-semibold font-mono ${(quality?.exitToBingLoss ?? 0) > 0 ? "text-warning" : ""}`}
@@ -1054,6 +1073,9 @@ export function TunnelMonitorView({
               <span>实时隧道质量检测已关闭</span>
             </>
           )}
+          <span className="text-default-400">
+            · 测试目标: {probeTargetLabel(quality)}
+          </span>
           {quality?.timestamp && (
             <span className="text-default-400">
               · 最近更新:{" "}
@@ -1201,9 +1223,12 @@ export function TunnelMonitorView({
                       />
                     </div>
                     <div className="space-y-1">
-                      <div className="text-[10px] text-default-500 flex items-center gap-1">
+                      <div
+                        className="text-[10px] text-default-500 flex items-center gap-1"
+                        title={probeTargetLabel(quality)}
+                      >
                         <Globe className="w-3 h-3" />
-                        出口→Bing
+                        出口→测试目标
                       </div>
                       <UptimeHistoryBar
                         history={qualityHistoryMap[tunnel.id]}
@@ -1259,7 +1284,7 @@ export function TunnelMonitorView({
               <TableColumn>状态</TableColumn>
               <TableColumn>名称</TableColumn>
               <TableColumn>入口→出口</TableColumn>
-              <TableColumn>出口→Bing</TableColumn>
+              <TableColumn>出口→测试目标</TableColumn>
               <TableColumn>更新时间</TableColumn>
             </TableHeader>
             <TableBody emptyContent="暂无隧道">
@@ -1294,7 +1319,7 @@ export function TunnelMonitorView({
                         type="entryToExit"
                       />
                     </TableCell>
-                    <TableCell>
+                    <TableCell title={probeTargetLabel(quality)}>
                       <UptimeHistoryBar
                         history={qualityHistoryMap[tunnel.id]}
                         latestValue={quality?.exitToBingLatency}
diff --git a/vite-frontend/src/pages/tunnel.tsx b/vite-frontend/src/pages/tunnel.tsx
index c312dae..4a2550b 100644
--- a/vite-frontend/src/pages/tunnel.tsx
+++ b/vite-frontend/src/pages/tunnel.tsx
@@ -130,6 +130,8 @@ interface Tunnel {
   flow: number; // 1: 单向, 2: 双向
   trafficRatio: number;
   ipPreference?: string;
+  probeTargetHost?: string;
+  probeTargetPort?: number;
   bestExitState?: BestExitState;
   status: number;
   createdTime: string;
@@ -156,6 +158,8 @@ interface TunnelForm {
   trafficRatio: number;
   inIp: string; // 入口IP
   ipPreference: string;
+  probeTargetHost?: string;
+  probeTargetPort?: number;
   status: number;
 }
 
@@ -584,6 +588,8 @@ export default function TunnelPage() {
             .join("\n")
         : "",
       ipPreference: tunnel.ipPreference || "",
+      probeTargetHost: tunnel.probeTargetHost || "",
+      probeTargetPort: tunnel.probeTargetPort || 0,
       status: tunnel.status,
     });
     setErrors({});
@@ -860,12 +866,18 @@ export default function TunnelPage() {
         .map((ip) => ip.trim())
         .filter((ip) => ip)
         .join(",");
+      const probeTargetHost = (form.probeTargetHost || "").trim();
+      const probeTargetPort = probeTargetHost
+        ? Number(form.probeTargetPort || 0)
+        : 0;
 
       const data = {
         ...form,
         inIp: inIpString,
         outNodeId: cleanedOutNodeId,
         chainNodes: cleanedChainNodes,
+        probeTargetHost,
+        probeTargetPort,
       };
 
       const response = isEdit
@@ -2323,6 +2335,55 @@ export default function TunnelPage() {
                     </Select>
                   )}
 
+                  <div className="rounded-xl border border-divider/60 bg-default-50/40 p-3 space-y-3">
+                    <div>
+                      <div className="text-sm font-medium">质量检测目标</div>
+                      <p className="text-xs text-default-500 mt-0.5">
+                        用于实时隧道质量检测和 best 最优出口评分，留空使用
+                        www.bing.com:443
+                      </p>
+                    </div>
+                    <div className="grid grid-cols-1 md:grid-cols-[1fr_140px] gap-3">
+                      <Input
+                        errorMessage={errors.probeTargetHost}
+                        isInvalid={!!errors.probeTargetHost}
+                        label="Host"
+                        placeholder="www.bing.com"
+                        value={form.probeTargetHost || ""}
+                        variant="bordered"
+                        onChange={(e) =>
+                          setForm((prev) => ({
+                            ...prev,
+                            probeTargetHost: e.target.value,
+                          }))
+                        }
+                      />
+                      <Input
+                        errorMessage={errors.probeTargetPort}
+                        isInvalid={!!errors.probeTargetPort}
+                        label="Port"
+                        max={65535}
+                        min={1}
+                        placeholder="443"
+                        type="number"
+                        value={
+                          form.probeTargetPort
+                            ? String(form.probeTargetPort)
+                            : ""
+                        }
+                        variant="bordered"
+                        onChange={(e) =>
+                          setForm((prev) => ({
+                            ...prev,
+                            probeTargetPort: e.target.value
+                              ? Number(e.target.value)
+                              : 0,
+                          }))
+                        }
+                      />
+                    </div>
+                  </div>
+
                   <Divider />
                   <h3 className="text-lg font-semibold">入口配置</h3>
 
diff --git a/vite-frontend/src/pages/tunnel/form.ts b/vite-frontend/src/pages/tunnel/form.ts
index c69ea75..6c560fc 100644
--- a/vite-frontend/src/pages/tunnel/form.ts
+++ b/vite-frontend/src/pages/tunnel/form.ts
@@ -8,6 +8,8 @@ interface TunnelFormInput {
   inNodeId: TunnelChainNode[];
   outNodeId?: TunnelChainNode[];
   trafficRatio: number;
+  probeTargetHost?: string;
+  probeTargetPort?: number;
 }
 
 interface TunnelNodeInput {
@@ -26,6 +28,8 @@ export const createTunnelFormDefaults = () => {
     trafficRatio: 1.0,
     inIp: "",
     ipPreference: "",
+    probeTargetHost: "",
+    probeTargetPort: 0,
     status: 1,
   };
 };
@@ -63,6 +67,21 @@ export const validateTunnelForm = (
     errors.trafficRatio = "流量倍率须大于0，支持小数（如 0.5）";
   }
 
+  const probeHost = (form.probeTargetHost || "").trim();
+  const probePort = Number(form.probeTargetPort || 0);
+
+  if (probeHost || probePort > 0) {
+    if (!probeHost) {
+      errors.probeTargetHost = "请输入测试目标 Host";
+    } else if (probeHost.includes("://") || /[\s/?#]/.test(probeHost)) {
+      errors.probeTargetHost = "Host 不能包含协议、空格或路径";
+    }
+
+    if (!Number.isInteger(probePort) || probePort < 1 || probePort > 65535) {
+      errors.probeTargetPort = "端口必须是 1-65535";
+    }
+  }
+
   if (form.type === 2) {
     if (!form.outNodeId || form.outNodeId.length === 0) {
       errors.outNodeId = "请至少选择一个出口节点";