From f38d640ac43f67cb1063e6a8af9f026637a74616 Mon Sep 17 00:00:00 2001
From: SerinaNya <34389622+SerinaNya@users.noreply.github.com>
Date: Wed, 26 Aug 2026 19:42:20 +0800
Subject: [PATCH] feat(settings): use webListen URI format for Web API address
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- rename webPort field/label to webListen (Web API 监听地址)
- seed initial form state from webListen with legacy webPort fallback
- save webListen URI string while deriving legacy webPort integer for
  backend compatibility
---
 src/pages/settings.tsx | 29 ++++++++++++++++++++---------
 src/types/api.ts       |  1 +
 2 files changed, 21 insertions(+), 9 deletions(-)

diff --git a/src/pages/settings.tsx b/src/pages/settings.tsx
index 38b058f..ce56260 100644
--- a/src/pages/settings.tsx
+++ b/src/pages/settings.tsx
@@ -151,6 +151,9 @@ function SettingsForm({
     ...initialConfig,
     TCPListen: toAddrString(initialConfig.TCPListen),
     UDPListen: toAddrString(initialConfig.UDPListen),
+    webListen:
+      initialConfig.webListen ??
+      (initialConfig.webPort ? `http://0.0.0.0:${initialConfig.webPort}` : 'http://0.0.0.0:4665'),
   }))
   const [tunEnabled, setTunEnabled] = useState<boolean>(() =>
     initialConfig.enableTUN ??
@@ -209,9 +212,19 @@ function SettingsForm({
       form.denyConnectionBroadcast ??
       form.denyLineTableBroadcast ??
       false
+    const webListen = form.webListen?.trim() || 'http://0.0.0.0:4665'
+    let webPort = 4665
+    try {
+      const parsedPort = new URL(webListen).port
+      if (parsedPort) webPort = parseInt(parsedPort, 10)
+    } catch {
+      // Java backend validates the canonical listen address.
+    }
 
     const updatedConfig: Record<string, unknown> = {
       ...form,
+      webListen,
+      webPort,
       externalEndpoints: updatedExternalEndpoints,
       openConnections: updatedExternalEndpoints,
       autoConnections: updatedAutoConnections,
@@ -485,23 +498,21 @@ function SettingsForm({
                 )}
 
                 <Field>
-                  <FieldLabel htmlFor="webPort">Web 控制台端口</FieldLabel>
+                  <FieldLabel htmlFor="webListen">Web API 监听地址</FieldLabel>
                   <Input
-                    id="webPort"
-                    type="number"
-                    min={1}
-                    max={65535}
-                    placeholder="4665"
-                    value={form.webPort ?? 4665}
+                    id="webListen"
+                    type="text"
+                    placeholder="http://0.0.0.0:4665"
+                    value={form.webListen ?? 'http://0.0.0.0:4665'}
                     onChange={(e) =>
                       setForm((prev) => ({
                         ...prev,
-                        webPort: parseInt(e.target.value) || 4665,
+                        webListen: e.target.value,
                       }))
                     }
                   />
                   <FieldDescription>
-                    Web API 与前端仪表盘托管监听端口（默认 4665）
+                    Web API 与前端仪表盘托管监听地址（默认 http://0.0.0.0:4665）
                   </FieldDescription>
                 </Field>
 
diff --git a/src/types/api.ts b/src/types/api.ts
index d6a7fc9..086dc19 100644
--- a/src/types/api.ts
+++ b/src/types/api.ts
@@ -109,6 +109,7 @@ export interface KLALBControllerConfig {
   enableTUN?: boolean
   TUNName?: string | null
   webUI?: boolean
+  webListen?: string
   webPort?: number
   nogui?: boolean
   TCPListen?: string