feat: 添加 IP 和端口验证功能，优化 MQTT 设置的输入校验

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 }}>