customer-chat-sdk 1.1.8 → 1.1.10

package/dist/customer-sdk.cjs.js

@@ -10,20 +10,26 @@ class IconManager {
         this.badgeElement = null;
         this.onClickCallback = null;
         this.notificationCallback = null;
-        this.isDragging = false;
-        this.dragStartX = 0;
-        this.dragStartY = 0;
-        this.iconStartX = 0;
-        this.iconStartY = 0;
-        this.dragMoveHandler = null;
-        this.dragEndHandler = null;
-        this.checkDragHandler = null; // 临时拖动检测监听器
-        this.dragStartHandler = null; // 拖动开始事件监听器
-        this.touchStartHandler = null; // 触摸开始事件监听器
         this.iconPosition = null; // 图标位置配置
         this.debug = false; // debug 模式标志
         this.isClickEnabled = true; // 是否允许点击（iframe 打开时禁用）
         this.target = null; // 图标传送目标元素（可以是 HTMLElement 或选择器字符串）
+        // 拖动相关状态
+        this.isDragging = false;
+        this.dragStarted = false; // 是否真正开始了拖拽
+        this.hasMoved = false; // 是否移动过
+        this.dragOffset = { x: 0, y: 0 }; // 拖动偏移量
+        this.lastTouchPosition = { x: 0, y: 0 }; // 最后触摸位置
+        this.touchStartTime = 0; // 触摸开始时间
+        this.clickThreshold = 15; // 点击阈值（像素）
+        // 事件处理器引用（用于清理）
+        this.onDragHandler = null;
+        this.stopDragHandler = null;
+        this.startDragHandler = null;
+        this.mouseLeaveHandler = null;
+        this.pointerLeaveHandler = null;
+        this.blurHandler = null;
+        this.dragTimeoutId = null; // 拖动超时定时器
         this.iconPosition = position || null;
         this.debug = debug;
         // 保存 target（可以是 HTMLElement 或字符串选择器）
@@ -124,8 +130,6 @@ class IconManager {
         });
         imgContainer.appendChild(iconImg);
         this.iconElement.appendChild(imgContainer);
-        // 添加拖动和点击事件
-        this.setupDragEvents();
         // 添加到目标元素（如果 target 是字符串，需要重新查找，因为可能在初始化时元素还不存在）
         const targetElement = this.getTargetElement();
         if (targetElement) {
@@ -138,6 +142,8 @@ class IconManager {
                 console.warn('Target element not found, icon added to document.body');
             }
         }
+        // 设置拖动事件
+        this.setupDragEvents();
         if (this.debug) {
             console.log('CustomerSDK icon displayed');
         }
@@ -146,49 +152,36 @@ class IconManager {
      * 强制清理所有拖动事件监听器
      */
     forceCleanupDragEvents() {
-        // 强制清理document上的所有事件监听器
-        if (this.dragMoveHandler) {
-            try {
-                document.removeEventListener('mousemove', this.dragMoveHandler);
-                document.removeEventListener('touchmove', this.dragMoveHandler);
-            }
-            catch (e) {
-                if (this.debug) {
-                    console.warn('Error removing drag move listeners:', e);
-                }
-            }
-        }
-        if (this.dragEndHandler) {
-            try {
-                document.removeEventListener('mouseup', this.dragEndHandler);
-                document.removeEventListener('touchend', this.dragEndHandler);
-            }
-            catch (e) {
-                if (this.debug) {
-                    console.warn('Error removing drag end listeners:', e);
-                }
-            }
-        }
-        // 重置拖动状态
-        this.isDragging = false;
-        // 恢复图标样式
-        if (this.iconElement) {
-            this.iconElement.style.transition = 'transform 0.2s ease';
-            this.iconElement.style.cursor = 'pointer';
-        }
+        this.cleanupDragEvents();
     }
     /**
      * 隐藏悬浮图标
      */
     hide() {
-        // 清理所有事件监听器
-        this.forceCleanupDragEvents();
+        // 清理拖动事件
+        this.cleanupDragEvents();
         if (this.iconElement) {
+            // 在隐藏前保存当前位置（如果图标已经被拖动过）
+            const computedStyle = window.getComputedStyle(this.iconElement);
+            const left = computedStyle.left;
+            const top = computedStyle.top;
+            // 如果 left/top 是有效的像素值（不是 auto），保存到 iconPosition
+            if (left !== 'auto' && top !== 'auto' && left !== '' && top !== '') {
+                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 before hide:', this.iconPosition);
+                    }
+                }
+            }
             this.iconElement.remove();
             this.iconElement = null;
             // 注意：不清空 onClickCallback，以便再次显示时能继续使用
-            this.dragMoveHandler = null;
-            this.dragEndHandler = null;
             if (this.debug) {
                 console.log('CustomerSDK icon hidden');
             }
@@ -219,10 +212,7 @@ class IconManager {
                     : position.y;
                 this.iconElement.style.bottom = 'auto';
             }
-            // 保存当前位置用于拖动
-            const rect = this.iconElement.getBoundingClientRect();
-            this.iconStartX = rect.left;
-            this.iconStartY = rect.top;
+            // 保存当前位置用于拖动（使用 data-x 和 data-y，由 interact.js 管理）
         }
     }
     /**
@@ -279,186 +269,310 @@ class IconManager {
         }
     }
     /**
-     * 设置拖动和点击事件
+     * 设置拖动事件（使用原生事件处理，参考用户提供的代码）
      */
     setupDragEvents() {
         if (!this.iconElement)
             return;
         // 绑定事件处理器（用于后续清理）
-        this.dragMoveHandler = this.handleDragMove.bind(this);
-        this.dragEndHandler = this.handleDragEnd.bind(this);
-        this.dragStartHandler = this.handleDragStart.bind(this);
-        // 只在图标上监听开始事件（保存引用以便后续移除）
-        this.iconElement.addEventListener('mousedown', this.dragStartHandler);
-        this.touchStartHandler = this.handleDragStart.bind(this);
-        this.iconElement.addEventListener('touchstart', this.touchStartHandler, { passive: false });
+        this.startDragHandler = this.startDrag.bind(this);
+        this.onDragHandler = this.onDrag.bind(this);
+        this.stopDragHandler = this.stopDrag.bind(this);
+        // 添加事件监听器
+        this.iconElement.addEventListener('mousedown', this.startDragHandler);
+        this.iconElement.addEventListener('touchstart', this.startDragHandler, { passive: false });
     }
     /**
      * 开始拖动
      */
