@tencentcloud/web-push 1.0.2 → 1.0.3

package/src/components/message-popup.ts

@@ -0,0 +1,1007 @@
+import { StandardMessage, HtmlMessage } from '../types';
+import { logger } from '../utils/logger';
+
+export interface PopupConfig {
+  /** 是否启用弹窗 */
+  enabled?: boolean;
+  /** 弹窗显示时长（毫秒），0 表示不自动关闭 */
+  duration?: number;
+  /** 弹窗位置 */
+  position?:
+    | 'center'
+    | 'top-left'
+    | 'top-center'
+    | 'top-right'
+    | 'right-center'
+    | 'bottom-right'
+    | 'bottom-center'
+    | 'bottom-left'
+    | 'left-center';
+  /** 最大显示数量 */
+  maxCount?: number;
+  /** 是否显示关闭按钮 */
+  showCloseButton?: boolean;
+  /** 是否允许点击弹窗 */
+  clickable?: boolean;
+  /** 自定义渲染函数 */
+  customRender?: (message: any, container: HTMLElement) => HTMLElement;
+  /** 点击回调 */
+  onClick?: (message: any, popup: HTMLElement) => void;
+  /** 关闭回调 */
+  onClose?: (message: any, popup: HTMLElement) => void;
+}
+
+export class MessagePopup {
+  private container: HTMLElement | null = null;
+  private popups: Map<string, HTMLElement> = new Map();
+  private timers: Map<string, NodeJS.Timeout> = new Map(); // 存储定时器
+  private messageHandlers: Map<string, (event: MessageEvent) => void> =
+    new Map(); // 存储消息监听器
+  private animationTimers: Map<string, NodeJS.Timeout> = new Map(); // 存储动画定时器
+  private adjustHeightTimers: Map<string, NodeJS.Timeout> = new Map(); // 存储高度调整定时器
+  private config: Required<PopupConfig>;
+  private readonly defaultConfig: Required<PopupConfig> = {
+    enabled: true,
+    duration: 0, // 默认不自动关闭
+    position: 'top-right',
+    maxCount: 5,
+    showCloseButton: true,
+    clickable: true,
+    customRender: undefined as any,
+    onClick: undefined as any,
+    onClose: undefined as any,
+  };
+
+  constructor(config: PopupConfig = {}) {
+    this.config = { ...this.defaultConfig, ...config };
+    this.init();
+  }
+
+  private init(): void {
+    if (!this.config.enabled) return;
+
+    // 创建容器
+    this.createContainer();
+
+    // 注入样式
+    this.injectStyles();
+  }
+
+  private createContainer(): void {
+    // 检查是否已存在容器
+    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);
+  }
+
+  private injectStyles(): void {
+    // 检查是否已注入样式
+    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);
+  }
+
+  public show(message: StandardMessage | HtmlMessage): void {
+    if (!this.config.enabled || !this.container) return;
+
+    try {
+      if (this.popups.size >= this.config.maxCount) {
+        this.removeOldestPopup();
+      }
+
+      if (this.config.customRender) {
+        const popup = this.config.customRender(message, this.container);
+        this.addPopup(message.id, popup, message.MsgContent.Duration);
+        return;
+      }
+
+      let popup: HTMLElement;
+
+      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);
+    }
+  }
+
+  private createStandardPopup(
+    message: StandardMessage,
+    messageId: string
+  ): HTMLElement {
+    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 = (e) => {
+        e.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 = (e) => {
+          e.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 = (e) => {
+        e.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;
+  }
+
+  private createHtmlPopup(
+    message: HtmlMessage,
+    messageId: string
+  ): HTMLElement {
+    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: string): string => {
+        try {
+          const binaryStr = atob(base64Str);
+
+          const bytes = new Uint8Array(binaryStr.length);
+          for (let i = 0; i < binaryStr.length; i++) {
+            bytes[i] = binaryStr.charCodeAt(i);
+          }
+
+          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);
+
+      // 使用iframe来完全隔离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安全属性
+      iframe.setAttribute('sandbox', 'allow-same-origin allow-scripts');
+      iframe.setAttribute('loading', 'eager');
+
+      popup.appendChild(iframe);
+
+      const messageHandler = (event: MessageEvent) => {
+        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加载完成后写入内容
+      iframe.onload = writeContent;
+
+      // 如果iframe没有src，直接写入内容
+      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;
+  }
+
+  private addPopup(
+    messageId: string,
+    popup: HTMLElement,
+    messageDuration?: number
+  ): void {
+    if (!this.container) return;
+
+    this.popups.set(messageId, popup);
+    this.container.appendChild(popup);
+
+    // 自动关闭 - 优先使用消息中的duration（秒），然后使用全局配置（毫秒）
+    const duration =
+      messageDuration !== undefined
+        ? messageDuration * 1000 // 消息中的duration是秒，需要转换为毫秒
+        : this.config.duration; // 全局配置已经是毫秒
+
+    if (duration > 0) {
+      const timer = setTimeout(() => {
+        // 定时器自然执行完毕，清理引用
+        this.timers.delete(messageId);
+        this.close(messageId);
+      }, duration);
+      this.timers.set(messageId, timer);
+    }
+  }
+
+  private removeOldestPopup(): void {
+    const firstKey = this.popups.keys().next().value;
+    if (firstKey) {
+      this.close(firstKey);
+    }
+  }
+
+  public close(messageId: string): void {
+    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 } as any, 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 是否正在显示
+   */
+  public hasMessage(messageId: string): boolean {
+    return this.popups.has(messageId);
+  }
+
+  public closeAll(): void {
+    for (const messageId of this.popups.keys()) {
+      this.close(messageId);
+    }
+  }
+
+  public updateConfig(newConfig: Partial<PopupConfig>): void {
+    this.config = { ...this.config, ...newConfig };
+
+    // 如果禁用了弹窗，关闭所有现有弹窗
+    if (!this.config.enabled) {
+      this.closeAll();
+    }
+  }
+
+  public destroy(): void {
+    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-左中
+   */
+  private applyPlacement(placement: number): void {
+    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'
+    );
+
+    // 根据 placement 值添加对应的位置类
+    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高度以适应内容
+   */
+  private adjustIframeHeight(iframe: HTMLIFrameElement): void {
+    try {
+      const iframeDoc =
+        iframe.contentDocument || iframe.contentWindow?.document;
+      if (!iframeDoc) return;
+
+      // 获取iframe内容的实际高度
+      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';
+          // 在iframe内部也启用滚动
+          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文档
+   */
+  private createIframeHtml(bodyContent: string, messageId?: string): string {
+    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>`;
+  }
+}