fix: refine advanced settings layout

Merge PR #491

go-backend/internal/http/handler/control_plane.go

@@ -978,6 +978,7 @@ func (h *Handler) prepareTunnelDiagnosis(tunnelID int64) (string, string, []diag
 
 	ipPreference := h.repo.GetTunnelIPPreference(tunnelID)
 	protocol := strings.ToLower(strings.TrimSpace(tunnel.Protocol))
+	probeTarget := effectiveTunnelProbeTargetValues(tunnel.ProbeTargetHost, tunnel.ProbeTargetPort)
 	inNodes, chainHops, outNodes := splitChainNodeGroups(chainRows)
 	workItems := make([]diagnosisWorkItem, 0, len(chainRows)*2)
 
@@ -987,8 +988,8 @@ func (h *Handler) prepareTunnelDiagnosis(tunnelID int64) (string, string, []diag
 			description := fmt.Sprintf("入口(%s)->外网", inNode.NodeName)
 			workItems = append(workItems, diagnosisWorkItem{
 				fromNodeID:  inNode.NodeID,
-				targetIP:    "www.bing.com",
-				targetPort:  443,
+				targetIP:    probeTarget.Host,
+				targetPort:  probeTarget.Port,
 				description: description,
 				protocol:    "tcp",
 				metadata: map[string]interface{}{
@@ -1079,8 +1080,8 @@ func (h *Handler) prepareTunnelDiagnosis(tunnelID int64) (string, string, []diag
 			description := fmt.Sprintf("出口(%s)->外网", outNode.NodeName)
 			workItems = append(workItems, diagnosisWorkItem{
 				fromNodeID:  outNode.NodeID,
-				targetIP:    "www.bing.com",
-				targetPort:  443,
+				targetIP:    probeTarget.Host,
+				targetPort:  probeTarget.Port,
 				description: description,
 				protocol:    "tcp",
 				metadata: map[string]interface{}{
@@ -1093,8 +1094,8 @@ func (h *Handler) prepareTunnelDiagnosis(tunnelID int64) (string, string, []diag
 			description := fmt.Sprintf("入口(%s)->外网", inNode.NodeName)
 			workItems = append(workItems, diagnosisWorkItem{
 				fromNodeID:  inNode.NodeID,
-				targetIP:    "www.bing.com",
-				targetPort:  443,
+				targetIP:    probeTarget.Host,
+				targetPort:  probeTarget.Port,
 				description: description,
 				protocol:    "tcp",
 				metadata: map[string]interface{}{

go-backend/internal/http/handler/tunnel_probe_target_api_test.go

@@ -209,6 +209,22 @@ func TestTunnelUpdateInvalidProbeTargetDoesNotCleanFederationBindings(t *testing
 	}
 }
 
+func TestTunnelDiagnosisUsesConfiguredProbeTarget(t *testing.T) {
+	h := setupProbeTargetTunnelHandler(t)
+	seedProbeTargetTunnel(t, h, 90, "diagnosis-target", "speed.example.com", 8443)
+
+	_, _, workItems, err := h.prepareTunnelDiagnosis(90)
+	if err != nil {
+		t.Fatalf("prepare tunnel diagnosis: %v", err)
+	}
+	if len(workItems) != 1 {
+		t.Fatalf("expected one diagnosis item, got %d", len(workItems))
+	}
+	if workItems[0].targetIP != "speed.example.com" || workItems[0].targetPort != 8443 {
+		t.Fatalf("expected custom diagnosis target speed.example.com:8443, got %s:%d", workItems[0].targetIP, workItems[0].targetPort)
+	}
+}
+
 func setupProbeTargetTunnelHandler(t *testing.T) *Handler {
 	t.Helper()
 	r, err := repo.Open(filepath.Join(t.TempDir(), "panel.db"))

vite-frontend/src/pages/node.tsx

@@ -2582,11 +2582,16 @@ export default function NodePage() {
               />
 
               {/* 高级配置 */}
-              <Accordion variant="bordered">
+              <Accordion className="px-0" variant="light">
                 <AccordionItem
                   key="advanced"
                   aria-label="高级配置"
-                  title="高级配置"
+                  className="border-b-0 [&_[data-slot=accordion-trigger]]:no-underline [&_[data-slot=accordion-trigger]]:hover:no-underline"
+                  title={
+                    <span className="text-small text-default-500 font-medium">
+                      高级配置
+                    </span>
+                  }
                 >
                   <div className="space-y-4 pb-2">
                     <Input
@@ -2683,10 +2688,10 @@ export default function NodePage() {
                         />
                       )}
                       <div
-                        className={`grid grid-cols-1 sm:grid-cols-3 gap-3 bg-default-50 dark:bg-default-100 p-3 rounded-md border border-default-200 dark:border-default-100/30 ${protocolDisabled ? "opacity-70" : ""}`}
+                        className={`grid grid-cols-1 sm:grid-cols-3 gap-3 bg-content1/30 dark:bg-content1/20 p-3 rounded-md border border-divider ${protocolDisabled ? "opacity-70" : ""}`}
                       >
                         {/* HTTP tile */}
-                        <div className="px-3 py-3 rounded-lg bg-white dark:bg-default-50 border border-default-200 dark:border-default-100/30 hover:border-primary-200 transition-colors">
+                        <div className="px-3 py-3 rounded-lg bg-content1/55 dark:bg-content1/35 border border-divider hover:border-primary-200 dark:hover:border-primary-500/30 transition-colors">
                           <div className="flex items-center gap-2 mb-2">
                             <svg
                               aria-hidden="true"
@@ -2727,7 +2732,7 @@ export default function NodePage() {
                         </div>
 
                         {/* TLS tile */}
-                        <div className="px-3 py-3 rounded-lg bg-white dark:bg-default-50 border border-default-200 dark:border-default-100/30 hover:border-primary-200 transition-colors">
+                        <div className="px-3 py-3 rounded-lg bg-content1/55 dark:bg-content1/35 border border-divider hover:border-primary-200 dark:hover:border-primary-500/30 transition-colors">
                           <div className="flex items-center gap-2 mb-2">
                             <svg
                               aria-hidden="true"
@@ -2771,7 +2776,7 @@ export default function NodePage() {
                         </div>
 
                         {/* SOCKS tile */}
-                        <div className="px-3 py-3 rounded-lg bg-white dark:bg-default-50 border border-default-200 dark:border-default-100/30 hover:border-primary-200 transition-colors">
+                        <div className="px-3 py-3 rounded-lg bg-content1/55 dark:bg-content1/35 border border-divider hover:border-primary-200 dark:hover:border-primary-500/30 transition-colors">
                           <div className="flex items-center gap-2 mb-2">
                             <svg
                               aria-hidden="true"

vite-frontend/src/pages/tunnel.tsx

@@ -46,6 +46,7 @@ import { Alert } from "@/shadcn-bridge/heroui/alert";
 import { Checkbox } from "@/shadcn-bridge/heroui/checkbox";
 import { Progress } from "@/shadcn-bridge/heroui/progress";
 import { Radio, RadioGroup } from "@/shadcn-bridge/heroui/radio";
+import { Accordion, AccordionItem } from "@/shadcn-bridge/heroui/accordion";
 import {
   Table,
   TableHeader,
@@ -137,6 +138,14 @@ interface Tunnel {
   createdTime: string;
 }
 
+const DEFAULT_PROBE_TARGET_HOST = "www.bing.com";
+const DEFAULT_PROBE_TARGET_PORT = 443;
+
+const getTunnelDiagnosisTarget = (tunnel: Tunnel) => ({
+  targetIp: tunnel.probeTargetHost || DEFAULT_PROBE_TARGET_HOST,
+  targetPort: tunnel.probeTargetPort || DEFAULT_PROBE_TARGET_PORT,
+});
+
 interface Node {
   id: number;
   name: string;
@@ -902,6 +911,7 @@ export default function TunnelPage() {
   const handleDiagnose = async (tunnel: Tunnel) => {
     diagnosisAbortRef.current?.abort();
     const abortController = new AbortController();
+    const diagnosisTarget = getTunnelDiagnosisTarget(tunnel);
 
     diagnosisAbortRef.current = abortController;
 
@@ -1043,6 +1053,7 @@ export default function TunnelPage() {
               tunnelType: tunnel.type,
               description: "诊断失败",
               message: response.msg || "诊断过程中发生错误",
+              ...diagnosisTarget,
             }),
           );
           setDiagnosisProgress({
@@ -1074,6 +1085,7 @@ export default function TunnelPage() {
           tunnelType: tunnel.type,
           description: "网络错误",
           message: "无法连接到服务器",
+          ...diagnosisTarget,
         }),
       );
       setDiagnosisProgress({
@@ -2256,134 +2268,6 @@ export default function TunnelPage() {
                     <SelectItem key="2">隧道转发</SelectItem>
                   </Select>
 
-                  <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
-                    <Select
-                      errorMessage={errors.flow}
-                      isInvalid={!!errors.flow}
-                      label="流量计算"
-                      placeholder="请选择流量计算方式"
-                      selectedKeys={[form.flow.toString()]}
-                      variant="bordered"
-                      onSelectionChange={(keys) => {
-                        const selectedKey = Array.from(keys)[0] as string;
-
-                        if (selectedKey) {
-                          setForm((prev) => ({
-                            ...prev,
-                            flow: parseInt(selectedKey),
-                          }));
-                        }
-                      }}
-                    >
-                      <SelectItem key="1">单向计算（仅上传）</SelectItem>
-                      <SelectItem key="2">双向计算（上传+下载）</SelectItem>
-                    </Select>
-
-                    <Input
-                      errorMessage={errors.trafficRatio}
-                      isInvalid={!!errors.trafficRatio}
-                      label="流量倍率"
-                      max={100}
-                      min={0.01}
-                      placeholder="例如：0.5 或 1 或 2"
-                      step="any"
-                      type="number"
-                      value={form.trafficRatio.toString()}
-                      variant="bordered"
-                      onChange={(e) =>
-                        setForm((prev) => ({
-                          ...prev,
-                          trafficRatio: parseFloat(e.target.value) || 0,
-                        }))
-                      }
-                    />
-                  </div>
-
-                  <Textarea
-                    description="入口IP由系统自动从入口节点采集，无需手动填写。支持多个IP，每行一个地址，留空则使用入口节点IP"
-                    errorMessage={errors.inIp}
-                    isInvalid={!!errors.inIp}
-                    label="入口IP"
-                    maxRows={5}
-                    minRows={3}
-                    placeholder="一行一个IP地址或域名，例如:&#10;192.168.1.100&#10;example.com"
-                    value={form.inIp}
-                    variant="bordered"
-                    onChange={(e) =>
-                      setForm((prev) => ({ ...prev, inIp: e.target.value }))
-                    }
-                  />
-
-                  {form.type === 2 && (
-                    <Select
-                      description="当节点同时拥有IPv4和IPv6地址时，选择隧道连接使用的地址类型"
-                      label="隧道连接地址偏好"
-                      placeholder="自动选择"
-                      selectedKeys={[form.ipPreference || ""]}
-                      variant="bordered"
-                      onSelectionChange={(keys) => {
-                        const selectedKey = Array.from(keys)[0] as string;
-
-                        setForm((prev) => ({
-                          ...prev,
-                          ipPreference: selectedKey || "",
-                        }));
-                      }}
-                    >
-                      <SelectItem key="v4">优先IPv4</SelectItem>
-                      <SelectItem key="v6">优先IPv6</SelectItem>
-                    </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>
 
@@ -3191,6 +3075,150 @@ export default function TunnelPage() {
                       })()}
                     </>
                   )}
+
+                  <Accordion className="px-0" variant="light">
+                    <AccordionItem
+                      key="advanced"
+                      aria-label="高级设置"
+                      className="border-b-0 [&_[data-slot=accordion-trigger]]:no-underline [&_[data-slot=accordion-trigger]]:hover:no-underline"
+                      title={
+                        <span className="text-small text-default-500 font-medium">
+                          高级设置
+                        </span>
+                      }
+                    >
+                      <div className="space-y-4 pb-2">
+                        <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+                          <Select
+                            errorMessage={errors.flow}
+                            isInvalid={!!errors.flow}
+                            label="流量计算"
+                            placeholder="请选择流量计算方式"
+                            selectedKeys={[form.flow.toString()]}
+                            variant="bordered"
+                            onSelectionChange={(keys) => {
+                              const selectedKey = Array.from(keys)[0] as string;
+
+                              if (selectedKey) {
+                                setForm((prev) => ({
+                                  ...prev,
+                                  flow: parseInt(selectedKey),
+                                }));
+                              }
+                            }}
+                          >
+                            <SelectItem key="1">单向计算（仅上传）</SelectItem>
+                            <SelectItem key="2">双向计算（上传+下载）</SelectItem>
+                          </Select>
+
+                          <Input
+                            errorMessage={errors.trafficRatio}
+                            isInvalid={!!errors.trafficRatio}
+                            label="流量倍率"
+                            max={100}
+                            min={0.01}
+                            placeholder="例如：0.5 或 1 或 2"
+                            step="any"
+                            type="number"
+                            value={form.trafficRatio.toString()}
+                            variant="bordered"
+                            onChange={(e) =>
+                              setForm((prev) => ({
+                                ...prev,
+                                trafficRatio: parseFloat(e.target.value) || 0,
+                              }))
+                            }
+                          />
+                        </div>
+
+                        <Textarea
+                          description="入口IP由系统自动从入口节点采集，无需手动填写。支持多个IP，每行一个地址，留空则使用入口节点IP"
+                          errorMessage={errors.inIp}
+                          isInvalid={!!errors.inIp}
+                          label="入口IP"
+                          maxRows={5}
+                          minRows={3}
+                          placeholder="一行一个IP地址或域名，例如:&#10;192.168.1.100&#10;example.com"
+                          value={form.inIp}
+                          variant="bordered"
+                          onChange={(e) =>
+                            setForm((prev) => ({
+                              ...prev,
+                              inIp: e.target.value,
+                            }))
+                          }
+                        />
+
+                        {form.type === 2 && (
+                          <Select
+                            description="当节点同时拥有IPv4和IPv6地址时，选择隧道连接使用的地址类型"
+                            label="隧道连接地址偏好"
+                            placeholder="自动选择"
+                            selectedKeys={[form.ipPreference || ""]}
+                            variant="bordered"
+                            onSelectionChange={(keys) => {
+                              const selectedKey = Array.from(keys)[0] as string;
+
+                              setForm((prev) => ({
+                                ...prev,
+                                ipPreference: selectedKey || "",
+                              }));
+                            }}
+                          >
+                            <SelectItem key="v4">优先IPv4</SelectItem>
+                            <SelectItem key="v6">优先IPv6</SelectItem>
+                          </Select>
+                        )}
+
+                        <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>
+                    </AccordionItem>
+                  </Accordion>
                 </div>
               </ModalBody>
               <ModalFooter>

vite-frontend/src/pages/tunnel/diagnosis.ts

@@ -27,6 +27,8 @@ export interface DiagnosisFallbackInput {
   tunnelType: number;
   description: string;
   message: string;
+  targetIp?: string;
+  targetPort?: number;
 }
 
 export const buildDiagnosisFallbackResult = ({
@@ -34,6 +36,8 @@ export const buildDiagnosisFallbackResult = ({
   tunnelType,
   description,
   message,
+  targetIp = "-",
+  targetPort = 443,
 }: DiagnosisFallbackInput): DiagnosisResult => {
   return {
     tunnelName,
@@ -45,8 +49,8 @@ export const buildDiagnosisFallbackResult = ({
         description,
         nodeName: "-",
         nodeId: "-",
-        targetIp: "-",
-        targetPort: 443,
+        targetIp,
+        targetPort,
         message,
       },
     ],