-    handleDragStart(e) {
-        if (!this.iconElement)
+    startDrag(e) {
+        if (!this.iconElement || !this.isClickEnabled)
             return;
-        // 只处理图标上的事件
-        if (e.target !== this.iconElement && !this.iconElement.contains(e.target)) {
+        // 检查事件目标：如果是 iframe 相关元素，不处理
+        const target = e.target;
+        if (target && (target.tagName === 'IFRAME' ||
+            target.closest('iframe') ||
+            target.closest('.customer-sdk-container') ||
+            target.closest('.customer-sdk-overlay'))) {
             return;
         }
         e.preventDefault();
         e.stopPropagation();
+        // 重置状态
+        this.hasMoved = false;
+        this.dragStarted = false;
+        this.isDragging = false;
+        // 记录开始时间和位置
+        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;
-        this.isDragging = false;
-        this.dragStartX = clientX;
-        this.dragStartY = clientY;
-        // 获取图标当前位置
-        const rect = this.iconElement.getBoundingClientRect();
-        this.iconStartX = rect.left;
-        this.iconStartY = rect.top;
-        // 注意：不要在这里立即移除 transition 和设置 cursor
-        // 只有在真正开始拖动时才修改样式，避免点击时图标位置跳动
-        // 只在真正开始拖动时添加document事件监听
-        // 先添加一个临时的move监听器来检测是否真的在拖动
-        const checkDrag = (moveEvent) => {
-            // 检测事件目标：如果事件发生在iframe或其他元素上，停止检测拖动
-            const target = moveEvent.target;
-            if (target && target !== this.iconElement && !this.iconElement?.contains(target)) {
-                // 检查是否是iframe相关元素
-                const isIframeElement = target.tagName === 'IFRAME' ||
-                    target.closest('iframe') ||
-                    target.closest('.customer-sdk-container') ||
-                    target.closest('.customer-sdk-overlay');
-                if (isIframeElement) {
-                    // 如果事件发生在iframe相关元素上，停止检测并清理监听器
-                    if (this.checkDragHandler) {
-                        if ('touches' in moveEvent) {
-                            document.removeEventListener('touchmove', this.checkDragHandler);
-                        }
-                        else {
-                            document.removeEventListener('mousemove', this.checkDragHandler);
-                        }
-                        this.checkDragHandler = null;
-                    }
-                    return;
+        this.lastTouchPosition.x = clientX;
+        this.lastTouchPosition.y = clientY;
+        try {
+            const iconRect = this.iconElement.getBoundingClientRect();
+            const container = this.getTargetElement();
+            if (!container) {
+                if (this.debug) {
+                    console.warn('Container not found');
                 }
+                return;
             }
-            const moveX = 'touches' in moveEvent ? moveEvent.touches[0].clientX : moveEvent.clientX;
-            const moveY = 'touches' in moveEvent ? moveEvent.touches[0].clientY : moveEvent.clientY;
-            const deltaX = moveX - this.dragStartX;
-            const deltaY = moveY - this.dragStartY;
-            // 如果移动距离超过5px，开始拖动
-            if (Math.abs(deltaX) > 5 || Math.abs(deltaY) > 5) {
-                this.isDragging = true;
-                // 只有在真正开始拖动时才移除 transition 和设置 cursor
-                if (this.iconElement) {
-                    this.iconElement.style.transition = 'none';
-                    this.iconElement.style.cursor = 'grabbing';
-                }
-                // 移除临时监听器
-                if (this.checkDragHandler) {
-                    if ('touches' in moveEvent) {
-                        document.removeEventListener('touchmove', this.checkDragHandler);
-                    }
-                    else {
-                        document.removeEventListener('mousemove', this.checkDragHandler);
+            // 计算拖动偏移量
+            this.dragOffset.x = clientX - iconRect.left;
+            this.dragOffset.y = clientY - iconRect.top;
+            // 注意：不在这里转换位置，只在真正开始拖动时才转换（在 onDrag 中）
+            // 添加 document 事件监听器
+            if (this.onDragHandler) {
+                document.addEventListener('mousemove', this.onDragHandler);
+                document.addEventListener('touchmove', this.onDragHandler, { passive: false });
+            }
+            if (this.stopDragHandler) {
+                document.addEventListener('mouseup', this.stopDragHandler);
+                document.addEventListener('touchend', this.stopDragHandler);
+            }
+            // 添加处理 iframe 上事件丢失的机制
+            // 1. 监听 mouseleave 和 pointerleave 事件（鼠标离开窗口时停止拖动）
+            this.mouseLeaveHandler = (e) => {
+                // 只有当鼠标真正离开窗口时才停止拖动
+                if (!e.relatedTarget && (e.clientY <= 0 || e.clientX <= 0 ||
+                    e.clientX >= window.innerWidth || e.clientY >= window.innerHeight)) {
+                    if (this.debug) {
+                        console.log('Mouse left window, stopping drag');
                     }
-                    this.checkDragHandler = null;
+                    this.stopDrag();
                 }
-                // 添加正式的事件监听器
-                if (this.dragMoveHandler && this.dragEndHandler) {
-                    if ('touches' in moveEvent) {
-                        document.addEventListener('touchmove', this.dragMoveHandler, { passive: false });
-                        document.addEventListener('touchend', this.dragEndHandler);
+            };
+            this.pointerLeaveHandler = (e) => {
+                // 只有当指针真正离开窗口时才停止拖动
+                if (!e.relatedTarget && (e.clientY <= 0 || e.clientX <= 0 ||
+                    e.clientX >= window.innerWidth || e.clientY >= window.innerHeight)) {
+                    if (this.debug) {
+                        console.log('Pointer left window, stopping drag');
                     }
-                    else {
-                        document.addEventListener('mousemove', this.dragMoveHandler);
-                        document.addEventListener('mouseup', this.dragEndHandler);
+                    this.stopDrag();
+                }
+            };
+            document.addEventListener('mouseleave', this.mouseLeaveHandler);
+            document.addEventListener('pointerleave', this.pointerLeaveHandler);
+            // 2. 监听 blur 事件（窗口失去焦点时停止拖动）
+            this.blurHandler = () => {
+                if (this.debug) {
+                    console.log('Window lost focus, stopping drag');
+                }
+                this.stopDrag();
+            };
+            window.addEventListener('blur', this.blurHandler);
+            // 3. 添加超时机制（如果一段时间没有收到 mousemove 事件，自动停止拖动）
+            // 这可以处理鼠标移动到 iframe 上的情况
+            this.dragTimeoutId = window.setTimeout(() => {
+                if (this.isDragging) {
+                    if (this.debug) {
+                        console.log('Drag timeout, stopping drag (likely mouse moved over iframe)');
                     }
+                    this.stopDrag();
                 }
+            }, 500); // 500ms 没有移动事件，自动停止拖动（处理鼠标移动到 iframe 上的情况）
+            if (this.debug) {
+                console.log('Drag start');
             }
-        };
-        // 保存 checkDrag 引用，以便后续清理
-        this.checkDragHandler = checkDrag;
-        // 添加临时检测监听器
-        if ('touches' in e) {
-            document.addEventListener('touchmove', this.checkDragHandler, { passive: false });
-            document.addEventListener('touchend', this.dragEndHandler);
         }
-        else {
-            document.addEventListener('mousemove', this.checkDragHandler);
-            document.addEventListener('mouseup', this.dragEndHandler);
+        catch (error) {
+            if (this.debug) {
+                console.error('Error in startDrag:', error);
+            }
         }
     }
     /**
      * 拖动中
      */
-    handleDragMove(e) {
-        if (!this.iconElement || !this.isDragging)
+    onDrag(e) {
+        if (!this.iconElement)
             return;
+        e.preventDefault();
+        // 重置超时定时器（每次移动都重置，确保只有真正停止移动时才触发超时）
+        if (this.dragTimeoutId !== null) {
+            window.clearTimeout(this.dragTimeoutId);
+            this.dragTimeoutId = window.setTimeout(() => {
+                if (this.isDragging) {
+                    if (this.debug) {
+                        console.log('Drag timeout, stopping drag (likely mouse moved over iframe)');
+                    }
+                    this.stopDrag();
+                }
+            }, 500); // 500ms 没有移动事件，自动停止拖动
+        }
         const clientX = 'touches' in e ? e.touches[0].clientX : e.clientX;
         const clientY = 'touches' in e ? e.touches[0].clientY : e.clientY;
-        // 注意：拖动过程中不检测 iframe 元素，因为用户可能只是想将图标拖动到 iframe 附近或上方
-        // 只有在拖动开始时（checkDrag 阶段）才检测 iframe，防止误判为拖动
-        // 一旦开始拖动，就应该允许拖动到任何位置，包括 iframe 上方
-        // 计算从拖动开始位置到当前位置的距离
-        const deltaX = clientX - this.dragStartX;
-        const deltaY = clientY - this.dragStartY;
-        // 检测鼠标/手指是否还在图标附近（允许一定的容差范围，比如图标大小的3倍）
-        const rect = this.iconElement.getBoundingClientRect();
-        const iconCenterX = rect.left + rect.width / 2;
-        const iconCenterY = rect.top + rect.height / 2;
-        const distanceFromIcon = Math.sqrt(Math.pow(clientX - iconCenterX, 2) + Math.pow(clientY - iconCenterY, 2));
-        const maxDragDistance = Math.max(rect.width, rect.height) * 3; // 允许拖动距离为图标大小的3倍
-        // 如果鼠标/手指移出图标太远，停止拖动
-        if (distanceFromIcon > maxDragDistance) {
-            // 立即结束拖动，清理事件监听器
-            this.handleDragEnd();
+        // 检查是否有足够的移动距离
+        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) {
+                // 开始真正的拖拽
+                this.dragStarted = true;
+                this.isDragging = true;
+                // 如果是第一次拖动，需要转换位置（从 right/bottom 到 left/top）
+                const computedStyle = window.getComputedStyle(this.iconElement);
+                if (computedStyle.right !== 'auto' || computedStyle.bottom !== 'auto') {
+                    // 获取当前实际位置
+                    const currentRect = this.iconElement.getBoundingClientRect();
+                    const container = this.getTargetElement();
+                    if (container) {
+                        const containerRect = container.getBoundingClientRect();
+                        // 计算相对于容器的位置
+                        const relativeX = currentRect.left - containerRect.left;
+                        const relativeY = currentRect.top - containerRect.top;
+                        // 使用相对位置
+                        this.iconElement.style.left = `${relativeX}px`;
+                        this.iconElement.style.top = `${relativeY}px`;
+                        this.iconElement.style.right = 'auto';
+                        this.iconElement.style.bottom = 'auto';
+                        // 重新计算偏移量（相对于容器）
+                        this.dragOffset.x = clientX - currentRect.left;
+                        this.dragOffset.y = clientY - currentRect.top;
+                    }
+                }
+                // 移除过渡动画，使拖动更流畅
+                this.iconElement.style.transition = 'none';
+                this.iconElement.style.cursor = 'grabbing';
+                if (this.debug) {
+                    console.log('Drag started (moved > threshold)');
+                }
+            }
+        }
+        if (!this.isDragging) {
             return;
         }
-        e.preventDefault();
-        e.stopPropagation();
-        // 计算新位置
-        const newX = this.iconStartX + deltaX;
-        const newY = this.iconStartY + deltaY;
-        // 限制在视口内
-        const maxX = window.innerWidth - this.iconElement.offsetWidth;
-        const maxY = window.innerHeight - this.iconElement.offsetHeight;
-        const clampedX = Math.max(0, Math.min(newX, maxX));
-        const clampedY = Math.max(0, Math.min(newY, maxY));
-        // 更新位置
-        this.iconElement.style.left = `${clampedX}px`;
-        this.iconElement.style.top = `${clampedY}px`;
-        this.iconElement.style.right = 'auto';
-        this.iconElement.style.bottom = 'auto';
+        try {
+            const container = this.getTargetElement();
+            if (!container) {
+                return;
+            }
+            const containerRect = container.getBoundingClientRect();
+            // 计算新位置
+            let newX = clientX - this.dragOffset.x - containerRect.left;
+            let newY = clientY - this.dragOffset.y - containerRect.top;
+            // 限制在容器内
+            const iconWidth = this.iconElement.offsetWidth;
+            const iconHeight = this.iconElement.offsetHeight;
+            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));
+            }
+            // 更新位置
+            this.iconElement.style.left = `${newX}px`;
+            this.iconElement.style.top = `${newY}px`;
+            this.iconElement.style.right = 'auto';
+            this.iconElement.style.bottom = 'auto';
+            // 更新最后位置
+            this.lastTouchPosition.x = clientX;
+            this.lastTouchPosition.y = clientY;
+        }
+        catch (error) {
+            if (this.debug) {
+                console.error('Error in onDrag:', error);
+            }
+        }
     }
     /**
-     * 结束拖动
+     * 停止拖动
      */
-    handleDragEnd(_e) {
+    stopDrag(_e) {
+        this.cleanupDragEvents();
         if (!this.iconElement)
             return;
-        // 清理document上的所有事件监听器（包括临时检测监听器）
-        if (this.checkDragHandler) {
-            document.removeEventListener('mousemove', this.checkDragHandler);
-            document.removeEventListener('touchmove', this.checkDragHandler);
-            this.checkDragHandler = null;
-        }
-        if (this.dragMoveHandler) {
-            document.removeEventListener('mousemove', this.dragMoveHandler);
-            document.removeEventListener('touchmove', this.dragMoveHandler);
-        }
-        if (this.dragEndHandler) {
-            document.removeEventListener('mouseup', this.dragEndHandler);
-            document.removeEventListener('touchend', this.dragEndHandler);
-        }
-        // 恢复样式（如果之前被修改过）
-        // 注意：如果只是点击（没有拖动），这些样式可能没有被修改，但恢复操作是安全的
+        // 恢复样式
         this.iconElement.style.transition = 'transform 0.2s ease';
         this.iconElement.style.cursor = 'pointer';
-        // 如果只是点击（没有拖动），触发点击事件
-        if (!this.isDragging) {
-            this.handleClick();
+        // 检查是否是点击
+        const touchDuration = Date.now() - this.touchStartTime;
+        const isValidClick = !this.hasMoved && touchDuration < 1000 && !this.dragStarted;
+        if (this.debug) {
+            console.log('Drag end', {
+                hasMoved: this.hasMoved,
+                dragStarted: this.dragStarted,
+                touchDuration,
+                isValidClick
+            });
         }
+        // 先保存点击状态，然后重置拖动状态
+        const wasClick = isValidClick;
+        // 如果真正拖动过，保存当前位置到 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);
+                    }
+                }
+            }
+        }
+        // 重置状态
+        this.hasMoved = false;
         this.isDragging = false;
+        this.dragStarted = false;
+        if (wasClick) {
+            // 是点击，触发点击事件
+            // 延迟触发，确保拖动状态已完全重置，并且没有新的拖动开始
+            setTimeout(() => {
+                // 再次检查，确保没有在延迟期间开始拖动
+                if (this.isClickEnabled && !this.dragStarted && !this.hasMoved && !this.isDragging) {
+                    this.handleClick();
+                }
+            }, 100); // 增加延迟到 100ms，确保拖动状态完全重置
+        }
+    }
+    /**
+     * 清理拖动事件
+     */
+    cleanupDragEvents() {
+        // 清理拖动事件
+        if (this.onDragHandler) {
+            document.removeEventListener('mousemove', this.onDragHandler);
+            document.removeEventListener('touchmove', this.onDragHandler);
+        }
+        if (this.stopDragHandler) {
+            document.removeEventListener('mouseup', this.stopDragHandler);
+            document.removeEventListener('touchend', this.stopDragHandler);
+        }
+        // 清理处理 iframe 事件丢失的监听器
+        if (this.mouseLeaveHandler) {
+            document.removeEventListener('mouseleave', this.mouseLeaveHandler);
+            this.mouseLeaveHandler = null;
+        }
+        if (this.pointerLeaveHandler) {
+            document.removeEventListener('pointerleave', this.pointerLeaveHandler);
+            this.pointerLeaveHandler = null;
+        }
+        if (this.blurHandler) {
+            window.removeEventListener('blur', this.blurHandler);
+            this.blurHandler = null;
+        }
+        // 清理超时定时器
+        if (this.dragTimeoutId !== null) {
+            window.clearTimeout(this.dragTimeoutId);
+            this.dragTimeoutId = null;
+        }
     }
     /**
      * 处理点击事件
@@ -478,14 +592,12 @@ class IconManager {
     disableClick() {
         this.isClickEnabled = false;
         // 移除拖动事件监听器
+        if (this.iconElement && this.startDragHandler) {
+            this.iconElement.removeEventListener('mousedown', this.startDragHandler);
+            this.iconElement.removeEventListener('touchstart', this.startDragHandler);
+        }
+        // 禁用所有鼠标事件（包括点击和拖拽）
         if (this.iconElement) {
-            if (this.dragStartHandler) {
-                this.iconElement.removeEventListener('mousedown', this.dragStartHandler);
-            }
-            if (this.touchStartHandler) {
-                this.iconElement.removeEventListener('touchstart', this.touchStartHandler);
-            }
-            // 禁用所有鼠标事件（包括点击和拖拽）
             this.iconElement.style.pointerEvents = 'none';
             this.iconElement.style.cursor = 'default';
         }
@@ -498,14 +610,16 @@ class IconManager {
     enableClick() {
         this.isClickEnabled = true;
         // 重新添加拖动事件监听器
+        if (this.iconElement && this.startDragHandler) {
+            this.iconElement.addEventListener('mousedown', this.startDragHandler);
+            this.iconElement.addEventListener('touchstart', this.startDragHandler, { passive: false });
+        }
+        else if (this.iconElement) {
+            // 如果事件处理器不存在，重新设置
+            this.setupDragEvents();
+        }
+        // 恢复鼠标事件
         if (this.iconElement) {
-            if (this.dragStartHandler) {
-                this.iconElement.addEventListener('mousedown', this.dragStartHandler);
-            }
-            if (this.touchStartHandler) {
-                this.iconElement.addEventListener('touchstart', this.touchStartHandler, { passive: false });
-            }
-            // 恢复鼠标事件
             this.iconElement.style.pointerEvents = 'auto';
             this.iconElement.style.cursor = 'pointer';
         }
@@ -609,7 +723,8 @@ class IframeManager {
         this.isOpen = false;
         this.isCreated = false;
         this.debug = false; // debug 模式标志
-        this.messageHandler = null; // 消息监听器引用，用于清理
+        this.targetElement = null; // 目标元素（用于自适应宽度）
+        this.messageHandler = null; // 消息监听器引用（用于清理）
         this.config = {
             src: '',
             mode: 'auto', // 默认自动检测设备类型
@@ -619,7 +734,8 @@ class IframeManager {
             ...config
         };
         this.debug = config.debug ?? false;
-        this.setupMessageListener();
+        // 不在构造函数中添加消息监听器，延迟到 init() 中添加
+        // 这样可以避免创建多个实例时产生多个监听器
     }
     /**
      * 初始化iframe（隐藏状态）
@@ -627,6 +743,8 @@ class IframeManager {
      */
     async init() {
         try {
+            // 设置消息监听器（在 init() 中而不是构造函数中，避免多次创建实例时产生多个监听器）
+            this.setupMessageListener();
             // 关键修复：在初始化前，先清理页面上所有旧的容器元素
             // 防止切换模式或多次初始化时产生重复的元素
             this.cleanupOrphanedElements();
@@ -641,6 +759,11 @@ class IframeManager {
         catch (error) {
             // 错误始终输出
             console.error('Failed to initialize iframe:', error);
+            // 如果初始化失败，清理消息监听器
+            if (this.messageHandler) {
+                window.removeEventListener('message', this.messageHandler);
+                this.messageHandler = null;
+            }
             throw error;
         }
     }
@@ -732,9 +855,6 @@ class IframeManager {
         if (this.messageHandler) {
             window.removeEventListener('message', this.messageHandler);
             this.messageHandler = null;
-            if (this.debug) {
-                console.log('Message listener removed');
-            }
         }
         // 移除容器
         if (this.containerElement) {
@@ -818,13 +938,44 @@ class IframeManager {
             'allow-pointer-lock', // 允许指针锁定
             'allow-storage-access-by-user-activation' // 允许用户激活的存储访问
         ].join(' '));
+        // 获取目标元素（如果提供了 target）
+        if (this.config.target) {
+            this.targetElement = this.getTargetElement(this.config.target);
+        }
         // 根据设备类型设置模式
         const actualMode = this.getActualMode();
         const isPC = actualMode === 'popup';
         this.iframeElement.scrolling = 'auto'; // PC和移动端都显示滚动条
-        // PC模式：使用配置的宽度，高度100%；移动端：100%宽度和高度
-        const containerStyles = isPC ? {
-            // PC模式：配置的宽度，高度100%
+        // 判断是否使用 target 的自适应宽度
+        const useTargetWidth = !!this.targetElement && this.targetElement !== document.body;
+        // PC模式：如果传了 target，使用 target 的宽度（自适应）；否则使用配置的宽度
+        // 移动端：如果传了 target，使用 target 的宽度（自适应）；否则全屏
+        const containerStyles = useTargetWidth ? {
+            // 使用 target 的宽度（自适应），PC 和移动端都适用
+            // 宽度 100% 自适应 target 的实际宽度（target 本身可能有 max-width 限制）
+            width: '100%',
+            height: '100%',
+            maxWidth: '100%', // 不超过 target 的宽度
+            maxHeight: '100%',
+            backgroundColor: '#ffffff',
+            borderRadius: isPC ? '0' : '12px 12px 0 0',
+            boxShadow: isPC ? 'none' : '0 -4px 16px rgba(0, 0, 0, 0.25)',
+            border: 'none',
+            position: 'absolute', // 相对于 target 元素定位
+            zIndex: '999999',
+            // 占满 target 元素
+            top: '0',
+            left: '0',
+            bottom: '0',
+            right: '0',
+            transform: 'none',
+            overflow: 'hidden',
+            // 初始隐藏的关键样式
+            visibility: 'hidden',
+            opacity: '0',
+            display: 'none'
+        } : (isPC ? {
+            // PC模式：没有 target，使用配置的宽度，高度100%
             width: `${this.config.width || 450}px`,
             height: '100%',
             maxWidth: '90vw',
@@ -847,7 +998,7 @@ class IframeManager {
             opacity: '0',
             display: 'none'
         } : {
-            // 移动端全屏模式（强制 100% 宽度和高度）
+            // 移动端全屏模式（没有 target，强制 100% 宽度和高度）
             width: '100%',
             height: '100%',
             maxWidth: '100%',
@@ -869,7 +1020,7 @@ class IframeManager {
             visibility: 'hidden',
             opacity: '0',
             display: 'none'
-        };
+        });
         Object.assign(this.containerElement.style, containerStyles);
         // iframe填充整个容器
         const iframeStyles = {
@@ -888,8 +1039,30 @@ class IframeManager {
                 this.injectMobileStyles();
             }
         });
-        // 关键优化：容器直接添加到body，避免后续移动DOM导致iframe重新加载
-        document.body.appendChild(this.containerElement);
+        // 添加到目标元素或 body
+        if (this.targetElement && this.targetElement !== document.body) {
+            // 如果提供了 target，添加到 target 元素内
+            // 需要设置 target 为相对定位，以便 iframe 可以相对于它定位
+            const targetStyle = window.getComputedStyle(this.targetElement);
+            if (targetStyle.position === 'static') {
+                // 如果 target 是静态定位，设置为相对定位
+                this.targetElement.style.position = 'relative';
+                if (this.debug) {
+                    console.log('Set target element position to relative for iframe container');
+                }
+            }
+            this.targetElement.appendChild(this.containerElement);
+            if (this.debug) {
+                console.log('Iframe container added to target element');
+            }
+        }
+        else {
+            // 没有 target 或 target 是 body，添加到 body
+            document.body.appendChild(this.containerElement);
+            if (this.debug) {
+                console.log('Iframe container added to document.body');
+            }
+        }
         if (this.debug) {
             console.log('CustomerSDK container created (hidden, ready for SSE)');
         }
@@ -1010,12 +1183,9 @@ class IframeManager {
      * 设置消息监听
      */
     setupMessageListener() {
-        // 如果已存在监听器，先移除旧的（防止重复添加）
+        // 如果已存在，先移除旧的监听器（防止重复添加）
         if (this.messageHandler) {
             window.removeEventListener('message', this.messageHandler);
-            if (this.debug) {
-                console.log('Removed old message listener');
-            }
         }
         // 创建新的消息处理器并保存引用
         this.messageHandler = (event) => {
@@ -1025,9 +1195,6 @@ class IframeManager {
             }
         };
         window.addEventListener('message', this.messageHandler, false);
-        if (this.debug) {
-            console.log('Message listener setup completed');
-        }
     }
     /**
      * 处理来自iframe的消息
@@ -1097,6 +1264,35 @@ class IframeManager {
             this.containerElement.style.height = `${height}px`;
         }
     }
+    /**
+     * 获取目标元素（支持字符串选择器或 HTMLElement）
+     */
+    getTargetElement(target) {
+        if (typeof target === 'string') {
+            const element = document.querySelector(target);
+            if (element) {
+                return element;
+            }
+            else {
+                if (this.debug) {
+                    console.warn(`Target element not found: ${target}, falling back to document.body`);
+                }
+                return document.body;
+            }
+        }
+        if (target instanceof HTMLElement) {
+            if (document.body.contains(target)) {
+                return target;
+            }
+            else {
+                if (this.debug) {
+                    console.warn('Target element no longer in DOM, falling back to document.body');
+                }
+                return document.body;
+            }
+        }
+        return document.body;
+    }
 }
 
 function changeJpegDpi(uint8Array, dpi) {
@@ -20811,6 +21007,7 @@ class CustomerServiceSDK {
         this.screenshotManager = null;
         this.config = null;
         this.isInitialized = false;
+        this.isInitializing = false; // 初始化锁，防止并发初始化
         this.initResult = null; // 保存初始化结果
         this.debug = false; // debug 模式标志
         this.lastIconConfig = null; // 保存上一次的图标配置
@@ -20823,6 +21020,10 @@ class CustomerServiceSDK {
      * @returns 返回初始化信息（包含设备ID等）
      */
     async init(config, options, forceReinit = false) {
+        // 防止并发初始化
+        if (this.isInitializing) {
+            throw new Error('SDK is already initializing. Please wait for the current initialization to complete.');
+        }
         // 如果已经初始化且不强制重新初始化，返回之前保存的初始化信息
         if (this.isInitialized && !forceReinit) {
             if (this.debug) {
@@ -20833,6 +21034,8 @@ class CustomerServiceSDK {
             }
             throw new Error('SDK already initialized but cannot retrieve initialization info');
         }
+        // 设置初始化锁
+        this.isInitializing = true;
         // 如果需要强制重新初始化，先清理旧资源
         if (this.isInitialized && forceReinit) {
             if (this.debug) {
@@ -20879,6 +21082,7 @@ class CustomerServiceSDK {
                 // 配置变化了，需要重新创建图标管理器
                 if (this.iconManager) {
                     this.iconManager.hide();
+                    this.iconManager = null; // 先清空引用，避免引用混乱
                     if (this.debug) {
                         console.log('Icon config changed, recreating icon manager');
                     }
@@ -20906,11 +21110,14 @@ class CustomerServiceSDK {
                 this.lastIconConfig = { position: iconPosition, target: iconTarget };
             }
             // 创建iframe管理器（自动检测设备类型）
+            // 如果提供了 target，iframe 会自适应 target 的宽度（PC 和移动端都适用）
+            // 如果没有 target，PC 模式使用默认宽度，移动端全屏
             this.iframeManager = new IframeManager({
                 src: iframeUrl,
                 mode: 'auto', // 自动根据设备类型选择模式（PC弹窗，移动端全屏）
-                width: options?.width || 450, // PC模式宽度（像素，默认450px），移动端不使用
-                height: options?.height || 600, // PC模式高度（像素），移动端不使用（强制全屏）
+                width: options?.width || 450, // PC模式宽度（像素，默认450px），仅在未提供 target 时使用
+                height: options?.height || 600, // PC模式高度（像素），仅在未提供 target 时使用
+                target: options?.target, // 目标元素（如果提供，iframe 会自适应其宽度）
                 allowClose: true,
                 debug: this.debug, // 传递 debug 标志
                 onMessage: (messageType, _data) => {
@@ -20970,8 +21177,33 @@ class CustomerServiceSDK {
         catch (error) {
             // 错误始终输出
             console.error('Failed to initialize CustomerSDK:', error);
+            // 清理已创建的资源（防止资源泄漏）
+            try {
+                if (this.iconManager) {
+                    this.iconManager.hide();
+                    this.iconManager = null;
+                }
+                if (this.iframeManager) {
+                    this.iframeManager.destroy();
+                    this.iframeManager = null;
+                }
+                if (this.screenshotManager) {
+                    this.screenshotManager.destroy();
+                    this.screenshotManager = null;
+                }
+                this.isInitialized = false;
+                this.initResult = null;
+            }
+            catch (cleanupError) {
+                // 清理过程中的错误不应该影响原始错误的抛出
+                console.error('Error during cleanup after initialization failure:', cleanupError);
+            }
             throw error;
         }
+        finally {
+            // 释放初始化锁
+            this.isInitializing = false;
+        }
     }
     /**
      * 显示/隐藏悬浮图标
@@ -21145,7 +21377,7 @@ class CustomerServiceSDK {
      */
     destroy() {
         this.iconManager?.hide();
-        this.iframeManager?.close();
+        this.iframeManager?.destroy(); // 使用 destroy 而不是 close，确保完全清理
         this.screenshotManager?.destroy();
         this.iconManager = null;
         this.iframeManager = null;