customer-chat-sdk 1.1.2 → 1.1.4

package/dist/core/IframeManager.d.ts

@@ -52,8 +52,13 @@ export declare class IframeManager {
      * 向iframe发送消息
      */
     sendToIframe(data: any): void;
+    /**
+     * 清理页面上孤立的遮罩层和容器元素（防止重复创建）
+     */
+    private cleanupOrphanedElements;
     /**
      * 创建遮罩层（PC模式使用）
+     * @param showImmediately 是否立即显示，默认 false（用于 init() 时创建但不显示）
      */
     private createOverlay;
     /**

package/dist/core/IframeManager.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"IframeManager.d.ts","sourceRoot":"","sources":["../../src/core/IframeManager.ts"],"names":[],"mappings":"AACA,UAAU,aAAa;IACrB,GAAG,CAAC,EAAE,MAAM,CAAA;IACZ,IAAI,CAAC,EAAE,MAAM,GAAG,YAAY,GAAG,OAAO,CAAA;IACtC,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,SAAS,CAAC,EAAE,CAAC,WAAW,EAAE,MAAM,EAAE,IAAI,EAAE,GAAG,KAAK,IAAI,CAAA;IACpD,OAAO,CAAC,EAAE,MAAM,IAAI,CAAA;IACpB,KAAK,CAAC,EAAE,OAAO,CAAA;CAChB;AAED,qBAAa,aAAa;IACxB,OAAO,CAAC,MAAM,CAAe;IAC7B,OAAO,CAAC,aAAa,CAAiC;IACtD,OAAO,CAAC,cAAc,CAA2B;IACjD,OAAO,CAAC,gBAAgB,CAA2B;IACnD,OAAO,CAAC,MAAM,CAAQ;IACtB,OAAO,CAAC,SAAS,CAAQ;IACzB,OAAO,CAAC,KAAK,CAAiB;gBAElB,MAAM,GAAE,aAAkB;IActC;;;OAGG;IACG,IAAI,IAAI,OAAO,CAAC,IAAI,CAAC;IAiB3B;;OAEG;IACH,IAAI,IAAI,IAAI;IAsEZ;;OAEG;IACH,IAAI,IAAI,IAAI;IAIZ;;OAEG;IACH,IAAI,IAAI,IAAI;IA0CZ;;OAEG;IACH,KAAK,IAAI,IAAI;IAIb;;OAEG;IACH,OAAO,IAAI,IAAI;IAef;;OAEG;IACH,YAAY,IAAI,OAAO;IAIvB;;OAEG;IACH,YAAY,CAAC,IAAI,EAAE,GAAG,GAAG,IAAI;IAM7B;;OAEG;IACH,OAAO,CAAC,aAAa;IAoDrB;;OAEG;IACH,OAAO,CAAC,YAAY;IAuIpB;;OAEG;IACH,OAAO,CAAC,kBAAkB;IA8D1B;;OAEG;IACH,OAAO,CAAC,iBAAiB;IAoCzB;;OAEG;IACH,OAAO,CAAC,cAAc;IAKtB;;;OAGG;IACH,OAAO,CAAC,aAAa;IAOrB;;OAEG;IACH,OAAO,CAAC,oBAAoB;IAS5B;;OAEG;IACH,OAAO,CAAC,mBAAmB;IAwD3B;;OAEG;IACH,OAAO,CAAC,YAAY;CAMrB"}
+{"version":3,"file":"IframeManager.d.ts","sourceRoot":"","sources":["../../src/core/IframeManager.ts"],"names":[],"mappings":"AACA,UAAU,aAAa;IACrB,GAAG,CAAC,EAAE,MAAM,CAAA;IACZ,IAAI,CAAC,EAAE,MAAM,GAAG,YAAY,GAAG,OAAO,CAAA;IACtC,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,SAAS,CAAC,EAAE,CAAC,WAAW,EAAE,MAAM,EAAE,IAAI,EAAE,GAAG,KAAK,IAAI,CAAA;IACpD,OAAO,CAAC,EAAE,MAAM,IAAI,CAAA;IACpB,KAAK,CAAC,EAAE,OAAO,CAAA;CAChB;AAED,qBAAa,aAAa;IACxB,OAAO,CAAC,MAAM,CAAe;IAC7B,OAAO,CAAC,aAAa,CAAiC;IACtD,OAAO,CAAC,cAAc,CAA2B;IACjD,OAAO,CAAC,gBAAgB,CAA2B;IACnD,OAAO,CAAC,MAAM,CAAQ;IACtB,OAAO,CAAC,SAAS,CAAQ;IACzB,OAAO,CAAC,KAAK,CAAiB;gBAElB,MAAM,GAAE,aAAkB;IActC;;;OAGG;IACG,IAAI,IAAI,OAAO,CAAC,IAAI,CAAC;IA8B3B;;OAEG;IACH,IAAI,IAAI,IAAI;IA2FZ;;OAEG;IACH,IAAI,IAAI,IAAI;IAIZ;;OAEG;IACH,IAAI,IAAI,IAAI;IA0CZ;;OAEG;IACH,KAAK,IAAI,IAAI;IAIb;;OAEG;IACH,OAAO,IAAI,IAAI;IAqBf;;OAEG;IACH,YAAY,IAAI,OAAO;IAIvB;;OAEG;IACH,YAAY,CAAC,IAAI,EAAE,GAAG,GAAG,IAAI;IAM7B;;OAEG;IACH,OAAO,CAAC,uBAAuB;IAwB/B;;;OAGG;IACH,OAAO,CAAC,aAAa;IAmDrB;;OAEG;IACH,OAAO,CAAC,YAAY;IA8IpB;;OAEG;IACH,OAAO,CAAC,kBAAkB;IA8D1B;;OAEG;IACH,OAAO,CAAC,iBAAiB;IAoCzB;;OAEG;IACH,OAAO,CAAC,cAAc;IAKtB;;;OAGG;IACH,OAAO,CAAC,aAAa;IAOrB;;OAEG;IACH,OAAO,CAAC,oBAAoB;IAS5B;;OAEG;IACH,OAAO,CAAC,mBAAmB;IAwD3B;;OAEG;IACH,OAAO,CAAC,YAAY;CAMrB"}

package/dist/customer-sdk.cjs.js

@@ -627,7 +627,18 @@ 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（移动端）
             this.createIframe();
             this.isCreated = true;
             if (this.debug) {
@@ -655,10 +666,30 @@ class IframeManager {
             const isPC = actualMode === 'popup';
             // PC模式：创建或显示遮罩层
             if (isPC) {
-                this.createOverlay(); // createOverlay 内部会检查是否已存在
+                // 如果遮罩层不存在，创建并显示；如果已存在，直接显示
+                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, {
@@ -670,17 +701,18 @@ class IframeManager {
                         opacity: '1',
                         display: 'block'
                     });
-                    // 关键优化：避免重复移动容器导致 iframe 重新加载
-                    // 只有当容器不在遮罩层内时才移动，且确保遮罩层在 DOM 中
+                    // 显示遮罩层（确保在 DOM 中）
                     if (this.overlayElement) {
-                        // 如果遮罩层不在 DOM 中，先添加到 DOM
+                        // 确保遮罩层在 DOM 中
                         if (!this.overlayElement.parentNode) {
                             document.body.appendChild(this.overlayElement);
                         }
-                        // 只有当容器不在遮罩层内时才移动（避免重复移动导致 iframe 重新加载）
-                        if (this.containerElement.parentNode !== this.overlayElement) {
-                            this.overlayElement.appendChild(this.containerElement);
-                        }
+                        // 显示遮罩层（只改变样式，不移动）
+                        Object.assign(this.overlayElement.style, {
+                            visibility: 'visible',
+                            opacity: '1',
+                            display: 'flex'
+                        });
                     }
                 }
                 else {
@@ -761,11 +793,16 @@ 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');
@@ -785,27 +822,50 @@ class IframeManager {
             this.iframeElement.contentWindow.postMessage(data, '*');
         }
     }
+    /**
+     * 清理页面上孤立的遮罩层和容器元素（防止重复创建）
+     */
+    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) => {
+            if (container !== this.containerElement) {
+                container.remove();
+                if (this.debug) {
+                    console.log('清理旧的容器元素');
+                }
+            }
+        });
+    }
     /**
      * 创建遮罩层（PC模式使用）
+     * @param showImmediately 是否立即显示，默认 false（用于 init() 时创建但不显示）
      */
