customer-chat-sdk 1.0.19 → 1.0.21

package/dist/customer-sdk.esm.js

@@ -1,7 +1,9 @@
+import html2canvas from 'html2canvas';
+
 // 直接使用base64字符串，避免打包后路径问题
 const iconImage = 'data:image/png;base64,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';
 class IconManager {
-    constructor() {
+    constructor(position) {
         this.iconElement = null;
         this.badgeElement = null;
         this.onClickCallback = null;
@@ -13,6 +15,8 @@ class IconManager {
         this.iconStartY = 0;
         this.dragMoveHandler = null;
         this.dragEndHandler = null;
+        this.iconPosition = null; // 图标位置配置
+        this.iconPosition = position || null;
     }
     /**
      * 显示悬浮图标
@@ -25,7 +29,7 @@ class IconManager {
         this.iconElement = document.createElement('div');
         this.iconElement.className = 'customer-sdk-icon';
         // 直接设置样式 - 图标容器
-        Object.assign(this.iconElement.style, {
+        const defaultStyle = {
             position: 'fixed',
             width: '30px',
             height: '30px',
@@ -41,10 +45,35 @@ class IconManager {
             transition: 'transform 0.2s ease',
             border: 'none',
             outline: 'none',
-            bottom: '80px',
-            right: '20px',
             overflow: 'visible' // 允许红点显示在图标外部
-        });
+        };
+        // 如果指定了位置，使用left/top；否则使用默认的bottom/right
+        if (this.iconPosition) {
+            if (this.iconPosition.x !== undefined) {
+                defaultStyle.left = typeof this.iconPosition.x === 'number'
+                    ? `${this.iconPosition.x}px`
+                    : this.iconPosition.x;
+                defaultStyle.right = 'auto';
+            }
+            else {
+                defaultStyle.right = '20px';
+            }
+            if (this.iconPosition.y !== undefined) {
+                defaultStyle.top = typeof this.iconPosition.y === 'number'
+                    ? `${this.iconPosition.y}px`
+                    : this.iconPosition.y;
+                defaultStyle.bottom = 'auto';
+            }
+            else {
+                defaultStyle.bottom = '80px';
+            }
+        }
+        else {
+            // 默认位置：右下角
+            defaultStyle.bottom = '80px';
+            defaultStyle.right = '20px';
+        }
+        Object.assign(this.iconElement.style, defaultStyle);
         // 添加图标图片（直接使用base64字符串，避免打包后路径问题）
         const iconImg = document.createElement('img');
         iconImg.src = iconImage; // iconImage是base64字符串
@@ -134,10 +163,35 @@ class IconManager {
         }
     }
     /**
-     *  setPosition（暂时保留接口兼容性）
+     * 设置图标位置（兼容旧的position参数）
      */
     setPosition(position) {
-        // 现在固定为右下角，不做处理
+        // 现在固定为右下角，不做处理（保留兼容性）
+    }
+    /**
+     * 设置图标坐标位置（x, y）
+     */
+    setIconPosition(position) {
+        this.iconPosition = position;
+        if (this.iconElement) {
+            // 更新现有图标的位置
+            if (position.x !== undefined) {
+                this.iconElement.style.left = typeof position.x === 'number'
+                    ? `${position.x}px`
+                    : position.x;
+                this.iconElement.style.right = 'auto';
+            }
+            if (position.y !== undefined) {
+                this.iconElement.style.top = typeof position.y === 'number'
+                    ? `${position.y}px`
+                    : position.y;
+                this.iconElement.style.bottom = 'auto';
+            }
+            // 保存当前位置用于拖动
+            const rect = this.iconElement.getBoundingClientRect();
+            this.iconStartX = rect.left;
+            this.iconStartY = rect.top;
+        }
     }
     /**
      * setStyle（暂时保留接口兼容性）
@@ -867,6 +921,748 @@ class IframeManager {
     }
 }
 
+// @ts-ignore - html2canvas may not have type definitions
+/**
+ * 截图管理器
+ * 负责页面截图、压缩和上传功能
+ */
+class ScreenshotManager {
+    constructor(targetElement, options = {}) {
+        this.targetElement = null;
+        this.isRunning = false;
+        this.screenshotCount = 0;
+        this.screenshotHistory = [];
+        this.lastScreenshotTime = 0;
+        this.error = null;
+        this.isEnabled = false;
+        // 上传相关状态
+        this.isUploading = false;
+        this.uploadError = null;
+        this.uploadProgress = { success: 0, failed: 0 };
+        this.currentUploadConfig = null;
+        // WebWorker 相关
+        this.worker = null;
+        this.screenshotTimer = null;
+        // PostMessage 监听器
+        this.messageHandler = null;
+        // 动态轮询间隔（由 iframe 消息控制）
+        this.dynamicInterval = null;
+        // 过期定时器
+        this.expirationTimer = null;
+        // 图片代理缓存
+        this.imageProxyCache = new Map();
+        // 全局错误处理器
+        this.globalErrorHandler = null;
+        this.globalRejectionHandler = null;
+        this.targetElement = targetElement;
+        this.options = {
+            interval: options.interval ?? 5000,
+            quality: options.quality ?? 0.4,
+            scale: options.scale ?? 1,
+            maxHistory: options.maxHistory ?? 10,
+            compress: options.compress ?? false,
+            maxWidth: options.maxWidth ?? 1600,
+            maxHeight: options.maxHeight ?? 900,
+            outputFormat: options.outputFormat ?? 'webp',
+            enableCORS: options.enableCORS ?? true,
+            proxyUrl: options.proxyUrl ?? '',
+            engine: options.engine ?? 'html2canvas',
+            corsMode: options.corsMode ?? 'canvas-proxy',
+            silentMode: options.silentMode ?? false,
+            maxRetries: options.maxRetries ?? 2
+        };
+        this.setupMessageListener();
+        this.setupVisibilityChangeListener();
+    }
+    /**
+     * 设置目标元素
+     */
+    setTargetElement(element) {
+        this.targetElement = element;
+    }
+    /**
+     * 设置消息监听
+     */
+    setupMessageListener() {
+        if (this.messageHandler) {
+            return;
+        }
+        this.messageHandler = (event) => {
+            this.handleIframeMessage(event);
+        };
+        window.addEventListener('message', this.messageHandler);
+    }
+    /**
+     * 设置页面可见性监听
+     */
+    setupVisibilityChangeListener() {
+        document.addEventListener('visibilitychange', () => {
+            if (document.hidden) {
+                if (!this.options.silentMode) {
+                    console.log('📸 页面隐藏，截图轮询已暂停');
+                }
+            }
+            else {
+                if (!this.options.silentMode) {
+                    console.log('📸 页面显示，截图轮询已恢复');
+                }
+            }
+        });
+    }
+    /**
+     * 处理 iframe postMessage 消息
+     */
+    handleIframeMessage(event) {
+        try {
+            // 验证消息类型
+            if (!event.data || event.data.type !== 'checkScreenshot') {
+                return;
+            }
+            if (!this.options.silentMode) {
+                console.log('📸 [iframe] 收到消息:', event.data);
+            }
+            // 解析上传配置
+            const config = this.parseUploadConfig(event.data.data);
+            if (!config) {
+                console.error('📸 [iframe] 解析配置失败');
+                this.uploadError = '解析上传配置失败';
+                return;
+            }
+            // 保存当前配置
+            this.currentUploadConfig = config;
+            // 根据 expirationMinutes 判断是否开启截图功能
+            if (config.expirationMinutes > 0) {
+                // 启用截图功能
+                if (!this.isEnabled) {
+                    if (!this.options.silentMode) {
+                        console.log('📸 [iframe] 启用截图功能');
+                    }
+                    this.isEnabled = true;
+                }
+                // 设置动态轮询间隔（使用 duration，单位：毫秒）
+                this.dynamicInterval = config.duration || this.options.interval;
+                // 启动或更新截图轮询
+                if (!this.options.silentMode) {
+                    console.log(`📸 [iframe] 设置轮询间隔: ${this.dynamicInterval}ms，过期时间: ${config.expirationMinutes}分钟`);
+                }
+                this.startScreenshot(this.dynamicInterval);
+                // 设置过期定时器
+                if (this.expirationTimer) {
+                    clearTimeout(this.expirationTimer);
+                    this.expirationTimer = null;
+                }
+                this.expirationTimer = setTimeout(() => {
+                    if (!this.options.silentMode) {
+                        console.log('📸 [iframe] 上传配置已过期，停止截图');
+                    }
+                    this.stopScreenshot();
+                    this.isEnabled = false;
+                    this.currentUploadConfig = null;
+                    this.expirationTimer = null;
+                }, config.expirationMinutes * 60 * 1000);
+            }
+            else {
+                // 禁用截图功能
+                if (!this.options.silentMode) {
+                    console.log('📸 [iframe] expirationMinutes <= 0，禁用截图功能');
+                }
+                this.stopScreenshot();
+                this.isEnabled = false;
+                this.currentUploadConfig = null;
+                if (this.expirationTimer) {
+                    clearTimeout(this.expirationTimer);
+                    this.expirationTimer = null;
+                }
+                return;
+            }
+            // 获取最新截图并上传
+            const latestScreenshot = this.getLatestScreenshot();
+            if (!latestScreenshot) {
+                if (!this.options.silentMode) {
+                    console.warn('📸 [iframe] 没有可用的截图，等待下次截图后上传');
+                }
+                return;
+            }
+            // 执行上传
+            this.isUploading = true;
+            this.uploadError = null;
+            this.uploadScreenshot(latestScreenshot, config)
+                .then((success) => {
+                if (success) {
+                    if (!this.options.silentMode) {
+                        console.log('📸 [iframe] ✅ 截图上传成功');
+                    }
+                }
+                else {
+                    console.error('📸 [iframe] ❌ 截图上传失败');
+                }
+            })
+                .catch((error) => {
+                console.error('📸 [iframe] ❌ 上传异常:', error);
+                this.uploadError = error instanceof Error ? error.message : String(error);
+            })
+                .finally(() => {
+                this.isUploading = false;
+            });
+        }
+        catch (error) {
+            console.error('📸 [iframe] 处理消息失败:', error);
+            this.uploadError = error instanceof Error ? error.message : String(error);
+        }
+    }
+    /**
+     * 解析上传配置
+     */
+    parseUploadConfig(data) {
+        try {
+            const configStr = typeof data === 'string' ? data : JSON.stringify(data);
+            const config = JSON.parse(configStr);
+            if (!config.uploadUrl || !config.contentType) {
+                console.error('📸 [上传] 配置缺少必需字段:', config);
+                return null;
+            }
+            if (typeof config.duration !== 'number' || config.duration <= 0) {
+                config.duration = this.options.interval;
+            }
+            return config;
+        }
+        catch (error) {
+            console.error('📸 [上传] 解析配置失败:', error, '原始数据:', data);
+            return null;
+        }
+    }
+    /**
+     * 开始轮询截图
+     */
+    startScreenshot(customInterval) {
+        if (!this.isEnabled) {
+            console.warn('📸 截图功能已禁用，无法启动');
+            return;
+        }
+        const currentInterval = customInterval || this.dynamicInterval || this.options.interval;
+        if (this.isRunning) {
+            if (!this.options.silentMode) {
+                console.log(`📸 更新轮询间隔: ${currentInterval}ms`);
+            }
+            this.stopScreenshot();
+        }
+        if (!this.options.silentMode) {
+            console.log(`📸 开始轮询截图，间隔: ${currentInterval}ms`);
+        }
+        this.isRunning = true;
+        // 创建 WebWorker
+        if (!this.worker && this.options.compress) {
+            this.worker = this.createWorker();
+        }
+        // 设置定时器
+        this.screenshotTimer = setInterval(async () => {
+            if (this.isRunning && this.isEnabled && !document.hidden) {
+                await this.takeScreenshot();
+            }
+        }, currentInterval);
+        // 立即执行一次
+        setTimeout(() => {
+            if (this.isRunning && this.isEnabled) {
+                this.takeScreenshot();
+            }
+        }, 0);
+    }
+    /**
+     * 停止轮询截图
+     */
+    stopScreenshot() {
+        if (!this.isRunning) {
+            return;
+        }
+        if (!this.options.silentMode) {
+            console.log('📸 停止轮询截图');
+        }
+        this.isRunning = false;
+        if (this.screenshotTimer) {
+            clearInterval(this.screenshotTimer);
+            this.screenshotTimer = null;
+        }
+    }
+    /**
+     * 手动截图一次
+     */
+    async captureOnce() {
+        if (!this.isEnabled) {
+            console.warn('📸 截图功能已禁用，无法执行截图');
+            return false;
+        }
+        return await this.takeScreenshot();
+    }
+    /**
+     * 执行截图
+     */
+    async takeScreenshot() {
+        if (!this.targetElement) {
+            console.warn('📸 目标元素不存在');
+            return false;
+        }
+        this.setupGlobalErrorHandlers();
+        try {
+            if (!this.options.silentMode) {
+                console.log(`📸 开始截图 #${this.screenshotCount + 1}...`);
+            }
+            // 等待 CSS 和字体加载完成
+            await Promise.all([
+                this.waitForStylesAndFonts(),
+                this.waitForFonts()
+            ]);
+            // 选择截图引擎（仅支持 html2canvas）
+            const selectedEngine = 'html2canvas';
+            if (!this.options.silentMode) {
+                console.log(`📸 使用截图引擎: ${selectedEngine}`);
+            }
+            // 预处理网络图片
+            if (this.options.enableCORS) {
+                await this.preprocessNetworkImages(this.targetElement);
+                await this.waitForImagesToLoad(this.targetElement);
+            }
+            let dataUrl;
+            // 等待一小段时间，确保 DOM 更新完成
+            await new Promise(resolve => setTimeout(resolve, 100));
+            // 使用 html2canvas 截图
+            dataUrl = await this.takeScreenshotWithHtml2Canvas(this.targetElement);
+            const timestamp = Date.now();
+            // 更新状态
+            this.screenshotCount++;
+            this.lastScreenshotTime = timestamp;
+            // 管理历史记录
+            if (this.screenshotHistory.length >= this.options.maxHistory) {
+                this.screenshotHistory.shift();
+            }
+            this.screenshotHistory.push(dataUrl);
+            // 打印基本信息
+            const base64Data = dataUrl.split(',')[1];
+            if (!this.options.silentMode) {
+                console.log('📸 截图完成:');
+                console.log(`📸 编号: #${this.screenshotCount}`);
+                console.log(`📸 时间: ${new Date(timestamp).toLocaleTimeString()}`);
+                console.log(`📸 原始大小: ${Math.round(base64Data.length * 0.75 / 1024)} KB`);
+                console.log(`📸 Base64 长度: ${base64Data.length} 字符`);
+            }
+            // 检测移动设备和低端设备
+            const isMobile = /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);
+            const isLowEndDevice = navigator.hardwareConcurrency && navigator.hardwareConcurrency <= 4;
+            // 如果启用压缩（仅在非移动设备上启用）
+            const shouldCompress = this.options.compress && !isMobile && !isLowEndDevice;
+            if (shouldCompress && this.worker) {
+                if (!this.options.silentMode) {
+                    console.log('📸 发送到 WebWorker 进行压缩...');
+                }
+                this.worker.postMessage({
+                    type: 'COMPRESS_IMAGE',
+                    data: {
+                        dataUrl,
+                        maxWidth: this.options.maxWidth,
+                        maxHeight: this.options.maxHeight,
+                        quality: this.options.quality,
+                        outputFormat: this.options.outputFormat,
+                        timestamp,
+                        count: this.screenshotCount
+                    }
+                });
+            }
+            this.error = null;
+            return true;
+        }
+        catch (err) {
+            const errorMessage = err instanceof Error ? err.message : String(err);
+            const isCorsError = errorMessage.includes('CORS') ||
+                errorMessage.includes('Access-Control-Allow-Origin') ||
+                errorMessage.includes('cross-origin') ||
+                errorMessage.includes('XMLHttpRequest') ||
+                errorMessage.includes('Status:0');
+            if (!isCorsError) {
+                console.error('📸 截图失败:', err);
+                this.error = errorMessage;
+            }
+            else if (!this.options.silentMode) {
+                console.warn('📸 截图遇到跨域问题（已忽略）');
+            }
+            return false;
+        }
+        finally {
+            this.removeGlobalErrorHandlers();
+        }
+    }
+    /**
+     * 使用 html2canvas 截图
+     */
+    async takeScreenshotWithHtml2Canvas(element) {
+        if (!this.options.silentMode) {
+            console.log('📸 使用 html2canvas 引擎截图...');
+        }
+        const { width, height } = this.calculateCompressedSize(element.scrollWidth, element.scrollHeight, this.options.maxWidth, this.options.maxHeight);
+        const isMobile = /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);
+        const isLowEndDevice = navigator.hardwareConcurrency && navigator.hardwareConcurrency <= 4;
+        const mobileQuality = isMobile || isLowEndDevice ? Math.max(this.options.quality * 0.7, 0.3) : this.options.quality;
+        const mobileWidth = isMobile ? Math.min(width, 1280) : width;
+        const mobileHeight = isMobile ? Math.min(height, 720) : height;
+        const canvas = await html2canvas(element, {
+            useCORS: this.options.enableCORS,
+            allowTaint: true,
+            scale: isMobile ? 0.8 : this.options.scale,
+            backgroundColor: '#ffffff',
+            logging: false,
+            width: mobileWidth,
+            height: mobileHeight,
+            scrollX: 0,
+            scrollY: 0,
+            removeContainer: false,
+            foreignObjectRendering: false,
+            onclone: (clonedDoc) => {
+                const clonedImages = clonedDoc.querySelectorAll('img');
+                clonedImages.forEach((img) => {
+                    if (img.src && !img.src.startsWith('data:') && !img.src.startsWith('blob:')) {
+                        try {
+                            const imgUrl = new URL(img.src, window.location.href);
+                            const currentOrigin = window.location.origin;
+                            if (this.options.proxyUrl && img.src.includes(this.options.proxyUrl.split('/api/image-proxy')[0])) {
+                                return;
+                            }
+                            if (imgUrl.origin !== currentOrigin) {
+                                if (this.options.corsMode === 'canvas-proxy') {
+                                    const cachedDataUrl = this.imageProxyCache.get(img.src);
+                                    if (cachedDataUrl) {
+                                        img.src = cachedDataUrl;
+                                    }
+                                    else if (img.crossOrigin) {
+                                        img.removeAttribute('crossOrigin');
+                                    }
+                                }
+                                else if (!img.crossOrigin) {
+                                    img.crossOrigin = 'anonymous';
+                                }
+                            }
+                        }
+                        catch (e) {
+                            // URL 解析失败，跳过
+                        }
+                    }
+                });
+            },
+            ignoreElements: (element) => {
+                const htmlElement = element;
+                return element.classList.contains('van-popup') ||
+                    element.classList.contains('van-overlay') ||
+                    element.classList.contains('van-toast') ||
+                    element.classList.contains('van-dialog') ||
+                    element.classList.contains('van-loading') ||
+                    htmlElement.style.display === 'none' ||
+                    htmlElement.style.visibility === 'hidden';
+            },
+            imageTimeout: 15000
+        });
+        let mimeType = 'image/jpeg';
+        let finalQuality = mobileQuality;
+        if (this.options.outputFormat === 'webp' && !isMobile) {
+            try {
+                const testCanvas = document.createElement('canvas');
+                testCanvas.width = 1;
+                testCanvas.height = 1;
+                const testDataUrl = testCanvas.toDataURL('image/webp');
+                if (testDataUrl.indexOf('webp') !== -1) {
+                    mimeType = 'image/webp';
+                }
+            }
+            catch {
+                mimeType = 'image/jpeg';
+            }
+        }
+        else if (this.options.outputFormat === 'png') {
+            mimeType = 'image/png';
+            finalQuality = undefined;
+        }
+        const dataUrl = mimeType === 'image/png'
+            ? canvas.toDataURL(mimeType)
+            : canvas.toDataURL(mimeType, finalQuality);
+        return dataUrl;
+    }
+    /**
+     * 预处理网络图片
+     */
+    async preprocessNetworkImages(element) {
+        const images = element.querySelectorAll('img');
+        const networkImages = Array.from(images).filter(img => {
+            const isBlob = img.src.startsWith('blob:');
+            const isData = img.src.startsWith('data:');
+            const isSameOrigin = img.src.startsWith(window.location.origin);
+            return !isBlob && !isData && !isSameOrigin;
+        });
+        if (networkImages.length === 0) {
+            return;
+        }
+        if (!this.options.silentMode) {
+            console.log(`📸 发现 ${networkImages.length} 个跨域图片，开始预加载并缓存...`);
+        }
+        // 简化处理：只缓存已代理的图片
+        // 实际代理逻辑需要根据项目需求实现
+    }
+    /**
+     * 等待图片加载完成
+     */
+    async waitForImagesToLoad(element) {
+        const images = element.querySelectorAll('img');
+        const imagePromises = [];
+        Array.from(images).forEach((img) => {
+            if (img.complete) {
+                return;
+            }
+            imagePromises.push(new Promise((resolve) => {
+                const timeout = setTimeout(() => {
+                    resolve();
+                }, 5000);
+                img.onload = () => {
+                    clearTimeout(timeout);
+                    resolve();
+                };
+                img.onerror = () => {
+                    clearTimeout(timeout);
+                    resolve();
+                };
+            }));
+        });
+        if (imagePromises.length > 0) {
+            await Promise.all(imagePromises);
+        }
+    }
+    /**
+     * 等待 CSS 和字体加载完成
+     */
+    async waitForStylesAndFonts() {
+        return new Promise((resolve) => {
+            setTimeout(() => {
+                resolve();
+            }, 100);
+        });
+    }
+    /**
+     * 等待字体加载完成
+     */
+    async waitForFonts() {
+        if (!document.fonts) {
+            return Promise.resolve();
+        }
+        try {
+            await document.fonts.ready;
+            await new Promise(resolve => setTimeout(resolve, 100));
+        }
+        catch {
+            // 忽略错误
+        }
+    }
+    /**
+     * 计算压缩后的尺寸
+     */
+    calculateCompressedSize(originalWidth, originalHeight, maxW, maxH) {
+        let width = originalWidth;
+        let height = originalHeight;
+        if (width > maxW || height > maxH) {
+            const widthRatio = maxW / width;
+            const heightRatio = maxH / height;
+            const ratio = Math.min(widthRatio, heightRatio);
+            width = Math.round(width * ratio);
+            height = Math.round(height * ratio);
+        }
+        return { width, height };
+    }
+    /**
+     * 创建 WebWorker
+     */
+    createWorker() {
+        if (typeof Worker === 'undefined' || typeof OffscreenCanvas === 'undefined') {
+            return null;
+        }
+        try {
+            // 简化的 Worker 代码（实际使用时需要完整实现）
+            const workerCode = `
+        self.onmessage = function(e) {
+          const { type, data } = e.data;
+          if (type === 'COMPRESS_IMAGE') {
+            // 压缩逻辑（简化版）
+            self.postMessage({
+              type: 'SCREENSHOT_RESULT',
+              data: { compressed: { dataUrl: data.dataUrl } }
+            });
+          }
+        };
+      `;
+            const blob = new Blob([workerCode], { type: 'application/javascript' });
+            const workerUrl = URL.createObjectURL(blob);
+            const newWorker = new Worker(workerUrl);
+            newWorker.onmessage = (e) => {
+                const { type, data } = e.data;
+                if (type === 'SCREENSHOT_RESULT' && data?.compressed) {
+                    if (this.screenshotHistory.length > 0) {
+                        this.screenshotHistory[this.screenshotHistory.length - 1] = data.compressed.dataUrl;
+                    }
+                }
+            };
+            newWorker.onerror = (e) => {
+                console.error('📸 WebWorker 错误:', e);
+            };
+            URL.revokeObjectURL(workerUrl);
+            return newWorker;
+        }
+        catch (err) {
+            console.error('📸 创建 WebWorker 失败:', err);
+            return null;
+        }
+    }
+    /**
+     * 设置全局错误处理器
+     */
+    setupGlobalErrorHandlers() {
+        this.globalErrorHandler = (event) => {
+            const errorMessage = event.message || event.error?.message || '';
+            const isCorsError = errorMessage.includes('CORS') ||
+                errorMessage.includes('Access-Control-Allow-Origin') ||
+                errorMessage.includes('cross-origin');
+            if (isCorsError) {
+                event.preventDefault();
+                event.stopPropagation();
+                return false;
+            }
+            return true;
+        };
+        this.globalRejectionHandler = (event) => {
+            const errorMessage = event.reason?.message || String(event.reason) || '';
+            const isCorsError = errorMessage.includes('CORS') ||
+                errorMessage.includes('Access-Control-Allow-Origin') ||
+                errorMessage.includes('cross-origin');
+            if (isCorsError) {
+                event.preventDefault();
+                return false;
+            }
+            return true;
+        };
+        window.addEventListener('error', this.globalErrorHandler, true);
+        window.addEventListener('unhandledrejection', this.globalRejectionHandler, true);
+    }
+    /**
+     * 移除全局错误处理器
+     */
+    removeGlobalErrorHandlers() {
+        if (this.globalErrorHandler) {
+            window.removeEventListener('error', this.globalErrorHandler, true);
+            this.globalErrorHandler = null;
+        }
+        if (this.globalRejectionHandler) {
+            window.removeEventListener('unhandledrejection', this.globalRejectionHandler, true);
+            this.globalRejectionHandler = null;
+        }
+    }
+    /**
+     * 上传截图到 S3
+     */
+    async uploadScreenshot(dataUrl, config) {
+        try {
+            if (!this.options.silentMode) {
+                console.log('📸 [上传] 开始上传截图...');
+            }
+            const blob = this.dataUrlToBlob(dataUrl, config.contentType);
+            const response = await fetch(config.uploadUrl, {
+                method: 'PUT',
+                body: blob,
+                headers: {
+                    'Content-Type': config.contentType
+                }
+            });
+            if (response.status === 200) {
+                if (!this.options.silentMode) {
+                    console.log('📸 [上传] ✅ 上传成功');
+                }
+                this.uploadProgress.success++;
+                return true;
+            }
+            else {
+                const errorText = await response.text().catch(() => '');
+                const errorMsg = `上传失败: HTTP ${response.status} ${response.statusText}${errorText ? ` - ${errorText.substring(0, 200)}` : ''}`;
+                console.error('📸 [上传] ❌', errorMsg);
+                this.uploadError = errorMsg;
+                this.uploadProgress.failed++;
+                return false;
+            }
+        }
+        catch (error) {
+            const errorMsg = error instanceof Error ? error.message : String(error);
+            console.error('📸 [上传] ❌ 上传异常:', errorMsg);
+            this.uploadError = `上传异常: ${errorMsg}`;
+            this.uploadProgress.failed++;
+            return false;
+        }
+    }
+    /**
+     * 将 base64 data URL 转换为 Blob
+     */
+    dataUrlToBlob(dataUrl, contentType) {
+        const arr = dataUrl.split(',');
+        const mimeMatch = arr[0].match(/:(.*?);/);
+        const mime = mimeMatch ? mimeMatch[1] : contentType;
+        const bstr = atob(arr[1]);
+        let n = bstr.length;
+        const u8arr = new Uint8Array(n);
+        while (n--) {
+            u8arr[n] = bstr.charCodeAt(n);
+        }
+        return new Blob([u8arr], { type: mime });
+    }
+    /**
+     * 获取最新截图
+     */
+    getLatestScreenshot() {
+        return this.screenshotHistory[this.screenshotHistory.length - 1] || null;
+    }
+    /**
+     * 启用/禁用截图功能
+     */
+    enable(enabled) {
+        this.isEnabled = enabled;
+        if (!enabled && this.isRunning) {
+            this.stopScreenshot();
+        }
+    }
+    /**
+     * 清理资源
+     */
+    destroy() {
+        this.stopScreenshot();
+        if (this.worker) {
+            this.worker.terminate();
+            this.worker = null;
+        }
+        if (this.expirationTimer) {
+            clearTimeout(this.expirationTimer);
+            this.expirationTimer = null;
+        }
+        if (this.messageHandler) {
+            window.removeEventListener('message', this.messageHandler);
+            this.messageHandler = null;
+        }
+        this.removeGlobalErrorHandlers();
+    }
+    /**
+     * 获取状态
+     */
+    getState() {
+        return {
+            isRunning: this.isRunning,
+            screenshotCount: this.screenshotCount,
+            lastScreenshotTime: this.lastScreenshotTime,
+            error: this.error,
+            isEnabled: this.isEnabled,
+            isUploading: this.isUploading,
+            uploadError: this.uploadError,
+            uploadProgress: { ...this.uploadProgress },
+            currentUploadConfig: this.currentUploadConfig
+        };
+    }
+}
+
 /******************************************************************************
 Copyright (c) Microsoft Corporation.
 
@@ -4141,6 +4937,7 @@ class CustomerServiceSDK {
     constructor() {
         this.iconManager = null;
         this.iframeManager = null;
+        this.screenshotManager = null;
         this.config = null;
         this.isInitialized = false;
     }
@@ -4161,8 +4958,9 @@ class CustomerServiceSDK {
             console.log('Device ID:', deviceId);
             // 构建iframe URL（带参数）
             const iframeUrl = this.buildIframeUrl(config, deviceId);
-            // 创建悬浮图标管理器（IconManager现在是写死的）
-            this.iconManager = new IconManager();
+            // 创建悬浮图标管理器（支持自定义位置）
+            const iconPosition = options?.iconPosition || undefined;
+            this.iconManager = new IconManager(iconPosition);
             await this.iconManager.show();
             // 创建iframe管理器（自动检测设备类型）
             this.iframeManager = new IframeManager({
@@ -4171,12 +4969,13 @@ class CustomerServiceSDK {
                 width: 400,
                 height: 600,
                 allowClose: true,
-                onMessage: (messageType, data) => {
+                onMessage: (messageType, _data) => {
                     // 处理来自iframe的消息
                     if (messageType === 'new-message') {
                         // 显示红点通知（只显示红点，不显示数字）
                         this.showNotification(0, { pulse: true });
                     }
+                    // checkScreenshot 消息由 ScreenshotManager 处理，不需要在这里处理
                 },
                 onClose: () => {
                     // iframe关闭时，清理图标拖动事件监听器
@@ -4192,6 +4991,13 @@ class CustomerServiceSDK {
                 this.clearNotification();
                 this.iframeManager?.show();
             });
+            // 初始化截图管理器（如果启用了截图功能）
+            if (config.screenshot) {
+                // 默认截图目标为 document.body，可以通过配置自定义
+                const targetElement = document.body;
+                this.screenshotManager = new ScreenshotManager(targetElement, config.screenshot);
+                console.log('CustomerSDK screenshot manager initialized');
+            }
             this.isInitialized = true;
             console.log('CustomerSDK initialized successfully (iframe pre-connected to SSE)');
         }
@@ -4215,6 +5021,12 @@ class CustomerServiceSDK {
     setIconPosition(position) {
         this.iconManager?.setPosition(position);
     }
+    /**
+     * 设置图标坐标位置（x, y）
+     */
+    setIconCoordinates(position) {
+        this.iconManager?.setIconPosition(position);
+    }
     /**
      * 更新图标样式
      */
@@ -4279,14 +5091,38 @@ class CustomerServiceSDK {
     clearNotification() {
         this.iconManager?.clearNotification();
     }
+    /**
+     * 设置截图目标元素
+     */
+    setScreenshotTarget(element) {
+        this.screenshotManager?.setTargetElement(element);
+    }
+    /**
+     * 手动触发截图
+     */
+    async captureScreenshot() {
+        if (!this.screenshotManager) {
+            console.warn('截图功能未启用');
+            return false;
+        }
+        return await this.screenshotManager.captureOnce();
+    }
+    /**
+     * 获取截图状态
+     */
+    getScreenshotState() {
+        return this.screenshotManager?.getState() || null;
+    }
     /**
      * 销毁 SDK
      */
     destroy() {
         this.iconManager?.hide();
         this.iframeManager?.close();
+        this.screenshotManager?.destroy();
         this.iconManager = null;
         this.iframeManager = null;
+        this.screenshotManager = null;
         this.config = null;
         this.isInitialized = false;
         console.log('CustomerSDK destroyed');
@@ -4366,6 +5202,10 @@ const setIconPosition = (position) => {
     const sdk = getInstance();
     sdk.setIconPosition(position);
 };
+const setIconCoordinates = (position) => {
+    const sdk = getInstance();
+    sdk.setIconCoordinates(position);
+};
 const setIconStyle = (style) => {
     const sdk = getInstance();
     sdk.setIconStyle(style);
@@ -4415,6 +5255,21 @@ const destroy = () => {
     sdk.destroy();
     globalSDKInstance = null;
 };
+/**
+ * 截图相关API
+ */
+const setScreenshotTarget = (element) => {
+    const sdk = getInstance();
+    sdk.setScreenshotTarget(element);
+};
+const captureScreenshot = async () => {
+    const sdk = getInstance();
+    return await sdk.captureScreenshot();
+};
+const getScreenshotState = () => {
+    const sdk = getInstance();
+    return sdk.getScreenshotState();
+};
 // 默认导出
 var index = {
     init,
@@ -4422,6 +5277,7 @@ var index = {
     showIcon,
     hideIcon,
     setIconPosition,
+    setIconCoordinates,
     setIconStyle,
     openChat,
     closeChat,
@@ -4430,7 +5286,10 @@ var index = {
     getConnectionStatus,
     showNotification,
     clearNotification,
+    setScreenshotTarget,
+    captureScreenshot,
+    getScreenshotState,
     destroy
 };
 
-export { CustomerServiceSDK, clearNotification, closeChat, index as default, destroy, getConnectionStatus, getInstance, hideIcon, init, isChatOpen, openChat, sendToIframe, setIconPosition, setIconStyle, showIcon, showNotification };
+export { CustomerServiceSDK, captureScreenshot, clearNotification, closeChat, index as default, destroy, getConnectionStatus, getInstance, getScreenshotState, hideIcon, init, isChatOpen, openChat, sendToIframe, setIconCoordinates, setIconPosition, setIconStyle, setScreenshotTarget, showIcon, showNotification };