update pay ui

src/views/StockOverview/components/FlexScreen/hooks/useRealtimeQuote.ts

@@ -402,59 +402,77 @@ export const useRealtimeQuote = (codes: string[] = []): UseRealtimeQuoteReturn =
   }, []);
 
   const createConnection = useCallback((exchange: Exchange) => {
+    // 检查是否是 HTTPS 页面尝试连接 ws://（Mixed Content）
+    const isHttps = typeof window !== 'undefined' && window.location.protocol === 'https:';
+    const wsUrl = WS_CONFIG[exchange];
+    const isInsecureWs = wsUrl.startsWith('ws://');
+
+    if (isHttps && isInsecureWs) {
+      logger.warn(
+        'FlexScreen',
+        `${exchange} WebSocket 连接被跳过：HTTPS 页面无法连接不安全的 ws:// 端点`
+      );
+      return;
+    }
+
     if (wsRefs.current[exchange]) {
       wsRefs.current[exchange]!.close();
     }
 
-    const ws = new WebSocket(WS_CONFIG[exchange]);
-    wsRefs.current[exchange] = ws;
+    try {
+      const ws = new WebSocket(wsUrl);
+      wsRefs.current[exchange] = ws;
 
-    ws.onopen = () => {
-      logger.info('FlexScreen', `${exchange} WebSocket 已连接`);
-      setConnected(prev => ({ ...prev, [exchange]: true }));
+      ws.onopen = () => {
+        logger.info('FlexScreen', `${exchange} WebSocket 已连接`);
+        setConnected(prev => ({ ...prev, [exchange]: true }));
 
-      if (exchange === 'SSE') {
-        const codes = Array.from(subscribedCodes.current.SSE);
-        if (codes.length > 0) {
-          ws.send(JSON.stringify({
-            action: 'subscribe',
-            channels: ['stock', 'index'],
-            codes,
-          }));
-        }
-      }
-
-      startHeartbeat(exchange);
-    };
-
-    ws.onmessage = (event: MessageEvent) => {
-      try {
-        const msg = JSON.parse(event.data);
-        handleMessage(exchange, msg);
-      } catch (e) {
-        logger.warn('FlexScreen', `${exchange} 消息解析失败`, e);
-      }
-    };
-
-    ws.onerror = (error: Event) => {
-      logger.error('FlexScreen', `${exchange} WebSocket 错误`, error);
-    };
-
-    ws.onclose = () => {
-      logger.info('FlexScreen', `${exchange} WebSocket 断开`);
-      setConnected(prev => ({ ...prev, [exchange]: false }));
-      stopHeartbeat(exchange);
-
-      // 自动重连
-      if (!reconnectRefs.current[exchange] && subscribedCodes.current[exchange].size > 0) {
-        reconnectRefs.current[exchange] = setTimeout(() => {
-          reconnectRefs.current[exchange] = null;
-          if (subscribedCodes.current[exchange].size > 0) {
-            createConnection(exchange);
+        if (exchange === 'SSE') {
+          const codes = Array.from(subscribedCodes.current.SSE);
+          if (codes.length > 0) {
+            ws.send(JSON.stringify({
+              action: 'subscribe',
+              channels: ['stock', 'index'],
+              codes,
+            }));
           }
-        }, RECONNECT_INTERVAL);
-      }
-    };
+        }
+
+        startHeartbeat(exchange);
+      };
+
+      ws.onmessage = (event: MessageEvent) => {
+        try {
+          const msg = JSON.parse(event.data);
+          handleMessage(exchange, msg);
+        } catch (e) {
+          logger.warn('FlexScreen', `${exchange} 消息解析失败`, e);
+        }
+      };
+
+      ws.onerror = (error: Event) => {
+        logger.error('FlexScreen', `${exchange} WebSocket 错误`, error);
+      };
+
+      ws.onclose = () => {
+        logger.info('FlexScreen', `${exchange} WebSocket 断开`);
+        setConnected(prev => ({ ...prev, [exchange]: false }));
+        stopHeartbeat(exchange);
+
+        // 自动重连（仅在非 HTTPS + ws:// 场景下）
+        if (!reconnectRefs.current[exchange] && subscribedCodes.current[exchange].size > 0) {
+          reconnectRefs.current[exchange] = setTimeout(() => {
+            reconnectRefs.current[exchange] = null;
+            if (subscribedCodes.current[exchange].size > 0) {
+              createConnection(exchange);
+            }
+          }, RECONNECT_INTERVAL);
+        }
+      };
+    } catch (e) {
+      logger.error('FlexScreen', `${exchange} WebSocket 连接失败`, e);
+      setConnected(prev => ({ ...prev, [exchange]: false }));
+    }
   }, [startHeartbeat, stopHeartbeat, handleMessage]);
 
   const subscribe = useCallback((code: string) => {