-    createOverlay() {
-        // 如果遮罩层已存在，直接显示即可
-        if (this.overlayElement && this.overlayElement.parentNode) {
-            Object.assign(this.overlayElement.style, {
-                visibility: 'visible',
-                opacity: '1',
-                display: 'flex'
-            });
-            return;
-        }
-        // 如果遮罩层存在但不在 DOM 中，重新添加到 DOM
-        if (this.overlayElement && !this.overlayElement.parentNode) {
-            document.body.appendChild(this.overlayElement);
-            Object.assign(this.overlayElement.style, {
-                visibility: 'visible',
-                opacity: '1',
-                display: 'flex'
-            });
+    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;
         }
         // 创建新的遮罩层
@@ -819,10 +879,12 @@ class IframeManager {
             height: '100%',
             backgroundColor: 'rgba(0, 0, 0, 0.5)',
             zIndex: '999998',
-            display: 'flex',
+            display: showImmediately ? 'flex' : 'none', // 根据参数决定初始显示状态
             alignItems: 'center',
             justifyContent: 'center',
-            cursor: this.config.allowClose ? 'pointer' : 'default'
+            cursor: this.config.allowClose ? 'pointer' : 'default',
+            visibility: showImmediately ? 'visible' : 'hidden',
+            opacity: showImmediately ? '1' : '0'
         });
         // 点击遮罩层关闭（只添加一次事件监听器）
         if (this.config.allowClose) {
@@ -952,8 +1014,16 @@ class IframeManager {
                 this.injectMobileStyles();
             }
         });
