@tencentcloud/web-push 1.0.2 → 1.0.4

package/index.esm.js

@@ -1,14 +1,29 @@
 import ChatSDK from "@tencentcloud/lite-chat/professional";
-const version = "1.0.2";
+const version = "1.0.4";
+var Placement = /* @__PURE__ */ ((Placement2) => {
+  Placement2[Placement2["CENTER"] = 0] = "CENTER";
+  Placement2[Placement2["TOP_LEFT"] = 1] = "TOP_LEFT";
+  Placement2[Placement2["TOP_CENTER"] = 2] = "TOP_CENTER";
+  Placement2[Placement2["TOP_RIGHT"] = 3] = "TOP_RIGHT";
+  Placement2[Placement2["MIDDLE_RIGHT"] = 4] = "MIDDLE_RIGHT";
+  Placement2[Placement2["BOTTOM_RIGHT"] = 5] = "BOTTOM_RIGHT";
+  Placement2[Placement2["BOTTOM_CENTER"] = 6] = "BOTTOM_CENTER";
+  Placement2[Placement2["BOTTOM_LEFT"] = 7] = "BOTTOM_LEFT";
+  Placement2[Placement2["MIDDLE_LEFT"] = 8] = "MIDDLE_LEFT";
+  return Placement2;
+})(Placement || {});
 var EVENT = /* @__PURE__ */ ((EVENT2) => {
   EVENT2["MESSAGE_RECEIVED"] = "message_received";
   EVENT2["MESSAGE_REVOKED"] = "message_revoked";
   EVENT2["NOTIFICATION_CLICKED"] = "notification_clicked";
+  EVENT2["CUSTOM_MESSAGE_RECEIVED"] = "custom_message_received";
   return EVENT2;
 })(EVENT || {});
 const logPrefix = "[WebPush]";
 class Logger {
+  // 默认为 release 级别
   constructor() {
+    this.logLevel = 1;
   }
   static getInstance() {
     if (!Logger.instance) {
@@ -16,17 +31,41 @@ class Logger {
     }
     return Logger.instance;
   }
+  setLogLevel(level) {
+    this.logLevel = level;
+  }
+  getLogLevel() {
+    return this.logLevel;
+  }
+  shouldLog(messageLevel) {
+    if (this.logLevel === 4)
+      return false;
+    return messageLevel >= this.logLevel;
+  }
   log(message, ...args) {
-    console.log(`${logPrefix} ${message}`, ...args);
+    if (this.shouldLog(1)) {
+      console.log(`${logPrefix} ${message}`, ...args);
+    }
   }
   warn(message, ...args) {
-    console.warn(`${logPrefix} ${message}`, ...args);
+    if (this.shouldLog(2)) {
+      console.warn(`${logPrefix} ${message}`, ...args);
+    }
   }
   error(message, ...args) {
-    console.error(`${logPrefix} ${message}`, ...args);
+    if (this.shouldLog(3)) {
+      console.error(`${logPrefix} ${message}`, ...args);
+    }
   }
   info(message, ...args) {
-    console.info(`${logPrefix} ${message}`, ...args);
+    if (this.shouldLog(1)) {
+      console.info(`${logPrefix} ${message}`, ...args);
+    }
+  }
+  debug(message, ...args) {
+    if (this.shouldLog(0)) {
+      console.debug(`${logPrefix} ${message}`, ...args);
+    }
   }
 }
 const logger = Logger.getInstance();
@@ -276,50 +315,6 @@ class Validator {
     };
     this.validateObject(options, schema);
   }
-  static validatePushMessage(message) {
-    if (!message) {
-      throw new ValidationError("message", "Push message cannot be empty");
-    }
-    const schema = {
-      messageID: {
-        required: true,
-        type: "string"
-      },
-      title: {
-        required: true,
-        type: "string"
-      },
-      body: {
-        required: true,
-        type: "string"
-      },
-      icon: {
-        required: false,
-        type: "string",
-        pattern: /^https?:\/\/.+/
-      },
-      tag: {
-        required: false,
-        type: "string"
-      },
-      timestamp: {
-        required: true,
-        type: "number"
-      }
-    };
-    this.validateObject(message, schema);
-  }
-  /**
-   * Validate URL format
-   */
-  static validateURL(url, fieldName = "url") {
-    this.validateValue(fieldName, url, {
-      required: true,
-      type: "string",
-      pattern: /^https?:\/\/.+/,
-      message: `${fieldName} must be a valid HTTP/HTTPS URL`
-    });
-  }
   /**
    * Validate Service Worker path
    */
@@ -1172,6 +1167,838 @@ class ServiceWorkerManager {
     }
   }
 }
