customer-chat-sdk 1.1.0 → 1.1.1

package/dist/customer-sdk.esm.js

@@ -13,8 +13,12 @@ class IconManager {
         this.iconStartY = 0;
         this.dragMoveHandler = null;
         this.dragEndHandler = null;
+        this.checkDragHandler = null; // 临时拖动检测监听器
+        this.dragStartHandler = null; // 拖动开始事件监听器
+        this.touchStartHandler = null; // 触摸开始事件监听器
         this.iconPosition = null; // 图标位置配置
         this.debug = false; // debug 模式标志
+        this.isClickEnabled = true; // 是否允许点击（iframe 打开时禁用）
         this.iconPosition = position || null;
         this.debug = debug;
     }
@@ -30,7 +34,7 @@ class IconManager {
         this.iconElement.className = 'customer-sdk-icon';
         // 直接设置样式 - 图标容器
         const defaultStyle = {
-            position: 'fixed',
+            position: 'absolute',
             width: '30px',
             height: '30px',
             backgroundColor: 'transparent', // 移除背景色，让图片直接显示
@@ -39,7 +43,7 @@ class IconManager {
             alignItems: 'center',
             justifyContent: 'center',
             cursor: 'pointer',
-            zIndex: '999999',
+            zIndex: '1000002', // 确保图标始终在最上层（遮罩层 999998，iframe 容器 999999）
             boxShadow: '0 4px 12px rgba(0, 0, 0, 0.15)',
             userSelect: 'none',
             transition: 'transform 0.2s ease',
@@ -266,9 +270,11 @@ class IconManager {
         // 绑定事件处理器（用于后续清理）
         this.dragMoveHandler = this.handleDragMove.bind(this);
         this.dragEndHandler = this.handleDragEnd.bind(this);
-        // 只在图标上监听开始事件
-        this.iconElement.addEventListener('mousedown', this.handleDragStart.bind(this));
-        this.iconElement.addEventListener('touchstart', this.handleDragStart.bind(this), { passive: false });
+        this.dragStartHandler = this.handleDragStart.bind(this);
+        // 只在图标上监听开始事件（保存引用以便后续移除）
+        this.iconElement.addEventListener('mousedown', this.dragStartHandler);
+        this.touchStartHandler = this.handleDragStart.bind(this);
+        this.iconElement.addEventListener('touchstart', this.touchStartHandler, { passive: false });
     }
     /**
      * 开始拖动
@@ -291,12 +297,33 @@ class IconManager {
         const rect = this.iconElement.getBoundingClientRect();
         this.iconStartX = rect.left;
         this.iconStartY = rect.top;
-        // 添加拖动样式
-        this.iconElement.style.transition = 'none';
-        this.iconElement.style.cursor = 'grabbing';
+        // 注意：不要在这里立即移除 transition 和设置 cursor
+        // 只有在真正开始拖动时才修改样式，避免点击时图标位置跳动
         // 只在真正开始拖动时添加document事件监听
         // 先添加一个临时的move监听器来检测是否真的在拖动
         const checkDrag = (moveEvent) => {
+            // 检测事件目标：如果事件发生在iframe或其他元素上，停止检测拖动
+            const target = moveEvent.target;
+            if (target && target !== this.iconElement && !this.iconElement?.contains(target)) {
+                // 检查是否是iframe相关元素
+                const isIframeElement = target.tagName === 'IFRAME' ||
+                    target.closest('iframe') ||
+                    target.closest('.customer-sdk-container') ||
+                    target.closest('.customer-sdk-overlay');
+                if (isIframeElement) {
+                    // 如果事件发生在iframe相关元素上，停止检测并清理监听器
+                    if (this.checkDragHandler) {
+                        if ('touches' in moveEvent) {
+                            document.removeEventListener('touchmove', this.checkDragHandler);
+                        }
+                        else {
+                            document.removeEventListener('mousemove', this.checkDragHandler);
+                        }
+                        this.checkDragHandler = null;
+                    }
+                    return;
+                }
+            }
             const moveX = 'touches' in moveEvent ? moveEvent.touches[0].clientX : moveEvent.clientX;
             const moveY = 'touches' in moveEvent ? moveEvent.touches[0].clientY : moveEvent.clientY;
             const deltaX = moveX - this.dragStartX;
@@ -304,12 +331,20 @@ class IconManager {
             // 如果移动距离超过5px，开始拖动
             if (Math.abs(deltaX) > 5 || Math.abs(deltaY) > 5) {
                 this.isDragging = true;
-                // 移除临时监听器
-                if ('touches' in moveEvent) {
-                    document.removeEventListener('touchmove', checkDrag);
+                // 只有在真正开始拖动时才移除 transition 和设置 cursor
+                if (this.iconElement) {
+                    this.iconElement.style.transition = 'none';
+                    this.iconElement.style.cursor = 'grabbing';
                 }
-                else {
-                    document.removeEventListener('mousemove', checkDrag);
+                // 移除临时监听器
+                if (this.checkDragHandler) {
+                    if ('touches' in moveEvent) {
+                        document.removeEventListener('touchmove', this.checkDragHandler);
+                    }
+                    else {
+                        document.removeEventListener('mousemove', this.checkDragHandler);
+                    }
+                    this.checkDragHandler = null;
                 }
                 // 添加正式的事件监听器
                 if (this.dragMoveHandler && this.dragEndHandler) {
@@ -324,13 +359,15 @@ class IconManager {
                 }
             }
         };
+        // 保存 checkDrag 引用，以便后续清理
+        this.checkDragHandler = checkDrag;
         // 添加临时检测监听器
         if ('touches' in e) {
-            document.addEventListener('touchmove', checkDrag, { passive: false });
+            document.addEventListener('touchmove', this.checkDragHandler, { passive: false });
             document.addEventListener('touchend', this.dragEndHandler);
         }
         else {
-            document.addEventListener('mousemove', checkDrag);
+            document.addEventListener('mousemove', this.checkDragHandler);
             document.addEventListener('mouseup', this.dragEndHandler);
         }
     }
@@ -342,20 +379,9 @@ class IconManager {
             return;
         const clientX = 'touches' in e ? e.touches[0].clientX : e.clientX;
         const clientY = 'touches' in e ? e.touches[0].clientY : e.clientY;
-        // 检测事件目标：如果事件发生在iframe或其他元素上，停止拖动
-        const target = e.target;
-        if (target && target !== this.iconElement && !this.iconElement.contains(target)) {
-            // 检查是否是iframe相关元素
-            const isIframeElement = target.tagName === 'IFRAME' ||
-                target.closest('iframe') ||
-                target.closest('.customer-sdk-container') ||
-                target.closest('.customer-sdk-overlay');
-            if (isIframeElement) {
-                // 如果事件发生在iframe相关元素上，停止拖动
-                this.handleDragEnd();
-                return;
-            }
-        }
+        // 注意：拖动过程中不检测 iframe 元素，因为用户可能只是想将图标拖动到 iframe 附近或上方
+        // 只有在拖动开始时（checkDrag 阶段）才检测 iframe，防止误判为拖动
+        // 一旦开始拖动，就应该允许拖动到任何位置，包括 iframe 上方
         // 计算从拖动开始位置到当前位置的距离
         const deltaX = clientX - this.dragStartX;
         const deltaY = clientY - this.dragStartY;
@@ -390,10 +416,15 @@ class IconManager {
     /**
      * 结束拖动
      */
-    handleDragEnd(e) {
+    handleDragEnd(_e) {
         if (!this.iconElement)
             return;
-        // 清理document上的事件监听器
+        // 清理document上的所有事件监听器（包括临时检测监听器）
+        if (this.checkDragHandler) {
+            document.removeEventListener('mousemove', this.checkDragHandler);
+            document.removeEventListener('touchmove', this.checkDragHandler);
+            this.checkDragHandler = null;
+        }
         if (this.dragMoveHandler) {
             document.removeEventListener('mousemove', this.dragMoveHandler);
             document.removeEventListener('touchmove', this.dragMoveHandler);
@@ -402,6 +433,8 @@ class IconManager {
             document.removeEventListener('mouseup', this.dragEndHandler);
             document.removeEventListener('touchend', this.dragEndHandler);
         }
+        // 恢复样式（如果之前被修改过）
+        // 注意：如果只是点击（没有拖动），这些样式可能没有被修改，但恢复操作是安全的
         this.iconElement.style.transition = 'transform 0.2s ease';
         this.iconElement.style.cursor = 'pointer';
         // 如果只是点击（没有拖动），触发点击事件
@@ -414,10 +447,52 @@ class IconManager {
      * 处理点击事件
      */
     handleClick() {
+        // 如果点击被禁用（iframe 打开时），不执行点击回调
+        if (!this.isClickEnabled) {
+            return;
+        }
         if (this.onClickCallback) {
             this.onClickCallback();
         }
     }
+    /**
+     * 禁用点击和拖拽（iframe 打开时调用）
+     */
+    disableClick() {
+        this.isClickEnabled = false;
+        // 移除拖动事件监听器
+        if (this.iconElement) {
+            if (this.dragStartHandler) {
+                this.iconElement.removeEventListener('mousedown', this.dragStartHandler);
+            }
+            if (this.touchStartHandler) {
+                this.iconElement.removeEventListener('touchstart', this.touchStartHandler);
+            }
+            // 禁用所有鼠标事件（包括点击和拖拽）
+            this.iconElement.style.pointerEvents = 'none';
+            this.iconElement.style.cursor = 'default';
+        }
+        // 清理可能正在进行的拖动
+        this.forceCleanupDragEvents();
+    }
+    /**
+     * 启用点击和拖拽（iframe 关闭时调用）
+     */
+    enableClick() {
+        this.isClickEnabled = true;
+        // 重新添加拖动事件监听器
+        if (this.iconElement) {
+            if (this.dragStartHandler) {
+                this.iconElement.addEventListener('mousedown', this.dragStartHandler);
+            }
+            if (this.touchStartHandler) {
+                this.iconElement.addEventListener('touchstart', this.touchStartHandler, { passive: false });
+            }
+            // 恢复鼠标事件
+            this.iconElement.style.pointerEvents = 'auto';
+            this.iconElement.style.cursor = 'pointer';
+        }
+    }
     /**
      * 创建消息徽章（简化版）
      */
@@ -483,7 +558,7 @@ class IframeManager {
         this.config = {
             src: '',
             mode: 'auto', // 默认自动检测设备类型
-            width: 400,
+            width: 450, // PC 模式默认宽度
             height: 600,
             allowClose: true,
             ...config
@@ -523,9 +598,9 @@ class IframeManager {
         try {
             const actualMode = this.getActualMode();
             const isPC = actualMode === 'popup';
-            // 只PC模式下创建遮罩层
+            // PC模式：创建或显示遮罩层
             if (isPC) {
-                this.createOverlay();
+                this.createOverlay(); // createOverlay 内部会检查是否已存在
             }
             // 显示已创建的容器
             if (this.containerElement) {
@@ -540,8 +615,18 @@ class IframeManager {
                         opacity: '1',
                         display: 'block'
                     });
-                    // 将容器移到遮罩层内
-                    this.overlayElement?.appendChild(this.containerElement);
+                    // 关键优化：避免重复移动容器导致 iframe 重新加载
+                    // 只有当容器不在遮罩层内时才移动，且确保遮罩层在 DOM 中
+                    if (this.overlayElement) {
+                        // 如果遮罩层不在 DOM 中，先添加到 DOM
+                        if (!this.overlayElement.parentNode) {
+                            document.body.appendChild(this.overlayElement);
+                        }
+                        // 只有当容器不在遮罩层内时才移动（避免重复移动导致 iframe 重新加载）
+                        if (this.containerElement.parentNode !== this.overlayElement) {
+                            this.overlayElement.appendChild(this.containerElement);
+                        }
+                    }
                 }
                 else {
                     // 移动端模式：直接全屏显示，不需要遮罩层
@@ -578,22 +663,27 @@ class IframeManager {
         if (!this.isOpen) {
             return;
         }
-        // 隐藏容器但保留DOM元素
+        // 隐藏容器但保留DOM元素（不移动容器，避免 iframe 重新加载）
         if (this.containerElement) {
             Object.assign(this.containerElement.style, {
                 visibility: 'hidden',
                 opacity: '0',
                 display: 'none'
             });
+            // 注意：不移动容器，保持容器在当前位置（遮罩层或 body），避免 iframe 重新加载
         }
-        // 移除遮罩层（仅PC模式）
+        // 隐藏遮罩层但不移除（仅PC模式，避免重新创建导致 iframe 重新加载）
         if (this.overlayElement) {
-            this.overlayElement.remove();
-            this.overlayElement = null;
+            Object.assign(this.overlayElement.style, {
+                visibility: 'hidden',
+                opacity: '0',
+                display: 'none'
+            });
+            // 不移除遮罩层，下次显示时直接显示即可
         }
         // 恢复body滚动（移动端模式）
-        const actualMode = this.getActualMode();
-        if (actualMode === 'fullscreen') {
+        const actualModeForScroll = this.getActualMode();
+        if (actualModeForScroll === 'fullscreen') {
             this.preventBodyScroll(false);
         }
         this.isOpen = false;
@@ -641,9 +731,29 @@ class IframeManager {
         }
     }
     /**
-     * 创建遮罩层
+     * 创建遮罩层（PC模式使用）
      */
     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'
+            });
+            return;
+        }
+        // 创建新的遮罩层
         this.overlayElement = document.createElement('div');
         this.overlayElement.className = 'customer-sdk-overlay';
         Object.assign(this.overlayElement.style, {
@@ -659,7 +769,7 @@ class IframeManager {
             justifyContent: 'center',
             cursor: this.config.allowClose ? 'pointer' : 'default'
         });
-        // 点击遮罩层关闭
+        // 点击遮罩层关闭（只添加一次事件监听器）
         if (this.config.allowClose) {
             this.overlayElement.addEventListener('click', (e) => {
                 if (e.target === this.overlayElement) {
@@ -711,45 +821,59 @@ class IframeManager {
             'allow-pointer-lock', // 允许指针锁定
             'allow-storage-access-by-user-activation' // 允许用户激活的存储访问
         ].join(' '));
-        // 根据设备类型设置滚动行为
+        // 根据设备类型设置模式
         const actualMode = this.getActualMode();
         const isPC = actualMode === 'popup';
         this.iframeElement.scrolling = isPC ? 'auto' : 'no'; // PC显示滚动条，移动端禁用
-        const containerStyles = {
-            width: isPC ? `${this.config.width}px` : '100%',
-            height: isPC ? `${this.config.height}px` : '100%',
-            maxWidth: isPC ? '450px' : '100%',
-            maxHeight: isPC ? '700px' : '100%',
+        // PC 模式：使用配置的宽度和高度
+        // 移动端：使用全屏
+        const containerStyles = isPC ? {
+            // PC 弹窗模式
+            width: `${this.config.width || 450}px`,
+            height: `${this.config.height || 600}px`,
+            maxWidth: '90vw',
+            maxHeight: '90vh',
             backgroundColor: '#ffffff',
-            borderRadius: isPC ? '12px' : '12px 12px 0 0',
-            boxShadow: isPC
-                ? '0 20px 40px rgba(0, 0, 0, 0.15)'
-                : '0 -4px 16px rgba(0, 0, 0, 0.25)',
+            borderRadius: '12px',
+            boxShadow: '0 20px 40px rgba(0, 0, 0, 0.15)',
             border: 'none',
             position: 'fixed',
             zIndex: '999999',
-            // PC模式下的定位
-            ...(isPC ? {
-                top: '50%',
-                left: '50%',
-                transform: 'translate(-50%, -50%)'
-            } : {
-                // 移动端全屏模式 - 确保占满屏幕且不滚动
-                top: '0',
-                left: '0',
-                bottom: '0',
-                right: '0',
-                transform: 'none',
-                overflow: 'hidden', // 防止容器本身滚动
-                position: 'fixed' // 确保固定定位
-            }),
+            // PC模式：居中显示
+            top: '50%',
+            left: '50%',
+            transform: 'translate(-50%, -50%)',
+            overflow: 'hidden',
+            // 初始隐藏的关键样式
+            visibility: 'hidden',
+            opacity: '0',
+            display: 'none'
+        } : {
+            // 移动端全屏模式（强制 100% 宽度和高度）
+            width: '100%',
+            height: '100%',
+            maxWidth: '100%',
+            maxHeight: '100%',
+            backgroundColor: '#ffffff',
+            borderRadius: '12px 12px 0 0',
+            boxShadow: '0 -4px 16px rgba(0, 0, 0, 0.25)',
+            border: 'none',
+            position: 'fixed',
+            zIndex: '999999',
+            // 全屏模式 - 占满整个屏幕
+            top: '0',
+            left: '0',
+            bottom: '0',
+            right: '0',
+            transform: 'none',
+            overflow: 'hidden',
             // 初始隐藏的关键样式
             visibility: 'hidden',
             opacity: '0',
             display: 'none'
         };
         Object.assign(this.containerElement.style, containerStyles);
-        // iframe填充整个容器，根据设备类型设置滚动样式
+        // iframe填充整个容器
         const iframeStyles = {
             width: '100%',
             height: '100%',
@@ -883,6 +1007,7 @@ class IframeManager {
     }
     /**
      * 获取当前显示模式
+     * PC 模式使用弹窗，移动端使用全屏
      */
     getActualMode() {
         if (this.config.mode === 'auto') {
@@ -935,9 +1060,14 @@ class IframeManager {
                 break;
             case 'resize_iframe':
             case 'resize':
-                if (data.width && data.height) {
+                // PC模式支持 resize，移动端忽略
+                const actualMode = this.getActualMode();
+                if (actualMode === 'popup' && data.width && data.height) {
                     this.resizeIframe(data.width, data.height);
                 }
+                else if (this.debug) {
+                    console.log('Resize request ignored (fullscreen mode)');
+                }
                 break;
             case 'new-message':
                 // 新消息通知 - 触发回调让外层处理
@@ -956,12 +1086,12 @@ class IframeManager {
         }
     }
     /**
-     * 调整iframe大小
+     * 调整iframe大小（PC模式支持）
      */
     resizeIframe(width, height) {
-        if (this.iframeElement) {
-            this.iframeElement.style.width = `${width}px`;
-            this.iframeElement.style.height = `${height}px`;
+        if (this.containerElement) {
+            this.containerElement.style.width = `${width}px`;
+            this.containerElement.style.height = `${height}px`;
         }
     }
 }
@@ -20699,9 +20829,9 @@ class CustomerServiceSDK {
             // 创建iframe管理器（自动检测设备类型）
             this.iframeManager = new IframeManager({
                 src: iframeUrl,
-                mode: 'auto', // 自动根据设备类型选择模式
-                width: 400,
-                height: 600,
+                mode: 'auto', // 自动根据设备类型选择模式（PC弹窗，移动端全屏）
+                width: options?.width || 450, // PC模式宽度（像素，默认450px），移动端不使用
+                height: options?.height || 600, // PC模式高度（像素），移动端不使用（强制全屏）
                 allowClose: true,
                 debug: this.debug, // 传递 debug 标志
                 onMessage: (messageType, _data) => {
@@ -20713,8 +20843,9 @@ class CustomerServiceSDK {
                     // checkScreenshot 消息由 ScreenshotManager 处理，不需要在这里处理
                 },
                 onClose: () => {
-                    // iframe关闭时，清理图标拖动事件监听器
+                    // iframe关闭时，清理图标拖动事件监听器，并重新启用图标点击
                     this.iconManager?.forceCleanupDragEvents();
+                    this.iconManager?.enableClick();
                 },
                 ...options
             });
@@ -20725,6 +20856,8 @@ class CustomerServiceSDK {
                 // 打开iframe时清除红点通知
                 this.clearNotification();
                 this.iframeManager?.show();
+                // iframe 打开后，禁用图标点击（防止重复打开）
+                this.iconManager?.disableClick();
             });
             // 初始化截图管理器（如果启用了截图功能）
             if (config.screenshot) {