fix: 优化高级配置 MQTT 连接失败提示

client/src/sections/wuyuanbiaoba/hooks/useAdvancedSettings.js

@@ -68,11 +68,23 @@ const DEFAULT_SETTINGS = {
    }
 };
 
+const SAVE_RESPONSE_TIMEOUT = 10 * 1000;
+
+const SAVE_ITEMS = {
+   setId: '设备编码',
+   setDataFps: '数据帧率',
+   setAlert: '异常监控配置',
+   setWin: '滤波配置',
+   setMqtt: 'MQTT 配置'
+};
+
+const MQTT_CONNECT_WARNING = '配置已保存，但 MQTT Broker 连接失败，请检查网络、Broker 地址和端口';
+
 /**
  * 高级配置管理 Hook
  */
 const useAdvancedSettings = () => {
-   const { isConnected, isReady, sendMessage } = useWebSocket();
+   const { isConnected, isReady, sendMessage, subscribe } = useWebSocket();
 
    // 配置状态
    const [settings, setSettings] = useState(DEFAULT_SETTINGS);
@@ -221,7 +233,7 @@ const useAdvancedSettings = () => {
          if (setMqttResponse.values.operate) {
 
          } else {
-            message.error('MQTT 配置设置失败');
+            console.warn('MQTT 配置已保存，但 Broker 连接失败:', setMqttResponse.values);
          }
       }
    }, [setMqttResponse]);
@@ -358,6 +370,139 @@ const useAdvancedSettings = () => {
       return sendCommand('setMqtt', { enable, mqtt });
    }, [sendCommand]);
 
+   const sendAndWaitOperate = useCallback((cmd, values = {}, timeout = SAVE_RESPONSE_TIMEOUT) => {
+      return new Promise((resolve) => {
+         let settled = false;
+         const finish = (result) => {
+            if (settled) {
+               return;
+            }
+
+            settled = true;
+            clearTimeout(timer);
+            unsubscribe();
+            resolve(result);
+         };
+
+         const unsubscribe = subscribe('dev', cmd, (response) => {
+            if (response?.values?.operate === undefined || settled) {
+               return;
+            }
+
+            finish({
+               success: response.values.operate === true,
+               cmd,
+               label: SAVE_ITEMS[cmd] || cmd,
+               values: response.values,
+               response
+            });
+         });
+
+         const timer = setTimeout(() => {
+            finish({
+               success: false,
+               timeout: true,
+               cmd,
+               label: SAVE_ITEMS[cmd] || cmd
+            });
+         }, timeout);
+
+         const sent = sendCommand(cmd, values);
+         if (!sent) {
+            finish({
+               success: false,
+               cmd,
+               label: SAVE_ITEMS[cmd] || cmd
+            });
+         }
+      });
+   }, [sendCommand, subscribe]);
+
+   const validateSaveSettings = useCallback(() => {
+      if (!settings.deviceId || !settings.deviceId.trim()) {
+         message.warning('请输入设备编码');
+         return false;
+      }
+
+      if (settings.dataFps < 1 || settings.dataFps > 30) {
+         message.warning('数据帧率范围为 1-30 Hz');
+         return false;
+      }
+
+      const { enable, mqtt } = settings.mqttConfig || {};
+      if (enable) {
+         if (!mqtt?.broker || !mqtt.broker.trim()) {
+            message.warning('请输入 Broker 地址');
+            return false;
+         }
+         if (!mqtt.port) {
+            message.warning('请输入端口号');
+            return false;
+         }
+         if (!mqtt.topic || !mqtt.topic.trim()) {
+            message.warning('请输入 Topic');
+            return false;
+         }
+         if (!mqtt.client_id || !mqtt.client_id.trim()) {
+            message.warning('请输入 Client ID');
+            return false;
+         }
+      }
+
+      return true;
+   }, [settings]);
+
+   const reportSaveFailure = useCallback((result) => {
+      if (result?.timeout) {
+         message.error(`${result.label}保存超时，设备未返回确认`);
+         return;
+      }
+
+      message.error(`${result?.label || '配置'}保存失败`);
+   }, []);
+
+   const reportMqttConnectWarning = useCallback((result) => {
+      const detail = result?.values?.message || result?.values?.reason;
+      message.warning(detail ? `${MQTT_CONNECT_WARNING}：${detail}` : MQTT_CONNECT_WARNING);
+   }, []);
+
+   const buildSaveCommands = useCallback(() => {
+      return [
+         {
+            cmd: 'setId',
+            values: { id: settings.deviceId }
+         },
+         {
+            cmd: 'setDataFps',
+            values: { dataFps: settings.dataFps }
+         },
+         {
+            cmd: 'setAlert',
+            values: {
+               enable: settings.alertConfig.enable,
+               intervalSec: settings.alertConfig.intervalSec
+            }
+         },
+         {
+            cmd: 'setWin',
+            values: {
+               enable: settings.filterConfig.enable,
+               method: settings.filterConfig.method,
+               size: settings.filterConfig.size,
+               threshold: settings.filterConfig.threshold,
+               imgThreshold: settings.filterConfig.imgThreshold
+            }
+         },
+         {
+            cmd: 'setMqtt',
+            values: {
+               enable: settings.mqttConfig.enable,
+               mqtt: settings.mqttConfig.mqtt
+            }
+         }
+      ];
+   }, [settings]);
+
    /**
     * 获取所有配置
     */
