customer-chat-sdk 1.1.5 → 1.1.6

package/dist/customer-sdk.esm.js

@@ -182,7 +182,7 @@ class IconManager {
         if (this.iconElement) {
             this.iconElement.remove();
             this.iconElement = null;
-            this.onClickCallback = null;
+            // 注意：不清空 onClickCallback，以便再次显示时能继续使用
             this.dragMoveHandler = null;
             this.dragEndHandler = null;
             if (this.debug) {
@@ -601,7 +601,6 @@ class IconManager {
 class IframeManager {
     constructor(config = {}) {
         this.iframeElement = null;
-        this.overlayElement = null;
         this.containerElement = null; // 包装容器，包含iframe和关闭按钮
         this.isOpen = false;
         this.isCreated = false;
@@ -623,18 +622,11 @@ class IframeManager {
      */
     async init() {
         try {
-            // 关键修复：在初始化前，先清理页面上所有旧的遮罩层和容器元素
+            // 关键修复：在初始化前，先清理页面上所有旧的容器元素
             // 防止切换模式或多次初始化时产生重复的元素
             this.cleanupOrphanedElements();
-            // PC模式：预创建遮罩层（隐藏状态），避免后续移动DOM导致iframe重新加载
-            const actualMode = this.getActualMode();
-            const isPC = actualMode === 'popup';
-            if (isPC) {
-                // 创建遮罩层但不立即显示（showImmediately = false）
-                this.createOverlay(false);
-            }
             // 创建隐藏的iframe（预连接到SSE）
-            // 注意：createIframe 会将容器添加到遮罩层（PC模式）或 body（移动端）
+            // 注意：createIframe 会将容器添加到 body
             this.createIframe();
             this.isCreated = true;
             if (this.debug) {
@@ -658,70 +650,24 @@ class IframeManager {
             throw new Error('Iframe not initialized. Call init() first.');
         }
         try {
-            const actualMode = this.getActualMode();
-            const isPC = actualMode === 'popup';
-            // PC模式：创建或显示遮罩层
-            if (isPC) {
-                // 如果遮罩层不存在，创建并显示；如果已存在，直接显示
-                this.createOverlay(true); // showImmediately = true，立即显示
-            }
             // 显示已创建的容器
             // 关键优化：容器在 init() 时已经添加到正确位置，这里只改变样式，不移动 DOM
             // 这样可以避免 iframe 重新加载
             if (this.containerElement) {
                 // 确保容器在 DOM 中（理论上已经在 init() 时添加，但为了安全）
                 if (!this.containerElement.parentNode) {
-                    // 如果容器不在 DOM 中（异常情况），根据模式添加到正确位置
-                    if (isPC && this.overlayElement) {
-                        // PC模式：确保遮罩层在 DOM 中，然后将容器添加到遮罩层
-                        if (!this.overlayElement.parentNode) {
-                            document.body.appendChild(this.overlayElement);
-                        }
-                        this.overlayElement.appendChild(this.containerElement);
-                    }
-                    else {
-                        // 移动端模式：直接添加到 body
-                        document.body.appendChild(this.containerElement);
-                    }
-                }
-                // 注意：不再检查容器是否在遮罩层内，因为 init() 时已经正确放置
-                // 如果移动容器会导致 iframe 重新加载，所以不移动
-                if (isPC) {
-                    // PC模式：配置为居中弹窗样式
-                    Object.assign(this.containerElement.style, {
-                        position: 'fixed',
-                        top: '50%',
-                        left: '50%',
-                        transform: 'translate(-50%, -50%)',
-                        visibility: 'visible',
-                        opacity: '1',
-                        display: 'block'
-                    });
-                    // 显示遮罩层（确保在 DOM 中）
-                    if (this.overlayElement) {
-                        // 确保遮罩层在 DOM 中
-                        if (!this.overlayElement.parentNode) {
-                            document.body.appendChild(this.overlayElement);
-                        }
-                        // 显示遮罩层（只改变样式，不移动）
-                        Object.assign(this.overlayElement.style, {
-                            visibility: 'visible',
-                            opacity: '1',
-                            display: 'flex'
-                        });
-                    }
-                }
-                else {
-                    // 移动端模式：直接全屏显示，不需要遮罩层
-                    Object.assign(this.containerElement.style, {
-                        position: 'fixed',
-                        visibility: 'visible',
-                        opacity: '1',
-                        display: 'block'
-                    });
-                    // 禁用body滚动，防止出现滚动条
-                    this.preventBodyScroll(true);
+                    // 如果容器不在 DOM 中（异常情况），直接添加到 body
+                    document.body.appendChild(this.containerElement);
                 }
+                // PC和移动端都使用全屏模式
+                Object.assign(this.containerElement.style, {
+                    position: 'fixed',
+                    visibility: 'visible',
+                    opacity: '1',
+                    display: 'block'
+                });
+                // 禁用body滚动，防止出现滚动条
+                this.preventBodyScroll(true);
             }
             this.isOpen = true;
             if (this.debug) {
@@ -753,22 +699,10 @@ class IframeManager {
                 opacity: '0',
                 display: 'none'
             });
-            // 注意：不移动容器，保持容器在当前位置（遮罩层或 body），避免 iframe 重新加载
-        }
-        // 隐藏遮罩层但不移除（仅PC模式，避免重新创建导致 iframe 重新加载）
-        if (this.overlayElement) {
-            Object.assign(this.overlayElement.style, {
-                visibility: 'hidden',
-                opacity: '0',
-                display: 'none'
-            });
-            // 不移除遮罩层，下次显示时直接显示即可
-        }
-        // 恢复body滚动（移动端模式）
-        const actualModeForScroll = this.getActualMode();
-        if (actualModeForScroll === 'fullscreen') {
-            this.preventBodyScroll(false);
+            // 注意：不移动容器，保持容器在当前位置（body），避免 iframe 重新加载
         }
+        // 恢复body滚动
+        this.preventBodyScroll(false);
         this.isOpen = false;
         if (this.debug) {
             console.log('CustomerSDK iframe hidden (SSE still connected)');
@@ -789,16 +723,12 @@ class IframeManager {
      */
     destroy() {
         this.hide();
-        // 移除容器和遮罩层
+        // 移除容器
         if (this.containerElement) {
             this.containerElement.remove();
             this.containerElement = null;
             this.iframeElement = null;
         }
-        if (this.overlayElement) {
-            this.overlayElement.remove();
-            this.overlayElement = null;
-        }
         this.isCreated = false;
         if (this.debug) {
             console.log('CustomerSDK container destroyed');
@@ -819,19 +749,9 @@ class IframeManager {
         }
     }
     /**
-     * 清理页面上孤立的遮罩层和容器元素（防止重复创建）
+     * 清理页面上孤立的容器元素（防止重复创建）
      */
     cleanupOrphanedElements() {
-        // 清理所有旧的遮罩层元素（不属于当前实例的）
-        const existingOverlays = document.querySelectorAll('.customer-sdk-overlay');
-        existingOverlays.forEach((overlay) => {
-            if (overlay !== this.overlayElement) {
-                overlay.remove();
-                if (this.debug) {
-                    console.log('清理旧的遮罩层元素');
-                }
-            }
-        });
         // 清理所有旧的容器元素（不属于当前实例的）
         const existingContainers = document.querySelectorAll('.customer-sdk-container');
         existingContainers.forEach((container) => {
@@ -843,55 +763,6 @@ class IframeManager {
             }
         });
     }
-    /**
-     * 创建遮罩层（PC模式使用）
-     * @param showImmediately 是否立即显示，默认 false（用于 init() 时创建但不显示）
-     */
-    createOverlay(showImmediately = false) {
-        // 如果遮罩层已存在
-        if (this.overlayElement) {
-            // 如果不在 DOM 中，添加到 DOM
-            if (!this.overlayElement.parentNode) {
-                document.body.appendChild(this.overlayElement);
-            }
-            // 根据参数决定是否显示
-            if (showImmediately) {
-                Object.assign(this.overlayElement.style, {
-                    visibility: 'visible',
-                    opacity: '1',
-                    display: 'flex'
-                });
-            }
-            return;
-        }
-        // 创建新的遮罩层
-        this.overlayElement = document.createElement('div');
-        this.overlayElement.className = 'customer-sdk-overlay';
-        Object.assign(this.overlayElement.style, {
-            position: 'fixed',
-            top: '0',
-            left: '0',
-            width: '100%',
-            height: '100%',
-            backgroundColor: 'rgba(0, 0, 0, 0.5)',
-            zIndex: '999998',
-            display: showImmediately ? 'flex' : 'none', // 根据参数决定初始显示状态
-            alignItems: 'center',
-            justifyContent: 'center',
-            cursor: this.config.allowClose ? 'pointer' : 'default',
-            visibility: showImmediately ? 'visible' : 'hidden',
-            opacity: showImmediately ? '1' : '0'
-        });
-        // 点击遮罩层关闭（只添加一次事件监听器）
-        if (this.config.allowClose) {
-            this.overlayElement.addEventListener('click', (e) => {
-                if (e.target === this.overlayElement) {
-                    this.close();
-                }
-            });
-        }
-        document.body.appendChild(this.overlayElement);
-    }
     /**
      * 创建iframe（默认隐藏状态，用于SSE连接）
      */
@@ -937,25 +808,26 @@ class IframeManager {
         // 根据设备类型设置模式
         const actualMode = this.getActualMode();
         const isPC = actualMode === 'popup';
-        this.iframeElement.scrolling = isPC ? 'auto' : 'no'; // PC显示滚动条，移动端禁用
-        // PC 模式：使用配置的宽度和高度
-        // 移动端：使用全屏
+        this.iframeElement.scrolling = 'auto'; // PC和移动端都显示滚动条
+        // PC模式：使用配置的宽度，高度100%；移动端：100%宽度和高度
         const containerStyles = isPC ? {
-            // PC 弹窗模式
+            // PC模式：配置的宽度，高度100%
             width: `${this.config.width || 450}px`,
-            height: `${this.config.height || 600}px`,
+            height: '100%',
             maxWidth: '90vw',
-            maxHeight: '90vh',
+            maxHeight: '100%',
             backgroundColor: '#ffffff',
-            borderRadius: '12px',
-            boxShadow: '0 20px 40px rgba(0, 0, 0, 0.15)',
+            borderRadius: '0',
+            boxShadow: 'none',
             border: 'none',
             position: 'fixed',
             zIndex: '999999',
-            // PC模式：居中显示
-            top: '50%',
+            // PC模式：水平居中，垂直占满
+            top: '0',
             left: '50%',
-            transform: 'translate(-50%, -50%)',
+            bottom: '0',
+            right: 'auto',
+            transform: 'translateX(-50%)',
             overflow: 'hidden',
             // 初始隐藏的关键样式
             visibility: 'hidden',
@@ -991,35 +863,20 @@ class IframeManager {
             width: '100%',
             height: '100%',
             border: 'none',
-            borderRadius: 'inherit',
-            ...(isPC ? {} : {
-                // 移动端：彻底禁用滚动条
-                overflow: 'hidden',
-                scrollbarWidth: 'none', // Firefox
-                msOverflowStyle: 'none', // IE/Edge
-                WebkitScrollbar: 'none' // WebKit (Chrome/Safari)
-            })
+            borderRadius: 'inherit'
         };
         Object.assign(this.iframeElement.style, iframeStyles);
         // 将iframe放入容器
         this.containerElement.appendChild(this.iframeElement);
         // 添加iframe加载事件监听（移动端样式优化）
         this.iframeElement.addEventListener('load', () => {
-            // 仅在移动端注入自定义样式
+            // 移动端注入自定义样式
             if (!isPC) {
                 this.injectMobileStyles();
             }
         });
-        // 关键优化：PC模式将容器添加到遮罩层（如果遮罩层已创建），避免后续移动DOM导致iframe重新加载
-        // 移动端直接添加到body
-        if (isPC && this.overlayElement) {
-            // PC模式：添加到遮罩层（遮罩层已在 init() 中创建）
-            this.overlayElement.appendChild(this.containerElement);
-        }
-        else {
-            // 移动端模式：直接添加到body
-            document.body.appendChild(this.containerElement);
-        }
+        // 关键优化：容器直接添加到body，避免后续移动DOM导致iframe重新加载
+        document.body.appendChild(this.containerElement);
         if (this.debug) {
             console.log('CustomerSDK container created (hidden, ready for SSE)');
         }
@@ -20989,9 +20846,9 @@ class CustomerServiceSDK {
                     // checkScreenshot 消息由 ScreenshotManager 处理，不需要在这里处理
                 },
                 onClose: () => {
-                    // iframe关闭时，清理图标拖动事件监听器，并重新启用图标点击
+                    // iframe关闭时，清理图标拖动事件监听器，并重新显示图标
                     this.iconManager?.forceCleanupDragEvents();
-                    this.iconManager?.enableClick();
+                    this.iconManager?.show();
                 },
                 ...options
             });
@@ -21001,9 +20858,9 @@ class CustomerServiceSDK {
             this.iconManager.onClick(() => {
                 // 打开iframe时清除红点通知
                 this.clearNotification();
+                // 点击图标后隐藏图标
+                this.iconManager?.hide();
                 this.iframeManager?.show();
-                // iframe 打开后，禁用图标点击（防止重复打开）
-                this.iconManager?.disableClick();
             });
             // 初始化截图管理器（如果启用了截图功能）
             if (config.screenshot) {