customer-chat-sdk 1.1.16 → 1.1.17

package/dist/customer-sdk.esm.js

@@ -18,6 +18,7 @@ class IconManager {
         this.lastTouchPosition = { x: 0, y: 0 }; // 最后触摸位置
         this.touchStartTime = 0; // 触摸开始时间
         this.clickThreshold = 15; // 点击阈值（像素）
+        this.stoppedByIframe = false; // 是否因为 iframe 而停止拖动（用于避免触发磁性吸附）
         // 性能优化：缓存容器信息，避免频繁查询 DOM
         this.cachedContainer = null;
         this.cachedContainerRect = null;
@@ -80,6 +81,7 @@ class IconManager {
         this.iconElement = document.createElement('div');
         this.iconElement.className = 'customer-sdk-icon';
         // 直接设置样式 - 图标容器
+        // 关键优化：使用 pointer-events: none 让事件穿透到 iframe，子元素使用 pointer-events: auto 保持可点击
         const defaultStyle = {
             position: 'absolute',
             width: '30px',
@@ -96,7 +98,8 @@ class IconManager {
             transition: 'transform 0.2s ease',
             border: 'none',
             outline: 'none',
-            overflow: 'visible' // 允许红点显示在图标外部
+            overflow: 'visible', // 允许红点显示在图标外部
+            pointerEvents: 'none' // 让事件穿透到 iframe，只有子元素可以接收事件
         };
         // 如果指定了位置，使用left/top；否则使用默认的bottom/right
         if (this.iconPosition) {
@@ -194,7 +197,8 @@ class IconManager {
             height: '100%',
             borderRadius: '50%',
             overflow: 'hidden', // 限制图片溢出圆形边界
-            position: 'relative'
+            position: 'relative',
+            pointerEvents: 'auto' // 子元素启用指针事件，让 icon 可以点击和拖动
         });
         imgContainer.appendChild(iconImg);
         this.iconElement.appendChild(imgContainer);
@@ -597,8 +601,38 @@ class IconManager {
             target.closest('.customer-sdk-overlay'))) {
             return;
         }
+        // 关键优化：检查触摸点是否真的在 icon 的圆形区域内
+        // 如果不在，让事件穿透到 iframe，不触发拖动
+        if (this.iconElement) {
+            const iconRect = this.iconElement.getBoundingClientRect();
+            const clientX = 'touches' in e ? e.touches[0].clientX : e.clientX;
+            const clientY = 'touches' in e ? e.touches[0].clientY : e.clientY;
+            // 计算触摸点相对于 icon 中心的位置
+            const iconCenterX = iconRect.left + iconRect.width / 2;
+            const iconCenterY = iconRect.top + iconRect.height / 2;
+            const iconRadius = Math.min(iconRect.width, iconRect.height) / 2;
+            const distanceFromCenter = Math.sqrt(Math.pow(clientX - iconCenterX, 2) + Math.pow(clientY - iconCenterY, 2));
+            // 如果触摸点在 icon 圆形区域外（留一点边距，比如 10px），不处理拖动
+            // 这样可以让 iframe 内的滑动正常工作
+            // 但边距不能太大，否则无法拖动
+            if (distanceFromCenter > iconRadius + 10) {
+                if (this.debug) {
+                    console.log('[IconManager] Touch point outside icon circle, allowing event to pass through', {
+                        distance: distanceFromCenter,
+                        radius: iconRadius,
+                        touchPoint: { x: clientX, y: clientY },
+                        iconCenter: { x: iconCenterX, y: iconCenterY }
+                    });
+                }
+                return;
+            }
+        }
         e.preventDefault();
         e.stopPropagation();
+        // 拖动开始时，临时启用 pointer-events 确保拖动事件能正常接收
+        if (this.iconElement) {
+            this.iconElement.style.pointerEvents = 'auto';
+        }
         // 重置状态
         this.hasMoved = false;
         this.dragStarted = false;
@@ -778,29 +812,8 @@ class IconManager {
                     });
                 }
             }