+class MessagePopup {
+  constructor(config = {}) {
+    this.container = null;
+    this.popups = /* @__PURE__ */ new Map();
+    this.timers = /* @__PURE__ */ new Map();
+    this.messageHandlers = /* @__PURE__ */ new Map();
+    this.animationTimers = /* @__PURE__ */ new Map();
+    this.adjustHeightTimers = /* @__PURE__ */ new Map();
+    this.defaultConfig = {
+      enabled: true,
+      duration: 0,
+      // 默认不自动关闭
+      position: "top-right",
+      maxCount: 5,
+      showCloseButton: true,
+      clickable: true,
+      customRender: void 0,
+      onClick: void 0,
+      onClose: void 0
+    };
+    this.config = { ...this.defaultConfig, ...config };
+    this.init();
+  }
+  init() {
+    if (!this.config.enabled)
+      return;
+    this.createContainer();
+    this.injectStyles();
+  }
+  createContainer() {
+    const existingContainer = document.getElementById(
+      "web-push-popup-container"
+    );
+    if (existingContainer) {
+      this.container = existingContainer;
+      return;
+    }
+    this.container = document.createElement("div");
+    this.container.id = "web-push-popup-container";
+    this.container.className = `web-push-popup-container web-push-popup-${this.config.position}`;
+    document.body.appendChild(this.container);
+  }
+  injectStyles() {
+    if (document.getElementById("web-push-popup-styles"))
+      return;
+    const style = document.createElement("style");
+    style.id = "web-push-popup-styles";
+    style.textContent = `
+      .web-push-popup-container {
+        position: fixed;
+        z-index: 10000;
+        pointer-events: none;
+        font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
+      }
+
+      .web-push-popup-top-left {
+        top: 20px;
+        left: 20px;
+      }
+
+      .web-push-popup-top-center {
+        top: 20px;
+        left: 50%;
+        transform: translateX(-50%);
+      }
+
+      .web-push-popup-top-right {
+        top: 20px;
+        right: 20px;
+      }
+
+      .web-push-popup-right-center {
+        top: 50%;
+        right: 20px;
+        transform: translateY(-50%);
+      }
+
+      .web-push-popup-bottom-right {
+        bottom: 20px;
+        right: 20px;
+      }
+
+      .web-push-popup-bottom-center {
+        bottom: 20px;
+        left: 50%;
+        transform: translateX(-50%);
+      }
+
+      .web-push-popup-bottom-left {
+        bottom: 20px;
+        left: 20px;
+      }
+
+      .web-push-popup-left-center {
+        top: 50%;
+        left: 20px;
+        transform: translateY(-50%);
+      }
+
+      .web-push-popup-center {
+        top: 50%;
+        left: 50%;
+        transform: translate(-50%, -50%);
+      }
+
+      .web-push-popup {
+        background: #ffffff;
+        border-radius: 16px;
+        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
+        margin-bottom: 10px;
+        padding: 24px;
+        min-width: 300px;
+        max-width: 480px;
+        pointer-events: auto;
+        cursor: pointer;
+        transition: all 0.3s ease;
+        border: 1px solid #e1e5e9;
+        position: relative;
+        animation: web-push-popup-slide-in 0.3s ease-out;
+      }
+
+      .web-push-popup:hover {
+        box-shadow: 0 6px 25px rgba(0, 0, 0, 0.2);
+        transform: translateY(-2px);
+      }
+
+      .web-push-popup.web-push-popup-closing {
+        animation: web-push-popup-slide-out 0.3s ease-in forwards;
+      }
+
+      @keyframes web-push-popup-slide-in {
+        from {
+          opacity: 0;
+          transform: translateX(100%);
+        }
+        to {
+          opacity: 1;
+          transform: translateX(0);
+        }
+      }
+
+      @keyframes web-push-popup-slide-out {
+        from {
+          opacity: 1;
+          transform: translateX(0);
+        }
+        to {
+          opacity: 0;
+          transform: translateX(100%);
+        }
+      }
+
+      .web-push-popup-header {
+        display: flex;
+        align-items: center;
+        margin-bottom: 8px;
+      }
+
+      .web-push-popup-info {
+        flex: 1;
+        min-width: 0;
+      }
+
+      .web-push-popup-title {
+        font-size: 14px;
+        font-weight: 600;
+        color: #1a1a1a;
+        margin: 0 0 2px 0;
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+      }
+
+      .web-push-popup-subtitle {
+        font-size: 12px;
+        color: #666;
+        margin: 0;
+      }
+
+      .web-push-popup-close {
+        position: absolute;
+        top: 8px;
+        right: 8px;
+        background: none;
+        border: none;
+        font-size: 18px;
+        color: #999;
+        cursor: pointer;
+        padding: 4px;
+        line-height: 1;
+        border-radius: 4px;
+        transition: all 0.2s ease;
+      }
+
+      .web-push-popup-close:hover {
+        background: #f5f5f5;
+        color: #333;
+      }
+
+      .web-push-popup-content {
+        font-size: 14px;
+        color: #333;
+        line-height: 1.4;
+        word-wrap: break-word;
+        margin: 0;
+      }
+
+      .web-push-popup-html-container {
+        margin-bottom: 10px;
+        pointer-events: auto;
+        position: relative;
+        animation: web-push-popup-slide-in 0.3s ease-out;
+      }
+
+      .web-push-popup-html-container.web-push-popup-closing {
+        animation: web-push-popup-slide-out 0.3s ease-in forwards;
+      }
+    `;
+    document.head.appendChild(style);
+  }
+  show(message) {
+    if (!this.config.enabled || !this.container)
+      return;
+    try {
+      if (this.popups.size >= this.config.maxCount) {
+        this.removeOldestPopup();
+      }
+      if (this.config.customRender) {
+        const popup2 = this.config.customRender(message, this.container);
+        this.addPopup(message.id, popup2, message.MsgContent.Duration);
+        return;
+      }
+      let popup;
+      if (message.MsgType === "standard") {
+        popup = this.createStandardPopup(message, message.id);
+      } else {
+        popup = this.createHtmlPopup(message, message.id);
+      }
+      this.applyPlacement(message.MsgContent.Placement ?? 0);
+      this.addPopup(message.id, popup, message.MsgContent.Duration);
+    } catch (error) {
+      logger.error("Failed to show message popup", error);
+    }
+  }
+  createStandardPopup(message, messageId) {
+    const popup = document.createElement("div");
+    popup.className = "web-push-popup web-push-popup-standard";
+    popup.dataset.messageId = messageId;
+    if (message.MsgContent.Image) {
+      const imageContainer = document.createElement("div");
+      imageContainer.className = "web-push-popup-image";
+      imageContainer.style.cssText = `
+        text-align: center;
+        margin-bottom: 20px;
+      `;
+      const img = document.createElement("img");
+      img.src = message.MsgContent.Image.URL;
+      img.alt = "Message Image";
+      img.style.cssText = `
+        width: auto;
+        height: auto;
+        max-width: 432px;
+        max-height: 222px;
+        border-radius: 4px;
+        object-fit: cover;
+        cursor: pointer;
+        display: block;
+        margin: 0 auto;
+      `;
+      img.onclick = (e2) => {
+        e2.stopPropagation();
+        if (message.MsgContent.Image?.LinkURL) {
+          window.open(message.MsgContent.Image.LinkURL, "_blank");
+        }
+        if (this.config.onClick) {
+          this.config.onClick(message, popup);
+        }
+        this.close(messageId);
+      };
+      imageContainer.appendChild(img);
+      popup.appendChild(imageContainer);
+    }
+    if (message.MsgContent.Text) {
+      const contentArea = document.createElement("div");
+      contentArea.className = "web-push-popup-content-area";
+      if (message.MsgContent.Text.Title) {
+        const title = document.createElement("div");
+        title.className = "web-push-popup-standard-title";
+        title.textContent = message.MsgContent.Text.Title;
+        title.style.cssText = `
+          font-size: 18px;
+          line-height: 26px;
+          font-weight: 600;
+          color: #000000E5;
+          margin-bottom: 8px;
+          max-width: 432px;
+          overflow: hidden;
+          text-overflow: ellipsis;
+          display: -webkit-box;
+          -webkit-line-clamp: 2;
+          -webkit-box-orient: vertical;
+          word-wrap: break-word;
+        `;
+        contentArea.appendChild(title);
+      }
+      if (message.MsgContent.Text.Desc) {
+        const desc = document.createElement("div");
+        desc.className = "web-push-popup-standard-desc";
+        desc.textContent = message.MsgContent.Text.Desc;
+        desc.style.cssText = `
+          font-size: 14px;
+          font-weight: 400;
+          color: #000000B2;
+          line-height: 22px;
+          max-width: 432px;
+          overflow: hidden;
+          text-overflow: ellipsis;
+          display: -webkit-box;
+          -webkit-line-clamp: 6;
+          -webkit-box-orient: vertical;
+          word-wrap: break-word;
+        `;
+        contentArea.appendChild(desc);
+      }
+      popup.appendChild(contentArea);
+    }
+    if (message.MsgContent.Button && message.MsgContent.Button.length > 0) {
+      const buttonContainer = document.createElement("div");
+      buttonContainer.className = "web-push-popup-buttons";
+      buttonContainer.style.cssText = `
+        display: flex;
+        gap: 12px;
+        margin-top: 24px;
+        flex-wrap: wrap;
+      `;
+      message.MsgContent.Button.forEach((buttonConfig, index) => {
+        const button = document.createElement("button");
+        button.className = "web-push-popup-button";
+        button.textContent = buttonConfig.Text;
+        button.style.cssText = `
+          flex: 1;
+          min-width: 80px;
+          padding: 8px 16px;
+          border: 1px solid ${index === 0 ? "#E6E9EF" : "#0052D9"};
+          background: ${index === 0 ? "transparent" : "#0052D9"};
+          color: ${index === 0 ? "#000000E5" : "#FFFFFFE5"};
+          border-radius: 4px;
+          font-size: 14px;
+          font-weight: 400;
+          line-height: 22px;
+          cursor: pointer;
+          transition: all 0.2s ease;
+        `;
+        if (buttonConfig.Icon) {
+          const icon = document.createElement("img");
+          icon.src = buttonConfig.Icon;
+          icon.style.cssText = `
+            width: 16px;
+            height: 16px;
+            margin-right: 6px;
+            vertical-align: middle;
+          `;
+          button.insertBefore(icon, button.firstChild);
+        }
+        button.onclick = (e2) => {
+          e2.stopPropagation();
+          if (buttonConfig.Url) {
+            window.open(buttonConfig.Url, "_blank");
+          }
+          if (this.config.onClick) {
+            this.config.onClick(message, popup);
+          }
+          this.close(messageId);
+        };
+        button.onmouseenter = () => {
+          button.style.transform = "translateY(-1px)";
+          button.style.boxShadow = "0 2px 8px rgba(0,122,255,0.3)";
+        };
+        button.onmouseleave = () => {
+          button.style.transform = "translateY(0)";
+          button.style.boxShadow = "none";
+        };
+        buttonContainer.appendChild(button);
+      });
+      popup.appendChild(buttonContainer);
+    }
+    if (message.MsgContent.Close === 1 && this.config.showCloseButton) {
+      const closeBtn = document.createElement("button");
+      closeBtn.className = "web-push-popup-close";
+      closeBtn.innerHTML = "×";
+      closeBtn.style.cssText = `
+        position: absolute;
+        top: 8px;
+        right: 8px;
+        width: 24px;
+        height: 24px;
+        border: none;
+        background: rgba(0,0,0,0.1);
+        color: #666;
+        border-radius: 50%;
+        cursor: pointer;
+        font-size: 16px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        transition: all 0.2s ease;
+      `;
+      closeBtn.onclick = (e2) => {
+        e2.stopPropagation();
+        this.close(messageId);
+      };
+      closeBtn.onmouseenter = () => {
+        closeBtn.style.background = "rgba(0,0,0,0.2)";
+      };
+      closeBtn.onmouseleave = () => {
+        closeBtn.style.background = "rgba(0,0,0,0.1)";
+      };
+      popup.appendChild(closeBtn);
+    }
+    if (this.config.clickable) {
+      popup.onclick = () => {
+        if (this.config.onClick) {
+          this.config.onClick(message, popup);
+        }
+        this.close(messageId);
+      };
+    }
+    return popup;
+  }
+  createHtmlPopup(message, messageId) {
+    const popup = document.createElement("div");
+    popup.className = "web-push-popup-html-container";
+    popup.dataset.messageId = messageId;
+    popup.style.cssText = `
+      pointer-events: auto;
+      position: relative;
+    `;
+    try {
+      const base64ToUtf8 = (base64Str) => {
+        try {
+          const binaryStr = atob(base64Str);
+          const bytes = new Uint8Array(binaryStr.length);
+          for (let i2 = 0; i2 < binaryStr.length; i2++) {
+            bytes[i2] = binaryStr.charCodeAt(i2);
+          }
+          const decoder = new TextDecoder("utf-8");
+          return decoder.decode(bytes);
+        } catch (error) {
+          logger.warn("UTF-8 解码失败，使用原始 atob 解码:", error);
+          return atob(base64Str);
+        }
+      };
+      const decodedHtml = base64ToUtf8(message.MsgContent.Html);
+      const iframe = document.createElement("iframe");
+      iframe.className = "web-push-popup-html-iframe";
+      iframe.style.cssText = `
+        width: 100%;
+        min-height: 200px;
+        max-height: 400px;
+        border: none;
+        background: transparent;
+        overflow: auto;
+        display: block;
+      `;
+      iframe.setAttribute("sandbox", "allow-same-origin allow-scripts");
+      iframe.setAttribute("loading", "eager");
+      popup.appendChild(iframe);
+      const messageHandler = (event) => {
+        if (event.source === iframe.contentWindow) {
+          if (event.data && event.data.type === "iframe-click") {
+            if (this.config.onClick) {
+              this.config.onClick(message, popup);
+            }
+            this.close(messageId);
+          } else if (event.data && event.data.type === "iframe-content-loaded") {
+            this.adjustIframeHeight(iframe);
+          }
+        }
+      };
+      window.addEventListener("message", messageHandler);
+      this.messageHandlers.set(messageId, messageHandler);
+      const writeContent = () => {
+        try {
+          const iframeDoc = iframe.contentDocument || iframe.contentWindow?.document;
+          if (iframeDoc) {
+            const fullHtml = this.createIframeHtml(decodedHtml, messageId);
+            iframeDoc.open();
+            iframeDoc.write(fullHtml);
+            iframeDoc.close();
+            const heightTimer = setTimeout(() => {
+              this.adjustIframeHeight(iframe);
+              this.adjustHeightTimers.delete(messageId);
+            }, 100);
+            this.adjustHeightTimers.set(messageId, heightTimer);
+          }
+        } catch (error) {
+          logger.error("Failed to write content to iframe", error);
+        }
+      };
+      iframe.onload = writeContent;
+      const writeTimer = setTimeout(() => {
+        writeContent();
+        this.adjustHeightTimers.delete(`${messageId}_write`);
+      }, 0);
+      this.adjustHeightTimers.set(`${messageId}_write`, writeTimer);
+    } catch (error) {
+      logger.error("Failed to decode HTML message", error);
+      const errorDiv = document.createElement("div");
+      errorDiv.className = "web-push-popup-error";
+      errorDiv.textContent = "消息内容解析失败";
+      errorDiv.style.cssText = `
+        padding: 16px;
+        color: #ff4444;
+        text-align: center;
+        font-size: 14px;
+      `;
+      popup.appendChild(errorDiv);
+    }
+    if (this.config.clickable) {
+      popup.onclick = () => {
+        if (this.config.onClick) {
+          this.config.onClick(message, popup);
+        }
+        this.close(messageId);
+      };
+    }
+    return popup;
+  }
+  addPopup(messageId, popup, messageDuration) {
+    if (!this.container)
+      return;
+    this.popups.set(messageId, popup);
+    this.container.appendChild(popup);
+    const duration = messageDuration !== void 0 ? messageDuration * 1e3 : this.config.duration;
+    if (duration > 0) {
+      const timer = setTimeout(() => {
+        this.timers.delete(messageId);
+        this.close(messageId);
+      }, duration);
+      this.timers.set(messageId, timer);
+    }
+  }
+  removeOldestPopup() {
+    const firstKey = this.popups.keys().next().value;
+    if (firstKey) {
+      this.close(firstKey);
+    }
+  }
+  close(messageId) {
+    const popup = this.popups.get(messageId);
+    if (!popup)
+      return;
+    try {
+      const timer = this.timers.get(messageId);
+      if (timer) {
+        clearTimeout(timer);
+        this.timers.delete(messageId);
+      }
+      const heightTimer = this.adjustHeightTimers.get(messageId);
+      if (heightTimer) {
+        clearTimeout(heightTimer);
+        this.adjustHeightTimers.delete(messageId);
+      }
+      const writeTimer = this.adjustHeightTimers.get(`${messageId}_write`);
+      if (writeTimer) {
+        clearTimeout(writeTimer);
+        this.adjustHeightTimers.delete(`${messageId}_write`);
+      }
+      const messageHandler = this.messageHandlers.get(messageId);
+      if (messageHandler) {
+        window.removeEventListener("message", messageHandler);
+        this.messageHandlers.delete(messageId);
+      }
+      popup.classList.add("web-push-popup-closing");
+      if (this.config.onClose) {
+        this.config.onClose({ ID: messageId }, popup);
+      }
+      const animationTimer = setTimeout(() => {
+        if (popup.parentNode) {
+          popup.parentNode.removeChild(popup);
+        }
+        this.popups.delete(messageId);
+        this.animationTimers.delete(messageId);
+      }, 300);
+      this.animationTimers.set(messageId, animationTimer);
+    } catch (error) {
+      logger.error("Failed to close popup", error);
+      if (popup.parentNode) {
+        popup.parentNode.removeChild(popup);
+      }
+      this.popups.delete(messageId);
+      const timer = this.timers.get(messageId);
+      if (timer) {
+        clearTimeout(timer);
+        this.timers.delete(messageId);
+      }
+      const heightTimer = this.adjustHeightTimers.get(messageId);
+      if (heightTimer) {
+        clearTimeout(heightTimer);
+        this.adjustHeightTimers.delete(messageId);
+      }
+      const writeTimer = this.adjustHeightTimers.get(`${messageId}_write`);
+      if (writeTimer) {
+        clearTimeout(writeTimer);
+        this.adjustHeightTimers.delete(`${messageId}_write`);
+      }
+      const animationTimer = this.animationTimers.get(messageId);
+      if (animationTimer) {
+        clearTimeout(animationTimer);
+        this.animationTimers.delete(messageId);
+      }
+      const messageHandler = this.messageHandlers.get(messageId);
+      if (messageHandler) {
+        window.removeEventListener("message", messageHandler);
+        this.messageHandlers.delete(messageId);
+      }
+    }
+  }
+  /**
+   * 检查指定消息是否正在显示弹窗
+   * @param messageId 消息ID
+   * @returns 是否正在显示
+   */
+  hasMessage(messageId) {
+    return this.popups.has(messageId);
+  }
+  closeAll() {
+    for (const messageId of this.popups.keys()) {
+      this.close(messageId);
+    }
+  }
+  updateConfig(newConfig) {
+    this.config = { ...this.config, ...newConfig };
+    if (!this.config.enabled) {
+      this.closeAll();
+    }
+  }
+  destroy() {
+    this.closeAll();
+    this.timers.forEach((timer) => clearTimeout(timer));
+    this.timers.clear();
+    this.animationTimers.forEach((timer) => clearTimeout(timer));
+    this.animationTimers.clear();
+    this.adjustHeightTimers.forEach((timer) => clearTimeout(timer));
+    this.adjustHeightTimers.clear();
+    this.messageHandlers.forEach(
+      (handler) => window.removeEventListener("message", handler)
+    );
+    this.messageHandlers.clear();
+    if (this.container && this.container.parentNode) {
+      this.container.parentNode.removeChild(this.container);
+    }
+    const styles = document.getElementById("web-push-popup-styles");
+    if (styles && styles.parentNode) {
+      styles.parentNode.removeChild(styles);
+    }
+    this.container = null;
+    this.popups.clear();
+  }
+  /**
+   * 根据 Placement 值应用容器位置
+   * 0-中间，1-左上，2-上中，3-右上，4-右中，5-右下，6-下中，7-左下，8-左中
+   */
+  applyPlacement(placement) {
+    if (!this.container)
+      return;
+    this.container.classList.remove(
+      "web-push-popup-center",
+      "web-push-popup-top-left",
+      "web-push-popup-top-center",
+      "web-push-popup-top-right",
+      "web-push-popup-right-center",
+      "web-push-popup-bottom-right",
+      "web-push-popup-bottom-center",
+      "web-push-popup-bottom-left",
+      "web-push-popup-left-center"
+    );
+    switch (placement) {
+      case 0:
+        this.container.classList.add("web-push-popup-center");
+        break;
+      case 1:
+        this.container.classList.add("web-push-popup-top-left");
+        break;
+      case 2:
+        this.container.classList.add("web-push-popup-top-center");
+        break;
+      case 3:
+        this.container.classList.add("web-push-popup-top-right");
+        break;
+      case 4:
+        this.container.classList.add("web-push-popup-right-center");
+        break;
+      case 5:
+        this.container.classList.add("web-push-popup-bottom-right");
+        break;
+      case 6:
+        this.container.classList.add("web-push-popup-bottom-center");
+        break;
+      case 7:
+        this.container.classList.add("web-push-popup-bottom-left");
+        break;
+      case 8:
+        this.container.classList.add("web-push-popup-left-center");
+        break;
+      default:
+        this.container.classList.add(`web-push-popup-${this.config.position}`);
+        break;
+    }
+  }
+  /**
+   * 调整iframe高度以适应内容
+   */
+  adjustIframeHeight(iframe) {
+    try {
+      const iframeDoc = iframe.contentDocument || iframe.contentWindow?.document;
+      if (!iframeDoc)
+        return;
+      const body = iframeDoc.body;
+      const html = iframeDoc.documentElement;
+      if (body && html) {
+        const contentHeight = Math.max(
+          body.scrollHeight,
+          body.offsetHeight,
+          html.clientHeight,
+          html.scrollHeight,
+          html.offsetHeight
+        );
+        const minHeight = 100;
+        const maxHeight = 400;
+        const finalHeight = Math.min(
+          Math.max(contentHeight, minHeight),
+          maxHeight
+        );
+        iframe.style.height = `${finalHeight}px`;
+        if (contentHeight > maxHeight) {
+          iframe.style.overflow = "auto";
+          body.style.overflow = "auto";
+        } else {
+          iframe.style.overflow = "hidden";
+          body.style.overflow = "hidden";
+        }
+      }
+    } catch (error) {
+      logger.warn("Failed to adjust iframe height", error);
+      iframe.style.height = "200px";
+      iframe.style.overflow = "auto";
+    }
+  }
+  /**
+   * 创建iframe的完整HTML文档
+   */
+  createIframeHtml(bodyContent, messageId) {
+    return `
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <style>
+    * {
+      box-sizing: border-box;
+    }
+    html, body {
+      margin: 0;
+      padding: 8px;
+      width: 100%;
+      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+      font-size: 14px;
+      line-height: 1.4;
+      cursor: pointer;
+    }
+    body {
+      min-height: auto;
+      overflow-wrap: break-word;
+      word-wrap: break-word;
+    }
+    img {
+      max-width: 100%;
+      height: auto;
+    }
+    a {
+      color: #1976d2;
+      text-decoration: none;
+    }
+    a:hover {
+      text-decoration: underline;
+    }
+  </style>
+</head>
+<body>
+  ${bodyContent}
+  <script>
+    // 确保所有链接在新窗口打开
+    document.addEventListener('DOMContentLoaded', function() {
+      const links = document.querySelectorAll('a');
+      links.forEach(function(link) {
+        link.target = '_blank';
+        link.rel = 'noopener noreferrer';
+      });
+      
+      // 添加点击事件监听器
+      ${messageId ? `
+      document.addEventListener('click', function(e) {
+        window.parent.postMessage({
+          type: 'iframe-click',
+          messageId: '${messageId}'
+        }, '*');
+      });
+      ` : ""}
+      
+      // 通知父页面内容已加载，可以调整高度
+      var contentLoadedTimer = setTimeout(function() {
+        if (window.parent && window.parent !== window) {
+          try {
+            window.parent.postMessage({
+              type: 'iframe-content-loaded',
+              height: document.body.scrollHeight
+            }, '*');
+          } catch (e) {
+            // 忽略跨域错误
+          }
+        }
+      }, 100);
+    });
+    
+    // 注意：不要重新定义 window.parent，否则会阻止与父页面的通信
+  <\/script>
+</body>
+</html>`;
+  }
+}
 var e = "undefined" != typeof global ? global : "undefined" != typeof self ? self : "undefined" != typeof window ? window : {}, t = [], r = [], n = "undefined" != typeof Uint8Array ? Uint8Array : Array, i = false;
 function o() {
   i = true;
@@ -5470,12 +6297,14 @@ function genTestUserSig(options) {
 }
 class WebPushSDK {
   constructor() {
+    this.messagePopup = null;
     this.isRegistered = false;
     this.registrationID = "";
     this.chat = null;
     this.SDKAppID = 0;
     this.appKey = "";
     this.vapidPublicKey = "";
+    this.pendingMessages = [];
     this.EVENT = EVENT;
     this.VERSION = version;
     logger.log("version:", version);
@@ -5487,6 +6316,7 @@ class WebPushSDK {
       logger.error("Browser compatibility initialization failed", error);
     });
     this.setupInternalListeners();
+    this.setupVisibilityChangeListener();
   }
   static getInstance() {
     if (!this.instance) {
@@ -5497,7 +6327,10 @@ class WebPushSDK {
   async registerPush(options) {
     try {
       Validator.validateRegisterPushOptions(options);
-      const { SDKAppID, appKey, userID, chat } = options;
+      const { SDKAppID, appKey, userID, chat, logLevel } = options;
+      if (logLevel !== void 0) {
+        logger.setLogLevel(logLevel);
+      }
       if (this.isRegistered) {
         logger.warn(
           "Push service already registered, will unregister first and then re-register"
@@ -5512,6 +6345,17 @@ class WebPushSDK {
       this.SDKAppID = SDKAppID;
       this.appKey = appKey;
       this.registrationID = userID;
+      this.messagePopup = new MessagePopup({
+        onClick: (message, _popup) => {
+          this.serviceWorkerManager.postMessage({
+            type: "REPORT_WEBPUSH_EVENT",
+            payload: {
+              ...message,
+              eventType: 3
+            }
+          });
+        }
+      });
       if (chat) {
         this.chat = chat;
       } else {
@@ -5524,9 +6368,16 @@ class WebPushSDK {
           SDKAppID: this.SDKAppID,
           ...options
         });
+        if (logLevel !== void 0) {
+          this.chat.setLogLevel(logLevel);
+        }
       }
+      this.addChatListener();
       await this.serviceWorkerManager.register();
-      await this.chatLogin();
+      if (logLevel !== void 0) {
+        await this.sendLogLevelToServiceWorker(logLevel);
+      }
+      await this.pushLogin();
       const subscriptionInfo = await this.serviceWorkerManager.getPushSubscription(
         this.vapidPublicKey
       );
@@ -5553,6 +6404,11 @@ class WebPushSDK {
         return true;
       }
       if (this.chat) {
+        this.removeChatListener();
+      }
+      if (this.messagePopup) {
+        this.messagePopup.destroy();
+        this.messagePopup = null;
       }
       await this.serviceWorkerManager.unsubscribe();
       await this.serviceWorkerManager.unregister();
@@ -5589,6 +6445,23 @@ class WebPushSDK {
       throw new Error("Add push listener failed");
     }
   }
+  /**
+   * 内部方法：向 Service Worker 发送日志级别配置
+   * @param logLevel 日志级别 0-4
+   */
+  async sendLogLevelToServiceWorker(logLevel) {
+    try {
+      if (this.serviceWorkerManager) {
+        await this.serviceWorkerManager.postMessage({
+          type: "SET_LOG_LEVEL",
+          payload: { logLevel }
+        });
+        logger.log("Log level sent to Service Worker:", logLevel);
+      }
+    } catch (error) {
+      logger.warn("Failed to send log level to Service Worker", error);
+    }
+  }
   removePushListener(eventName, listener) {
     try {
       Validator.validateEventType(eventName);
@@ -5645,7 +6518,7 @@ class WebPushSDK {
       throw error;
     }
   }
-  async chatLogin() {
+  async pushLogin() {
     try {
       const res = await this.chat.callExperimentalAPI("loginWebPush", {
         userID: this.registrationID,
@@ -5653,7 +6526,8 @@ class WebPushSDK {
           SDKAppID: this.SDKAppID,
           secretKey: this.appKey,
           userID: this.registrationID
-        }).userSig
+        }).userSig,
+        pushSDKVersion: version
       });
       if (res.data.vapid) {
         this.vapidPublicKey = res.data.vapid;
@@ -5671,39 +6545,124 @@ class WebPushSDK {
       throw error;
     }
   }
-  // private onMessageReceived(event: any) {
-  //   event.data.forEach((message: any) => {
-  //     this.eventEmitter.emit(EVENT.MESSAGE_RECEIVED, message);
-  //     // 通过 service-worker 发送通知
-  //     this.sendNotificationToServiceWorker('messageReceived', {
-  //       type: 'message',
-  //       data: message,
-  //       timestamp: Date.now()
-  //     });
-  //   });
-  // }
-  // private onMessageRevoked(event: any) {
-  //   event.data.forEach((item: { ID: any; }) => {
-  //     const { ID } = item;
-  //     this.eventEmitter.emit(EVENT.MESSAGE_REVOKED, {
-  //       messageID: ID,
-  //     });
-  //     // 通过 service-worker 发送通知
-  //     this.sendNotificationToServiceWorker('messageRevoked', {
-  //       type: 'revoke',
-  //       messageID: ID,
-  //       timestamp: Date.now()
-  //     });
-  //   });
-  // }
-  // private addChatListener() {
-  //   this.chat.on(ChatSDK.EVENT.MESSAGE_RECEIVED, this.onMessageReceived.bind(this));
-  //   this.chat.on(ChatSDK.EVENT.MESSAGE_REVOKED, this.onMessageRevoked.bind(this));
-  // }
-  // private removeChatListener() {
-  //   this.chat.off(ChatSDK.EVENT.MESSAGE_RECEIVED, this.onMessageReceived);
-  //   this.chat.off(ChatSDK.EVENT.MESSAGE_REVOKED, this.onMessageRevoked);
-  // }
+  onMessageReceived(event) {
+    logger.log("Received message data", event);
+    event.data.forEach((item) => {
+      const { webPush: webPush2 } = item;
+      const { content, info, extension } = webPush2;
+      const { TaskId, WebpushReportUrl, OnlineClickExt } = extension;
+      if (content) {
+        try {
+          const message = JSON.parse(content);
+          const outerMessage = {
+            id: TaskId,
+            ...message
+          };
+          this.eventEmitter.emit(EVENT.MESSAGE_RECEIVED, outerMessage);
+          if (message.MsgType !== "custom") {
+            const messageWithExtras = {
+              ...outerMessage,
+              rptURL: WebpushReportUrl,
+              rptExt: OnlineClickExt
+            };
+            if (this.messagePopup && document.visibilityState === "visible") {
+              this.messagePopup.show(messageWithExtras);
+            } else if (this.messagePopup) {
+              this.pendingMessages.push(messageWithExtras);
+              logger.log(
+                "Message added to pending queue (page hidden)",
+                TaskId
+              );
+            }
+          }
+        } catch (error) {
+          logger.error("Failed to parse message content", error);
+          this.eventEmitter.emit(EVENT.MESSAGE_RECEIVED, content);
+        }
+      } else if (info) {
+        try {
+          this.sendNotificationToServiceWorker({
+            id: TaskId,
+            ...info,
+            rptURL: WebpushReportUrl,
+            rptExt: OnlineClickExt
+          });
+        } catch (error) {
+          logger.error("Failed to send notification to service worker", error);
+          this.eventEmitter.emit(EVENT.MESSAGE_RECEIVED, info);
+        }
+      }
+    });
+  }
+  onMessageRevoked(event) {
+    event.data.forEach((item) => {
+      const { ID } = item;
+      logger.log("Message revoked", ID);
+      const isPopupMessage = this.messagePopup && this.messagePopup.hasMessage(ID);
+      const pendingIndex = this.pendingMessages.findIndex(
+        (msg) => msg.id === ID
+      );
+      if (pendingIndex !== -1) {
+        this.pendingMessages.splice(pendingIndex, 1);
+        logger.log("Pending message removed from queue", ID);
+        this.eventEmitter.emit(EVENT.MESSAGE_REVOKED, {
+          messageID: ID
+        });
+        return;
+      }
+      if (isPopupMessage) {
+        this.messagePopup.close(ID);
+        this.eventEmitter.emit(EVENT.MESSAGE_REVOKED, {
+          messageID: ID
+        });
+        logger.log("Popup message revoked and closed", ID);
+      } else {
+        try {
+          this.sendMessageRevokeToServiceWorker(ID);
+          logger.log("Message revoke sent to service worker", ID);
+        } catch (error) {
+          logger.error(
+            "Failed to send message revoke to service worker",
+            error
+          );
+          this.eventEmitter.emit(EVENT.MESSAGE_REVOKED, {
+            messageID: ID
+          });
+        }
+      }
+    });
+  }
+  addChatListener() {
+    if (!this.chat)
+      return;
+    try {
+      this.chat.on(
+        ChatSDK.EVENT.WEB_PUSH_MESSAGE_RECEIVED,
+        this.onMessageReceived.bind(this)
+      );
+      this.chat.on(
+        ChatSDK.EVENT.MESSAGE_REVOKED,
+        this.onMessageRevoked.bind(this)
+      );
+      logger.log("Chat listeners added for online push");
+    } catch (error) {
+      logger.error("Failed to add chat listeners", error);
+    }
+  }
+  removeChatListener() {
+    if (!this.chat)
+      return;
+    try {
+      this.chat.off(
+        ChatSDK.EVENT.WEB_PUSH_MESSAGE_RECEIVED,
+        this.onMessageReceived
+      );
+      this.chat.off(ChatSDK.EVENT.MESSAGE_REVOKED, this.onMessageRevoked);
+      logger.log("Chat listeners removed");
+    } catch (error) {
+      logger.error("Failed to remove chat listeners", error);
+    }
+  }
   getSystemPermissionMessage(browserName) {
     const userAgent = navigator.userAgent.toLowerCase();
     const isMacOS = userAgent.includes("mac os");
@@ -5779,12 +6738,35 @@ Please refresh the page after enabling notifications.`;
       logger.error("Browser compatibility initialization failed", error);
     }
   }
-  setupInternalListeners() {
-    this.eventEmitter.on(EVENT.MESSAGE_RECEIVED, (message) => {
-      if (this.SDKAppID && this.registrationID && message.messageID) {
-        this.pushStatistics(message.messageID, "reach");
+  setupVisibilityChangeListener() {
+    document.addEventListener("visibilitychange", () => {
+      if (document.visibilityState === "visible" && this.messagePopup && this.pendingMessages.length > 0) {
+        logger.log(
+          "Page became visible, showing pending messages",
+          this.pendingMessages.length
+        );
+        const messagesToShow = [...this.pendingMessages];
+        this.pendingMessages = [];
+        const timeout = setTimeout(() => {
+          messagesToShow.forEach((message) => {
+            if (this.messagePopup) {
+              this.messagePopup.show(message);
+            }
+          });
+          clearTimeout(timeout);
+        }, 100);
       }
     });
+  }
+  setupInternalListeners() {
+    this.eventEmitter.on(
+      EVENT.MESSAGE_RECEIVED,
+      (message) => {
+        if (this.SDKAppID && this.registrationID && message.messageID) {
+          this.pushStatistics(message.messageID, "reach");
+        }
+      }
+    );
     this.eventEmitter.on(EVENT.NOTIFICATION_CLICKED, (data) => {
       if (this.SDKAppID && this.registrationID && data.notification?.messageID) {
         this.pushStatistics(data.notification.messageID, "click");
@@ -5815,83 +6797,61 @@ Please refresh the page after enabling notifications.`;
     this.SDKAppID = 0;
     this.appKey = "";
     this.vapidPublicKey = "";
+    this.pendingMessages = [];
+    if (this.messagePopup) {
+      this.messagePopup.destroy();
+      this.messagePopup = null;
+    }
   }
   /**
-   * 向 service-worker 发送通知消息
-   * @param type 通知类型
-   * @param data 通知数据
+   * 向 service-worker 发送通知消息，使用与 push 事件相同的数据格式
+   * @param webpushInfo webpush 信息，格式与 SW push 事件接收的数据一致
    */
-  // private async sendNotificationToServiceWorker(type: string, data: any): Promise<void> {
-  //   try {
-  //     if (!this.serviceWorkerManager) {
-  //       logger.warn('ServiceWorkerManager not initialized, skipping notification');
-  //       return;
-  //     }
-  //     // 通过 ServiceWorkerManager 向 service-worker 发送消息
-  //     await this.serviceWorkerManager.postMessage({
-  //       type: 'SHOW_NOTIFICATION',
-  //       payload: {
-  //         eventType: type,
-  //         data: data,
-  //         options: {
-  //           title: type === 'messageReceived' ? '新消息' : '消息撤回',
-  //           body: this.formatNotificationBody(type, data),
-  //           icon: '/icon-192x192.png',
-  //           badge: '/badge-72x72.png',
-  //           tag: `${type}-${data.messageID || Date.now()}`,
-  //           requireInteraction: false,
-  //           silent: false,
-  //           timestamp: data.timestamp || Date.now(),
-  //           data: {
-  //             messageID: data.messageID || data.data?.messageID,
-  //             type: type,
-  //             SDKAppID: this.SDKAppID,
-  //             registrationID: this.registrationID
-  //           }
-  //         }
-  //       }
-  //     });
-  //     logger.log(`Notification sent to service-worker: ${type}`, data);
-  //   } catch (error) {
-  //     logger.error(`Failed to send notification to service-worker: ${type}`, error);
-  //   }
-  // }
+  async sendNotificationToServiceWorker(webpushInfo) {
+    try {
+      if (!this.serviceWorkerManager) {
+        logger.warn(
+          "ServiceWorkerManager not initialized, skipping notification"
+        );
+        return;
+      }
+      await this.serviceWorkerManager.postMessage({
+        type: "PROCESS_WEBPUSH_DATA",
+        payload: webpushInfo
+      });
+      logger.log("WebPush data sent to service-worker", webpushInfo);
+    } catch (error) {
+      logger.error("Failed to send webpush data to service-worker", error);
+    }
+  }
   /**
-   * 格式化通知内容
-   * @param type 通知类型
-   * @param data 通知数据
-   * @returns 格式化后的通知内容
+   * 向 service-worker 发送消息撤回请求
+   * @param messageID 要撤回的消息ID
    */
-  // private formatNotificationBody(type: string, data: any): string {
-  //   try {
-  //     if (type === 'messageReceived') {
-  //       const message = data.data || data;
-  //       if (message.type === 1) { // 文本消息
-  //         return message.payload?.text || '您收到了一条新消息';
-  //       } else if (message.type === 3) { // 图片消息
-  //         return '[图片]';
-  //       } else if (message.type === 4) { // 语音消息
-  //         return '[语音]';
-  //       } else if (message.type === 5) { // 视频消息
-  //         return '[视频]';
-  //       } else if (message.type === 6) { // 文件消息
-  //         return '[文件]';
-  //       } else {
-  //         return '您收到了一条新消息';
-  //       }
-  //     } else if (type === 'messageRevoked') {
-  //       return '有一条消息被撤回';
-  //     }
-  //     return '您有新的消息通知';
-  //   } catch (error) {
-  //     logger.error('Failed to format notification body', error);
-  //     return '您有新的消息通知';
-  //   }
-  // }
+  async sendMessageRevokeToServiceWorker(messageID) {
+    try {
+      if (!this.serviceWorkerManager) {
+        logger.warn(
+          "ServiceWorkerManager not initialized, skipping message revoke"
+        );
+        return;
+      }
+      await this.serviceWorkerManager.postMessage({
+        type: "REVOKE_MESSAGE",
+        payload: { messageID }
+      });
+      logger.log("Message revoke sent to service-worker", messageID);
+    } catch (error) {
+      logger.error("Failed to send message revoke to service-worker", error);
+      throw error;
+    }
+  }
 }
 const webPush = WebPushSDK.getInstance();
 export {
   EVENT,
+  MessagePopup,
+  Placement,
   webPush as default,
   webPush
 };