From fdeeed2b8e6be6aaf32734e296e29ef909db1add Mon Sep 17 00:00:00 2001
From: qinjian <qin.jian@free-sun.com.cn>
Date: Thu, 25 Dec 2025 13:37:33 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E6=B7=BB=E5=8A=A0=20IP=20=E5=92=8C?=
 =?UTF-8?q?=E7=AB=AF=E5=8F=A3=E9=AA=8C=E8=AF=81=E5=8A=9F=E8=83=BD=EF=BC=8C?=
 =?UTF-8?q?=E4=BC=98=E5=8C=96=20MQTT=20=E8=AE=BE=E7=BD=AE=E7=9A=84?=
 =?UTF-8?q?=E8=BE=93=E5=85=A5=E6=A0=A1=E9=AA=8C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/AdvancedSettings.jsx           | 61 ++++++++++++++++++-
 1 file changed, 58 insertions(+), 3 deletions(-)

diff --git a/client/src/sections/wuyuanbiaoba/components/AdvancedSettings.jsx b/client/src/sections/wuyuanbiaoba/components/AdvancedSettings.jsx
index 7a61947..b96f9f6 100644
--- a/client/src/sections/wuyuanbiaoba/components/AdvancedSettings.jsx
+++ b/client/src/sections/wuyuanbiaoba/components/AdvancedSettings.jsx
@@ -52,6 +52,27 @@ const AdvancedSettings = ({ onLogout }) => {
       }
    }, [isReady, fetchAllSettings]);
 
+   // IP 地址验证函数
+   const validateIP = (ip) => {
+      if (!ip) return true; // 允许空值
+      const ipRegex = /^((25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.){3}(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)$/;
+
+      // 如果匹配 IP 格式（包含点分十进制），则严格按 IP 验证
+      if (/^\d+\.\d+\.\d+\.\d+$/.test(ip)) {
+         return ipRegex.test(ip);
+      }
+
+      // 否则按域名验证
+      const domainRegex = /^[a-zA-Z0-9]([a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?(\.[a-zA-Z0-9]([a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?)*$/;
+      return domainRegex.test(ip);
+   };
+
+   // 端口验证函数
+   const validatePort = (port) => {
+      const portNum = Number(port);
+      return !isNaN(portNum) && portNum >= 1 && portNum <= 65535;
+   };
+
    // 从 settings 中提取配置
    const deviceId = settings.deviceId;
    const fps = settings.dataFps;
@@ -183,6 +204,20 @@ const AdvancedSettings = ({ onLogout }) => {
       });
 
    const handleSave = () => {
+      if (enableMqtt) {
+         if (brokerAddress && !validateIP(brokerAddress)) {
+            message.error('Broker 地址格式不正确，请检查后重试');
+            return;
+         }
+         if (mqttPort && !validatePort(mqttPort)) {
+            message.error('端口号格式不正确，请检查后重试');
+            return;
+         }
+         if (!brokerAddress) {
+            message.warning('启用 MQTT 时请填写 Broker 地址');
+            return;
+         }
+      }
       saveAllSettings();
    };
 
@@ -543,19 +578,30 @@ const AdvancedSettings = ({ onLogout }) => {
                      <Col span={12}>
                         <div style={{ marginBottom: 4, fontWeight: 500 }}>
                            Broker Address
+                           <Text type="danger"> *</Text>
                         </div>
                         <Input
                            value={brokerAddress}
                            onChange={(e) => setBrokerAddress(e.target.value)}
-                           placeholder="例如: 218.3.126.49"
+                           placeholder="例如: 218.3.126.49 或 mqtt.example.com"
                            size="large"
                            disabled={!enableMqtt}
-                           style={{ borderRadius: 8 }}
+                           style={{
+                              borderRadius: 8,
+                              borderColor: brokerAddress && !validateIP(brokerAddress) ? '#ff4d4f' : undefined
+                           }}
+                           status={brokerAddress && !validateIP(brokerAddress) ? 'error' : undefined}
                         />
+                        {brokerAddress && !validateIP(brokerAddress) && (
+                           <Text type="danger" style={{ fontSize: 12 }}>
+                              请输入有效的 IPv4 地址
+                           </Text>
+                        )}
                      </Col>
                      <Col span={8}>
                         <div style={{ marginBottom: 4, fontWeight: 500 }}>
                            Port
+                           <Text type="danger"> *</Text>
                         </div>
                         <Input
                            value={mqttPort}
@@ -563,8 +609,17 @@ const AdvancedSettings = ({ onLogout }) => {
                            placeholder="1883"
                            size="large"
                            disabled={!enableMqtt}
-                           style={{ borderRadius: 8 }}
+                           style={{
+                              borderRadius: 8,
+                              borderColor: mqttPort && !validatePort(mqttPort) ? '#ff4d4f' : undefined
+                           }}
+                           status={mqttPort && !validatePort(mqttPort) ? 'error' : undefined}
                         />
+                        {mqttPort && !validatePort(mqttPort) && (
+                           <Text type="danger" style={{ fontSize: 12 }}>
+                              端口范围: 1-65535
+                           </Text>
+                        )}
                      </Col>
                      <Col span={12}>
                         <div style={{ marginBottom: 4, fontWeight: 500 }}>