fix(backend): improve captcha validation and forward service sync (#219)

## Summary
- Add cloudflare site/secret key validation for captcha enabled check to
prevent incomplete captcha config
- Fix forward create to use UpdateService with tolerateExists for
idempotent service sync
- Introduce isAlreadyExistsMessage helper that correctly excludes
"address already in use" errors from being tolerated
- Add contract tests for forward toggle (pause/resume), address-in-use
rollback, and captcha compatibility

## Test Plan
- Contract tests added: `TestForwardCreateThenPauseResumeContract`,
`TestForwardCreateRollbackWhenServiceDispatchReturnsAddressInUseContract`,
`TestIsAlreadyExistsMessage`
- Captcha login flow tests updated for cloudflare key validation

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

@@ -311,7 +311,7 @@ func (h *Handler) sendNodeCommand(nodeID int64, commandType string, data interfa
 	}
 	msg := strings.ToLower(strings.TrimSpace(err.Error()))
 	if tolerateExists {
-		if strings.Contains(msg, "exists") || strings.Contains(msg, "already") || strings.Contains(msg, "已存在") {
+		if isAlreadyExistsMessage(msg) {
 			return result, nil
 		}
 	}
@@ -907,6 +907,17 @@ func isNotFoundError(err error) bool {
 	return strings.Contains(msg, "not found") || strings.Contains(msg, "不存在")
 }
 
+func isAlreadyExistsMessage(message string) bool {
+	msg := strings.ToLower(strings.TrimSpace(message))
+	if msg == "" {
+		return false
+	}
+	if strings.Contains(msg, "address already in use") {
+		return false
+	}
+	return strings.Contains(msg, "already exists") || strings.Contains(msg, "已存在")
+}
+
 func buildForwardServiceConfigs(baseName string, forward *forwardRecord, tunnel *tunnelRecord, node *nodeRecord, port int, limiterID *int64, tunnelTLSProtocol bool) []map[string]interface{} {
 	protocols := []string{"tcp", "udp"}
 	services := make([]map[string]interface{}, 0, 2)

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

@@ -53,3 +53,15 @@ func TestShouldTryLegacySingleService(t *testing.T) {
 		t.Fatalf("DeleteService should not require legacy fallback")
 	}
 }
+
+func TestIsAlreadyExistsMessage(t *testing.T) {
+	if !isAlreadyExistsMessage("service demo already exists") {
+		t.Fatalf("expected already exists message to be tolerated")
+	}
+	if !isAlreadyExistsMessage("服务已存在") {
+		t.Fatalf("expected Chinese already exists message to be tolerated")
+	}
+	if isAlreadyExistsMessage("listen tcp [::]:10001: bind: address already in use") {
+		t.Fatalf("address already in use must not be treated as already exists")
+	}
+}

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

@@ -989,10 +989,27 @@ func (h *Handler) captchaEnabled() (bool, error) {
 	if err != nil {
 		return false, err
 	}
-	if cfg == nil {
+	if cfg == nil || !strings.EqualFold(strings.TrimSpace(cfg.Value), "true") {
 		return false, nil
 	}
-	return strings.EqualFold(cfg.Value, "true"), nil
+
+	siteCfg, err := h.repo.GetConfigByName("cloudflare_site_key")
+	if err != nil {
+		return false, err
+	}
+	if siteCfg == nil || strings.TrimSpace(siteCfg.Value) == "" {
+		return false, nil
+	}
+
+	secretCfg, err := h.repo.GetConfigByName("cloudflare_secret_key")
+	if err != nil {
+		return false, err
+	}
+	if secretCfg == nil || strings.TrimSpace(secretCfg.Value) == "" {
+		return false, nil
+	}
+
+	return true, nil
 }
 
 func (h *Handler) apiClientCaptchaBypassEnabled(r *http.Request) bool {

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

@@ -1183,7 +1183,7 @@ func (h *Handler) forwardCreate(w http.ResponseWriter, r *http.Request) {
 		response.WriteJSON(w, response.Err(-2, err.Error()))
 		return
 	}
-	if err := h.syncForwardServices(createdForward, "AddService", false); err != nil {
+	if err := h.syncForwardServices(createdForward, "UpdateService", true); err != nil {
 		_ = h.deleteForwardByID(forwardID)
 		response.WriteJSON(w, response.ErrDefault(err.Error()))
 		return

go-backend/tests/contract/forward_contract_test.go

@@ -610,6 +610,96 @@ func TestForwardSpeedIDWriteAndClearContracts(t *testing.T) {
 	}
 }
 
+func TestForwardCreateThenPauseResumeContract(t *testing.T) {
+	secret := "contract-jwt-secret"
+	router, repo := setupContractRouter(t, secret)
+
+	adminToken, err := auth.GenerateToken(1, "admin_user", 0, secret)
+	if err != nil {
+		t.Fatalf("generate admin token: %v", err)
+	}
+
+	now := time.Now().UnixMilli()
+	if err := repo.DB().Exec(`
+		INSERT INTO tunnel(name, traffic_ratio, type, protocol, flow, created_time, updated_time, status, in_ip, inx)
+		VALUES(?, ?, ?, ?, ?, ?, ?, ?, ?, ?)
+	`, "forward-toggle-tunnel", 1.0, 1, "tls", 99999, now, now, 1, nil, 0).Error; err != nil {
+		t.Fatalf("insert tunnel: %v", err)
+	}
+	tunnelID := mustLastInsertID(t, repo, "forward-toggle-tunnel")
+
+	if err := repo.DB().Exec(`
+		INSERT INTO node(name, secret, server_ip, server_ip_v4, server_ip_v6, port, interface_name, version, http, tls, socks, created_time, updated_time, status, tcp_listen_addr, udp_listen_addr, inx)
+		VALUES(?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?)
+	`, "forward-toggle-node", "forward-toggle-secret", "10.31.0.1", "10.31.0.1", "", "41000-41010", "", "v1", 1, 1, 1, now, now, 1, "[::]", "[::]", 0).Error; err != nil {
+		t.Fatalf("insert node: %v", err)
+	}
+	nodeID := mustLastInsertID(t, repo, "forward-toggle-node")
+
+	if err := repo.DB().Exec(`
+		INSERT INTO chain_tunnel(tunnel_id, chain_type, node_id, port, strategy, inx, protocol)
+		VALUES(?, 1, ?, 41001, 'round', 1, 'tls')
+	`, tunnelID, nodeID).Error; err != nil {
+		t.Fatalf("insert chain_tunnel: %v", err)
+	}
+
+	server := httptest.NewServer(router)
+	defer server.Close()
+	stopNode := startMockNodeSession(t, server.URL, "forward-toggle-secret")
+	defer stopNode()
+
+	createPayload := map[string]interface{}{
+		"name":       "forward-toggle-target",
+		"tunnelId":   tunnelID,
+		"remoteAddr": "1.1.1.1:443",
+		"strategy":   "fifo",
+	}
+	createBody, err := json.Marshal(createPayload)
+	if err != nil {
+		t.Fatalf("marshal create payload: %v", err)
+	}
+	createReq := httptest.NewRequest(http.MethodPost, "/api/v1/forward/create", bytes.NewReader(createBody))
+	createReq.Header.Set("Authorization", adminToken)
+	createReq.Header.Set("Content-Type", "application/json")
+	createRes := httptest.NewRecorder()
+	router.ServeHTTP(createRes, createReq)
+	assertCode(t, createRes, 0)
+
+	forwardID := mustLastInsertID(t, repo, "forward-toggle-target")
+
+	pauseBody, err := json.Marshal(map[string]interface{}{"id": forwardID})
+	if err != nil {
+		t.Fatalf("marshal pause payload: %v", err)
+	}
+	pauseReq := httptest.NewRequest(http.MethodPost, "/api/v1/forward/pause", bytes.NewReader(pauseBody))
+	pauseReq.Header.Set("Authorization", adminToken)
+	pauseReq.Header.Set("Content-Type", "application/json")
+	pauseRes := httptest.NewRecorder()
+	router.ServeHTTP(pauseRes, pauseReq)
+	assertCode(t, pauseRes, 0)
+
+	pausedStatus := mustQueryInt(t, repo, `SELECT status FROM forward WHERE id = ?`, forwardID)
+	if pausedStatus != 0 {
+		t.Fatalf("expected status=0 after pause, got %d", pausedStatus)
+	}
+
+	resumeBody, err := json.Marshal(map[string]interface{}{"id": forwardID})
+	if err != nil {
+		t.Fatalf("marshal resume payload: %v", err)
+	}
+	resumeReq := httptest.NewRequest(http.MethodPost, "/api/v1/forward/resume", bytes.NewReader(resumeBody))
+	resumeReq.Header.Set("Authorization", adminToken)
+	resumeReq.Header.Set("Content-Type", "application/json")
+	resumeRes := httptest.NewRecorder()
+	router.ServeHTTP(resumeRes, resumeReq)
+	assertCode(t, resumeRes, 0)
+
+	resumedStatus := mustQueryInt(t, repo, `SELECT status FROM forward WHERE id = ?`, forwardID)
+	if resumedStatus != 1 {
+		t.Fatalf("expected status=1 after resume, got %d", resumedStatus)
+	}
+}
+
 func jsonNumber(v int64) string {
 	return strconv.FormatInt(v, 10)
 }

go-backend/tests/contract/limiter_sync_failure_contract_test.go

@@ -99,6 +99,77 @@ func TestForwardCreateRollbackWhenLimiterDispatchFailsContract(t *testing.T) {
 	}
 }
 
+func TestForwardCreateRollbackWhenServiceDispatchReturnsAddressInUseContract(t *testing.T) {
+	secret := "contract-jwt-secret"
+	router, r := setupContractRouter(t, secret)
+	server := httptest.NewServer(router)
+	defer server.Close()
+
+	adminToken, err := auth.GenerateToken(1, "admin_user", 0, secret)
+	if err != nil {
+		t.Fatalf("generate admin token: %v", err)
+	}
+
+	now := time.Now().UnixMilli()
+	if err := r.DB().Exec(`
+		INSERT INTO tunnel(name, traffic_ratio, type, protocol, flow, created_time, updated_time, status, in_ip, inx)
+		VALUES(?, ?, ?, ?, ?, ?, ?, ?, ?, ?)
+	`, "addr-in-use-tunnel", 1.0, 1, "tls", 99999, now, now, 1, nil, 0).Error; err != nil {
+		t.Fatalf("insert tunnel: %v", err)
+	}
+	tunnelID := mustLastInsertID(t, r, "addr-in-use-tunnel")
+
+	if err := r.DB().Exec(`
+		INSERT INTO node(name, secret, server_ip, server_ip_v4, server_ip_v6, port, interface_name, version, http, tls, socks, created_time, updated_time, status, tcp_listen_addr, udp_listen_addr, inx)
+		VALUES(?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?)
+	`, "addr-in-use-node", "addr-in-use-secret", "10.20.0.11", "10.20.0.11", "", "32100-32110", "", "v1", 1, 1, 1, now, now, 1, "[::]", "[::]", 0).Error; err != nil {
+		t.Fatalf("insert node: %v", err)
+	}
+	nodeID := mustLastInsertID(t, r, "addr-in-use-node")
+
+	if err := r.DB().Exec(`
+		INSERT INTO chain_tunnel(tunnel_id, chain_type, node_id, port, strategy, inx, protocol)
+		VALUES(?, 1, ?, 32101, 'round', 1, 'tls')
+	`, tunnelID, nodeID).Error; err != nil {
+		t.Fatalf("insert chain_tunnel: %v", err)
+	}
+
+	stopNode := startMockNodeSessionWithCommandFailures(t, server.URL, "addr-in-use-secret", map[string]string{
+		"updateservice": "listen tcp [::]:32101: bind: address already in use",
+		"addservice":    "listen tcp [::]:32101: bind: address already in use",
+	})
+	defer stopNode()
+
+	payload := map[string]interface{}{
+		"name":       "addr-in-use-forward",
+		"tunnelId":   tunnelID,
+		"remoteAddr": "1.1.1.1:443",
+		"strategy":   "fifo",
+	}
+	body, err := json.Marshal(payload)
+	if err != nil {
+		t.Fatalf("marshal payload: %v", err)
+	}
+	req := httptest.NewRequest(http.MethodPost, "/api/v1/forward/create", bytes.NewReader(body))
+	req.Header.Set("Authorization", adminToken)
+	req.Header.Set("Content-Type", "application/json")
+	res := httptest.NewRecorder()
+	router.ServeHTTP(res, req)
+
+	var out response.R
+	if err := json.NewDecoder(res.Body).Decode(&out); err != nil {
+		t.Fatalf("decode response: %v", err)
+	}
+	if out.Code == 0 {
+		t.Fatalf("expected create failure on address-in-use service dispatch, got code=0")
+	}
+
+	forwardCount := mustQueryInt(t, r, `SELECT COUNT(1) FROM forward WHERE name = ?`, "addr-in-use-forward")
+	if forwardCount != 0 {
+		t.Fatalf("expected forward rollback delete on address-in-use failure, got count=%d", forwardCount)
+	}
+}
+
 func TestBatchAssignRollbackWhenLimiterDispatchFailsContract(t *testing.T) {
 	secret := "contract-jwt-secret"
 	router, r := setupContractRouter(t, secret)

go-backend/tests/contract/migration_contract_test.go

@@ -25,6 +25,7 @@ import (
 func TestCaptchaVerifyLoginContract(t *testing.T) {
 	secret := "contract-jwt-secret"
 	router, r := setupContractRouter(t, secret)
+	verifiedToken := ""
 
 	if err := r.DB().Exec(`
 		INSERT INTO vite_config(name, value, time)
@@ -34,6 +35,55 @@ func TestCaptchaVerifyLoginContract(t *testing.T) {
 		t.Fatalf("enable captcha: %v", err)
 	}
 
+	t.Run("login allowed when cloudflare keys are missing", func(t *testing.T) {
+		body := bytes.NewBufferString(`{"username":"admin_user","password":"admin_user","captchaId":""}`)
+		req := httptest.NewRequest(http.MethodPost, "/api/v1/user/login", body)
+		req.Header.Set("Content-Type", "application/json")
+		resp := httptest.NewRecorder()
+
+		router.ServeHTTP(resp, req)
+
+		assertCode(t, resp, 0)
+	})
+
+	t.Run("captcha verify remains compatible without cloudflare secret", func(t *testing.T) {
+		verifyReq := httptest.NewRequest(http.MethodPost, "/api/v1/captcha/verify", bytes.NewBufferString(`{"id":"captcha-token-1","data":"ok"}`))
+		verifyReq.Header.Set("Content-Type", "application/json")
+		verifyResp := httptest.NewRecorder()
+
+		router.ServeHTTP(verifyResp, verifyReq)
+
+		var verifyOut struct {
+			Success bool `json:"success"`
+			Data    struct {
+				ValidToken string `json:"validToken"`
+			} `json:"data"`
+		}
+		if err := json.NewDecoder(verifyResp.Body).Decode(&verifyOut); err != nil {
+			t.Fatalf("decode captcha verify response: %v", err)
+		}
+		if !verifyOut.Success || verifyOut.Data.ValidToken != "captcha-token-1" {
+			t.Fatalf("unexpected captcha verify payload: success=%v token=%q", verifyOut.Success, verifyOut.Data.ValidToken)
+		}
+
+		verifiedToken = verifyOut.Data.ValidToken
+	})
+
+	if err := r.DB().Exec(`
+		INSERT INTO vite_config(name, value, time)
+		VALUES(?, ?, ?)
+		ON CONFLICT(name) DO UPDATE SET value = excluded.value, time = excluded.time
+	`, "cloudflare_site_key", "test-site-key", time.Now().UnixMilli()).Error; err != nil {
+		t.Fatalf("set cloudflare site key: %v", err)
+	}
+	if err := r.DB().Exec(`
+		INSERT INTO vite_config(name, value, time)
+		VALUES(?, ?, ?)
+		ON CONFLICT(name) DO UPDATE SET value = excluded.value, time = excluded.time
+	`, "cloudflare_secret_key", "test-secret-key", time.Now().UnixMilli()).Error; err != nil {
+		t.Fatalf("set cloudflare secret key: %v", err)
+	}
+
 	t.Run("login denied without verified captcha token", func(t *testing.T) {
 		body := bytes.NewBufferString(`{"username":"admin_user","password":"admin_user","captchaId":""}`)
 		req := httptest.NewRequest(http.MethodPost, "/api/v1/user/login", body)
@@ -58,33 +108,18 @@ func TestCaptchaVerifyLoginContract(t *testing.T) {
 	})
 
 	t.Run("captcha token is one-time and consumed by login", func(t *testing.T) {
-		verifyReq := httptest.NewRequest(http.MethodPost, "/api/v1/captcha/verify", bytes.NewBufferString(`{"id":"captcha-token-1","data":"ok"}`))
-		verifyReq.Header.Set("Content-Type", "application/json")
-		verifyResp := httptest.NewRecorder()
-
-		router.ServeHTTP(verifyResp, verifyReq)
-
-		var verifyOut struct {
-			Success bool `json:"success"`
-			Data    struct {
-				ValidToken string `json:"validToken"`
-			} `json:"data"`
-		}
-		if err := json.NewDecoder(verifyResp.Body).Decode(&verifyOut); err != nil {
-			t.Fatalf("decode captcha verify response: %v", err)
-		}
-		if !verifyOut.Success || verifyOut.Data.ValidToken != "captcha-token-1" {
-			t.Fatalf("unexpected captcha verify payload: success=%v token=%q", verifyOut.Success, verifyOut.Data.ValidToken)
+		if strings.TrimSpace(verifiedToken) == "" {
+			t.Fatalf("expected verified token from compatibility captcha verify")
 		}
 
-		loginBody := bytes.NewBufferString(`{"username":"admin_user","password":"admin_user","captchaId":"captcha-token-1"}`)
+		loginBody := bytes.NewBufferString(`{"username":"admin_user","password":"admin_user","captchaId":"` + verifiedToken + `"}`)
 		loginReq := httptest.NewRequest(http.MethodPost, "/api/v1/user/login", loginBody)
 		loginReq.Header.Set("Content-Type", "application/json")
 		loginResp := httptest.NewRecorder()
 		router.ServeHTTP(loginResp, loginReq)
 		assertCode(t, loginResp, 0)
 
-		replayBody := bytes.NewBufferString(`{"username":"admin_user","password":"admin_user","captchaId":"captcha-token-1"}`)
+		replayBody := bytes.NewBufferString(`{"username":"admin_user","password":"admin_user","captchaId":"` + verifiedToken + `"}`)
 		replayReq := httptest.NewRequest(http.MethodPost, "/api/v1/user/login", replayBody)
 		replayReq.Header.Set("Content-Type", "application/json")
 		replayResp := httptest.NewRecorder()

vite-frontend/src/App.tsx

@@ -18,7 +18,7 @@ import AdminLayout from "@/layouts/admin";
 import H5Layout from "@/layouts/h5";
 import H5SimpleLayout from "@/layouts/h5-simple";
 import { isLoggedIn } from "@/utils/auth";
-import { siteConfig } from "@/config/site";
+import { siteConfig, updateSiteConfig } from "@/config/site";
 import { useH5Mode } from "@/hooks/useH5Mode";
 
 // 简化的路由保护组件 - 使用 React Router 导航避免循环
@@ -90,23 +90,17 @@ function App() {
   useEffect(() => {
     document.title = siteConfig.name;
 
-    // 异步检查是否有配置更新
-    const checkTitleUpdate = async () => {
-      try {
-        // 引入必要的函数
-        const { getCachedConfig } = await import("@/config/site");
-        const cachedAppName = await getCachedConfig("app_name");
+    void updateSiteConfig();
 
-        if (cachedAppName && cachedAppName !== document.title) {
-          document.title = cachedAppName;
-        }
-      } catch {}
+    const handleConfigUpdate = () => {
+      void updateSiteConfig();
     };
 
-    // 延迟检查，避免阻塞初始渲染
-    const timer = setTimeout(checkTitleUpdate, 100);
+    window.addEventListener("configUpdated", handleConfigUpdate);
 
-    return () => clearTimeout(timer);
+    return () => {
+      window.removeEventListener("configUpdated", handleConfigUpdate);
+    };
   }, []);
 
   return (

vite-frontend/src/components/brand-logo.tsx

@@ -0,0 +1,79 @@
+import { useEffect, useState } from "react";
+
+import { siteConfig, getCachedConfigs } from "@/config/site";
+import { Logo } from "@/components/icons";
+
+type BrandLogoProps = {
+  size?: number;
+  className?: string;
+  alt?: string;
+};
+
+export const BrandLogo = ({
+  size = 24,
+  className,
+  alt = "brand logo",
+}: BrandLogoProps) => {
+  const [logoUrl, setLogoUrl] = useState<string>(siteConfig.app_logo || "");
+  const [imageFailed, setImageFailed] = useState(false);
+
+  useEffect(() => {
+    let mounted = true;
+
+    const syncLogo = async () => {
+      try {
+        const configMap = await getCachedConfigs();
+        const nextLogo = (
+          configMap.app_logo ||
+          siteConfig.app_logo ||
+          ""
+        ).trim();
+
+        if (!mounted) {
+          return;
+        }
+
+        siteConfig.app_logo = nextLogo;
+        setLogoUrl(nextLogo);
+        setImageFailed(false);
+      } catch {
+        if (!mounted) {
+          return;
+        }
+        setLogoUrl((siteConfig.app_logo || "").trim());
+      }
+    };
+
+    void syncLogo();
+
+    const handleConfigUpdate = () => {
+      const nextLogo = (siteConfig.app_logo || "").trim();
+
+      setLogoUrl(nextLogo);
+      setImageFailed(false);
+      void syncLogo();
+    };
+
+    window.addEventListener("configUpdated", handleConfigUpdate);
+
+    return () => {
+      mounted = false;
+      window.removeEventListener("configUpdated", handleConfigUpdate);
+    };
+  }, []);
+
+  if (!logoUrl || imageFailed) {
+    return <Logo className={className} size={size} />;
+  }
+
+  return (
+    <img
+      alt={alt}
+      className={className}
+      height={size}
+      src={logoUrl}
+      width={size}
+      onError={() => setImageFailed(true)}
+    />
+  );
+};

vite-frontend/src/components/navbar.tsx

@@ -7,7 +7,7 @@ import {
   NavbarBrand,
   NavbarContent,
 } from "@/shadcn-bridge/heroui/navbar";
-import { Logo } from "@/components/icons";
+import { BrandLogo } from "@/components/brand-logo";
 import { siteConfig, getCachedConfig } from "@/config/site";
 import { useWebViewMode } from "@/hooks/useWebViewMode";
 
@@ -69,7 +69,7 @@ export const Navbar = () => {
               color="foreground"
               href="/"
             >
-              <Logo size={24} />
+              <BrandLogo size={24} />
               <p className="font-bold text-inherit truncate">{appName}</p>
             </Link>
           </NavbarBrand>

vite-frontend/src/config/site.ts

@@ -16,10 +16,15 @@ const getInitialConfig = () => {
       version: VERSION,
       app_version: APP_VERSION,
       github_repo: GITHUB_REPO,
+      app_logo: "",
+      app_favicon: "",
     };
   }
 
   const cachedAppName = localStorage.getItem(CACHE_PREFIX + "app_name");
+  const cachedAppLogo = localStorage.getItem(CACHE_PREFIX + "app_logo") || "";
+  const cachedAppFavicon =
+    localStorage.getItem(CACHE_PREFIX + "app_favicon") || "";
 
   if (cachedAppName) {
     return {
@@ -27,6 +32,8 @@ const getInitialConfig = () => {
       version: VERSION,
       app_version: APP_VERSION,
       github_repo: GITHUB_REPO,
+      app_logo: cachedAppLogo,
+      app_favicon: cachedAppFavicon,
     };
   }
 
@@ -34,6 +41,9 @@ const getInitialConfig = () => {
     name: "FLVX",
     version: VERSION,
     app_version: APP_VERSION,
+    github_repo: GITHUB_REPO,
+    app_logo: cachedAppLogo,
+    app_favicon: cachedAppFavicon,
   };
 };
 
@@ -99,7 +109,7 @@ export const getCachedConfig = async (key: string): Promise<string | null> => {
 // 获取所有配置（优先从缓存）
 export const getCachedConfigs = async (): Promise<Record<string, string>> => {
   // 尝试从缓存获取所有配置
-  const configKeys = ["app_name"];
+  const configKeys = ["app_name", "app_logo", "app_favicon"];
   const cachedConfigs: Record<string, string> = {};
   let hasCachedData = false;
 
@@ -136,15 +146,48 @@ export const getCachedConfigs = async (): Promise<Record<string, string>> => {
   return {};
 };
 
+const updateDocumentFavicon = (faviconUrl: string) => {
+  if (typeof document === "undefined") {
+    return;
+  }
+
+  const normalized = faviconUrl.trim() || "/favicon.ico";
+  const iconLinks = Array.from(
+    document.head.querySelectorAll<HTMLLinkElement>(
+      'link[rel="icon"], link[rel="shortcut icon"]',
+    ),
+  );
+
+  if (iconLinks.length === 0) {
+    const link = document.createElement("link");
+
+    link.rel = "icon";
+    link.href = normalized;
+    document.head.appendChild(link);
+
+    return;
+  }
+
+  iconLinks.forEach((link) => {
+    link.href = normalized;
+  });
+};
+
 // 动态更新网站配置
 export const updateSiteConfig = async () => {
-  const appName = await getCachedConfig("app_name");
+  const configMap = await getCachedConfigs();
+  const appName = (configMap.app_name || "").trim();
+  const appLogo = (configMap.app_logo || "").trim();
+  const appFavicon = (configMap.app_favicon || "").trim();
 
   if (appName && appName !== siteConfig.name) {
     siteConfig.name = appName;
-    // 更新页面标题
-    document.title = appName;
   }
+
+  siteConfig.app_logo = appLogo;
+  siteConfig.app_favicon = appFavicon;
+  document.title = siteConfig.name;
+  updateDocumentFavicon(siteConfig.app_favicon);
 };
 
 // 清除配置缓存的工具函数

vite-frontend/src/layouts/admin.tsx

@@ -19,7 +19,7 @@ import {
   useDisclosure,
 } from "@/shadcn-bridge/heroui/modal";
 import { Input } from "@/shadcn-bridge/heroui/input";
-import { Logo } from "@/components/icons";
+import { BrandLogo } from "@/components/brand-logo";
 import { VersionFooter } from "@/components/version-footer";
 import { updatePassword } from "@/api";
 import { safeLogout } from "@/utils/logout";
@@ -330,7 +330,7 @@ export default function AdminLayout({
         {/* Logo 区域 */}
         <div className="px-5 h-14 flex items-center overflow-hidden whitespace-nowrap box-border">
           <div className="flex-shrink-0 flex items-center justify-center w-10">
-            <Logo size={28} />
+            <BrandLogo size={28} />
           </div>
           <div
             className={`transition-all duration-300 overflow-hidden ${isCollapsed ? "max-w-0 opacity-0 ml-0" : "max-w-[180px] opacity-100 ml-2"}`}

vite-frontend/src/layouts/h5-simple.tsx

@@ -2,7 +2,7 @@ import React from "react";
 import { useNavigate } from "react-router-dom";
 
 import { Button } from "@/shadcn-bridge/heroui/button";
-import { Logo } from "@/components/icons";
+import { BrandLogo } from "@/components/brand-logo";
 import { siteConfig } from "@/config/site";
 import { useScrollTopOnPathChange } from "@/hooks/useScrollTopOnPathChange";
 
@@ -33,7 +33,7 @@ export default function H5SimpleLayout({
               />
             </svg>
           </Button>
-          <Logo size={20} />
+          <BrandLogo size={20} />
           <h1 className="text-sm font-bold text-foreground">
             {siteConfig.name}
           </h1>

vite-frontend/src/layouts/h5.tsx

@@ -1,7 +1,7 @@
 import React, { useState, useEffect } from "react";
 import { useNavigate, useLocation } from "react-router-dom";
 
-import { Logo } from "@/components/icons";
+import { BrandLogo } from "@/components/brand-logo";
 import { siteConfig } from "@/config/site";
 import { getAdminFlag } from "@/utils/session";
 import { useScrollTopOnPathChange } from "@/hooks/useScrollTopOnPathChange";
@@ -102,7 +102,7 @@ export default function H5Layout({ children }: { children: React.ReactNode }) {
       {/* 顶部导航栏 */}
       <header className="bg-white dark:bg-black shadow-sm border-b border-gray-200 dark:border-gray-600 h-14 safe-top flex-shrink-0 flex items-center justify-between px-4 relative z-10">
         <div className="flex items-center gap-2">
-          <Logo size={20} />
+          <BrandLogo size={20} />
           <h1 className="text-sm font-bold text-foreground">
             {siteConfig.name}
           </h1>

vite-frontend/src/pages/config.tsx

@@ -67,6 +67,13 @@ interface ConfigItem {
   dependsValue?: string; // 依赖的配置项值
 }
 
+const BRAND_PREVIEW_KEYS = ["app_logo", "app_favicon"] as const;
+
+type BrandPreviewKey = (typeof BRAND_PREVIEW_KEYS)[number];
+
+const isBrandPreviewKey = (key: string): key is BrandPreviewKey =>
+  BRAND_PREVIEW_KEYS.includes(key as BrandPreviewKey);
+
 // 网站配置项定义
 const CONFIG_ITEMS: ConfigItem[] = [
   {
@@ -91,6 +98,22 @@ const CONFIG_ITEMS: ConfigItem[] = [
     description: "在浏览器标签页和导航栏显示的应用名称",
     type: "input",
   },
+  {
+    key: "app_logo",
+    label: "网页角标 Logo",
+    placeholder: "请输入 Logo 图片 URL",
+    description:
+      "用于页面左上角导航角标，支持站内路径（如 /logo.png）或完整图片 URL",
+    type: "input",
+  },
+  {
+    key: "app_favicon",
+    label: "浏览器缩略图标",
+    placeholder: "请输入 Favicon 图片 URL",
+    description:
+      "用于浏览器标签页图标，支持站内路径（如 /favicon.ico）或完整图片 URL",
+    type: "input",
+  },
   {
     key: "captcha_enabled",
     label: "启用验证码",
@@ -143,6 +166,8 @@ const getInitialConfigs = (): Record<string, string> => {
     "cloudflare_secret_key",
     "ip",
     "panel_domain",
+    "app_logo",
+    "app_favicon",
   ];
   const initialConfigs: Record<string, string> = {};
 
@@ -190,6 +215,9 @@ export default function ConfigPage() {
   const [updateChannel, setUpdateChannel] = useState<UpdateReleaseChannel>(
     getUpdateReleaseChannel(),
   );
+  const [previewLoadFailed, setPreviewLoadFailed] = useState<
+    Partial<Record<BrandPreviewKey, boolean>>
+  >({});
 
   // 权限检查
   useEffect(() => {
@@ -288,6 +316,10 @@ export default function ConfigPage() {
 
     setConfigs(newConfigs);
 
+    if (isBrandPreviewKey(key)) {
+      setPreviewLoadFailed((prev) => ({ ...prev, [key]: false }));
+    }
+
     const hasChangesNow =
       Object.keys(newConfigs).some(
         (k) => newConfigs[k] !== originalConfigs[k],
@@ -319,8 +351,11 @@ export default function ConfigPage() {
         setOriginalConfigs({ ...configs });
         setHasChanges(false);
 
-        // 如果应用名称发生变化，立即更新网站配置
-        if (changedKeys.includes("app_name")) {
+        if (
+          changedKeys.some((key) =>
+            ["app_name", "app_logo", "app_favicon"].includes(key),
+          )
+        ) {
           await updateSiteConfig();
         }
 
@@ -349,6 +384,78 @@ export default function ConfigPage() {
     return configs[item.dependsOn] === item.dependsValue;
   };
 
+  const renderBrandPreview = (key: BrandPreviewKey) => {
+    const previewUrl = (configs[key] || "").trim();
+    const appNamePreview = (configs.app_name || "").trim() || "应用名称";
+    const failed = previewLoadFailed[key] === true;
+    const showImage = previewUrl.length > 0 && !failed;
+
+    return (
+      <div className="mt-3 rounded-lg border border-default-200 dark:border-default-100/30 bg-default-50/60 dark:bg-default-100/10 p-3">
+        <p className="text-xs text-default-500">实时预览</p>
+        <div className="mt-2 rounded-md border border-default-200 dark:border-default-100/30 bg-white dark:bg-black px-3 py-2">
+          {key === "app_logo" ? (
+            <div className="flex h-10 items-center gap-2">
+              {showImage ? (
+                <img
+                  alt="logo preview"
+                  className="h-7 w-7 rounded-sm border border-default-200 object-cover dark:border-default-100/30"
+                  src={previewUrl}
+                  onError={() =>
+                    setPreviewLoadFailed((prev) => ({ ...prev, [key]: true }))
+                  }
+                  onLoad={() =>
+                    setPreviewLoadFailed((prev) => ({ ...prev, [key]: false }))
+                  }
+                />
+              ) : (
+                <div className="flex h-7 w-7 items-center justify-center rounded-sm bg-default-200 text-[10px] font-semibold text-default-600 dark:bg-default-700 dark:text-default-200">
+                  LOGO
+                </div>
+              )}
+              <span className="truncate text-sm font-semibold text-foreground">
+                {appNamePreview}
+              </span>
+            </div>
+          ) : (
+            <div className="flex h-7 max-w-[260px] items-center gap-2 rounded border border-default-200 bg-default-100/70 px-2 dark:border-default-100/30 dark:bg-default-100/20">
+              {showImage ? (
+                <img
+                  alt="favicon preview"
+                  className="h-4 w-4 rounded-sm object-contain"
+                  src={previewUrl}
+                  onError={() =>
+                    setPreviewLoadFailed((prev) => ({ ...prev, [key]: true }))
+                  }
+                  onLoad={() =>
+                    setPreviewLoadFailed((prev) => ({ ...prev, [key]: false }))
+                  }
+                />
+              ) : (
+                <div className="h-4 w-4 rounded-sm bg-default-300 dark:bg-default-600" />
+              )}
+              <span className="truncate text-xs text-default-700 dark:text-default-300">
+                {appNamePreview}
+              </span>
+            </div>
+          )}
+        </div>
+
+        {previewUrl.length === 0 ? (
+          <p className="mt-2 text-xs text-default-500">
+            输入图片 URL 后会实时显示预览
+          </p>
+        ) : null}
+
+        {previewUrl.length > 0 && failed ? (
+          <p className="mt-2 text-xs text-danger">
+            图片加载失败，请检查图片地址是否可访问
+          </p>
+        ) : null}
+      </div>
+    );
+  };
+
   // 渲染不同类型的配置项
   const renderConfigItem = (item: ConfigItem) => {
     const isChanged =
@@ -357,19 +464,22 @@ export default function ConfigPage() {
     switch (item.type) {
       case "input":
         return (
-          <Input
-            classNames={{
-              input: "text-sm",
-              inputWrapper: isChanged
-                ? "border-warning-300 data-[hover=true]:border-warning-400"
-                : "",
-            }}
-            placeholder={item.placeholder}
-            size="md"
-            value={configs[item.key] || ""}
-            variant="bordered"
-            onChange={(e) => handleConfigChange(item.key, e.target.value)}
-          />
+          <>
+            <Input
+              classNames={{
+                input: "text-sm",
+                inputWrapper: isChanged
+                  ? "border-warning-300 data-[hover=true]:border-warning-400"
+                  : "",
+              }}
+              placeholder={item.placeholder}
+              size="md"
+              value={configs[item.key] || ""}
+              variant="bordered"
+              onChange={(e) => handleConfigChange(item.key, e.target.value)}
+            />
+            {isBrandPreviewKey(item.key) ? renderBrandPreview(item.key) : null}
+          </>
         );
 
       case "switch":

vite-frontend/src/pages/forward.tsx

@@ -2349,7 +2349,6 @@ export default function ForwardPage() {
 
                   <Select
                     label="限速规则"
-                    placeholder="请选择限速规则"
                     selectedKeys={
                       selectedSpeedId !== null
                         ? [selectedSpeedId.toString()]

vite-frontend/src/pages/tunnel.tsx

@@ -293,37 +293,10 @@ export default function TunnelPage() {
     }));
   };
 
-  // 添加节点到指定的转发链跳数
-  const addNodeToChain = (groupIndex: number, nodeId: number) => {
-    setForm((prev) => {
-      const chainNodes = [...(prev.chainNodes || [])];
-      const group = chainNodes[groupIndex] || [];
-
-      // 获取当前组的策略和协议
-      const strategy = group.length > 0 ? group[0].strategy : "round";
-      const protocol = group.length > 0 ? group[0].protocol : "tls";
-
-      // 添加节点到该组
-      chainNodes[groupIndex] = [
-        ...group,
-        { nodeId, chainType: 2, protocol, strategy },
-      ];
-
-      return { ...prev, chainNodes };
-    });
-  };
-
-  // 从某一跳删除指定节点
-  const removeNodeFromChain = (groupIndex: number, nodeId: number) => {
-    setForm((prev) => {
-      const chainNodes = [...(prev.chainNodes || [])];
-
-      chainNodes[groupIndex] = (chainNodes[groupIndex] || []).filter(
-        (node) => node.nodeId !== nodeId,
-      );
-
-      return { ...prev, chainNodes };
-    });
+  const toSelectedNodeIds = (keys: Iterable<unknown>): number[] => {
+    return Array.from(keys)
+      .map((key) => Number.parseInt(String(key), 10))
+      .filter((nodeId) => Number.isFinite(nodeId));
   };
 
   // 更新某一跳的所有节点的协议
@@ -381,6 +354,36 @@ export default function TunnelPage() {
     return [...kept, ...added];
   };
 
+  const syncChainGroupNodes = (
+    groupIndex: number,
+    selectedNodeIds: number[],
+  ) => {
+    setForm((prev) => {
+      const chainNodes = [...(prev.chainNodes || [])];
+      const currentGroup = chainNodes[groupIndex] || [];
+      const protocol = currentGroup[0]?.protocol || "tls";
+      const strategy = currentGroup[0]?.strategy || "round";
+      const realNodes = currentGroup.filter((node) => node.nodeId !== -1);
+      const mergedNodes = mergeOrderedNodes(
+        realNodes,
+        selectedNodeIds,
+        (nodeId) => ({
+          nodeId,
+          chainType: 2,
+          protocol,
+          strategy,
+        }),
+      );
+
+      chainNodes[groupIndex] =
+        mergedNodes.length > 0
+          ? mergedNodes
+          : [{ nodeId: -1, chainType: 2, protocol, strategy }];
+
+      return { ...prev, chainNodes };
+    });
+  };
+
   // 提交表单
   const handleSubmit = async () => {
     if (!validateForm()) return;
@@ -1253,16 +1256,16 @@ export default function TunnelPage() {
                       selectionMode="multiple"
                       variant="bordered"
                       onSelectionChange={(keys) => {
-                        const selectedIds = Array.from(keys).map((key) =>
-                          parseInt(key as string),
-                        );
-                        const newInNodeId = mergeOrderedNodes(
-                          form.inNodeId,
-                          selectedIds,
-                          (nodeId) => ({ nodeId, chainType: 1 }),
-                        );
+                        const selectedIds = toSelectedNodeIds(keys);
 
-                        setForm((prev) => ({ ...prev, inNodeId: newInNodeId }));
+                        setForm((prev) => ({
+                          ...prev,
+                          inNodeId: mergeOrderedNodes(
+                            prev.inNodeId,
+                            selectedIds,
+                            (nodeId) => ({ nodeId, chainType: 1 }),
+                          ),
+                        }));
                       }}
                     >
                       {nodes.map((node) => (
@@ -1431,37 +1434,10 @@ export default function TunnelPage() {
                                       size="sm"
                                       variant="bordered"
                                       onSelectionChange={(keys) => {
-                                        const selectedIds = Array.from(
-                                          keys,
-                                        ).map((key) => parseInt(key as string));
-                                        const currentNodes = groupNodes.filter(
-                                          (ct) => ct.nodeId !== -1,
+                                        syncChainGroupNodes(
+                                          groupIndex,
+                                          toSelectedNodeIds(keys),
                                         );
-
-                                        // 找出新增的节点
-                                        const currentNodeIds = currentNodes.map(
-                                          (ct) => ct.nodeId,
-                                        );
-                                        const addedIds = selectedIds.filter(
-                                          (id) => !currentNodeIds.includes(id),
-                                        );
-                                        const removedIds =
-                                          currentNodeIds.filter(
-                                            (id) => !selectedIds.includes(id),
-                                          );
-
-                                        // 添加新节点
-                                        addedIds.forEach((nodeId) => {
-                                          addNodeToChain(groupIndex, nodeId);
-                                        });
-
-                                        // 删除取消选择的节点
-                                        removedIds.forEach((nodeId) => {
-                                          removeNodeFromChain(
-                                            groupIndex,
-                                            nodeId,
-                                          );
-                                        });
                                       }}
                                     >
                                       {nodes.map((node) => (
@@ -1652,38 +1628,32 @@ export default function TunnelPage() {
                             selectionMode="multiple"
                             variant="bordered"
                             onSelectionChange={(keys) => {
-                              const selectedIds = Array.from(keys).map((key) =>
-                                parseInt(key as string),
-                              );
-                              const currentOutNodes = form.outNodeId || [];
+                              const selectedIds = toSelectedNodeIds(keys);
 
-                              let protocol = "tls";
-                              let strategy = "round";
+                              setForm((prev) => {
+                                const currentOutNodes = prev.outNodeId || [];
+                                const protocol =
+                                  currentOutNodes[0]?.protocol || "tls";
+                                const strategy =
+                                  currentOutNodes[0]?.strategy || "round";
+                                const realNodes = currentOutNodes.filter(
+                                  (ct) => ct.nodeId !== -1,
+                                );
 
-                              if (currentOutNodes.length > 0) {
-                                protocol = currentOutNodes[0].protocol || "tls";
-                                strategy =
-                                  currentOutNodes[0].strategy || "round";
-                              }
-
-                              const realNodes = currentOutNodes.filter(
-                                (ct) => ct.nodeId !== -1,
-                              );
-                              const newOutNodeId = mergeOrderedNodes(
-                                realNodes,
-                                selectedIds,
-                                (nodeId) => ({
-                                  nodeId,
-                                  chainType: 3,
-                                  protocol,
-                                  strategy,
-                                }),
-                              );
-
-                              setForm((prev) => ({
-                                ...prev,
-                                outNodeId: newOutNodeId,
-                              }));
+                                return {
+                                  ...prev,
+                                  outNodeId: mergeOrderedNodes(
+                                    realNodes,
+                                    selectedIds,
+                                    (nodeId) => ({
+                                      nodeId,
+                                      chainType: 3,
+                                      protocol,
+                                      strategy,
+                                    }),
+                                  ),
+                                };
+                              });
                             }}
                           >
                             {nodes.map((node) => (

vite-frontend/src/shadcn-bridge/heroui/select.tsx

@@ -228,11 +228,14 @@ export function Select<T>({
 
   const selectedArray = Array.from(selected);
   const singleValue = selectedArray[0] ?? "";
-  const selectedLabels = options
-    .filter((option) => selected.has(option.key))
-    .map((option) => option.label);
-  const resolvedSelectedValues =
-    selectedLabels.length > 0 ? selectedLabels : selectedArray;
+  const optionLabelMap = React.useMemo(() => {
+    return new Map(options.map((option) => [option.key, option.label]));
+  }, [options]);
+  const resolvedSelectedValues = selectedArray.map((key) => {
+    const keyText = String(key);
+
+    return optionLabelMap.get(keyText) ?? keyText;
+  });
   const selectedFullText = resolvedSelectedValues.join("、");
   const selectedText =
     selectedArray.length > 0 ? selectedFullText : (placeholder ?? "请选择");