@@ -405,24 +550,31 @@ const useAdvancedSettings = () => {
          message.info('连接正在建立中，指令已加入队列...');
       }
 
-      // 依次发送所有设置命令，并收集每项的结果
-      const results = [];
-      results.push(await updateDeviceId(settings.deviceId));
-      results.push(await new Promise(resolve => setTimeout(() => resolve(updateDataFps(settings.dataFps)), 100)));
-      results.push(await new Promise(resolve => setTimeout(() => resolve(updateAlertConfig(settings.alertConfig)), 200)));
-      results.push(await new Promise(resolve => setTimeout(() => resolve(updateFilterConfig(settings.filterConfig)), 300)));
-      results.push(await new Promise(resolve => setTimeout(() => resolve(updateMqttConfig(settings.mqttConfig)), 400)));
-
-      // 判断是否全部成功
-      const allSuccess = results.every(r => r !== false);
-      if (allSuccess) {
-         message.success('保存成功');
-         return true;
-      } else {
-         message.error('保存失败');
+      if (!validateSaveSettings()) {
          return false;
       }
-   }, [isConnected, isReady, settings, updateDeviceId, updateDataFps, updateAlertConfig, updateFilterConfig, updateMqttConfig]);
+
+      const commands = buildSaveCommands();
+      let mqttConnectWarning = null;
+      for (const command of commands) {
+         const result = await sendAndWaitOperate(command.cmd, command.values);
+         if (!result.success) {
+            if (result.cmd === 'setMqtt' && !result.timeout) {
+               mqttConnectWarning = result;
+               continue;
+            }
+            reportSaveFailure(result);
+            return false;
+         }
+      }
+
+      if (mqttConnectWarning) {
+         reportMqttConnectWarning(mqttConnectWarning);
+      } else {
+         message.success('保存成功');
+      }
+      return true;
+   }, [isConnected, isReady, validateSaveSettings, buildSaveCommands, sendAndWaitOperate, reportSaveFailure, reportMqttConnectWarning]);
 
    /**
     * 重置配置到默认值

package.json

@@ -1,6 +1,6 @@
 {
    "name": "wuyuanbiaoba-web",
-   "version": "1.1.3",
+   "version": "1.1.4",
    "main": "index.html",
    "scripts": {
       "test": "echo \"Error: no test specified\" && exit 1",