customer-chat-sdk 1.1.16 → 1.1.18

package/dist/customer-sdk.cjs.js

@@ -16,12 +16,14 @@ class IconManager {
         this.target = null; // 图标传送目标元素（可以是 HTMLElement 或选择器字符串）
         // 拖动相关状态
         this.isDragging = false;
-        this.dragStarted = false; // 是否真正开始了拖拽
+        this.dragStarted = false; // 是否真正开始了拖拽（移动超过阈值）
+        this.dragIntent = false; // 拖动意图（mousedown/touchstart 时设置为 true，表示用户想要拖动）
         this.hasMoved = false; // 是否移动过
         this.dragOffset = { x: 0, y: 0 }; // 拖动偏移量
         this.lastTouchPosition = { x: 0, y: 0 }; // 最后触摸位置
         this.touchStartTime = 0; // 触摸开始时间
         this.clickThreshold = 15; // 点击阈值（像素）
+        this.stoppedByIframe = false; // 是否因为 iframe 而停止拖动（用于避免触发磁性吸附）
         // 性能优化：缓存容器信息，避免频繁查询 DOM
         this.cachedContainer = null;
         this.cachedContainerRect = null;
@@ -37,7 +39,9 @@ class IconManager {
         this.pendingPosition = { x: 0, y: 0, needsUpdate: false };
         // 主动检测机制：使用 requestAnimationFrame 定期检查鼠标位置（即使没有 mousemove 事件）
         this.activeDetectionRafId = null;
+        this.activeDetectionTimeoutId = null; // setTimeout 的 ID
         this.lastMousePosition = { x: 0, y: 0, timestamp: 0 }; // 最后记录的鼠标位置和时间戳
+        this.mouseVelocity = { vx: 0, vy: 0 }; // 鼠标移动速度（用于预测位置）
         // 事件处理器引用（用于清理）
         this.onDragHandler = null;
         this.stopDragHandler = null;
@@ -49,6 +53,7 @@ class IconManager {
         this.mouseLeaveTimeout = null; // 鼠标离开防抖定时器
         this.pointerLeaveTimeout = null; // 指针离开防抖定时器
         this.isStoppingDrag = false; // 防止 stopDrag 重复调用
+        this.hasLoggedIframeWarning = false; // 防止 iframe 警告日志重复输出
         // 侧边吸附相关状态
         this.sideAttach = true; // 是否启用侧边吸附（默认 true）
         this.sideHideRatio = 0.5; // 侧边吸附时的隐藏比例（默认 0.5，显示一半）
@@ -84,6 +89,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',
@@ -100,7 +106,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) {
@@ -198,12 +205,22 @@ class IconManager {
             height: '100%',
             borderRadius: '50%',
             overflow: 'hidden', // 限制图片溢出圆形边界
-            position: 'relative'
+            position: 'relative',
+            pointerEvents: 'auto' // 子元素启用指针事件，让 icon 可以点击和拖动
         });
         imgContainer.appendChild(iconImg);
         this.iconElement.appendChild(imgContainer);
         // 添加到目标元素（如果 target 是字符串，需要重新查找，因为可能在初始化时元素还不存在）
         const targetElement = this.getTargetElement();
+        if (this.debug) {
+            console.log('[IconManager] Target element for icon:', {
+                target: this.target,
+                targetElement: targetElement,
+                targetElementId: targetElement.id,
+                targetElementClass: targetElement.className,
+                isBody: targetElement === document.body
+            });
+        }
         // 确保目标容器有 overflow-x: hidden，防止图标超出边界时出现横向滚动条
         // 注意：只在启用侧边吸附时才设置，避免影响其他场景
         if (this.sideAttach && targetElement !== document.body) {
@@ -236,12 +253,20 @@ class IconManager {
         }
         if (targetElement) {
             targetElement.appendChild(this.iconElement);
+            if (this.debug) {
+                console.log('[IconManager] Icon added to target element:', {
+                    target: this.target,
+                    targetElement: targetElement,
+                    targetElementId: targetElement.id,
+                    targetElementClass: targetElement.className
+                });
+            }
         }
         else {
             // 如果目标元素不存在，回退到 document.body
             document.body.appendChild(this.iconElement);
             if (this.debug) {
-                console.warn('Target element not found, icon added to document.body');
+                console.warn('[IconManager] Target element not found, icon added to document.body');
             }
         }
         // 设置拖动事件
@@ -556,12 +581,70 @@ class IconManager {
         this.iconElement.addEventListener('mousedown', this.startDragHandler);
         this.iconElement.addEventListener('touchstart', this.startDragHandler, { passive: false });
     }
+    /**
+     * 检查 SDK iframe 是否打开（PC 模式）
+     * PC 模式下，如果 SDK iframe 打开，禁止拖动图标
+     */
+    isSDKIframeOpen() {
+        const isPC = window.innerWidth > 768;
+        if (!isPC)
+            return false; // 移动端不受影响
+        // 检查 SDK iframe 容器
+        const iframeContainer = document.querySelector('.customer-sdk-container');
+        if (!iframeContainer) {
+            if (this.debug) {
+                console.log('[IconManager] [PC+iframe] SDK iframe container not found');
+            }
+            return false;
+        }
+        // 检查 iframe 容器是否可见
+        // 注意：IframeManager.show() 会设置 visibility: 'visible', opacity: '1', display: 'block'
+        const style = window.getComputedStyle(iframeContainer);
+        const visibility = style.visibility;
+        const opacity = style.opacity;
+        const display = style.display;
+        // 更严格的检查：必须是 visible、opacity > 0、display 不是 none
+        const isVisible = (visibility === 'visible' &&
+            parseFloat(opacity) > 0 &&
+            display !== 'none');
+        if (this.debug) {
+            console.log('[IconManager] [PC+iframe] Checking SDK iframe visibility:', {
+                visibility,
+                opacity,
+                display,
+                isVisible,
+                parsedOpacity: parseFloat(opacity)
+            });
+        }
+        return isVisible;
+    }
     /**
      * 开始拖动
      */
     startDrag(e) {
         if (!this.iconElement || !this.isClickEnabled)
             return;
+        const clientX = 'touches' in e ? e.touches[0].clientX : e.clientX;
+        const clientY = 'touches' in e ? e.touches[0].clientY : e.clientY;
+        // PC 模式下，如果 SDK iframe 打开，禁止拖动图标
+        if (this.isSDKIframeOpen()) {
+            if (this.debug) {
+                console.log('[IconManager] [PC+iframe] SDK iframe is open, icon dragging disabled');
+            }
+            return;
+        }
+        // PC 模式下，如果鼠标在任何 iframe 上（排除 SDK 自己的 iframe），禁止拖动图标
+        const isPC = window.innerWidth > 768;
+        if (isPC && this.isMouseOverIframe(clientX, clientY)) {
+            if (this.debug) {
+                console.log('[IconManager] [PC+iframe] Mouse is over iframe, icon dragging disabled', {
+                    clientX,
+                    clientY,
+                    isPC
+                });
+            }
+            return;
+        }
         // 清除自动吸附定时器（用户开始拖动）
         this.clearAutoAttachTimer();
         // 如果正在停止拖动，等待完成后再允许新的拖动
@@ -582,6 +665,8 @@ class IconManager {
             }
             return;
         }
+        // 重置 iframe 警告标志
+        this.hasLoggedIframeWarning = false;
         // 如果发现残留的资源，先清理它们（防御性编程）
         if (this.dragTimeoutId !== null || this.activeDetectionRafId !== null || this.rafId !== null) {
             if (this.debug) {
@@ -601,16 +686,49 @@ class IconManager {
             target.closest('.customer-sdk-overlay'))) {
             return;
         }
+        // 关键优化：检查触摸点是否真的在 icon 的圆形区域内
+        // 如果不在，让事件穿透到 iframe，不触发拖动
+        if (this.iconElement) {
+            const iconRect = this.iconElement.getBoundingClientRect();
+            // 计算触摸点相对于 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;
         this.isDragging = false;
+        this.dragIntent = true; // 设置拖动意图，表示用户已经开始拖动意图（在 mousedown/touchstart 时）
         // 记录开始时间和位置
         this.touchStartTime = Date.now();
-        const clientX = 'touches' in e ? e.touches[0].clientX : e.clientX;
-        const clientY = 'touches' in e ? e.touches[0].clientY : e.clientY;
+        // 初始化 lastMousePosition，避免第一次 onDrag 时 timeSinceLastUpdate 过大
+        this.lastMousePosition = {
+            x: clientX,
+            y: clientY,
+            timestamp: Date.now()
+        };
         this.lastTouchPosition.x = clientX;
         this.lastTouchPosition.y = clientY;
         try {
@@ -628,14 +746,21 @@ class IconManager {
             // 注意：不在这里转换位置，只在真正开始拖动时才转换（在 onDrag 中）
             // 性能优化：在拖动开始时预加载所有 iframe 位置信息
             // 这样可以避免在拖动过程中频繁查询 DOM
+            // 注意：排除 SDK 自己的 iframe（customer-sdk-container 内的 iframe），因为 SDK 的 iframe 不应该影响拖动
             const allIframes = document.querySelectorAll('iframe');
-            this.cachedIframes = Array.from(allIframes).map(iframe => ({
+            this.cachedIframes = Array.from(allIframes)
+                .filter(iframe => {
+                // 检查 iframe 是否在 SDK 容器内
+                const container = iframe.closest('.customer-sdk-container');
+                return !container; // 排除 SDK 容器内的 iframe
+            })
+                .map(iframe => ({
                 element: iframe,
                 rect: iframe.getBoundingClientRect()
             }));
             this.lastIframeUpdateTime = Date.now();
             if (this.debug) {
-                console.log(`[IconManager] Drag start - Found ${this.cachedIframes.length} iframe(s)`, {
+                console.log(`[IconManager] Drag start - Found ${this.cachedIframes.length} iframe(s) (excluding SDK iframes)`, {
                     iframes: this.cachedIframes.map(({ rect }) => ({
                         left: rect.left,
                         top: rect.top,
@@ -657,43 +782,54 @@ class IconManager {
             }
             // 添加处理 iframe 上事件丢失的机制
             // 1. 监听 mouseleave 和 pointerleave 事件（鼠标离开窗口时停止拖动）
-            // 注意：这些事件可能会在拖动过程中多次触发，需要添加防抖机制
+            // 注意：当鼠标移动到 iframe 上时，这些事件可能会误触发，需要更严格的检测
             this.mouseLeaveHandler = (e) => {
-                // 只有当鼠标真正离开窗口时才停止拖动
-                if (!e.relatedTarget && (e.clientY <= 0 || e.clientX <= 0 ||
-                    e.clientX >= window.innerWidth || e.clientY >= window.innerHeight)) {
+                // 检查鼠标是否真的离开了窗口（而不是移动到 iframe 上）
+                // 只有当鼠标完全离开窗口边界时才停止拖动
+                const isReallyLeaving = (e.clientY < -10 ||
+                    e.clientX < -10 ||
+                    e.clientX > window.innerWidth + 10 ||
+                    e.clientY > window.innerHeight + 10);
+                // 还要检查是否在 iframe 区域内（如果在 iframe 上，不应该停止拖动）
+                if (isReallyLeaving && !this.isMouseOverIframe(e.clientX, e.clientY)) {
                     // 添加防抖，避免重复触发
                     if (this.mouseLeaveTimeout) {
                         clearTimeout(this.mouseLeaveTimeout);
                     }
                     this.mouseLeaveTimeout = window.setTimeout(() => {
-                        if ((this.isDragging || this.dragStarted) && !this.isStoppingDrag) {
+                        // 再次确认鼠标真的离开了窗口
+                        if ((this.isDragging || this.dragStarted) && !this.isStoppingDrag && !this.isMouseOverIframe(e.clientX, e.clientY)) {
                             if (this.debug) {
                                 console.log('[IconManager] Mouse left window, stopping drag');
                             }
                             this.stopDrag();
                         }
                         this.mouseLeaveTimeout = null;
-                    }, 50); // 50ms 防抖
+                    }, 100); // 增加到 100ms 防抖，避免误判
                 }
             };
             this.pointerLeaveHandler = (e) => {
-                // 只有当指针真正离开窗口时才停止拖动
-                if (!e.relatedTarget && (e.clientY <= 0 || e.clientX <= 0 ||
-                    e.clientX >= window.innerWidth || e.clientY >= window.innerHeight)) {
+                // 检查指针是否真的离开了窗口（而不是移动到 iframe 上）
+                const isReallyLeaving = (e.clientY < -10 ||
+                    e.clientX < -10 ||
+                    e.clientX > window.innerWidth + 10 ||
+                    e.clientY > window.innerHeight + 10);
+                // 还要检查是否在 iframe 区域内（如果在 iframe 上，不应该停止拖动）
+                if (isReallyLeaving && !this.isMouseOverIframe(e.clientX, e.clientY)) {
                     // 添加防抖，避免重复触发
                     if (this.pointerLeaveTimeout) {
                         clearTimeout(this.pointerLeaveTimeout);
                     }
                     this.pointerLeaveTimeout = window.setTimeout(() => {
-                        if ((this.isDragging || this.dragStarted) && !this.isStoppingDrag) {
+                        // 再次确认指针真的离开了窗口
+                        if ((this.isDragging || this.dragStarted) && !this.isStoppingDrag && !this.isMouseOverIframe(e.clientX, e.clientY)) {
                             if (this.debug) {
                                 console.log('[IconManager] Pointer left window, stopping drag');
                             }
                             this.stopDrag();
                         }
                         this.pointerLeaveTimeout = null;
-                    }, 50); // 50ms 防抖
+                    }, 100); // 增加到 100ms 防抖，避免误判
                 }
             };
             document.addEventListener('mouseleave', this.mouseLeaveHandler);
@@ -715,15 +851,97 @@ class IconManager {
             };
             window.addEventListener('blur', this.blurHandler);
             // 3. 添加超时机制（如果一段时间没有收到 mousemove 事件，自动停止拖动）
-            // 优化：缩短超时时间到 50ms，更快检测到事件丢失（特别是嵌套 iframe 场景）
-            this.dragTimeoutId = window.setTimeout(() => {
-                if (this.isDragging) {
-                    if (this.debug) {
-                        console.log('Drag timeout, stopping drag (likely mouse moved over iframe)');
-                    }
-                    this.stopDrag();
+            // 注意：在 startDrag 时，检查鼠标是否在 iframe 上
+            // 如果在 iframe 上，使用更长的超时时间（5秒），因为 mousemove 事件会丢失
+            // 如果不在 iframe 上，使用简单的超时逻辑（50ms）
+            const isPC = window.innerWidth > 768;
+            const isOverIframe = this.isMouseOverIframe(clientX, clientY);
+            if (isPC) {
+                // ========== PC 模式 ==========
+                if (isOverIframe) {
+                    // PC 模式 + 在 iframe 上：特殊处理逻辑
+                    // 在 iframe 上时，mousemove 事件会丢失，但 mouseup 事件仍然能收到
+                    // 所以使用更长的超时时间（5秒），等待 mouseup
+                    const checkDragTimeoutForPCIframe = () => {
+                        const lastPos = this.lastMousePosition;
+                        const stillOverIframe = lastPos && this.isMouseOverIframe(lastPos.x, lastPos.y);
+                        // 如果还在 iframe 上且还有拖动意图，继续等待 mouseup
+                        if (stillOverIframe && (this.dragIntent || this.dragStarted || this.isDragging)) {
+                            if (this.debug) {
+                                const timeSinceLastMove = Date.now() - this.lastMousePosition.timestamp;
+                                console.log('[IconManager] [PC+iframe] Drag timeout but mouse is over iframe, keeping drag active (waiting for mouseup)', {
+                                    timeSinceLastMove,
+                                    lastMousePosition: this.lastMousePosition
+                                });
+                            }
+                            // PC 模式 iframe 上：使用 5 秒超时，等待 mouseup
+                            this.dragTimeoutId = window.setTimeout(checkDragTimeoutForPCIframe, 5000);
+                            return;
+                        }
+                        // 不在 iframe 上了，或者拖动意图已消失，停止拖动
+                        if ((this.isDragging || this.dragStarted) && this.dragStarted) {
+                            if (this.debug) {
+                                console.warn('[IconManager] [PC+iframe] Drag timeout triggered, stopping drag');
+                            }
+                            this.stopDrag();
+                        }
+                    };
+                    // PC 模式 iframe 上：使用 5 秒超时
+                    this.dragTimeoutId = window.setTimeout(checkDragTimeoutForPCIframe, 5000);
+                }
+                else {
+                    // PC 模式 + 不在 iframe 上：还原到原来的简单逻辑
+                    // 原来的逻辑：简单的超时，50ms（和之前的代码一致）
+                    // 只有在真正拖动后（dragStarted = true）才停止拖动
+                    this.dragTimeoutId = window.setTimeout(() => {
+                        if (this.isDragging && this.dragStarted) {
+                            if (this.debug) {
+                                console.log('Drag timeout, stopping drag (likely mouse moved over iframe)');
+                            }
+                            this.stopDrag();
+                        }
+                    }, 50); // PC 模式非 iframe：使用 50ms 超时
                 }
-            }, 50); // 缩短到 50ms，更快检测到事件丢失（特别是嵌套 iframe 场景）
+            }
+            else {
+                // ========== 手机模式 ==========
+                if (isOverIframe) {
+                    // 手机模式 + 在 iframe 上：特殊处理逻辑
+                    const checkDragTimeoutForMobileIframe = () => {
+                        const lastPos = this.lastMousePosition;
+                        const stillOverIframe = lastPos && this.isMouseOverIframe(lastPos.x, lastPos.y);
+                        if (stillOverIframe && (this.dragIntent || this.dragStarted || this.isDragging)) {
+                            if (this.debug) {
+                                const timeSinceLastMove = Date.now() - this.lastMousePosition.timestamp;
+                                console.log('[IconManager] [Mobile+iframe] Drag timeout but mouse is over iframe, keeping drag active (waiting for mouseup)', {
+                                    timeSinceLastMove,
+                                    lastMousePosition: this.lastMousePosition
+                                });
+                            }
+                            this.dragTimeoutId = window.setTimeout(checkDragTimeoutForMobileIframe, 3000);
+                            return;
+                        }
+                        if ((this.isDragging || this.dragStarted) && this.dragStarted) {
+                            if (this.debug) {
+                                console.warn('[IconManager] [Mobile+iframe] Drag timeout triggered, stopping drag');
+                            }
+                            this.stopDrag();
+                        }
+                    };
+                    this.dragTimeoutId = window.setTimeout(checkDragTimeoutForMobileIframe, 3000);
+                }
+                else {
+                    // 手机模式 + 不在 iframe 上：使用简单的超时逻辑
+                    this.dragTimeoutId = window.setTimeout(() => {
+                        if (this.isDragging && this.dragStarted) {
+                            if (this.debug) {
+                                console.log('Drag timeout, stopping drag (likely mouse moved over iframe)');
+                            }
+                            this.stopDrag();
+                        }
+                    }, 50); // 手机模式：使用 50ms 超时
+                }
+            }
             // 4. 启动主动检测机制：使用 requestAnimationFrame 定期检查鼠标位置
             // 即使没有 mousemove 事件，也能检测到鼠标是否进入 iframe
             this.startActiveDetection();
@@ -752,27 +970,72 @@ class IconManager {
     onDrag(e) {
         if (!this.iconElement)
             return;
-        e.preventDefault();
         const clientX = 'touches' in e ? e.touches[0].clientX : e.clientX;
         const clientY = 'touches' in e ? e.touches[0].clientY : e.clientY;
+        // PC 模式下，如果 SDK iframe 打开，直接 return，禁止拖动
+        const isSDKOpen = this.isSDKIframeOpen();
+        if (this.debug) {
+            console.log('[IconManager] [PC+iframe] Checking SDK iframe status:', {
+                isSDKOpen,
+                windowWidth: window.innerWidth,
+                isPC: window.innerWidth > 768
+            });
+        }
+        if (isSDKOpen) {
+            if (this.debug) {
+                console.log('[IconManager] [PC+iframe] SDK iframe is open, blocking drag - returning immediately');
+            }
+            // 直接 return，不更新位置，不调用 stopDrag（让图标保持当前位置）
+            return;
+        }
+        // PC 模式下，如果鼠标在任何 iframe 上（排除 SDK 自己的 iframe），禁止拖动
+        const isPC = window.innerWidth > 768;
+        if (isPC && this.isMouseOverIframe(clientX, clientY)) {
+            if (this.debug) {
+                console.log('[IconManager] [PC+iframe] Mouse is over iframe, blocking drag - returning immediately', {
+                    clientX,
+                    clientY,
+                    isPC
+                });
+            }
+            // 直接 return，不更新位置，不调用 stopDrag（让图标保持当前位置）
+            return;
+        }
+        e.preventDefault();
         // 检测鼠标是否在任何 iframe 上（通过坐标判断）
-        // 如果检测到鼠标在 iframe 区域，立即停止拖动
+        // 注意：在 PC 模式下，当鼠标进入 iframe 后，mousemove 事件会丢失
+        // 但在此之前，我们仍然可以正常更新位置
+        if (this.debug) {
+            console.log('[IconManager] onDrag called', {
+                clientPosition: { x: clientX, y: clientY },
+                isDragging: this.isDragging,
+                dragStarted: this.dragStarted
+            });
+        }
         // 重要：需要检测所有 iframe（包括嵌套的），因为任何 iframe 都会导致事件丢失
-        if (this.isDragging) {
+        // 注意：即使 isDragging 为 false，只要 dragIntent 或 dragStarted 为 true，也应该继续处理
+        // 因为在 iframe 上时，isDragging 可能会因为 mousemove 事件丢失而暂时为 false
+        if (this.isDragging || this.dragIntent || this.dragStarted) {
             const now = Date.now();
             // 性能优化：缓存 iframe 位置信息，避免频繁查询 DOM
             if (this.cachedIframes.length === 0 ||
                 now - this.lastIframeUpdateTime > this.iframeUpdateInterval) {
-                // 更新 iframe 缓存
+                // 更新 iframe 缓存（排除 SDK 自己的 iframe）
                 const allIframes = document.querySelectorAll('iframe');
                 const previousCount = this.cachedIframes.length;
-                this.cachedIframes = Array.from(allIframes).map(iframe => ({
+                this.cachedIframes = Array.from(allIframes)
+                    .filter(iframe => {
+                    // 检查 iframe 是否在 SDK 容器内
+                    const container = iframe.closest('.customer-sdk-container');
+                    return !container; // 排除 SDK 容器内的 iframe
+                })
+                    .map(iframe => ({
                     element: iframe,
                     rect: iframe.getBoundingClientRect()
                 }));
                 this.lastIframeUpdateTime = now;
                 if (this.debug && this.cachedIframes.length !== previousCount) {
-                    console.log(`[IconManager] Iframe cache updated - Found ${this.cachedIframes.length} iframe(s)`, {
+                    console.log(`[IconManager] Iframe cache updated - Found ${this.cachedIframes.length} iframe(s) (excluding SDK iframes)`, {
                         iframes: this.cachedIframes.map(({ rect }) => ({
                             left: rect.left,
                             top: rect.top,
@@ -782,67 +1045,103 @@ 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();
         const timeSinceLastUpdate = now - this.lastMousePosition.timestamp;
+        const lastX = this.lastMousePosition.x;
+        const lastY = this.lastMousePosition.y;
+        const lastTimestamp = this.lastMousePosition.timestamp;
         this.lastMousePosition = {
             x: clientX,
             y: clientY,
             timestamp: now
         };
+        // 计算鼠标移动速度（用于在 iframe 上时预测位置）
+        if (lastTimestamp > 0 && timeSinceLastUpdate > 0 && timeSinceLastUpdate < 100) {
+            // 只在时间间隔合理时计算速度（避免时间间隔过大导致速度不准确）
+            const dt = timeSinceLastUpdate / 1000; // 转换为秒
+            this.mouseVelocity.vx = (clientX - lastX) / dt;
+            this.mouseVelocity.vy = (clientY - lastY) / dt;
+            // 限制速度范围，避免异常值
+            this.mouseVelocity.vx = Math.max(-2e3, Math.min(2000, this.mouseVelocity.vx));
+            this.mouseVelocity.vy = Math.max(-2e3, Math.min(2000, this.mouseVelocity.vy));
+        }
         // 如果距离上次更新超过 50ms，记录警告（可能事件丢失）
         if (this.debug && timeSinceLastUpdate > 50 && this.lastMousePosition.timestamp > 0) {
             console.warn(`[IconManager] Long gap between mousemove events: ${timeSinceLastUpdate}ms`, {
-                lastPosition: { x: this.lastMousePosition.x, y: this.lastMousePosition.y },
-                currentPosition: { x: clientX, y: clientY }
+                lastPosition: { x: lastX, y: lastY },
+                currentPosition: { x: clientX, y: clientY },
+                velocity: { vx: this.mouseVelocity.vx, vy: this.mouseVelocity.vy }
             });
         }
         // 重置超时定时器（每次移动都重置，确保只有真正停止移动时才触发超时）
-        // 优化：缩短超时时间到 50ms，更快检测到事件丢失（特别是嵌套 iframe 场景）
         if (this.dragTimeoutId !== null) {
             window.clearTimeout(this.dragTimeoutId);
-            this.dragTimeoutId = window.setTimeout(() => {
-                if (this.isDragging) {
-                    if (this.debug) {
-                        const timeSinceLastMove = Date.now() - this.lastMousePosition.timestamp;
-                        console.warn('[IconManager] Drag timeout triggered, stopping drag (likely mouse moved over iframe)', {
-                            timeSinceLastMove,
-                            lastMousePosition: this.lastMousePosition,
-                            iframeCount: this.cachedIframes.length
-                        });
-                    }
-                    this.stopDrag();
+            // 区分 PC 模式和手机模式，以及是否在 iframe 上
+            const isPC = window.innerWidth > 768;
+            // 检查鼠标是否在 iframe 上（简单判断）
+            const isOverIframe = this.isMouseOverIframe(clientX, clientY);
+            if (isPC) ;
+            else {
+                // ========== 手机模式 ==========
+                if (isOverIframe) {
+                    // 手机模式 + 在 iframe 上：特殊处理逻辑
+                    // 在 iframe 上时，mousemove 事件会丢失，但 mouseup 事件仍然能收到
+                    const checkDragTimeoutForMobileIframe = () => {
+                        const lastPos = this.lastMousePosition;
+                        const stillOverIframe = lastPos && this.isMouseOverIframe(lastPos.x, lastPos.y);
+                        // 如果还在 iframe 上且还有拖动意图，继续等待 mouseup
+                        if (stillOverIframe && (this.dragIntent || this.dragStarted || this.isDragging)) {
+                            if (this.debug) {
+                                const timeSinceLastMove = Date.now() - this.lastMousePosition.timestamp;
+                                console.log('[IconManager] [Mobile+iframe] Drag timeout but mouse is over iframe, keeping drag active (waiting for mouseup)', {
+                                    timeSinceLastMove,
+                                    lastMousePosition: this.lastMousePosition
+                                });
+                            }
+                            // 手机模式 iframe 上：使用 3 秒超时（比 PC 模式稍短），等待 mouseup
+                            this.dragTimeoutId = window.setTimeout(checkDragTimeoutForMobileIframe, 3000);
+                            return;
+                        }
+                        // 不在 iframe 上了，或者拖动意图已消失，停止拖动
+                        if (this.isDragging || this.dragStarted) {
+                            if (this.debug) {
+                                console.warn('[IconManager] [Mobile+iframe] Drag timeout triggered, stopping drag');
+                            }
+                            this.stopDrag();
+                        }
+                    };
+                    // 手机模式 iframe 上：使用 3 秒超时
+                    this.dragTimeoutId = window.setTimeout(checkDragTimeoutForMobileIframe, 3000);
                 }
-            }, 50); // 缩短到 50ms，更快检测到事件丢失（特别是嵌套 iframe 场景）
+                else {
+                    // 手机模式 + 不在 iframe 上：正常逻辑
+                    // 手机模式不在 iframe 上时，使用 200ms 超时
+                    this.dragTimeoutId = window.setTimeout(() => {
+                        if (this.isDragging) {
+                            if (this.debug) {
+                                const timeSinceLastMove = Date.now() - this.lastMousePosition.timestamp;
+                                console.warn('[IconManager] [Mobile] Drag timeout triggered, stopping drag', {
+                                    timeSinceLastMove,
+                                    lastMousePosition: this.lastMousePosition,
+                                    iframeCount: this.cachedIframes.length
+                                });
+                            }
+                            this.stopDrag();
+                        }
+                    }, 200);
+                }
+            }
         }
         // 检查是否有足够的移动距离
         const deltaX = Math.abs(clientX - this.lastTouchPosition.x);
         const deltaY = Math.abs(clientY - this.lastTouchPosition.y);
         const totalMovement = Math.sqrt(deltaX * deltaX + deltaY * deltaY);
+        // 只有在移动距离超过阈值时，才认为是拖动
+        // 这样可以避免轻微的鼠标抖动被误判为拖动
         if (totalMovement > this.clickThreshold) {
             this.hasMoved = true;
             if (!this.dragStarted) {
@@ -886,7 +1185,9 @@ class IconManager {
                 }
             }
         }
-        if (!this.isDragging) {
+        // 注意：即使 isDragging 为 false，只要 dragIntent 或 dragStarted 为 true，也应该继续处理
+        // 因为在 iframe 上时，isDragging 可能会因为 mousemove 事件丢失而暂时为 false
+        if (!this.isDragging && !this.dragIntent && !this.dragStarted) {
             return;
         }
         try {
@@ -911,41 +1212,184 @@ class IconManager {
             const containerRect = this.cachedContainerRect;
             const iconWidth = this.cachedIconSize.width;
             const iconHeight = this.cachedIconSize.height;
-            // 计算新位置
+            // 获取容器的实际宽度（考虑 max-width 限制）
+            // 使用 offsetWidth 或 clientWidth，它们会考虑 max-width 限制
+            const computedStyle = window.getComputedStyle(container);
+            const maxWidth = computedStyle.maxWidth;
+            const actualWidth = maxWidth && maxWidth !== 'none'
+                ? Math.min(containerRect.width, parseFloat(maxWidth) || containerRect.width)
+                : containerRect.width;
+            const actualHeight = containerRect.height;
+            // 确保 dragOffset 已经正确设置
+            // 如果 dragOffset 还没有设置（在 startDrag 中设置，但可能在某些情况下未设置），在这里计算
+            // 重要：只有在 dragOffset 真的为 0 且还没有开始拖动时才计算，避免在拖动过程中被重置
+            if ((this.dragOffset.x === 0 && this.dragOffset.y === 0) && (this.dragIntent || this.dragStarted) && this.iconElement && !this.dragStarted) {
+                // 只有在 dragIntent 为 true 但 dragStarted 为 false 时才计算 dragOffset
+                // 如果 dragStarted 已经为 true，说明 dragOffset 应该已经在 startDrag 中设置了，不应该重新计算
+                const currentRect = this.iconElement.getBoundingClientRect();
+                this.dragOffset.x = clientX - currentRect.left;
+                this.dragOffset.y = clientY - currentRect.top;
+                if (this.debug) {
+                    console.log('[IconManager] Calculated dragOffset in onDrag (fallback)', {
+                        dragOffset: this.dragOffset,
+                        clientPosition: { x: clientX, y: clientY },
+                        iconRect: currentRect,
+                        dragStarted: this.dragStarted,
+                        dragIntent: this.dragIntent
+                    });
+                }
+            }
+            // 计算新位置（相对于容器的实际内容区域）
             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));
+            // 允许拖动到容器外（允许负值），但限制在合理范围内（避免拖得太远）
+            // 允许拖动到容器外，最多隐藏到只剩一小部分可见
+            // 使用实际宽度（考虑 max-width 限制）而不是容器宽度
+            const minX = -iconWidth + 5; // 允许向左拖动，最多隐藏到只剩 5px
+            const maxX = container === document.body
+                ? window.innerWidth - 5 // 允许向右拖动，最多隐藏到只剩 5px
+                : actualWidth + iconWidth - 5; // 使用实际宽度（考虑 max-width），允许超出容器，最多隐藏到只剩 5px
+            const minY = -iconHeight + 5; // 允许向上拖动，最多隐藏到只剩 5px
+            const maxY = container === document.body
+                ? window.innerHeight - 5 // 允许向下拖动，最多隐藏到只剩 5px
+                : actualHeight + iconHeight - 5; // 允许超出容器，最多隐藏到只剩 5px
+            newX = Math.max(minX, Math.min(newX, maxX));
+            newY = Math.max(minY, Math.min(newY, maxY));
+            // 区分 PC 模式和手机模式，以及是否在 iframe 上
+            const isPC = window.innerWidth > 768;
+            // 检查鼠标是否在 iframe 上（简单判断）
+            const isOverIframe = this.isMouseOverIframe(clientX, clientY);
+            // 简化逻辑：直接更新位置，不管是否在 iframe 上
+            if (this.iconElement) {
+                // 重要：保护 dragOffset，确保它在拖动过程中不会被重新计算
+                // 逻辑顺序：
+                // 1. 如果 dragOffset 还没有设置（为 0），且 dragIntent 为 true，先计算 dragOffset
+                // 2. 然后在 iframe 上时，如果 dragIntent 为 true 但 dragStarted 为 false，提前设置 dragStarted
+                // 3. 这样确保 dragOffset 在 dragStarted 设置之前就已经计算好了
+                // 步骤 1：计算 dragOffset（只有在 dragOffset 为 0 且 dragIntent 为 true 时才计算）
+                if (this.dragIntent && (this.dragOffset.x === 0 && this.dragOffset.y === 0)) {
+                    const currentRect = this.iconElement.getBoundingClientRect();
+                    const oldDragOffset = { x: this.dragOffset.x, y: this.dragOffset.y };
+                    this.dragOffset.x = clientX - currentRect.left;
+                    this.dragOffset.y = clientY - currentRect.top;
+                    if (this.debug && isPC) {
+                        console.log('[IconManager] [PC+iframe] Calculated dragOffset', {
+                            oldDragOffset,
+                            newDragOffset: { x: this.dragOffset.x, y: this.dragOffset.y },
+                            clientPosition: { x: clientX, y: clientY },
+                            iconRect: currentRect,
+                            isOverIframe
+                        });
+                    }
+                }
+                else if (this.debug && isPC && this.dragStarted && (this.dragOffset.x === 0 && this.dragOffset.y === 0)) {
+                    // 警告：dragStarted 为 true 但 dragOffset 为 0，这是不应该发生的
+                    console.warn('[IconManager] [PC] dragOffset is 0 but dragStarted is true! This should not happen.', {
+                        dragStarted: this.dragStarted,
+                        dragIntent: this.dragIntent,
+                        isDragging: this.isDragging,
+                        isOverIframe
+                    });
+                }
+                // 步骤 2：在 iframe 上时，如果 dragIntent 为 true 但 dragStarted 为 false，提前设置 dragStarted
+                // 这样可以确保拖动状态正确
+                if (isOverIframe && this.dragIntent && !this.dragStarted) {
+                    this.dragStarted = true;
+                    this.isDragging = true;
+                    this.hasMoved = true;
+                }
+                // 更新位置
+                this.iconElement.style.left = `${newX}px`;
+                this.iconElement.style.top = `${newY}px`;
+                this.iconElement.style.right = 'auto';
+                this.iconElement.style.bottom = 'auto';
+                // 简化日志：只显示 x, y 坐标（PC 模式下总是输出，方便调试）
+                if (this.debug && isPC) {
+                    const calculatedX = clientX - this.dragOffset.x - containerRect.left;
+                    const calculatedY = clientY - this.dragOffset.y - containerRect.top;
+                    console.log('[IconManager] [PC+iframe] Icon position:', {
+                        x: newX,
+                        y: newY,
+                        isOverIframe,
+                        clientX,
+                        clientY,
+                        dragOffset: { x: this.dragOffset.x, y: this.dragOffset.y },
+                        containerLeft: containerRect.left,
+                        containerTop: containerRect.top,
+                        calculatedX,
+                        calculatedY,
+                        minX,
+                        maxX,
+                        actualWidth
+                    });
+                    // 如果计算出的位置和实际位置不一致，输出警告
+                    if (Math.abs(calculatedX - newX) > 1 || Math.abs(calculatedY - newY) > 1) {
+                        console.warn('[IconManager] [PC+iframe] Position calculation mismatch!', {
+                            calculated: { x: calculatedX, y: calculatedY },
+                            actual: { x: newX, y: newY },
+                            dragOffset: { x: this.dragOffset.x, y: this.dragOffset.y },
+                            containerRect: { left: containerRect.left, top: containerRect.top },
+                            clientPosition: { x: clientX, y: clientY }
+                        });
+                    }
+                }
+            }
+            // 超时逻辑：统一处理
+            if (isPC) {
+                // PC 模式：使用简单的超时逻辑
+                if (isOverIframe) {
+                    // PC 模式 + 在 iframe 上：使用较长的超时（因为 mousemove 事件会丢失）
+                    this.dragTimeoutId = window.setTimeout(() => {
+                        if (this.isDragging && this.dragStarted) {
+                            this.stopDrag();
+                        }
+                    }, 5000); // 5 秒超时，等待 mouseup
+                }
+                else {
+                    // PC 模式 + 不在 iframe 上：使用短超时
+                    this.dragTimeoutId = window.setTimeout(() => {
+                        if (this.isDragging && this.dragStarted) {
+                            this.stopDrag();
+                        }
+                    }, 50); // 50ms 超时
+                }
             }
             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));
-            }
-            // 性能优化：使用 requestAnimationFrame 节流位置更新
-            this.pendingPosition.x = newX;
-            this.pendingPosition.y = newY;
-            this.pendingPosition.needsUpdate = true;
-            if (this.rafId === null) {
-                this.rafId = requestAnimationFrame(() => {
-                    this.rafId = null;
-                    if (this.pendingPosition.needsUpdate && this.iconElement && this.isDragging) {
-                        this.iconElement.style.left = `${this.pendingPosition.x}px`;
-                        this.iconElement.style.top = `${this.pendingPosition.y}px`;
+                // ========== 手机模式 ==========
+                if (isOverIframe) {
+                    // 手机模式 + 在 iframe 上：直接更新 DOM
+                    if (this.iconElement) {
+                        this.iconElement.style.left = `${newX}px`;
+                        this.iconElement.style.top = `${newY}px`;
                         this.iconElement.style.right = 'auto';
                         this.iconElement.style.bottom = 'auto';
-                        this.pendingPosition.needsUpdate = false;
                     }
-                });
+                }
+                else {
+                    // 手机模式 + 不在 iframe 上：使用 requestAnimationFrame 节流
+                    this.pendingPosition.x = newX;
+                    this.pendingPosition.y = newY;
+                    this.pendingPosition.needsUpdate = true;
+                    if (this.rafId === null) {
+                        this.rafId = requestAnimationFrame(() => {
+                            this.rafId = null;
+                            if (this.pendingPosition.needsUpdate && this.iconElement && this.isDragging) {
+                                this.iconElement.style.left = `${this.pendingPosition.x}px`;
+                                this.iconElement.style.top = `${this.pendingPosition.y}px`;
+                                this.iconElement.style.right = 'auto';
+                                this.iconElement.style.bottom = 'auto';
+                                this.pendingPosition.needsUpdate = false;
+                            }
+                        });
+                    }
+                }
             }
-            // 更新最后位置
+            // 更新最后位置（同时更新 lastTouchPosition 和 lastMousePosition）
             this.lastTouchPosition.x = clientX;
             this.lastTouchPosition.y = clientY;
+            this.lastMousePosition.x = clientX;
+            this.lastMousePosition.y = clientY;
+            this.lastMousePosition.timestamp = Date.now();
         }
         catch (error) {
             if (this.debug) {
@@ -953,6 +1397,88 @@ class IconManager {
             }
         }
     }
+    /**
+     * 从鼠标位置更新图标位置（用于主动检测机制）
+     */
+    updateIconPositionFromMouse(clientX, clientY) {
+        // 这个方法只在 iframe 上时使用，因为 mousemove 事件丢失
+        // 检查拖动状态，只有在真正拖动中或拖动意图存在时才更新
+        if (!this.iconElement) {
+            return;
+        }
+        // 只有在拖动中或拖动意图存在时才更新位置
+        // 但需要确保 dragOffset 已经正确设置（在第一次 mousemove 时设置）
+        if (!this.isDragging && !this.dragIntent && !this.dragStarted) {
+            return;
+        }
+        // 如果 dragOffset 还没有设置（还没有收到过 mousemove 事件），需要先计算它
+        // 因为需要 dragOffset 来计算相对位置
+        if (this.dragOffset.x === 0 && this.dragOffset.y === 0) {
+            // 如果已经拖动开始了，从当前图标位置计算 dragOffset
+            if (this.dragStarted && this.iconElement) {
+                const currentRect = this.iconElement.getBoundingClientRect();
+                this.dragOffset.x = clientX - currentRect.left;
+                this.dragOffset.y = clientY - currentRect.top;
+            }
+            else {
+                // 如果还没有拖动开始，不能更新位置
+                return;
+            }
+        }
+        try {
+            const container = this.getTargetElement();
+            if (!container) {
+                return;
+            }
+            // 获取容器信息
+            const containerRect = container.getBoundingClientRect();
+            const iconWidth = this.iconElement.offsetWidth;
+            const iconHeight = this.iconElement.offsetHeight;
+            // 获取容器的实际渲染宽度和高度
+            const actualWidth = container === document.body
+                ? window.innerWidth
+                : container.offsetWidth;
+            const actualHeight = container === document.body
+                ? window.innerHeight
+                : container.offsetHeight;
+            // 计算新位置（相对于容器的实际内容区域）
+            let newX = clientX - this.dragOffset.x - containerRect.left;
+            let newY = clientY - this.dragOffset.y - containerRect.top;
+            // 允许拖动到容器外（允许负值），但限制在合理范围内
+            const minX = -iconWidth + 5;
+            const maxX = container === document.body
+                ? window.innerWidth - 5
+                : actualWidth + iconWidth - 5;
+            const minY = -iconHeight + 5;
+            const maxY = container === document.body
+                ? window.innerHeight - 5
+                : actualHeight + iconHeight - 5;
+            newX = Math.max(minX, Math.min(newX, maxX));
+            newY = Math.max(minY, Math.min(newY, maxY));
+            // 主动检测机制中，直接更新 DOM 确保流畅（不使用节流）
+            // 因为此时 mousemove 事件已经丢失，需要及时更新位置
+            if (this.iconElement) {
+                this.iconElement.style.left = `${newX}px`;
+                this.iconElement.style.top = `${newY}px`;
+                this.iconElement.style.right = 'auto';
+                this.iconElement.style.bottom = 'auto';
+                if (this.debug) {
+                    const timeSinceLastMove = Date.now() - this.lastMousePosition.timestamp;
+                    console.log('[IconManager] [PC+iframe] Updated icon position in startActiveDetection', {
+                        mousePosition: { x: clientX, y: clientY },
+                        iconPosition: { x: newX, y: newY },
+                        timeSinceLastMove,
+                        lastMousePosition: this.lastMousePosition
+                    });
+                }
+            }
+        }
+        catch (error) {
+            if (this.debug) {
+                console.error('[IconManager] Error in updateIconPositionFromMouse:', error);
+            }
+        }
+    }
     /**
      * 停止拖动
      */
@@ -972,6 +1498,36 @@ class IconManager {
             return;
         }
         this.isStoppingDrag = true;
+        // 在 iframe 上时，如果 mouseup 事件存在，从事件中获取鼠标位置并更新图标位置
+        // 这是解决 iframe 上拖动时图标不跟随鼠标的关键
+        if (_e && this.dragStarted && this.iconElement) {
+            const clientX = 'clientX' in _e ? _e.clientX : _e.touches?.[0]?.clientX ?? _e.changedTouches?.[0]?.clientX ?? 0;
+            const clientY = 'clientY' in _e ? _e.clientY : _e.touches?.[0]?.clientY ?? _e.changedTouches?.[0]?.clientY ?? 0;
+            if (clientX > 0 && clientY > 0) {
+                // 检查鼠标是否在 iframe 上
+                const isOverIframe = this.isMouseOverIframe(clientX, clientY);
+                if (isOverIframe) {
+                    // 在 iframe 上时，从 mouseup 事件中获取鼠标位置并更新图标位置
+                    // 更新 lastMousePosition，这样后续的逻辑可以使用最新的位置
+                    this.lastMousePosition = {
+                        x: clientX,
+                        y: clientY,
+                        timestamp: Date.now()
+                    };
+                    // 更新图标位置
+                    this.updateIconPositionFromMouse(clientX, clientY);
+                    if (this.debug) {
+                        console.log('[IconManager] [PC+iframe] Updated icon position from mouseup event', {
+                            mousePosition: { x: clientX, y: clientY },
+                            iconPosition: this.iconElement ? {
+                                left: this.iconElement.style.left,
+                                top: this.iconElement.style.top
+                            } : null
+                        });
+                    }
+                }
+            }
+        }
         const stopReason = this.isDragging ? 'drag_stopped' : 'not_dragging';
         const finalPosition = this.iconElement ? {
             left: this.iconElement.style.left,
@@ -987,15 +1543,28 @@ class IconManager {
             this.hasMoved = false;
             this.isDragging = false;
             this.dragStarted = false;
+            this.dragIntent = false;
             this.isStoppingDrag = false;
             return;
         }
         // 恢复样式
         this.iconElement.style.transition = 'transform 0.2s ease';
         this.iconElement.style.cursor = 'pointer';
+        // 拖动结束时，恢复 pointer-events: none 让事件穿透到 iframe
+        this.iconElement.style.pointerEvents = 'none';
         // 检查是否是点击
+        // 点击的条件：
+        // 1. 没有移动过（hasMoved = false）
+        // 2. 持续时间小于 1000ms
+        // 3. 没有真正开始拖动（dragStarted = false）
+        // 4. 没有拖动意图（dragIntent = false）或者拖动意图存在但持续时间很短（可能是误触）
+        // 5. 没有真正拖动过（isDragging = false）
         const touchDuration = Date.now() - this.touchStartTime;
-        const isValidClick = !this.hasMoved && touchDuration < 1000 && !this.dragStarted;
+        const isValidClick = !this.hasMoved &&
+            touchDuration < 1000 &&
+            !this.dragStarted &&
+            !this.isDragging &&
+            (!this.dragIntent || touchDuration < 200); // 如果 dragIntent 存在，但持续时间很短（< 200ms），可能是误触，也认为是点击
         if (this.debug) {
             console.log('[IconManager] Drag end', {
                 stopReason,
@@ -1009,26 +1578,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);
+                        }
                     }
                 }
             }
@@ -1037,9 +1617,13 @@ class IconManager {
         this.hasMoved = false;
         this.isDragging = false;
         this.dragStarted = false;
+        this.dragIntent = false; // 重置拖动意图
         this.isStoppingDrag = false; // 重置停止标志
+        this.stoppedByIframe = false; // 重置 iframe 停止标志
+        this.hasLoggedIframeWarning = false; // 重置 iframe 警告标志
         // 如果拖动后没有吸附到侧边，启动自动吸附定时器
-        if (!this.isAttachedToSide && this.sideAttach && this.autoAttachDelay > 0) {
+        // 但如果是因为 iframe 而停止拖动，不启动自动吸附
+        if (!wasStoppedByIframe && !this.isAttachedToSide && this.sideAttach && this.autoAttachDelay > 0) {
             this.startAutoAttachTimer();
         }
         if (wasClick) {
@@ -1068,72 +1652,88 @@ class IconManager {
             console.log('[IconManager] Starting active detection mechanism');
         }
         const checkMousePosition = () => {
-            // 检查是否还在拖动中，如果不在拖动中或正在停止，则停止检测
-            if (!this.isDragging || this.isStoppingDrag) {
+            // 检查是否还在拖动中
+            // 注意：即使 isDragging 暂时为 false（因为 mousemove 事件丢失），
+            // 只要 dragIntent 或 dragStarted 为 true，说明用户还在拖动，应该继续检测
+            if (this.isStoppingDrag || (!this.isDragging && !this.dragStarted && !this.dragIntent)) {
                 if (this.debug) {
-                    console.log('[IconManager] Active detection stopped (drag ended or stopping)');
+                    console.log('[IconManager] Active detection stopped (drag ended or stopping)', {
+                        isDragging: this.isDragging,
+                        dragStarted: this.dragStarted,
+                        dragIntent: this.dragIntent,
+                        isStoppingDrag: this.isStoppingDrag
+                    });
                 }
                 this.activeDetectionRafId = null;
+                if (this.activeDetectionTimeoutId !== null) {
+                    window.clearTimeout(this.activeDetectionTimeoutId);
+                    this.activeDetectionTimeoutId = null;
+                }
                 return;
             }
-            // 检查是否长时间没有收到 mousemove 事件（超过 50ms）
+            // 检查是否长时间没有收到 mousemove 事件（超过 100ms 才检测，避免频繁检测）
             const now = Date.now();
             const timeSinceLastMove = now - this.lastMousePosition.timestamp;
-            // 如果超过 50ms 没有收到事件，进行检测
-            if (timeSinceLastMove > 50) {
-                // 长时间没有收到事件，可能鼠标已经进入 iframe
+            // 如果超过 100ms 没有收到事件，可能鼠标已经进入 iframe
+            // 在 iframe 上时，mousemove 事件会丢失，但 mouseup 事件仍然能收到
+            // 所以只需要保持拖动状态，等待 mouseup 事件，不需要每帧都更新位置
+            if (timeSinceLastMove > 100) {
                 // 使用最后记录的鼠标位置进行检测
                 const clientX = this.lastMousePosition.x;
                 const clientY = this.lastMousePosition.y;
-                if (this.debug && timeSinceLastMove > 100) {
-                    // 只在超过 100ms 时记录警告，避免日志过多
-                    console.warn(`[IconManager] Active detection: No mousemove event for ${timeSinceLastMove}ms`, {
-                        lastMousePosition: { x: clientX, y: clientY },
-                        timestamp: this.lastMousePosition.timestamp,
-                        isDragging: this.isDragging,
-                        dragStarted: this.dragStarted
-                    });
-                }
-                // 更新 iframe 缓存（更频繁，每帧更新）
+                // 更新 iframe 缓存（不需要每帧更新，只在需要时更新）
                 if (this.cachedIframes.length === 0 ||
                     now - this.lastIframeUpdateTime > this.iframeUpdateInterval) {
                     const allIframes = document.querySelectorAll('iframe');
-                    this.cachedIframes = Array.from(allIframes).map(iframe => ({
+                    // 排除 SDK 自己的 iframe（customer-sdk-container 内的 iframe）
+                    this.cachedIframes = Array.from(allIframes)
+                        .filter(iframe => {
+                        // 检查 iframe 是否在 SDK 容器内
+                        const container = iframe.closest('.customer-sdk-container');
+                        return !container; // 排除 SDK 容器内的 iframe
+                    })
+                        .map(iframe => ({
                         element: iframe,
                         rect: iframe.getBoundingClientRect()
                     }));
                     this.lastIframeUpdateTime = now;
-                    if (this.debug) {
-                        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 上，立即停止拖动
+                // 如果鼠标在 iframe 上，需要保持拖动状态
+                // 注意：在 PC 模式下，当鼠标进入 iframe 后，mousemove 事件会完全丢失
+                // 这是浏览器的安全限制，无法获取 iframe 内的实时鼠标位置
+                // 因此，我们无法让图标实时跟随鼠标移动
+                // 解决方案：保持图标在最后已知位置（进入 iframe 前的位置），等待 mouseup 事件更新最终位置
+                if (this.isMouseOverIframe(clientX, clientY)) {
+                    // 在 iframe 上时，保持拖动状态，防止被误判为停止
+                    // 注意：只有在真正拖动后（dragStarted = true）才保持拖动状态
+                    if (!this.isDragging && this.dragStarted) {
+                        this.isDragging = true;
                         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
-                            });
+                            console.log('[IconManager] [PC+iframe] Active detection: Mouse over iframe, keeping drag state active (waiting for mouseup)');
                         }
-                        this.stopDrag();
-                        return;
+                    }
+                    // 在 PC 模式下，当鼠标进入 iframe 后，我们无法获取实时鼠标位置
+                    // 因此，不进行位置更新，保持图标在最后已知位置
+                    // 最终位置会在 mouseup 事件中更新
+                    if (this.debug && timeSinceLastMove > 500 && !this.hasLoggedIframeWarning) {
+                        console.warn('[IconManager] [PC+iframe] Mouse entered iframe - mousemove events lost. Icon position frozen at last known position. Will update on mouseup.', {
+                            timeSinceLastMove,
+                            lastMousePosition: { x: this.lastMousePosition.x, y: this.lastMousePosition.y },
+                            note: 'This is a browser security limitation. Icon will update to final position when mouse is released (mouseup event).'
+                        });
+                        this.hasLoggedIframeWarning = true;
                     }
                 }
             }
             // 继续检测
-            this.activeDetectionRafId = requestAnimationFrame(checkMousePosition);
+            // 如果在 iframe 上，使用更频繁的检测（每 16ms，约 60fps）以确保位置更新及时
+            // 如果不在 iframe 上，使用较低的频率（每 100ms）以节省性能
+            const isOverIframe = timeSinceLastMove > 100 && this.isMouseOverIframe(this.lastMousePosition.x, this.lastMousePosition.y);
+            const detectionInterval = isOverIframe ? 16 : 100; // iframe 上时更频繁检测
+            this.activeDetectionTimeoutId = window.setTimeout(() => {
+                this.activeDetectionTimeoutId = null;
+                requestAnimationFrame(checkMousePosition);
+            }, detectionInterval);
         };
         this.activeDetectionRafId = requestAnimationFrame(checkMousePosition);
     }
@@ -1149,6 +1749,40 @@ class IconManager {
             this.activeDetectionRafId = null;
         }
     }
+    /**
+     * 检查鼠标是否在 iframe 上
+     * 注意：排除 SDK 自己的 iframe（customer-sdk-container 内的 iframe），因为 SDK 的 iframe 不应该影响拖动
+     */
+    isMouseOverIframe(x, y) {
+        // 更新 iframe 缓存（如果需要）
+        const now = Date.now();
+        if (this.cachedIframes.length === 0 ||
+            now - this.lastIframeUpdateTime > this.iframeUpdateInterval) {
+            const allIframes = document.querySelectorAll('iframe');
+            // 排除 SDK 自己的 iframe（customer-sdk-container 内的 iframe）
+            this.cachedIframes = Array.from(allIframes)
+                .filter(iframe => {
+                // 检查 iframe 是否在 SDK 容器内
+                const container = iframe.closest('.customer-sdk-container');
+                return !container; // 排除 SDK 容器内的 iframe
+            })
+                .map(iframe => ({
+                element: iframe,
+                rect: iframe.getBoundingClientRect()
+            }));
+            this.lastIframeUpdateTime = now;
+        }
+        // 检查鼠标是否在任何 iframe 上
+        for (const { rect } of this.cachedIframes) {
+            if (x >= rect.left &&
+                x <= rect.right &&
+                y >= rect.top &&
+                y <= rect.bottom) {
+                return true;
+            }
+        }
+        return false;
+    }
     /**
      * 清理拖动事件
      */
@@ -1286,6 +1920,12 @@ class IconManager {
             const containerRect = container.getBoundingClientRect();
             const iconWidth = this.iconElement.offsetWidth || 30;
             const iconHeight = this.iconElement.offsetHeight || 30;
+            // 获取容器的实际宽度（考虑 max-width 限制）
+            const containerComputedStyle = window.getComputedStyle(container);
+            const maxWidth = containerComputedStyle.maxWidth;
+            const actualWidth = maxWidth && maxWidth !== 'none'
+                ? Math.min(containerRect.width, parseFloat(maxWidth) || containerRect.width)
+                : containerRect.width;
             // 获取当前图标位置
             const computedStyle = window.getComputedStyle(this.iconElement);
             const currentLeft = parseFloat(computedStyle.left) || 0;
@@ -1294,7 +1934,7 @@ class IconManager {
             let newY = currentTop;
             // X 轴磁性吸附
             if (this.magneticDirection === 'x' || this.magneticDirection === 'both') {
-                const containerWidth = containerRect.width;
+                const containerWidth = actualWidth; // 使用实际宽度（考虑 max-width）
                 const centerX = containerWidth / 2;
                 if (currentLeft < centerX) {
                     // 吸附到左边
@@ -1483,6 +2123,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',
@@ -1688,6 +2329,8 @@ class IframeManager {
         // 创建包装容器（包含iframe和关闭按钮）
         this.containerElement = document.createElement('div');
         this.containerElement.className = 'customer-sdk-container';
+        // 确保容器不可拖动
+        this.containerElement.draggable = false;
         // 创建iframe元素
         this.iframeElement = document.createElement('iframe');
         this.iframeElement.className = 'customer-sdk-iframe';
@@ -1760,24 +2403,29 @@ class IframeManager {
             opacity: '0',
             display: 'none'
         } : (isPC ? {
-            // PC模式：没有 target，使用配置的宽度，高度100%
+            // PC模式：没有 target，固定在右下角（不可拖动）
             width: `${this.config.width || 450}px`,
-            height: '100%',
+            height: `${this.config.height || 600}px`,
             maxWidth: '90vw',
-            maxHeight: '100%',
+            maxHeight: '90vh',
             backgroundColor: '#ffffff',
-            borderRadius: '0',
-            boxShadow: 'none',
+            borderRadius: '8px',
+            boxShadow: '0 4px 16px rgba(0, 0, 0, 0.25)',
             border: 'none',
             position: 'fixed',
             zIndex: '999999',
-            // PC模式：水平居中，垂直占满
-            top: '0',
-            left: '50%',
-            bottom: '0',
-            right: 'auto',
-            transform: 'translateX(-50%)',
+            // PC模式：固定在右下角
+            top: 'auto',
+            left: 'auto',
+            bottom: '20px',
+            right: '20px',
+            transform: 'none',
             overflow: 'hidden',
+            // 防止拖动和选择
+            userSelect: 'none',
+            WebkitUserSelect: 'none',
+            MozUserSelect: 'none',
+            msUserSelect: 'none',
             // 初始隐藏的关键样式
             visibility: 'hidden',
             opacity: '0',
@@ -1817,6 +2465,28 @@ class IframeManager {
         Object.assign(this.iframeElement.style, iframeStyles);
         // 将iframe放入容器
         this.containerElement.appendChild(this.iframeElement);
+        // PC模式下：禁止拖动容器
+        if (isPC && !useTargetWidth) {
+            // 阻止拖动事件
+            this.containerElement.addEventListener('dragstart', (e) => {
+                e.preventDefault();
+                e.stopPropagation();
+                return false;
+            }, false);
+            // 阻止鼠标按下事件（防止可能的拖动行为）
+            this.containerElement.addEventListener('mousedown', (e) => {
+                // 只阻止在容器边缘的拖动，允许点击 iframe 内容
+                const rect = this.containerElement.getBoundingClientRect();
+                const isOnEdge = (e.clientX < rect.left + 10 ||
+                    e.clientX > rect.right - 10 ||
+                    e.clientY < rect.top + 10 ||
+                    e.clientY > rect.bottom - 10);
+                if (isOnEdge) {
+                    e.preventDefault();
+                    e.stopPropagation();
+                }
+            }, false);
+        }
         // 添加iframe加载事件监听（移动端样式优化）
         this.iframeElement.addEventListener('load', () => {
             // 移动端注入自定义样式
@@ -1974,10 +2644,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);
     }
@@ -1986,7 +2669,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;
@@ -1998,10 +2681,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':
@@ -2034,62 +2720,94 @@ class IframeManager {
                 }
                 break;
             case 'goto-login':
-                // 登录跳转消息 - 通过 window.postMessage 抛出给外层
+                // 登录跳转消息 - 广播给调用 SDK 的 Vue 页面
                 if (this.debug) {
-                    console.log('Received goto-login message, forwarding to parent window');
+                    console.log('Received goto-login message, broadcasting to Vue page');
                 }
-                this.forwardMessageToParent(data);
+                this.broadcastMessageToPage(data);
                 if (this.config.onMessage) {
                     this.config.onMessage(messageType, data);
                 }
                 break;
-            default:
-                // 处理动态消息：gotoActivityDetailById:xxx
-                if (typeof messageType === 'string' && messageType.startsWith('gotoActivityDetailById:')) {
-                    // 活动详情跳转消息 - 通过 window.postMessage 抛出给外层
-                    if (this.debug) {
-                        console.log('Received gotoActivityDetailById message, forwarding to parent window:', messageType);
-                    }
-                    this.forwardMessageToParent(data);
-                    if (this.config.onMessage) {
-                        this.config.onMessage(messageType, data);
-                    }
+            case 'DCR_DEPOSIT':
+                // 存款跳转消息 - 广播给调用 SDK 的 Vue 页面
+                // 支持两种存款类型：
+                // 1. 钱包直充：{ type: 'DCR_DEPOSIT', payload: { depositType: 0, walletId: 69382 } }
+                // 2. 线下充值：{ type: 'DCR_DEPOSIT', payload: { depositType: 2, offlineTypeId: 2001, accountId: 35213 } }
+                if (this.debug) {
+                    const depositType = data.payload?.depositType;
+                    const depositTypeText = depositType === 0 ? '钱包直充' : depositType === 2 ? '线下充值' : '未知类型';
+                    console.log(`[IframeManager] Received DCR_DEPOSIT message (${depositTypeText}):`, {
+                        type: data.type,
+                        payload: data.payload,
+                        depositType: depositTypeText
+                    });
                 }
-                else {
-                    // 其他自定义消息处理
-                    if (this.debug) {
-                        console.log('Custom message:', data);
-                    }
+                this.broadcastMessageToPage(data);
+                if (this.config.onMessage) {
+                    this.config.onMessage(messageType, data);
+                }
+                break;
+            case 'DCR_ACTIVITY':
+                // 跳转到优惠页面 - 广播给调用 SDK 的 Vue 页面
+                // 格式：{ type: 'DCR_ACTIVITY', payload: { activityId: 123 } }
+                if (this.debug) {
+                    console.log('[IframeManager] Received DCR_ACTIVITY message:', {
+                        type: data.type,
+                        payload: data.payload,
+                        activityId: data.payload?.activityId
+                    });
+                }
+                this.broadcastMessageToPage(data);
+                if (this.config.onMessage) {
+                    this.config.onMessage(messageType, data);
+                }
+                break;
+            default:
+                // 其他自定义消息处理
+                if (this.debug) {
+                    console.log('[IframeManager] Custom message:', data);
                 }
                 break;
         }
     }
     /**
-     * 将消息转发给父窗口（通过 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);
             }
         }
     }
@@ -2926,20 +3644,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;
@@ -2983,7 +3701,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)
@@ -21902,7 +22620,7 @@ class CustomerServiceSDK {
             const initResult = {
                 deviceId,
                 iframeUrl,
-                referrer: document.referrer,
+                referrer: config.referrer || document.referrer || document.location.href,
                 agent: config.agent,
                 timestamp: Date.now()
             };
@@ -22328,7 +23046,7 @@ class CustomerServiceSDK {
             url.searchParams.set('Authorization', config.token);
         }
         url.searchParams.set('DeviceSign', deviceId);
-        url.searchParams.set('Referrer', document.referrer);
+        url.searchParams.set('Referrer', config.referrer || document.referrer);
         return url.toString();
     }
 }