-            // 检查鼠标是否在任何 iframe 上
-            for (const { rect, element } of this.cachedIframes) {
-                if (clientX >= rect.left &&
-                    clientX <= rect.right &&
-                    clientY >= rect.top &&
-                    clientY <= rect.bottom) {
-                    // 鼠标在 iframe 上，立即停止拖动
-                    if (this.debug) {
-                        console.log('[IconManager] Mouse over iframe detected, stopping drag immediately', {
-                            mousePosition: { x: clientX, y: clientY },
-                            iframeRect: {
-                                left: rect.left,
-                                top: rect.top,
-                                right: rect.right,
-                                bottom: rect.bottom
-                            },
-                            iframeSrc: element.src || 'no src'
-                        });
-                    }
-                    this.stopDrag();
-                    return;
-                }
-            }
+            // 移除 iframe 检测停止拖动的逻辑，让拖动可以在 iframe 上顺畅进行
+            // 不再因为检测到 iframe 而停止拖动，保持拖动的流畅性
         }
         // 更新最后记录的鼠标位置和时间戳（用于主动检测）
         const now = Date.now();
@@ -910,19 +923,18 @@ class IconManager {
             // 计算新位置
             let newX = clientX - this.dragOffset.x - containerRect.left;
             let newY = clientY - this.dragOffset.y - containerRect.top;
-            // 限制在容器内
-            if (container === document.body) {
-                // 限制在视口内
-                newX = Math.max(0, Math.min(newX, window.innerWidth - iconWidth));
-                newY = Math.max(0, Math.min(newY, window.innerHeight - iconHeight));
-            }
-            else {
-                // 限制在容器内
-                const containerWidth = containerRect.width;
-                const containerHeight = containerRect.height;
-                newX = Math.max(0, Math.min(newX, containerWidth - iconWidth));
-                newY = Math.max(0, Math.min(newY, containerHeight - iconHeight));
-            }
+            // 允许拖动到容器外（允许负值），但限制在合理范围内（避免拖得太远）
+            // 允许拖动到容器外，最多隐藏到只剩一小部分可见
+            const minX = -iconWidth + 5; // 允许向左拖动，最多隐藏到只剩 5px
+            const maxX = container === document.body
+                ? window.innerWidth - 5 // 允许向右拖动，最多隐藏到只剩 5px
+                : containerRect.width + iconWidth - 5; // 允许超出容器，最多隐藏到只剩 5px
+            const minY = -iconHeight + 5; // 允许向上拖动，最多隐藏到只剩 5px
+            const maxY = container === document.body
+                ? window.innerHeight - 5 // 允许向下拖动，最多隐藏到只剩 5px
+                : containerRect.height + iconHeight - 5; // 允许超出容器，最多隐藏到只剩 5px
+            newX = Math.max(minX, Math.min(newX, maxX));
+            newY = Math.max(minY, Math.min(newY, maxY));
             // 性能优化：使用 requestAnimationFrame 节流位置更新
             this.pendingPosition.x = newX;
             this.pendingPosition.y = newY;
@@ -989,6 +1001,8 @@ class IconManager {
         // 恢复样式
         this.iconElement.style.transition = 'transform 0.2s ease';
         this.iconElement.style.cursor = 'pointer';
+        // 拖动结束时，恢复 pointer-events: none 让事件穿透到 iframe
+        this.iconElement.style.pointerEvents = 'none';
         // 检查是否是点击
         const touchDuration = Date.now() - this.touchStartTime;
         const isValidClick = !this.hasMoved && touchDuration < 1000 && !this.dragStarted;
@@ -1005,26 +1019,37 @@ class IconManager {
         }
         // 先保存点击状态，然后重置拖动状态
         const wasClick = isValidClick;
-        // 如果真正拖动过，执行磁性吸附
-        if (this.dragStarted && this.magnetic && this.iconElement) {
-            this.magneticSnap();
+        // 保存 stoppedByIframe 状态，用于后续判断是否启动自动吸附
+        const wasStoppedByIframe = this.stoppedByIframe;
+        // 如果是因为 iframe 而停止拖动，不执行磁性吸附和自动吸附
+        // 这样可以避免拖动到 iframe 上时 icon 缩回去
+        if (this.stoppedByIframe) {
+            if (this.debug) {
+                console.log('[IconManager] Drag stopped by iframe, skipping magnetic snap and auto attach');
+            }
         }
-        // 如果真正拖动过，保存当前位置到 iconPosition
-        if (this.dragStarted && this.isDragging && this.iconElement) {
-            const computedStyle = window.getComputedStyle(this.iconElement);
-            const left = computedStyle.left;
-            const top = computedStyle.top;
-            // 如果 left/top 是有效的像素值，保存到 iconPosition
-            if (left !== 'auto' && top !== 'auto') {
-                const leftValue = parseFloat(left);
-                const topValue = parseFloat(top);
-                if (!isNaN(leftValue) && !isNaN(topValue)) {
-                    this.iconPosition = {
-                        x: leftValue,
-                        y: topValue
-                    };
-                    if (this.debug) {
-                        console.log('Icon position saved:', this.iconPosition);
+        else {
+            // 如果真正拖动过，执行磁性吸附
+            if (this.dragStarted && this.magnetic && this.iconElement) {
+                this.magneticSnap();
+            }
+            // 如果真正拖动过，保存当前位置到 iconPosition
+            if (this.dragStarted && this.isDragging && this.iconElement) {
+                const computedStyle = window.getComputedStyle(this.iconElement);
+                const left = computedStyle.left;
+                const top = computedStyle.top;
+                // 如果 left/top 是有效的像素值，保存到 iconPosition
+                if (left !== 'auto' && top !== 'auto') {
+                    const leftValue = parseFloat(left);
+                    const topValue = parseFloat(top);
+                    if (!isNaN(leftValue) && !isNaN(topValue)) {
+                        this.iconPosition = {
+                            x: leftValue,
+                            y: topValue
+                        };
+                        if (this.debug) {
+                            console.log('Icon position saved:', this.iconPosition);
+                        }
                     }
                 }
             }
@@ -1034,8 +1059,10 @@ class IconManager {
         this.isDragging = false;
         this.dragStarted = false;
         this.isStoppingDrag = false; // 重置停止标志
+        this.stoppedByIframe = false; // 重置 iframe 停止标志
         // 如果拖动后没有吸附到侧边，启动自动吸附定时器
-        if (!this.isAttachedToSide && this.sideAttach && this.autoAttachDelay > 0) {
+        // 但如果是因为 iframe 而停止拖动，不启动自动吸附
+        if (!wasStoppedByIframe && !this.isAttachedToSide && this.sideAttach && this.autoAttachDelay > 0) {
             this.startAutoAttachTimer();
         }
         if (wasClick) {
@@ -1103,30 +1130,8 @@ class IconManager {
                         console.log(`[IconManager] Active detection: Updated iframe cache (${this.cachedIframes.length} iframes)`);
                     }
                 }
-                // 检查最后记录的鼠标位置是否在任何 iframe 上
-                for (const { rect, element } of this.cachedIframes) {
-                    if (clientX >= rect.left &&
-                        clientX <= rect.right &&
-                        clientY >= rect.top &&
-                        clientY <= rect.bottom) {
-                        // 鼠标在 iframe 上，立即停止拖动
-                        if (this.debug) {
-                            console.log('[IconManager] Active detection: Mouse over iframe detected, stopping drag immediately', {
-                                mousePosition: { x: clientX, y: clientY },
-                                iframeRect: {
-                                    left: rect.left,
-                                    top: rect.top,
-                                    right: rect.right,
-                                    bottom: rect.bottom
-                                },
-                                iframeSrc: element.src || 'no src',
-                                timeSinceLastMove
-                            });
-                        }
-                        this.stopDrag();
-                        return;
-                    }
-                }
+                // 移除 iframe 检测停止拖动的逻辑，让拖动可以在 iframe 上顺畅进行
+                // 不再因为检测到 iframe 而停止拖动，保持拖动的流畅性
             }
             // 继续检测
             this.activeDetectionRafId = requestAnimationFrame(checkMousePosition);
@@ -1479,6 +1484,7 @@ class IconManager {
             justifyContent: 'center',
             zIndex: '1000001',
             boxShadow: '0 -1px 4px rgba(0, 0, 0, 0.3), 0 2px 8px rgba(0, 0, 0, 0.15)',
+            pointerEvents: 'auto', // 子元素启用指针事件，让 badge 可以接收事件
             ...(count === 0 && text === '' && {
                 width: '12px',
                 height: '12px',
@@ -1970,10 +1976,23 @@ class IframeManager {
         }
         // 创建新的消息处理器并保存引用
         this.messageHandler = (event) => {
-            // 验证消息来源（可选的安全检查）
-            if (!this.config.src || event.origin === new URL(this.config.src).origin) {
-                this.handleIframeMessage(event.data);
+            // 关键：过滤掉自己通过 dispatchEvent 发送的消息，避免无限循环
+            // 自己发送的消息 source 是 window，而 iframe 发送的消息 source 是 iframe.contentWindow
+            if (event.source === window) {
+                if (this.debug) {
+                    console.log('[IframeManager] Ignoring self-broadcasted message to prevent infinite loop:', event.data);
+                }
+                return;
+            }
+            // 不验证来源，直接处理所有消息（确保消息能够被接收）
+            if (this.debug) {
+                console.log('[IframeManager] Message received:', {
+                    data: event.data,
+                    origin: event.origin,
+                    source: event.source
+                });
             }
+            this.handleIframeMessage(event.data);
         };
         window.addEventListener('message', this.messageHandler, false);
     }
@@ -1982,7 +2001,7 @@ class IframeManager {
      */
     handleIframeMessage(data) {
         if (this.debug) {
-            console.log('Message from iframe:', data);
+            console.log('[IframeManager] Message from iframe received:', data);
         }
         // 判断data是字符串还是对象，兼容两种格式
         let messageType;
@@ -1994,10 +2013,13 @@ class IframeManager {
         }
         else {
             if (this.debug) {
-                console.log('Unknown message format:', data);
+                console.log('[IframeManager] Unknown message format:', data);
             }
             return;
         }
+        if (this.debug) {
+            console.log('[IframeManager] Parsed message type:', messageType);
+        }
         // 根据消息类型处理不同的操作
         switch (messageType) {
             case 'iframe_ready':
@@ -2030,11 +2052,22 @@ class IframeManager {
                 }
                 break;
             case 'goto-login':
-                // 登录跳转消息 - 通过 window.postMessage 抛出给外层
+                // 登录跳转消息 - 广播给调用 SDK 的 Vue 页面
+                if (this.debug) {
+                    console.log('Received goto-login message, broadcasting to Vue page');
+                }
+                this.broadcastMessageToPage(data);
+                if (this.config.onMessage) {
+                    this.config.onMessage(messageType, data);
+                }
+                break;
+            case 'DCR_DEPOSIT':
+                // 存款跳转消息 - 广播给调用 SDK 的 Vue 页面
+                // payload.path 是动态的，例如: "?depositType=0&walletId=69382"
                 if (this.debug) {
-                    console.log('Received goto-login message, forwarding to parent window');
+                    console.log('Received DCR_DEPOSIT message, broadcasting to Vue page:', data);
                 }
-                this.forwardMessageToParent(data);
+                this.broadcastMessageToPage(data);
                 if (this.config.onMessage) {
                     this.config.onMessage(messageType, data);
                 }
@@ -2042,11 +2075,11 @@ class IframeManager {
             default:
                 // 处理动态消息：gotoActivityDetailById:xxx
                 if (typeof messageType === 'string' && messageType.startsWith('gotoActivityDetailById:')) {
-                    // 活动详情跳转消息 - 通过 window.postMessage 抛出给外层
+                    // 活动详情跳转消息 - 广播给调用 SDK 的 Vue 页面
                     if (this.debug) {
-                        console.log('Received gotoActivityDetailById message, forwarding to parent window:', messageType);
+                        console.log('Received gotoActivityDetailById message, broadcasting to Vue page:', messageType);
                     }
-                    this.forwardMessageToParent(data);
+                    this.broadcastMessageToPage(data);
                     if (this.config.onMessage) {
                         this.config.onMessage(messageType, data);
                     }
@@ -2061,31 +2094,42 @@ class IframeManager {
         }
     }
     /**
-     * 将消息转发给父窗口（通过 window.postMessage）
-     * 这样 Vue 页面中的监听器也能收到消息
+     * 向调用 SDK 的地方（Vue 页面）广播消息
+     * 通过 window.dispatchEvent 触发事件，让 Vue 页面中的 window.addEventListener('message') 可以收到
+     *
+     * 重要说明：
+     * 1. window.dispatchEvent 创建的事件会在同一窗口内触发所有监听器，无论 origin 是什么，Vue 页面都能收到
+     * 2. MessageEvent 的 origin 属性不能是 '*'，必须是有效的 origin 字符串（如 'http://localhost:5173'）
+     * 3. 我们使用 window.location.origin 来标识消息来源（当前页面的 origin）
+     * 4. 如果 Vue 页面需要检查 origin，应该检查 window.location.origin 而不是 '*'
      */
-    forwardMessageToParent(data) {
+    broadcastMessageToPage(data) {
         try {
-            // 方式1：使用 window.postMessage 发送消息（跨窗口通信）
-            // 如果存在父窗口且不是当前窗口，发送给父窗口
-            if (window.parent && window.parent !== window) {
-                window.parent.postMessage(data, '*');
-            }
-            // 方式2：使用 dispatchEvent 创建 MessageEvent（在同一窗口内触发所有监听器）
-            // 这样 Vue 页面中的 window.addEventListener('message') 也能收到
+            // 使用 dispatchEvent 创建 MessageEvent，在同一窗口内触发所有监听器
+            // 这样调用 SDK 的 Vue 页面中的 window.addEventListener('message') 也能收到
+            // 注意：MessageEvent 的 origin 属性不能是 '*'，必须是有效的 origin 字符串
+            // 我们使用 window.location.origin 来标识消息来源（当前页面的 origin）
+            // Vue 页面可以收到消息，因为 dispatchEvent 会在同一窗口内触发所有监听器
             const messageEvent = new MessageEvent('message', {
                 data: data,
-                origin: window.location.origin,
-                source: window
+                origin: window.location.origin, // 使用当前页面的 origin，不是 '*'（MessageEvent 不支持 '*'）
+                source: window,
+                bubbles: true,
+                cancelable: true
             });
             window.dispatchEvent(messageEvent);
             if (this.debug) {
-                console.log('Message forwarded via window.postMessage and dispatchEvent:', data);
+                console.log('[IframeManager] Message broadcasted to Vue page via window.dispatchEvent:', {
+                    data: data,
+                    origin: window.location.origin,
+                    type: 'message',
+                    note: 'origin is window.location.origin, not "*" (MessageEvent does not support "*")'
+                });
             }
         }
         catch (error) {
             if (this.debug) {
-                console.error('Failed to forward message:', error);
+                console.error('[IframeManager] Failed to broadcast message:', error);
             }
         }
     }
@@ -2922,20 +2966,20 @@ function copyInputValue(node, cloned) {
 }
 
 const pseudoClasses = [
-  ":before",
-  ":after"
-  // ':placeholder', TODO
+  "::before",
+  "::after"
+  // '::placeholder', TODO
 ];
 const scrollbarPseudoClasses = [
-  ":-webkit-scrollbar",
-  ":-webkit-scrollbar-button",
-  // ':-webkit-scrollbar:horizontal', TODO
-  ":-webkit-scrollbar-thumb",
-  ":-webkit-scrollbar-track",
-  ":-webkit-scrollbar-track-piece",
-  // ':-webkit-scrollbar:vertical', TODO
-  ":-webkit-scrollbar-corner",
-  ":-webkit-resizer"
+  "::-webkit-scrollbar",
+  "::-webkit-scrollbar-button",
+  // '::-webkit-scrollbar:horizontal', TODO
+  "::-webkit-scrollbar-thumb",
+  "::-webkit-scrollbar-track",
+  "::-webkit-scrollbar-track-piece",
+  // '::-webkit-scrollbar:vertical', TODO
+  "::-webkit-scrollbar-corner",
+  "::-webkit-resizer"
 ];
 function copyPseudoClass(node, cloned, copyScrollbar, context, addWordToFontFamilies) {
   const { ownerWindow, svgStyleElement, svgStyles, currentNodeStyle } = context;
@@ -2979,7 +3023,7 @@ function copyPseudoClass(node, cloned, copyScrollbar, context, addWordToFontFami
       allClasses = [];
       svgStyles.set(cssText, allClasses);
     }
-    allClasses.push(`.${klasses[0]}:${pseudoClass}`);
+    allClasses.push(`.${klasses[0]}${pseudoClass}`);
   }
   pseudoClasses.forEach(copyBy);
   if (copyScrollbar)