@tencentcloud/web-push 1.0.3 → 1.0.4

package/src/components/message-popup.ts

@@ -1,1007 +0,0 @@
-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>`;
-  }
-}