@beppla/tapas-ui 1.4.35 → 1.5.2

package/commonjs/WebViewBridge/WebViewBridge.js

@@ -0,0 +1,975 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.handleNativeWebViewMessage = exports.default = exports.createWebViewInjectedScript = exports.WebViewBridge = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _reactNative = require("react-native");
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
+/**
+ * WebViewBridge - WebView/iframe 通信桥接组件
+ * 
+ * 用于 RN Web 模块与 tapas-sys 底座之间的通信
+ * - Android/iOS: 使用 WebView postMessage/onMessage
+ * - Web: 使用 iframe window.postMessage/onMessage
+ * 
+ * 自动检测运行环境并适配相应的通信方式
+ */
+
+/** Extended Window interface for React Native WebView bridge */
+
+/**
+ * tapas-sys 消息格式
+ */
+
+/**
+ * 检测当前运行环境
+ */
+const detectEnvironment = () => {
+  if (typeof window === 'undefined') {
+    return 'unknown';
+  }
+  try {
+    // 🔧 修复：使用与 checkRunningPlatform 完全一致的逻辑
+    // 1. 首先检查是否是 iframe
+    const isIframe = window.self !== window.top;
+    if (isIframe) {
+      return 'iframe';
+    }
+
+    // 2. 然后检查是否是 WebView（通过 userAgent）
+    const isWebView = /WebView|wv/i.test(navigator.userAgent);
+    if (isWebView) {
+      return 'webview';
+    }
+
+    // 3. 如果是 React Native 环境（非 Web），默认是 webview
+    if (_reactNative.Platform.OS !== 'web') {
+      return 'webview';
+    }
+
+    // 4. 默认 Web 环境视为 browser，但这里我们返回 'iframe' 以保持兼容性
+    return 'iframe';
+  } catch (e) {
+    // 错误时，如果是 React Native 环境，默认是 webview
+    if (_reactNative.Platform.OS !== 'web') {
+      return 'webview';
+    }
+    return 'iframe';
+  }
+};
+
+/**
+ * WebViewBridge 组件
+ */
+/**
+ * Base64 编码/解码工具函数
+ * 符合 tapas-sys 的解析格式
+ */
+const encodeBase64 = str => {
+  try {
+    // 浏览器环境：使用 btoa
+    if (typeof window !== 'undefined') {
+      // 处理 Unicode 字符
+      return window.btoa(unescape(encodeURIComponent(str)));
+    }
+    // Node.js 环境：使用 Buffer
+    if (typeof Buffer !== 'undefined') {
+      return Buffer.from(str, 'utf-8').toString('base64');
+    }
+    // 降级方案：尝试全局 btoa
+    if (typeof btoa !== 'undefined') {
+      return btoa(unescape(encodeURIComponent(str)));
+    }
+    throw new Error('Base64 编码不可用');
+  } catch (e) {
+    console.warn('WebViewBridge: Base64 编码失败，使用原始字符串', e);
+    return str;
+  }
+};
+const decodeBase64 = str => {
+  try {
+    // 浏览器环境：使用 atob
+    if (typeof window !== 'undefined') {
+      // 处理 Unicode 字符
+      return decodeURIComponent(escape(window.atob(str)));
+    }
+    // Node.js 环境：使用 Buffer
+    if (typeof Buffer !== 'undefined') {
+      return Buffer.from(str, 'base64').toString('utf-8');
+    }
+    // 降级方案：尝试全局 atob
+    if (typeof atob !== 'undefined') {
+      return decodeURIComponent(escape(atob(str)));
+    }
+    throw new Error('Base64 解码不可用');
+  } catch (e) {
+    console.warn('WebViewBridge: Base64 解码失败，返回原始字符串', e);
+    return str;
+  }
+};
+
+/**
+ * 日志工具函数
+ */
+const createLogger = (debug, logLevel) => {
+  const levels = ['none', 'error', 'warn', 'info', 'debug'];
+  const currentLevelIndex = levels.indexOf(logLevel);
+  const shouldLog = level => {
+    const levelIndex = levels.indexOf(level);
+    return levelIndex >= 0 && levelIndex <= currentLevelIndex;
+  };
+  return {
+    error: (...args) => {
+      if (shouldLog('error')) {
+        console.error('[WebViewBridge]', ...args);
+      }
+    },
+    warn: (...args) => {
+      if (shouldLog('warn')) {
+        console.warn('[WebViewBridge]', ...args);
+      }
+    },
+    info: (...args) => {
+      if (shouldLog('info')) {
+        console.log('[WebViewBridge]', ...args);
+      }
+    },
+    debug: (...args) => {
+      if (debug && shouldLog('debug')) {
+        console.log('[WebViewBridge DEBUG]', ...args);
+      }
+    }
+  };
+};
+
+/**
+ * 验证消息来源（origin）
+ */
+const validateOrigin = (origin, allowedOrigins, strictOriginCheck, logger) => {
+  // 如果没有设置 allowedOrigins，不进行验证（开发环境）
+  if (!allowedOrigins || allowedOrigins.length === 0) {
+    logger.debug('Origin 验证已禁用（allowedOrigins 为空）');
+    return true;
+  }
+
+  // 如果没有 origin（某些环境可能没有），根据 strictOriginCheck 决定
+  if (!origin) {
+    if (strictOriginCheck) {
+      logger.warn('消息没有 origin 信息，且 strictOriginCheck=true，拒绝消息');
+      return false;
+    }
+    logger.warn('消息没有 origin 信息，但 strictOriginCheck=false，允许消息');
+    return true;
+  }
+
+  // 检查 origin 是否在白名单中
+  const isAllowed = allowedOrigins.some(allowed => {
+    // 支持通配符匹配（如 'https://*.example.com'）
+    if (allowed.includes('*')) {
+      const pattern = allowed.replace(/\*/g, '.*');
+      const regex = new RegExp(`^${pattern}$`);
+      return regex.test(origin);
+    }
+    return origin === allowed;
+  });
+  if (!isAllowed) {
+    if (strictOriginCheck) {
+      logger.error(`消息来源 ${origin} 不在白名单中，拒绝消息。白名单:`, allowedOrigins);
+      return false;
+    }
+    logger.warn(`消息来源 ${origin} 不在白名单中，但 strictOriginCheck=false，允许消息。白名单:`, allowedOrigins);
+    return true;
+  }
+  logger.debug(`消息来源 ${origin} 验证通过`);
+  return true;
+};
+
+/**
+ * 验证消息的 from 字段
+ */
+const validateFrom = (messageFrom, allowedFrom, logger) => {
+  if (!allowedFrom || allowedFrom.length === 0) {
+    return true;
+  }
+  if (!messageFrom) {
+    logger.warn('消息没有 from 字段，但设置了 allowedFrom，拒绝消息');
+    return false;
+  }
+  const isAllowed = allowedFrom.includes(messageFrom);
+  if (!isAllowed) {
+    logger.warn(`消息 from 字段 ${messageFrom} 不在白名单中，拒绝消息。白名单:`, allowedFrom);
+    return false;
+  }
+  logger.debug(`消息 from 字段 ${messageFrom} 验证通过`);
+  return true;
+};
+const WebViewBridge = exports.WebViewBridge = /*#__PURE__*/(0, _react.forwardRef)(({
+  from,
+  onMessage,
+  onError,
+  initPayload,
+  autoInit = true,
+  initMessageType = 'init',
+  enableBase64 = true,
+  showPlaceholder = true,
+  style,
+  testID,
+  allowedOrigins,
+  strictOriginCheck = false,
+  allowedFrom,
+  messageFilter,
+  debug = false,
+  logLevel = 'warn'
+}, ref) => {
+  const environmentRef = (0, _react.useRef)(detectEnvironment());
+  const messageIdCounterRef = (0, _react.useRef)(0);
+  const initSentRef = (0, _react.useRef)(false);
+  const messageHandlersRef = (0, _react.useRef)(new Map());
+  const loggerRef = (0, _react.useRef)(createLogger(debug, logLevel));
+  const cleanupFunctionsRef = (0, _react.useRef)([]);
+
+  // 更新 logger 当 debug 或 logLevel 改变时
+  (0, _react.useEffect)(() => {
+    loggerRef.current = createLogger(debug, logLevel);
+  }, [debug, logLevel]);
+
+  // 🔧 组件挂载时立即输出日志，确认组件已加载
+  (0, _react.useEffect)(() => {
+    loggerRef.current.info('🚀 [WebViewBridge] 组件已挂载', {
+      from,
+      environment: environmentRef.current,
+      autoInit,
+      debug,
+      logLevel,
+      hasWindow: typeof window !== 'undefined',
+      hasReactNativeWebView: typeof window !== 'undefined' && !!window.ReactNativeWebView
+    });
+  }, []);
+
+  // 生成唯一消息 ID
+  const generateMessageId = (0, _react.useCallback)(() => {
+    messageIdCounterRef.current += 1;
+    return `msg_${Date.now()}_${messageIdCounterRef.current}`;
+  }, []);
+
+  // 将 WebViewMessage 转换为 tapas-sys 格式
+  const convertToTapasSysFormat = (0, _react.useCallback)(message => {
+    const tapasMessage = {
+      operate: message.type,
+      from: message.from
+    };
+
+    // 处理 payload
+    if (message.payload !== undefined && message.payload !== null) {
+      // 如果 payload 是对象且包含 action 字段，提取 action
+      if (typeof message.payload === 'object' && !Array.isArray(message.payload) && 'action' in message.payload) {
+        tapasMessage.action = message.payload.action;
+        // data 包含 payload 的其他字段（排除 action）
+        const {
+          action: _action,
+          ...rest
+        } = message.payload;
+        tapasMessage.data = Object.keys(rest).length > 0 ? rest : undefined;
+      } else {
+        // 否则，整个 payload 作为 data，action 使用 operate
+        tapasMessage.action = message.type;
+        tapasMessage.data = message.payload;
+      }
+    } else {
+      // 如果没有 payload，action 使用 operate
+      tapasMessage.action = message.type;
+    }
+    return tapasMessage;
+  }, []);
+
+  // 将 tapas-sys 格式转换为 WebViewMessage
+  const convertFromTapasSysFormat = (0, _react.useCallback)(tapasMessage => {
+    const message = {
+      type: tapasMessage.operate,
+      from: tapasMessage.from
+    };
+
+    // 构建 payload
+    if (tapasMessage.data !== undefined) {
+      // 如果有 action 且 action 不等于 operate，将 action 合并到 payload
+      if (tapasMessage.action && tapasMessage.action !== tapasMessage.operate) {
+        message.payload = {
+          action: tapasMessage.action,
+          ...(typeof tapasMessage.data === 'object' && tapasMessage.data !== null && !Array.isArray(tapasMessage.data) ? tapasMessage.data : {
+            data: tapasMessage.data
+          })
+        };
+      } else {
+        // 否则直接使用 data 作为 payload
+        message.payload = tapasMessage.data;
+      }
+    } else if (tapasMessage.action && tapasMessage.action !== tapasMessage.operate) {
+      // 只有 action，没有 data
+      message.payload = {
+        action: tapasMessage.action
+      };
+    }
+    return message;
+  }, []);
+
+  // 解析消息（支持 base64 解码）
+  const parseMessage = (0, _react.useCallback)(data => {
+    try {
+      // 尝试 base64 解码
+      let decodedData = data;
+      if (enableBase64) {
+        try {
+          decodedData = decodeBase64(data);
+          loggerRef.current.debug('Base64 解码成功');
+        } catch (e) {
+          // 如果 base64 解码失败，尝试直接解析 JSON
+          // 可能是未加密的消息
+          loggerRef.current.debug('Base64 解码失败，尝试直接解析 JSON', e);
+        }
+      }
+
+      // 解析 JSON
+      const parsed = typeof decodedData === 'string' ? JSON.parse(decodedData) : decodedData;
+
+      // 判断是 tapas-sys 格式还是 WebViewMessage 格式
+      let message;
+      if (parsed.operate !== undefined) {
+        // tapas-sys 格式：{ operate, action, data, from }
+        message = convertFromTapasSysFormat(parsed);
+      } else {
+        // WebViewMessage 格式：{ type, payload, from }
+        message = {
+          type: parsed.type || 'unknown',
+          payload: parsed.payload !== undefined ? parsed.payload : parsed,
+          timestamp: parsed.timestamp || Date.now(),
+          id: parsed.id,
+          from: parsed.from
+        };
+      }
+      loggerRef.current.debug('消息解析成功:', message);
+      return message;
+    } catch (e) {
+      const error = e instanceof Error ? e : new Error(String(e));
+      loggerRef.current.error('消息解析失败', error, '原始数据:', data);
+      if (onError) {
+        onError(error, {
+          type: 'parse'
+        });
+      }
+      return null;
+    }
+  }, [enableBase64, onError, convertFromTapasSysFormat]);
+
+  // 统一消息格式
+  const normalizeMessage = (0, _react.useCallback)(rawMessage => {
+    let data = null;
+
+    // 🔧 修复：优先检查是否是 tapas-sys 格式（{ operate, action, data }）
+    // 这对于 webviewmessage 事件特别重要，因为 event.detail 直接是 tapas-sys 格式
+    if (rawMessage && typeof rawMessage === 'object' && rawMessage.operate !== undefined) {
+      loggerRef.current.debug('检测到 tapas-sys 格式消息，直接转换:', rawMessage);
+      return convertFromTapasSysFormat(rawMessage);
+    }
+
+    // WebView 环境：消息通常在 data 字段中
+    if (environmentRef.current === 'webview') {
+      if (typeof rawMessage === 'string') {
+        data = rawMessage;
+      } else if (rawMessage?.nativeEvent?.data) {
+        data = rawMessage.nativeEvent.data;
+      } else if (rawMessage?.data) {
+        data = rawMessage.data;
+      } else {
+        // 直接是对象：检查是 WebViewMessage 格式
+        return {
+          type: rawMessage?.type || 'unknown',
+          payload: rawMessage?.payload || rawMessage,
+          timestamp: rawMessage?.timestamp || Date.now(),
+          id: rawMessage?.id,
+          from: rawMessage?.from
+        };
+      }
+    } else if (environmentRef.current === 'iframe') {
+      // iframe 环境：消息在 event.data.payload 中（tapas-sys 返回格式：{ source, target, payload }）
+      // 如果 rawMessage 是字符串，说明已经提取了 payload（在 messageHandler 中已处理）
+      if (typeof rawMessage === 'string') {
+        data = rawMessage;
+      } else if (rawMessage?.data?.payload) {
+        // 处理 { source, target, payload } 格式（降级情况）
+        data = rawMessage.data.payload;
+      } else if (rawMessage?.data) {
+        // 降级：直接使用 event.data
+        data = rawMessage.data;
+      } else {
+        // 直接是对象：检查是 WebViewMessage 格式
+        return {
+          type: rawMessage?.type || 'unknown',
+          payload: rawMessage?.payload || rawMessage,
+          timestamp: rawMessage?.timestamp || Date.now(),
+          id: rawMessage?.id,
+          from: rawMessage?.from
+        };
+      }
+    } else {
+      // 未知环境：尝试通用解析
+      return {
+        type: rawMessage?.type || 'unknown',
+        payload: rawMessage?.payload || rawMessage,
+        timestamp: Date.now(),
+        from: rawMessage?.from
+      };
+    }
+
+    // 解析字符串数据
+    if (data) {
+      const parsed = parseMessage(data);
+      if (parsed) {
+        return parsed;
+      }
+    }
+
+    // 降级：返回原始数据
+    return {
+      type: 'raw',
+      payload: data || rawMessage,
+      timestamp: Date.now()
+    };
+  }, [parseMessage, convertFromTapasSysFormat]);
+
+  // 发送消息
+  const sendMessage = (0, _react.useCallback)((type, payload) => {
+    try {
+      const message = {
+        type,
+        payload,
+        timestamp: Date.now(),
+        id: generateMessageId(),
+        from: from // 添加 from 字段
+      };
+      loggerRef.current.debug('准备发送消息（内部格式）:', message);
+
+      // 转换为 tapas-sys 格式
+      const tapasMessage = convertToTapasSysFormat(message);
+      loggerRef.current.debug('转换为 tapas-sys 格式:', tapasMessage);
+
+      // 将消息对象转为 JSON 字符串
+      const messageJson = JSON.stringify(tapasMessage);
+
+      // 根据配置决定是否进行 base64 编码
+      const messageToSend = enableBase64 ? encodeBase64(messageJson) : messageJson;
+      if (typeof window === 'undefined') {
+        const error = new Error('window 对象不存在，无法发送消息');
+        loggerRef.current.error(error.message);
+        if (onError) {
+          onError(error, {
+            type: 'send'
+          });
+        }
+        return false;
+      }
+      let sent = false;
+
+      // 优先尝试 React Native WebView 的 postMessage（适用于 Android/iOS WebView）
+      if (window.ReactNativeWebView) {
+        try {
+          window.ReactNativeWebView.postMessage(messageToSend);
+          loggerRef.current.debug('通过 ReactNativeWebView.postMessage 发送成功');
+          sent = true;
+          return true;
+        } catch (e) {
+          const error = e instanceof Error ? e : new Error(String(e));
+          loggerRef.current.warn('ReactNativeWebView.postMessage 失败', error);
+          if (onError) {
+            onError(error, {
+              type: 'send'
+            });
+          }
+        }
+      }
+
+      // 降级：使用 window.parent.postMessage（适用于 iframe 和 Web WebView）
+      if (!sent && window.parent && window.parent !== window) {
+        try {
+          window.parent.postMessage(messageToSend, '*');
+          loggerRef.current.debug('通过 window.parent.postMessage 发送成功');
+          sent = true;
+          return true;
+        } catch (e) {
+          const error = e instanceof Error ? e : new Error(String(e));
+          loggerRef.current.warn('window.parent.postMessage 失败', error);
+          if (onError) {
+            onError(error, {
+              type: 'send'
+            });
+          }
+        }
+      }
+
+      // 最后尝试：直接使用 window.postMessage（某些特殊场景）
+      if (!sent && typeof window.postMessage === 'function') {
+        try {
+          // 注意：某些浏览器可能不支持直接调用 window.postMessage
+          // 这里仅作为最后的降级方案
+          window.postMessage(messageToSend, '*');
+          loggerRef.current.debug('通过 window.postMessage 发送成功');
+          sent = true;
+          return true;
+        } catch (e) {
+          const error = e instanceof Error ? e : new Error(String(e));
+          loggerRef.current.warn('window.postMessage 失败', error);
+          if (onError) {
+            onError(error, {
+              type: 'send'
+            });
+          }
+        }
+      }
+      if (!sent) {
+        const error = new Error(`所有消息发送方式都失败，当前环境: ${environmentRef.current}`);
+        loggerRef.current.error(error.message);
+        if (onError) {
+          onError(error, {
+            type: 'send'
+          });
+        }
+        return false;
+      }
+      return true;
+    } catch (e) {
+      const error = e instanceof Error ? e : new Error(String(e));
+      loggerRef.current.error('发送消息时发生未知错误', error);
+      if (onError) {
+        onError(error, {
+          type: 'send'
+        });
+      }
+      return false;
+    }
+  }, [generateMessageId, from, enableBase64, onError, convertToTapasSysFormat]);
+
+  // 消息处理函数
+  const handleMessage = (0, _react.useCallback)((rawMessage, eventOrigin) => {
+    try {
+      // Origin 验证（仅 iframe 环境）
+      if (environmentRef.current === 'iframe' && eventOrigin !== undefined) {
+        const isValidOrigin = validateOrigin(eventOrigin, allowedOrigins, strictOriginCheck, loggerRef.current);
+        if (!isValidOrigin) {
+          const error = new Error(`消息来源 ${eventOrigin} 验证失败`);
+          loggerRef.current.error(error.message);
+          if (onError) {
+            onError(error, {
+              type: 'origin'
+            });
+          }
+          return;
+        }
+      }
+      const normalizedMessage = normalizeMessage(rawMessage);
+      if (!normalizedMessage) {
+        loggerRef.current.warn('消息标准化失败，忽略消息');
+        return;
+      }
+
+      // 验证 from 字段
+      if (!validateFrom(normalizedMessage.from, allowedFrom, loggerRef.current)) {
+        loggerRef.current.warn('消息 from 字段验证失败，忽略消息');
+        return;
+      }
+
+      // 消息过滤器
+      if (messageFilter && !messageFilter(normalizedMessage)) {
+        loggerRef.current.debug('消息被过滤器拒绝，忽略消息');
+        return;
+      }
+      loggerRef.current.debug('处理消息:', normalizedMessage);
+
+      // 调用外部监听器
+      if (onMessage) {
+        try {
+          onMessage(normalizedMessage);
+        } catch (e) {
+          const error = e instanceof Error ? e : new Error(String(e));
+          loggerRef.current.error('onMessage 回调执行错误', error);
+          if (onError) {
+            onError(error, {
+              type: 'receive'
+            });
+          }
+        }
+      }
+
+      // 调用注册的处理器
+      messageHandlersRef.current.forEach(handler => {
+        try {
+          handler(normalizedMessage);
+        } catch (e) {
+          const error = e instanceof Error ? e : new Error(String(e));
+          loggerRef.current.error('消息处理器执行错误', error);
+          if (onError) {
+            onError(error, {
+              type: 'receive'
+            });
+          }
+        }
+      });
+    } catch (e) {
+      const error = e instanceof Error ? e : new Error(String(e));
+      loggerRef.current.error('处理消息时发生未知错误', error);
+      if (onError) {
+        onError(error, {
+          type: 'receive'
+        });
+      }
+    }
+  }, [onMessage, normalizeMessage, allowedOrigins, strictOriginCheck, allowedFrom, messageFilter, onError]);
+
+  // 清理函数
+  const cleanup = (0, _react.useCallback)(() => {
+    loggerRef.current.debug('清理所有监听器和资源');
+    cleanupFunctionsRef.current.forEach(cleanupFn => {
+      try {
+        cleanupFn();
+      } catch (e) {
+        loggerRef.current.error('清理函数执行错误', e);
+      }
+    });
+    cleanupFunctionsRef.current = [];
+    messageHandlersRef.current.clear();
+  }, []);
+
+  // 注册消息监听（优化：基于验证通过的 demo 实现）
+  (0, _react.useEffect)(() => {
+    loggerRef.current.info('🔧 [WebViewBridge] 开始注册消息监听器', {
+      environment: environmentRef.current,
+      hasWindow: typeof window !== 'undefined',
+      hasReactNativeWebView: typeof window !== 'undefined' && !!window.ReactNativeWebView
+    });
+    if (typeof window === 'undefined') {
+      loggerRef.current.warn('⚠️ [WebViewBridge] window 不存在，无法注册监听器');
+      return;
+    }
+    const cleanupFunctions = [];
+
+    // ✅ 优化：基于验证通过的 demo，所有环境都需要注册以下监听器
+    // 1. webviewmessage 自定义事件（Bridgeless 兼容，tapas-sys 优先使用）
+    // 2. message 标准事件（官方标准方式）
+
+    // 1. 监听 webviewmessage 自定义事件（优先方式，Bridgeless 兼容）
+    const customEventHandler = event => {
+      loggerRef.current.info('🔔 [WebViewBridge] 收到 webviewmessage 自定义事件', {
+        detail: event.detail,
+        type: typeof event.detail
+      });
+
+      // event.detail 是消息对象（tapas-sys 发送的格式）
+      // 直接传递给 handleMessage，normalizeMessage 会处理格式转换
+      try {
+        handleMessage(event.detail, window.location.origin);
+      } catch (e) {
+        loggerRef.current.error('处理 webviewmessage 事件失败', e);
+      }
+    };
+    window.addEventListener('webviewmessage', customEventHandler);
+    cleanupFunctions.push(() => {
+      window.removeEventListener('webviewmessage', customEventHandler);
+    });
+    loggerRef.current.info('✅ [WebViewBridge] webviewmessage 事件监听器已注册');
+
+    // 2. 监听 message 标准事件（官方标准方式）
+    const messageHandler = event => {
+      loggerRef.current.info('🔔 [WebViewBridge] 收到 message 事件', {
+        data: event.data,
+        type: typeof event.data,
+        origin: event.origin
+      });
+      try {
+        // ✅ 优化：根据 demo 验证，event.data 是字符串（JSON.stringify 后的结果）
+        // tapas-sys 使用 window.postMessage(JSON.stringify(message), '*') 发送
+        if (event.data && typeof event.data === 'string') {
+          // 直接传递字符串给 handleMessage，parseMessage 会处理解析
+          loggerRef.current.debug('🔔 [WebViewBridge] 提取 event.data（字符串）', event.data);
+          handleMessage(event.data, event.origin);
+        } else if (event.data && typeof event.data === 'object') {
+          // iframe 环境可能收到对象格式 { source, target, payload }
+          if (environmentRef.current === 'iframe' && event.data.payload) {
+            loggerRef.current.debug('🔔 [WebViewBridge] iframe 环境：提取 payload', event.data.payload);
+            handleMessage(event.data.payload, event.origin);
+          } else {
+            // 降级：传递整个 event.data
+            handleMessage(event.data, event.origin);
+          }
+        } else {
+          // 降级：传递整个 event
+          handleMessage(event, event.origin);
+        }
+      } catch (e) {
+        loggerRef.current.error('处理 message 事件失败', e);
+      }
+    };
+
+    // 根据环境注册 message 事件监听器
+    if (environmentRef.current === 'iframe') {
+      // iframe 环境：使用 window.addEventListener("message")
+      window.addEventListener('message', messageHandler);
+      cleanupFunctions.push(() => {
+        window.removeEventListener('message', messageHandler);
+      });
+      loggerRef.current.info('✅ [WebViewBridge] iframe message 事件监听器已注册 (window)');
+    } else if (environmentRef.current === 'webview') {
+      // WebView 环境：根据平台注册
+      const isIOS = /iPad|iPhone|iPod/.test(navigator.platform) || navigator.userAgent.includes('Mac') && 'ontouchend' in document;
+      if (isIOS) {
+        // iOS: 使用 window.addEventListener("message")
+        window.addEventListener('message', messageHandler);
+        cleanupFunctions.push(() => {
+          window.removeEventListener('message', messageHandler);
+        });
+        loggerRef.current.info('✅ [WebViewBridge] iOS message 事件监听器已注册 (window)');
+      } else {
+        // Android: 同时监听 window 和 document（双重保障）
+        // 1. window.document.addEventListener("message") - tapas-sys 可能使用
+        // 2. window.addEventListener("message") - React Native WebView 标准方式
+
+        if (window.document && typeof window.document.addEventListener === 'function') {
+          window.document.addEventListener('message', messageHandler);
+          cleanupFunctions.push(() => {
+            if (window.document && typeof window.document.removeEventListener === 'function') {
+              window.document.removeEventListener('message', messageHandler);
+            }
+          });
+          loggerRef.current.info('✅ [WebViewBridge] Android message 事件监听器已注册 (document)');
+        }
+
+        // 同时监听 window（备用）
+        window.addEventListener('message', messageHandler);
+        cleanupFunctions.push(() => {
+          window.removeEventListener('message', messageHandler);
+        });
+        loggerRef.current.info('✅ [WebViewBridge] Android message 事件监听器已注册 (window, 备用)');
+      }
+    } else {
+      // 未知环境：使用 window.addEventListener("message") 作为降级
+      window.addEventListener('message', messageHandler);
+      cleanupFunctions.push(() => {
+        window.removeEventListener('message', messageHandler);
+      });
+      loggerRef.current.info('✅ [WebViewBridge] 未知环境 message 事件监听器已注册 (window, 降级)');
+    }
+
+    // 保存清理函数
+    const cleanupFn = () => {
+      cleanupFunctions.forEach(fn => {
+        try {
+          fn();
+        } catch (e) {
+          loggerRef.current.error('清理监听器失败', e);
+        }
+      });
+    };
+    cleanupFunctionsRef.current.push(cleanupFn);
+    loggerRef.current.info('✅ [WebViewBridge] 所有消息监听器已注册完成');
+    return cleanupFn;
+  }, [handleMessage]);
+
+  // 发送初始化消息（在 window.onload 完成后自动发送）
+  (0, _react.useEffect)(() => {
+    if (autoInit && !initSentRef.current && from) {
+      const sendInitMessage = () => {
+        if (!initSentRef.current) {
+          loggerRef.current.info('🚀 [WebViewBridge] 自动发送初始化消息', {
+            type: initMessageType,
+            from,
+            environment: environmentRef.current
+          });
+          sendMessage(initMessageType, initPayload);
+          initSentRef.current = true;
+        }
+      };
+
+      // 🔧 改进：优先检测 React Native WebView 环境
+      const isReactNativeWebView = typeof window !== 'undefined' && window.ReactNativeWebView !== undefined;
+      if (isReactNativeWebView) {
+        // React Native WebView 环境：延迟发送，确保 WebView 完全加载
+        loggerRef.current.debug('🔍 [WebViewBridge] 检测到 React Native WebView 环境，延迟发送 INIT');
+        setTimeout(sendInitMessage, 500); // 延迟 500ms 确保 WebView 完全加载
+      } else if (typeof window !== 'undefined') {
+        // Web 环境（iframe 或浏览器）
+        if (typeof document !== 'undefined' && (document.readyState === 'complete' || document.readyState === 'interactive')) {
+          // 文档已经加载完成，使用 setTimeout 确保在下一个事件循环中执行
+          loggerRef.current.debug('🔍 [WebViewBridge] 文档已加载完成，立即发送 INIT');
+          setTimeout(sendInitMessage, 0);
+        } else if (typeof document !== 'undefined') {
+          // 等待 window.onload 事件
+          loggerRef.current.debug('🔍 [WebViewBridge] 等待文档加载完成');
+          const handleLoad = () => {
+            sendInitMessage();
+            window.removeEventListener('load', handleLoad);
+          };
+          window.addEventListener('load', handleLoad);
+
+          // 也监听 DOMContentLoaded 作为备选（某些情况下可能更快）
+          const handleDOMContentLoaded = () => {
+            // 延迟一点确保所有初始化完成
+            setTimeout(sendInitMessage, 10);
+            document.removeEventListener('DOMContentLoaded', handleDOMContentLoaded);
+          };
+          if (document.readyState === 'loading') {
+            document.addEventListener('DOMContentLoaded', handleDOMContentLoaded);
+          }
+          return () => {
+            window.removeEventListener('load', handleLoad);
+            if (typeof document !== 'undefined') {
+              document.removeEventListener('DOMContentLoaded', handleDOMContentLoaded);
+            }
+          };
+        } else {
+          // document 不存在，但 window 存在（某些特殊环境）
+          loggerRef.current.debug('🔍 [WebViewBridge] document 不存在，延迟发送 INIT');
+          setTimeout(sendInitMessage, 100);
+        }
+      } else {
+        // 非 Web 环境（纯 React Native），直接发送
+        loggerRef.current.debug('🔍 [WebViewBridge] 非 Web 环境，延迟发送 INIT');
+        setTimeout(sendInitMessage, 100);
+      }
+    }
+    return undefined;
+  }, [autoInit, initMessageType, initPayload, sendMessage, from]);
+
+  // 组件卸载时清理
+  (0, _react.useEffect)(() => {
+    return () => {
+      cleanup();
+    };
+  }, [cleanup]);
+
+  // 暴露方法给父组件
+  (0, _react.useImperativeHandle)(ref, () => ({
+    sendMessage,
+    getEnvironment: () => environmentRef.current,
+    cleanup
+  }), [sendMessage, cleanup]);
+
+  // 渲染占位 DOM（确保组件有实体）
+  if (!showPlaceholder) {
+    return null;
+  }
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+    style: [styles.container, style],
+    testID: testID,
+    pointerEvents: "none"
+  });
+});
+WebViewBridge.displayName = 'WebViewBridge';
+
+/**
+ * 原生 WebView 消息注入辅助函数
+ * 在 WebView 的 injectedJavaScript 中使用，用于接收原生消息
+ */
+const createWebViewInjectedScript = () => {
+  return `
+    (function() {
+      // 创建全局事件总线（如果不存在）
+      if (typeof window.__WebViewBridgeEventBus === 'undefined') {
+        window.__WebViewBridgeEventBus = {
+          listeners: {},
+          on: function(event, handler) {
+            if (!this.listeners[event]) {
+              this.listeners[event] = [];
+            }
+            this.listeners[event].push(handler);
+          },
+          off: function(event, handler) {
+            if (this.listeners[event]) {
+              this.listeners[event] = this.listeners[event].filter(h => h !== handler);
+            }
+          },
+          emit: function(event, data) {
+            if (this.listeners[event]) {
+              this.listeners[event].forEach(handler => {
+                try {
+                  handler(data);
+                } catch (e) {
+                  console.error('WebViewBridge: 事件处理器错误', e);
+                }
+              });
+            }
+          }
+        };
+      }
+
+      // 监听 React Native WebView 的消息
+      // Android: 使用 window.document.addEventListener("message")
+      // iOS: 使用 window.addEventListener("message")
+      // 为了兼容性，同时监听两个事件
+      
+      // 判断是否运行在 iOS 下
+      const isIOS = /iPad|iPhone|iPod/.test(navigator.platform) ||
+        (navigator.userAgent.includes('Mac') && 'ontouchend' in document);
+      
+      if (window.ReactNativeWebView) {
+        if (isIOS) {
+          // iOS: 使用 window.addEventListener("message")
+          window.addEventListener('message', function(event) {
+            if (window.__WebViewBridgeEventBus) {
+              window.__WebViewBridgeEventBus.emit('message', event);
+            }
+          });
+        } else {
+          // Android: 使用 window.document.addEventListener("message")（tapas-sys 使用）
+          if (window.document && typeof window.document.addEventListener === 'function') {
+            window.document.addEventListener('message', function(event) {
+              if (window.__WebViewBridgeEventBus) {
+                window.__WebViewBridgeEventBus.emit('message', event);
+              }
+            });
+          }
+          // 同时监听 window.addEventListener("message") 作为备用
+          window.addEventListener('message', function(event) {
+            if (window.__WebViewBridgeEventBus) {
+              window.__WebViewBridgeEventBus.emit('message', event);
+            }
+          });
+        }
+      } else {
+        // 非 ReactNativeWebView 环境：监听 postMessage（备用方案）
+        window.addEventListener('message', function(event) {
+          if (window.__WebViewBridgeEventBus) {
+            window.__WebViewBridgeEventBus.emit('message', event);
+          }
+        });
+      }
+    })();
+    true; // 确保脚本返回 true
+  `;
+};
+
+/**
+ * 处理原生 WebView 消息
+ * 在 WebView 的 onMessage 回调中调用此函数
+ */
+exports.createWebViewInjectedScript = createWebViewInjectedScript;
+const handleNativeWebViewMessage = (event, onMessage) => {
+  try {
+    const data = event.nativeEvent?.data || event.data || event;
+    const message = typeof data === 'string' ? JSON.parse(data) : data;
+    onMessage(message);
+  } catch (e) {
+    console.error('WebViewBridge: 解析原生消息失败', e);
+  }
+};
+exports.handleNativeWebViewMessage = handleNativeWebViewMessage;
+const styles = _reactNative.StyleSheet.create({
+  container: {
+    width: 0,
+    height: 0,
+    position: 'absolute',
+    opacity: 0,
+    pointerEvents: 'none'
+  }
+});
+var _default = exports.default = WebViewBridge;
+//# sourceMappingURL=WebViewBridge.js.map