-        // 添加到body（预连接SSE，但不显示）
-        document.body.appendChild(this.containerElement);
+        // 关键优化：PC模式将容器添加到遮罩层（如果遮罩层已创建），避免后续移动DOM导致iframe重新加载
+        // 移动端直接添加到body
+        if (isPC && this.overlayElement) {
+            // PC模式：添加到遮罩层（遮罩层已在 init() 中创建）
+            this.overlayElement.appendChild(this.containerElement);
+        }
+        else {
+            // 移动端模式：直接添加到body
+            document.body.appendChild(this.containerElement);
+        }
         if (this.debug) {
             console.log('CustomerSDK container created (hidden, ready for SSE)');
         }

package/dist/customer-sdk.esm.js

@@ -623,7 +623,18 @@ 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（移动端）
             this.createIframe();
             this.isCreated = true;
             if (this.debug) {
@@ -651,10 +662,30 @@ class IframeManager {
             const isPC = actualMode === 'popup';
             // PC模式：创建或显示遮罩层
             if (isPC) {
-                this.createOverlay(); // createOverlay 内部会检查是否已存在
+                // 如果遮罩层不存在，创建并显示；如果已存在，直接显示
+                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, {
@@ -666,17 +697,18 @@ class IframeManager {
                         opacity: '1',
                         display: 'block'
                     });
-                    // 关键优化：避免重复移动容器导致 iframe 重新加载
-                    // 只有当容器不在遮罩层内时才移动，且确保遮罩层在 DOM 中
+                    // 显示遮罩层（确保在 DOM 中）
                     if (this.overlayElement) {
-                        // 如果遮罩层不在 DOM 中，先添加到 DOM
+                        // 确保遮罩层在 DOM 中
                         if (!this.overlayElement.parentNode) {
                             document.body.appendChild(this.overlayElement);
                         }
-                        // 只有当容器不在遮罩层内时才移动（避免重复移动导致 iframe 重新加载）
-                        if (this.containerElement.parentNode !== this.overlayElement) {
-                            this.overlayElement.appendChild(this.containerElement);
-                        }
+                        // 显示遮罩层（只改变样式，不移动）
+                        Object.assign(this.overlayElement.style, {
+                            visibility: 'visible',
+                            opacity: '1',
+                            display: 'flex'
+                        });
                     }
                 }
                 else {
@@ -757,11 +789,16 @@ 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');
@@ -781,27 +818,50 @@ class IframeManager {
             this.iframeElement.contentWindow.postMessage(data, '*');
         }
     }
+    /**
+     * 清理页面上孤立的遮罩层和容器元素（防止重复创建）
+     */
+    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) => {
+            if (container !== this.containerElement) {
+                container.remove();
+                if (this.debug) {
+                    console.log('清理旧的容器元素');
+                }
+            }
+        });
+    }
     /**
      * 创建遮罩层（PC模式使用）
+     * @param showImmediately 是否立即显示，默认 false（用于 init() 时创建但不显示）
      */
-    createOverlay() {
-        // 如果遮罩层已存在，直接显示即可
-        if (this.overlayElement && this.overlayElement.parentNode) {
-            Object.assign(this.overlayElement.style, {
-                visibility: 'visible',
-                opacity: '1',
-                display: 'flex'
-            });
-            return;
-        }
-        // 如果遮罩层存在但不在 DOM 中，重新添加到 DOM
-        if (this.overlayElement && !this.overlayElement.parentNode) {
-            document.body.appendChild(this.overlayElement);
-            Object.assign(this.overlayElement.style, {
-                visibility: 'visible',
-                opacity: '1',
-                display: 'flex'
-            });
+    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;
         }
         // 创建新的遮罩层
@@ -815,10 +875,12 @@ class IframeManager {
             height: '100%',
             backgroundColor: 'rgba(0, 0, 0, 0.5)',
             zIndex: '999998',
-            display: 'flex',
+            display: showImmediately ? 'flex' : 'none', // 根据参数决定初始显示状态
             alignItems: 'center',
             justifyContent: 'center',
-            cursor: this.config.allowClose ? 'pointer' : 'default'
+            cursor: this.config.allowClose ? 'pointer' : 'default',
+            visibility: showImmediately ? 'visible' : 'hidden',
+            opacity: showImmediately ? '1' : '0'
         });
         // 点击遮罩层关闭（只添加一次事件监听器）
         if (this.config.allowClose) {
@@ -948,8 +1010,16 @@ class IframeManager {
                 this.injectMobileStyles();
             }
         });
-        // 添加到body（预连接SSE，但不显示）
-        document.body.appendChild(this.containerElement);
+        // 关键优化：PC模式将容器添加到遮罩层（如果遮罩层已创建），避免后续移动DOM导致iframe重新加载
+        // 移动端直接添加到body
+        if (isPC && this.overlayElement) {
+            // PC模式：添加到遮罩层（遮罩层已在 init() 中创建）
+            this.overlayElement.appendChild(this.containerElement);
+        }
+        else {
+            // 移动端模式：直接添加到body
+            document.body.appendChild(this.containerElement);
+        }
         if (this.debug) {
             console.log('CustomerSDK container created (hidden, ready for SSE)');
         }