slider-captcha-sdk 1.0.19 → 1.0.21

package/dist/slider-captcha.esm.js

@@ -1,917 +1 @@
-/**
- * 纯JavaScript弹窗滑块验证码组件
- */
-class PopupSliderCaptcha {
-  static DEFAULTS = {
-    width: 320,
-    height: 155,
-    sliderSize: 38,
-    maxRetries: 3,
-    timeout: 30000,
-    apiUrl: '/api/captcha',
-    verifyUrl: '/api/captcha/verify',
-    throttleDelay: 16,
-    clickMaskClose: false,
-  }
-
-  static CSS_CLASSES = {
-    overlay: 'slider-captcha-overlay',
-    modal: 'slider-captcha-modal',
-    header: 'slider-captcha-header',
-    container: 'slider-captcha-container',
-    track: 'slider-captcha-track',
-    btn: 'slider-captcha-btn',
-    hint: 'slider-captcha-hint',
-    loading: 'slider-captcha-loading',
-    error: 'slider-captcha-error',
-  }
-
-  // 优化：提取CSS样式为独立方法，减少主体代码长度
-  static getStyles() {
-    return `:root{--sc-primary:#409eff;--sc-success:#67c23a;--sc-danger:#f56c6c;--sc-border:#e4e7eb;--sc-bg:linear-gradient(90deg, #f7f9fa 0%, #e8f4fd 100%);--sc-text:#333;--sc-text-light:#999;--sc-shadow:0 4px 20px rgba(0,0,0,.3);--sc-radius:8px;--sc-transition:.3s ease}.slider-captcha-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,.5);z-index:9999;display:none;justify-content:center;align-items:center;opacity:0;transition:opacity var(--sc-transition)}.slider-captcha-overlay.show{opacity:1}.slider-captcha-modal{background:#fff;border-radius:var(--sc-radius);padding:20px;box-shadow:var(--sc-shadow);position:relative;max-width:90vw;max-height:90vh;transform:scale(.8) translateY(-20px);opacity:0;transition:all var(--sc-transition)}.slider-captcha-modal.show{transform:scale(1) translateY(0);opacity:1}.slider-captcha-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:15px;padding-bottom:10px;border-bottom:1px solid var(--sc-border)}.slider-captcha-container{display:flex;align-items:center;position:relative;border-radius:4px;overflow:hidden;margin-bottom:15px;background:#837a7a;justify-content:center}.slider-captcha-track{width:100%;height:40px;line-height:40px;background:var(--sc-bg);border:1px solid var(--sc-border);border-radius:20px;position:relative;margin-bottom:15px;overflow:hidden}.slider-captcha-btn{width:38px;height:38px;background:#fff;border:1px solid #ccc;border-radius:50%;position:absolute;top:0;left:0;cursor:pointer;display:flex;align-items:center;justify-content:center;box-shadow:0 2px 4px rgba(0,0,0,.1);transition:all var(--sc-transition);user-select:none;z-index:1}.slider-captcha-loading{position:absolute;top:0;left:0;width:100%;height:100%;background:rgba(255,255,255,.6);display:flex;align-items:center;justify-content:center;flex-direction:column;color:#666;font-size:14px;z-index:10;border-radius:4px}.slider-captcha-error{color:var(--sc-danger);font-size:12px;text-align:center;margin-top:10px;display:none}.slider-captcha-title{margin:0;font-size:16px;color:var(--sc-text)}.slider-captcha-close,.slider-captcha-refresh{background:none;border:none;cursor:pointer;color:var(--sc-text-light);padding:0;width:30px;height:30px;display:flex;align-items:center;justify-content:center;border-radius:50%;transition:all var(--sc-transition);position:relative;font-size:0}.slider-captcha-close::before,.slider-captcha-close::after{content:'';position:absolute;width:16px;height:2px;background-color:var(--sc-text-light);border-radius:1px;transition:all var(--sc-transition)}.slider-captcha-close::before{transform:rotate(45deg)}.slider-captcha-close::after{transform:rotate(-45deg)}.slider-captcha-close:hover{background:#f5f5f5;transform:scale(1.1)}.slider-captcha-close:hover::before,.slider-captcha-close:hover::after{background-color:var(--sc-danger)}.slider-captcha-refresh{margin-left:10px}.slider-captcha-refresh svg{width:20px;height:20px;fill:var(--sc-text-light);transition:all var(--sc-transition)}.slider-captcha-refresh:hover{background:#f5f5f5;transform:scale(1.1)}.slider-captcha-refresh:hover svg{fill:var(--sc-primary);transform:rotate(180deg)}.slider-captcha-floating-time{position:absolute;bottom:-40px;left:50%;transform:translateX(-50%);color:#fff;font-size:12px;white-space:nowrap;opacity:0;pointer-events:none;z-index:10;transition:all var(--sc-transition);background:#fff;padding:2px 15px;border-radius:10px}.slider-captcha-floating-time.show{opacity:1;transform:translateX(-50%) translateY(-45px)}.slider-captcha-floating-time.success{color:var(--sc-success)}.slider-captcha-floating-time.fail{color:var(--sc-danger)}.slider-captcha-bg{width:100%;height:100%;object-fit:cover;display:block}.slider-captcha-piece{position:absolute;top:0;left:0;cursor:pointer;transition:none;z-index:2}.slider-captcha-finger{position:absolute;top:50%;left:10px;transform:translateY(-50%);font-size:20px;animation:fingerSlide 2s ease-in-out infinite;pointer-events:none;z-index:1;opacity:.6}.slider-captcha-hint{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);color:var(--sc-text-light);font-size:14px;pointer-events:none;z-index:1;transition:all var(--sc-transition)}.slider-captcha-header-buttons{display:flex;align-items:center}@keyframes fingerSlide{0%{left:10px;opacity:.6}50%{opacity:1}100%{left:calc(50% - 10px);opacity:.6}}`
-  }
-
-  // 优化：添加常量定义，提高可维护性
-  static CONSTANTS = {
-    CACHE_DURATION: 5 * 60 * 1000, // 5分钟缓存
-    MAX_RETRY_ATTEMPTS: 3,
-    DEFAULT_TIMEOUT: 30000,
-    FLOATING_TIME_DURATION: 2500,
-    THROTTLE_DELAY: 16,
-  }
-
-  static ERROR_TYPES = {
-    NETWORK_ERROR: 'NETWORK_ERROR',
-    TIMEOUT_ERROR: 'TIMEOUT_ERROR',
-    VALIDATION_ERROR: 'VALIDATION_ERROR',
-    IMAGE_LOAD_ERROR: 'IMAGE_LOAD_ERROR',
-    CAPTCHA_DATA_ERROR: 'CAPTCHA_DATA_ERROR',
-  }
-
-  constructor(options = {}) {
-    this.options = {
-      ...PopupSliderCaptcha.DEFAULTS,
-      ...options,
-      timeout: options.timeout || PopupSliderCaptcha.CONSTANTS.DEFAULT_TIMEOUT,
-      maxRetries: options.maxRetries || PopupSliderCaptcha.CONSTANTS.MAX_RETRY_ATTEMPTS,
-      throttleDelay: options.throttleDelay || PopupSliderCaptcha.CONSTANTS.THROTTLE_DELAY,
-    };
-
-    this.elements = {};
-    this.state = this.createInitialState();
-    this.captchaData = null;
-    this.times = [];
-    this.startTime = null;
-    this.eventListeners = [];
-    this.timers = new Set();
-    this.rafId = null;
-    this.cachedDimensions = null;
-    this.imageCache = new Map();
-    this.abortController = null;
-
-    this.throttledHandleMove = this.throttle((e) => this.handleMove(e), this.options.throttleDelay);
-
-    try {
-      this.init();
-    } catch (error) {
-      console.error('滑块验证码初始化失败:', error);
-      this.handleError(PopupSliderCaptcha.ERROR_TYPES.VALIDATION_ERROR, error.message);
-    }
-  }
-
-  createInitialState() {
-    return {
-      isVisible: false,
-      isDragging: false,
-      currentX: 0,
-      startX: 0,
-      retryCount: 0,
-      isLoading: false,
-    }
-  }
-
-  init() {
-    this.injectStyles();
-    this.createElements();
-    this.bindEvents();
-  }
-
-  injectStyles() {
-    if (document.querySelector('#slider-captcha-styles')) return
-
-    const style = document.createElement('style');
-    style.id = 'slider-captcha-styles';
-    style.textContent = PopupSliderCaptcha.getStyles();
-    document.head.appendChild(style);
-  }
-
-  createElements() {
-    const { elements, options } = this;
-
-    // 批量创建元素配置
-    const elementConfigs = [
-      ['overlay', 'div', PopupSliderCaptcha.CSS_CLASSES.overlay],
-      ['modal', 'div', PopupSliderCaptcha.CSS_CLASSES.modal],
-      ['header', 'div', PopupSliderCaptcha.CSS_CLASSES.header],
-      ['title', 'h3', 'slider-captcha-title', '安全验证'],
-      ['closeBtn', 'button', 'slider-captcha-close'],
-      ['refreshBtn', 'button', 'slider-captcha-refresh'],
-      ['container', 'div', PopupSliderCaptcha.CSS_CLASSES.container],
-      ['backgroundImg', 'img', 'slider-captcha-bg'],
-      ['sliderImg', 'img', 'slider-captcha-piece'],
-      ['loadingText', 'div', PopupSliderCaptcha.CSS_CLASSES.loading, '加载中...'],
-      ['floatingTime', 'div', 'slider-captcha-floating-time'],
-      ['track', 'div', PopupSliderCaptcha.CSS_CLASSES.track],
-      ['fingerAnimation', 'div', 'slider-captcha-finger', '👉'],
-      ['btn', 'div', PopupSliderCaptcha.CSS_CLASSES.btn],
-      ['icon', 'div', '', '→'],
-      ['hint', 'div', PopupSliderCaptcha.CSS_CLASSES.hint, '向右滑动完成验证'],
-      ['error', 'div', PopupSliderCaptcha.CSS_CLASSES.error],
-    ];
-
-    // 批量创建元素
-    elementConfigs.forEach(([key, tag, className, textContent]) => {
-      elements[key] = this.createElement(tag, className, textContent);
-    });
-
-    // 设置容器尺寸
-    elements.container.style.cssText = `width:${options.width}px;height:${options.height}px`;
-
-    // 添加刷新按钮图标
-    elements.refreshBtn.innerHTML = `<svg viewBox="0 0 24 24"><path d="M17.65,6.35C16.2,4.9 14.21,4 12,4A8,8 0 0,0 4,12A8,8 0 0,0 12,20C15.73,20 18.84,17.45 19.73,14H17.65C16.83,16.33 14.61,18 12,18A6,6 0 0,1 6,12A6,6 0 0,1 12,6C13.66,6 15.14,6.69 16.22,7.78L13,11H20V4L17.65,6.35Z"/></svg>`;
-
-    this.assembleDOM();
-    this.setInitialState();
-  }
-
-  createElement(tag, className = '', textContent = '') {
-    const element = document.createElement(tag);
-    if (className) element.className = className;
-    if (textContent) element.textContent = textContent;
-    return element
-  }
-
-  assembleDOM() {
-    const { elements } = this;
-
-    // 组装头部
-    const headerButtons = this.createElement('div', 'slider-captcha-header-buttons');
-    headerButtons.append(elements.refreshBtn, elements.closeBtn);
-    elements.header.append(elements.title, headerButtons);
-
-    // 组装验证码容器
-    elements.container.append(
-      elements.backgroundImg,
-      elements.sliderImg,
-      elements.loadingText,
-      elements.floatingTime,
-    );
-
-    // 组装滑块轨道
-    elements.btn.appendChild(elements.icon);
-    elements.track.append(elements.fingerAnimation, elements.btn, elements.hint);
-
-    // 组装模态框
-    elements.modal.append(elements.header, elements.container, elements.track, elements.error);
-
-    // 组装到覆盖层
-    elements.overlay.appendChild(elements.modal);
-    document.body.appendChild(elements.overlay);
-  }
-
-  setInitialState() {
-    // 批量设置初始状态
-    Object.assign(this.elements.container.style, { display: 'none' });
-    Object.assign(this.elements.track.style, { display: 'none' });
-  }
-
-  bindEvents() {
-    const { elements } = this;
-
-    // 基础事件
-    this.addEventListener(elements.closeBtn, 'click', () => this.hide());
-    this.addEventListener(elements.refreshBtn, 'click', () => this.refresh());
-    this.addEventListener(elements.overlay, 'click', (e) => {
-      if (e.target === elements.overlay && this.options.clickMaskClose) this.hide();
-    });
-    this.addEventListener(document, 'keydown', (e) => {
-      if (e.key === 'Escape' && this.state.isVisible) this.hide();
-    });
-    this.addEventListener(document, 'visibilitychange', () => this.handleVisibilityChange());
-
-    this.bindSliderEvents();
-  }
-
-  bindSliderEvents() {
-    const { elements } = this;
-    const handlers = {
-      start: (e) => this.handleStart(e),
-      move: this.throttledHandleMove,
-      end: () => this.handleEnd(),
-    };
-
-    // 滑块事件
-    this.addEventListener(elements.btn, 'mousedown', handlers.start);
-    this.addEventListener(elements.btn, 'touchstart', handlers.start);
-    this.addEventListener(elements.sliderImg, 'mousedown', handlers.start);
-    this.addEventListener(elements.sliderImg, 'touchstart', handlers.start);
-    this.addEventListener(document, 'mousemove', handlers.move, { passive: false });
-    this.addEventListener(document, 'touchmove', handlers.move, { passive: false });
-    this.addEventListener(document, 'mouseup', handlers.end);
-    this.addEventListener(document, 'touchend', handlers.end);
-  }
-
-  addEventListener(element, event, handler, options = {}) {
-    if (!element || typeof handler !== 'function') return
-
-    element.addEventListener(event, handler, options);
-    this.eventListeners.push({ element, event, handler, options });
-  }
-
-  removeAllEventListeners() {
-    this.eventListeners.forEach(({ element, event, handler, options }) => {
-      try {
-        element?.removeEventListener?.(event, handler, options);
-      } catch (error) {
-        console.warn('Failed to remove event listener:', error);
-      }
-    });
-    this.eventListeners.length = 0;
-  }
-
-  getDimensions() {
-    if (!this.cachedDimensions) {
-      const trackWidth = this.elements.track.offsetWidth;
-      const btnWidth = this.elements.btn.offsetWidth;
-      this.cachedDimensions = {
-        trackWidth,
-        btnWidth,
-        maxX: trackWidth - btnWidth,
-      };
-    }
-    return this.cachedDimensions
-  }
-
-  getPosition() {
-    const { maxX } = this.getDimensions();
-    const percentage = this.state.currentX / maxX;
-    return Math.round(percentage * (this.options.width - this.options.sliderSize))
-  }
-
-  handleStart(e) {
-    if (!this.captchaData || this.state.isDragging || this.state.isLoading) return
-
-    e.preventDefault();
-    this.state.isDragging = true;
-    this.state.startX = this.getClientX(e) - this.state.currentX;
-    this.dragStartTime = Date.now();
-    this.times = [{ time: Date.now(), position: this.getPosition() }];
-
-    this.setTransition(false);
-    this.updateUIState('dragging');
-    this.cachedDimensions = null; // 清除缓存
-  }
-
-  handleMove(e) {
-    if (!this.state.isDragging) return
-    e.preventDefault();
-
-    const clientX = this.getClientX(e);
-    const deltaX = clientX - this.state.startX;
-    const { maxX } = this.getDimensions();
-
-    this.state.currentX = Math.max(0, Math.min(deltaX, maxX));
-    this.times.push({ time: Date.now(), position: this.getPosition() });
-
-    // 优化：使用RAF批量更新
-    this.rafId && cancelAnimationFrame(this.rafId);
-    this.rafId = requestAnimationFrame(() => this.updateSliderPosition());
-  }
-
-  handleEnd() {
-    if (!this.state.isDragging) return
-
-    this.times.push({ time: Date.now(), position: this.getPosition() });
-    this.state.isDragging = false;
-
-    if (this.rafId) {
-      cancelAnimationFrame(this.rafId);
-      this.rafId = null;
-    }
-
-    this.verify();
-  }
-
-  handleVisibilityChange() {
-    const animationState = document.hidden ? 'paused' : 'running';
-    if (this.elements.fingerAnimation) {
-      this.elements.fingerAnimation.style.animationPlayState = animationState;
-    }
-  }
-
-  getClientX(e) {
-    return e.type.includes('touch') ? e.touches[0].clientX : e.clientX
-  }
-
-  setTransition(enabled) {
-    const transition = enabled ? 'all 0.3s ease' : 'none';
-    requestAnimationFrame(() => {
-      this.elements.btn.style.transition = transition;
-      this.elements.sliderImg.style.transition = transition;
-    });
-  }
-
-  // 优化：简化UI状态更新
-  updateUIState(state) {
-    const { elements } = this;
-    const updates = {
-      dragging: () => {
-        elements.hint.style.opacity = '0';
-        elements.fingerAnimation.style.display = 'none';
-      },
-      success: () => {
-        Object.assign(elements.btn.style, { background: 'var(--sc-success)' });
-        Object.assign(elements.icon.style, { innerHTML: '✓', color: 'white' });
-        elements.icon.innerHTML = '✓';
-      },
-      fail: () => {
-        Object.assign(elements.btn.style, { background: 'var(--sc-danger)' });
-        Object.assign(elements.icon.style, { innerHTML: '✗', color: 'white' });
-        elements.icon.innerHTML = '✗';
-      },
-      reset: () => {
-        Object.assign(elements.btn.style, { background: 'white' });
-        Object.assign(elements.icon.style, { color: '#666' });
-        elements.icon.innerHTML = '→';
-        elements.fingerAnimation.style.display = 'block';
-        this.updateHintText('向右滑动完成验证', 'var(--sc-text-light)');
-      },
-      loading: () => {
-        elements.hint.style.opacity = '0';
-        elements.fingerAnimation.style.display = 'none';
-        Object.assign(elements.track.style, { pointerEvents: 'none', opacity: '0.6' });
-      },
-    };
-
-    if (updates[state]) {
-      requestAnimationFrame(() => {
-        updates[state]();
-        if (state !== 'loading') {
-          Object.assign(elements.track.style, { pointerEvents: 'auto', opacity: '1' });
-        }
-      });
-    }
-  }
-
-  updateHintText(text, color) {
-    requestAnimationFrame(() => {
-      Object.assign(this.elements.hint, { textContent: text });
-      Object.assign(this.elements.hint.style, { color, opacity: '1' });
-    });
-  }
-
-  updateSliderPosition() {
-    const { elements, options, state } = this;
-    const { maxX } = this.getDimensions();
-    const pieceX = (state.currentX / maxX) * (options.width - options.sliderSize);
-    const progress = state.currentX / maxX;
-
-    requestAnimationFrame(() => {
-      elements.btn.style.transform = `translateX(${state.currentX}px)`;
-      elements.sliderImg.style.transform = `translateX(${pieceX}px)`;
-      elements.fingerAnimation.style.opacity = progress >= 0.8 ? '0' : '0.6';
-    });
-  }
-
-  // 优化：简化显示/隐藏逻辑
-  show() {
-    this.state.isVisible = true;
-    this.elements.overlay.style.display = 'flex';
-
-    requestAnimationFrame(() => {
-      this.elements.overlay.classList.add('show');
-      this.elements.modal.classList.add('show');
-    });
-
-    this.loadCaptcha();
-  }
-
-  hide() {
-    this.state.isVisible = false;
-    this.elements.overlay.classList.remove('show');
-    this.elements.modal.classList.remove('show');
-
-    this.safeSetTimeout(() => {
-      this.elements.overlay.style.display = 'none';
-      document.body.removeChild(this.elements.overlay);
-      this.reset();
-      this.options.onClose?.();
-      this.elements.overlay = null;
-    }, 300);
-  }
-
-  // 优化：添加统一错误处理方法
-  handleError(errorType, message, originalError = null) {
-    const errorMessages = {
-      [PopupSliderCaptcha.ERROR_TYPES.NETWORK_ERROR]: '网络连接失败，请检查网络设置',
-      [PopupSliderCaptcha.ERROR_TYPES.TIMEOUT_ERROR]: '请求超时，请重试',
-      [PopupSliderCaptcha.ERROR_TYPES.VALIDATION_ERROR]: '验证失败，请重试',
-      [PopupSliderCaptcha.ERROR_TYPES.IMAGE_LOAD_ERROR]: '图片加载失败，请刷新重试',
-      [PopupSliderCaptcha.ERROR_TYPES.CAPTCHA_DATA_ERROR]: '验证码数据错误，请刷新重试',
-    };
-
-    const errorMessage = errorMessages[errorType] || message || '未知错误';
-
-    // 调用用户自定义错误处理
-    if (this.options.onError) {
-      this.options.onError({
-        type: errorType,
-        message: errorMessage,
-        originalError,
-      });
-    }
-
-    this.showError(errorMessage);
-    console.error(`滑块验证码错误 [${errorType}]:`, errorMessage, originalError);
-  }
-
-  // 优化：简化加载逻辑，增强错误处理
-  async loadCaptcha() {
-    try {
-      this.showLoading();
-      this.startTime = Date.now();
-
-      // 取消之前的请求
-      if (this.abortController) {
-        this.abortController.abort();
-      }
-      this.abortController = new AbortController();
-
-      const response = await fetch(this.options.apiUrl, {
-        method: 'POST',
-        headers: {
-          'Content-Type': 'application/json',
-          ...this.options.headers,
-        },
-        body: JSON.stringify({
-          timestamp: Date.now(),
-          ...this.options.requestData,
-        }),
-        signal: this.abortController.signal,
-      });
-
-      if (!response.ok) {
-        throw new Error(`HTTP ${response.status}: ${response.statusText}`)
-      }
-
-      const data = await response.json();
-
-      // 优化：更严格的数据验证
-      if (!this.validateCaptchaData(data)) {
-        throw new Error('验证码数据格式错误')
-      }
-
-      this.captchaData = data.data;
-      this.showCaptcha();
-      await this.renderCaptcha();
-    } catch (error) {
-      if (error.name === 'AbortError') {
-        this.handleError(PopupSliderCaptcha.ERROR_TYPES.TIMEOUT_ERROR, '请求被取消');
-      } else if (
-        error.message.includes('Failed to fetch') ||
-        error.message.includes('NetworkError')
-      ) {
-        this.handleError(PopupSliderCaptcha.ERROR_TYPES.NETWORK_ERROR, '网络连接失败');
-      } else {
-        this.handleError(PopupSliderCaptcha.ERROR_TYPES.CAPTCHA_DATA_ERROR, error.message, error);
-      }
-    }
-  }
-
-  // 优化：添加验证码数据验证方法
-  validateCaptchaData(data) {
-    if (!data || typeof data !== 'object') return false
-
-    const requiredFields = [
-      'canvasSrc',
-      'blockSrc',
-      'canvasWidth',
-      'canvasHeight',
-      'blockWidth',
-      'blockHeight',
-      'blockY',
-      'nonceStr',
-    ];
-    const dataObj = data.data || data;
-
-    return requiredFields.every((field) => {
-      const value = dataObj[field];
-      return value !== null && value !== undefined && value !== ''
-    })
-  }
-
-  async renderCaptcha() {
-    return new Promise((resolve, reject) => {
-      let hasError = false;
-
-      // 优化：并行加载图片，提高性能
-      const loadPromises = [
-        this.loadImageAsync(this.elements.backgroundImg, this.captchaData.canvasSrc, {
-          width: this.captchaData.canvasWidth,
-          height: this.captchaData.canvasHeight,
-        }),
-        this.loadImageAsync(this.elements.sliderImg, this.captchaData.blockSrc, {
-          width: this.captchaData.blockWidth,
-          height: this.captchaData.blockHeight,
-          top: this.captchaData.blockY,
-        }),
-      ];
-
-      Promise.all(loadPromises)
-        .then(() => {
-          if (!hasError) {
-            this.hideLoading();
-            resolve();
-          }
-        })
-        .catch((error) => {
-          if (!hasError) {
-            hasError = true;
-            this.handleError(PopupSliderCaptcha.ERROR_TYPES.IMAGE_LOAD_ERROR, '图片加载失败', error);
-            reject(error);
-          }
-        });
-    })
-  }
-
-  // 优化：添加异步图片加载方法
-  async loadImageAsync(imgElement, src, styles) {
-    return new Promise((resolve, reject) => {
-      // 检查缓存
-      if (this.imageCache.has(src)) {
-        const cachedImg = this.imageCache.get(src);
-        imgElement.src = cachedImg.src;
-        this.applyStyles(imgElement, styles);
-        resolve();
-        return
-      }
-
-      const timeoutId = this.safeSetTimeout(() => {
-        reject(new Error('图片加载超时'));
-      }, 10000); // 10秒超时
-
-      imgElement.onload = () => {
-        this.safeClearTimeout(timeoutId);
-        this.imageCache.set(src, imgElement.cloneNode());
-        resolve();
-      };
-
-      imgElement.onerror = (error) => {
-        this.safeClearTimeout(timeoutId);
-        reject(error);
-      };
-
-      imgElement.src = src;
-      this.applyStyles(imgElement, styles);
-    })
-  }
-
-  // 优化：提取样式应用逻辑
-  applyStyles(element, styles) {
-    Object.entries(styles).forEach(([key, value]) => {
-      element.style[key] = typeof value === 'number' ? value + 'px' : value;
-    });
-  }
-
-  // 优化：简化状态显示方法
-  showLoading() {
-    this.state.isLoading = true;
-    this.batchUpdateStyles({
-      container: { display: 'block' },
-      loadingText: { display: 'flex' },
-      error: { display: 'none' },
-    });
-    this.updateUIState('loading');
-  }
-
-  hideLoading() {
-    this.state.isLoading = false;
-    this.batchUpdateStyles({ loadingText: { display: 'none' } });
-    this.updateUIState('reset');
-  }
-
-  showCaptcha() {
-    this.batchUpdateStyles({
-      container: { display: 'block' },
-      track: { display: 'block' },
-      error: { display: 'none' },
-    });
-  }
-
-  showError(message) {
-    this.hideLoading();
-    this.batchUpdateStyles({
-      error: { display: 'block', textContent: message },
-    });
-  }
-
-  // 优化：批量样式更新
-  batchUpdateStyles(updates) {
-    requestAnimationFrame(() => {
-      Object.entries(updates).forEach(([elementKey, styles]) => {
-        const element = this.elements[elementKey];
-        if (element) {
-          Object.entries(styles).forEach(([prop, value]) => {
-            if (prop === 'textContent') {
-              element.textContent = value;
-            } else {
-              element.style[prop] = value;
-            }
-          });
-        }
-      });
-    });
-  }
-
-  async verify() {
-    if (!this.captchaData) {
-      this.onVerifyFail('验证码数据丢失');
-      return
-    }
-
-    try {
-      // 取消之前的验证请求
-      if (this.abortController) {
-        this.abortController.abort();
-      }
-      this.abortController = new AbortController();
-
-      const response = await fetch(this.options.verifyUrl, {
-        method: 'POST',
-        headers: {
-          'Content-Type': 'application/json',
-          ...this.options.headers,
-        },
-        body: JSON.stringify({
-          loginVo: {
-            nonceStr: this.captchaData.nonceStr,
-            value: this.getPosition(),
-          },
-          dragEventList: [...this.times],
-          ...this.options.verifyData,
-        }),
-        signal: this.abortController.signal,
-      });
-
-      if (!response.ok) {
-        throw new Error(`HTTP ${response.status}: ${response.statusText}`)
-      }
-
-      const data = await response.json();
-
-      // 优化：更灵活的验证结果判断
-      if (this.isVerifySuccess(data)) {
-        this.onVerifySuccess(data.data || data.result);
-      } else {
-        this.onVerifyFail(data.message || data.msg || '验证失败，请重试！');
-      }
-    } catch (error) {
-      if (error.name === 'AbortError') {
-        this.handleError(PopupSliderCaptcha.ERROR_TYPES.TIMEOUT_ERROR, '验证请求被取消');
-      } else if (
-        error.message.includes('Failed to fetch') ||
-        error.message.includes('NetworkError')
-      ) {
-        this.handleError(PopupSliderCaptcha.ERROR_TYPES.NETWORK_ERROR, '网络连接失败');
-      } else {
-        this.handleError(PopupSliderCaptcha.ERROR_TYPES.VALIDATION_ERROR, error.message, error);
-      }
-    }
-  }
-
-  // 优化：添加验证成功判断方法
-  isVerifySuccess(data) {
-    if (!data || typeof data !== 'object') return false
-
-    // 支持多种成功标识
-    const successIndicators = [
-      data.code === '0',
-      data.code === 0,
-      data.success === true,
-      data.status === 'success',
-      data.result === true,
-    ];
-
-    return successIndicators.some((indicator) => indicator === true)
-  }
-
-  onVerifySuccess(ticket) {
-    const duration = this.dragStartTime
-      ? Date.now() - this.dragStartTime
-      : Date.now() - this.startTime;
-    const durationText = `验证成功！耗时：${(duration / 1000).toFixed(2)}s`;
-
-    this.updateUIState('success');
-    this.showFloatingTime(durationText, 'success');
-
-    this.safeSetTimeout(() => {
-      this.options.onSuccess?.({
-        ticket: ticket,
-        timestamp: Date.now(),
-        duration,
-      });
-      this.hide();
-    }, 2000);
-  }
-
-  showFloatingTime(text, type = 'success') {
-    const { elements } = this;
-    elements.floatingTime.textContent = text;
-    elements.floatingTime.className = `slider-captcha-floating-time ${type}`;
-
-    this.safeSetTimeout(() => elements.floatingTime.classList.add('show'), 100);
-    this.safeSetTimeout(() => {
-      elements.floatingTime.className = 'slider-captcha-floating-time';
-    }, 2500); // 优化：延长显示时间，避免被reset清除
-  }
-
-  onVerifyFail(message) {
-    this.state.retryCount++;
-    this.updateUIState('fail');
-    this.showFloatingTime(message, 'fail');
-
-    this.safeSetTimeout(() => {
-      if (this.state.retryCount >= this.options.maxRetries) {
-        this.refresh();
-      } else {
-        this.reset();
-      }
-    }, 2500); // 优化：延长等待时间，确保浮动提示完整显示
-  }
-
-  reset() {
-    this.clearAllTimers();
-
-    // 重置状态
-    Object.assign(this.state, {
-      isDragging: false,
-      currentX: 0,
-      startX: 0,
-      isLoading: false,
-    });
-
-    this.times = [];
-    this.startTime = null;
-    this.dragStartTime = null; // 优化：重置拖拽开始时间
-    this.cachedDimensions = null;
-
-    // 重置UI
-    requestAnimationFrame(() => {
-      this.setTransition(true);
-      this.elements.btn.style.transform = 'translateX(0px)';
-      this.elements.sliderImg.style.transform = 'translateX(0px)';
-      this.updateUIState('reset');
-      this.elements.error.style.display = 'none';
-    });
-  }
-
-  refresh() {
-    this.reset();
-    this.state.retryCount = 0;
-    this.loadCaptcha();
-  }
-
-  // 安全的定时器管理
-  safeSetTimeout(callback, delay) {
-    const timerId = setTimeout(() => {
-      this.timers.delete(timerId);
-      callback();
-    }, delay);
-    this.timers.add(timerId);
-    return timerId
-  }
-
-  safeClearTimeout(timerId) {
-    if (timerId) {
-      clearTimeout(timerId);
-      this.timers.delete(timerId);
-    }
-  }
-
-  clearAllTimers() {
-    this.timers.forEach((timer) => {
-      clearTimeout(timer);
-      clearInterval(timer);
-    });
-    this.timers.clear();
-
-    if (this.rafId) {
-      cancelAnimationFrame(this.rafId);
-      this.rafId = null;
-    }
-  }
-
-  // 清理图片资源
-  cleanupImages() {
-    if (this.elements.backgroundImg) {
-      this.elements.backgroundImg.src = '';
-      this.elements.backgroundImg.onload = null;
-      this.elements.backgroundImg.onerror = null;
-    }
-    if (this.elements.sliderImg) {
-      this.elements.sliderImg.src = '';
-      this.elements.sliderImg.onload = null;
-      this.elements.sliderImg.onerror = null;
-    }
-    this.imageCache.clear();
-  }
-
-  // 工具函数：节流
-  throttle(func, delay) {
-    let lastCall = 0;
-    return function (...args) {
-      const now = Date.now();
-      if (now - lastCall >= delay) {
-        lastCall = now;
-        return func.apply(this, args)
-      }
-    }
-  }
-
-  destroy() {
-    try {
-      // 取消所有进行中的请求
-      if (this.abortController) {
-        this.abortController.abort();
-        this.abortController = null;
-      }
-
-      // 恢复body样式
-      if (document.body) {
-        document.body.style.userSelect = '';
-        document.body.style.cursor = '';
-      }
-
-      // 清理所有定时器
-      this.clearAllTimers();
-
-      // 移除所有事件监听器
-      this.removeAllEventListeners();
-
-      // 清理图片资源
-      this.cleanupImages();
-
-      // 移除DOM元素
-      if (this.elements?.overlay?.parentNode) {
-        this.elements.overlay.parentNode.removeChild(this.elements.overlay);
-      }
-
-      // 清理样式表
-      const styleElement = document.getElementById('slider-captcha-styles');
-      if (styleElement) {
-        styleElement.remove();
-      }
-
-      // 清空缓存
-      this.imageCache.clear();
-      this.cachedDimensions = null;
-
-      // 清空所有属性
-      Object.keys(this).forEach((key) => {
-        if (key !== 'constructor') {
-          this[key] = null;
-        }
-      });
-
-      // 调用销毁回调
-      if (this.options.onDestroy) {
-        this.options.onDestroy();
-      }
-    } catch (error) {
-      console.error('销毁滑块验证码时出错:', error);
-    }
-  }
-
-  static create(options) {
-    return new PopupSliderCaptcha(options)
-  }
-
-  static show(options) {
-    const instance = new PopupSliderCaptcha(options);
-    instance.show();
-    return instance
-  }
-}
-
-// 模块导出
-if (typeof module !== 'undefined' && module.exports) {
-  module.exports = PopupSliderCaptcha;
-  module.exports.default = PopupSliderCaptcha;
-} else if (typeof define === 'function' && define.amd) {
-  define([], () => PopupSliderCaptcha);
-} else if (typeof window !== 'undefined') {
-  window.PopupSliderCaptcha = PopupSliderCaptcha;
-  window.SliderCaptcha = PopupSliderCaptcha;
-}
-
-export { PopupSliderCaptcha as default };
+class PopupSliderCaptcha{static DEFAULTS={width:320,height:155,sliderSize:38,maxRetries:3,timeout:3e4,apiUrl:"/externalapi/commonservice/captcha/get",verifyUrl:"/externalapi/commonservice/captcha/check",baseUrl:"",throttleDelay:16,clickMaskClose:!1};static CSS_CLASSES={overlay:"slider-captcha-overlay",modal:"slider-captcha-modal",header:"slider-captcha-header",container:"slider-captcha-container",track:"slider-captcha-track",btn:"slider-captcha-btn",hint:"slider-captcha-hint",loading:"slider-captcha-loading",error:"slider-captcha-error"};static getStyles(){return":root{--sc-primary:#409eff;--sc-success:#67c23a;--sc-danger:#f56c6c;--sc-border:#e4e7eb;--sc-bg:linear-gradient(90deg, #f7f9fa 0%, #e8f4fd 100%);--sc-text:#333;--sc-text-light:#999;--sc-shadow:0 4px 20px rgba(0,0,0,.3);--sc-radius:8px;--sc-transition:.3s ease}.slider-captcha-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,.5);z-index:9999;display:none;justify-content:center;align-items:center;opacity:0;transition:opacity var(--sc-transition)}.slider-captcha-overlay.show{opacity:1}.slider-captcha-modal{background:#fff;border-radius:var(--sc-radius);padding:20px;box-shadow:var(--sc-shadow);position:relative;max-width:90vw;max-height:90vh;transform:scale(.8) translateY(-20px);opacity:0;transition:all var(--sc-transition)}.slider-captcha-modal.show{transform:scale(1) translateY(0);opacity:1}.slider-captcha-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:15px;padding-bottom:10px;border-bottom:1px solid var(--sc-border)}.slider-captcha-container{display:flex;align-items:center;position:relative;border-radius:4px;overflow:hidden;margin-bottom:15px;background:#837a7a;justify-content:center}.slider-captcha-track{width:100%;height:40px;line-height:40px;background:var(--sc-bg);border:1px solid var(--sc-border);border-radius:20px;position:relative;margin-bottom:15px;overflow:hidden}.slider-captcha-btn{width:38px;height:38px;background:#fff;border:1px solid #ccc;border-radius:50%;position:absolute;top:0;left:0;cursor:pointer;display:flex;align-items:center;justify-content:center;box-shadow:0 2px 4px rgba(0,0,0,.1);transition:all var(--sc-transition);user-select:none;z-index:1}.slider-captcha-loading{position:absolute;top:0;left:0;width:100%;height:100%;background:rgba(255,255,255,.6);display:flex;align-items:center;justify-content:center;flex-direction:column;color:#666;font-size:14px;z-index:10;border-radius:4px}.slider-captcha-error{color:var(--sc-danger);font-size:12px;text-align:center;margin-top:10px;display:none}.slider-captcha-title{margin:0;font-size:16px;color:var(--sc-text)}.slider-captcha-close,.slider-captcha-refresh{background:none;border:none;cursor:pointer;color:var(--sc-text-light);padding:0;width:30px;height:30px;display:flex;align-items:center;justify-content:center;border-radius:50%;transition:all var(--sc-transition);position:relative;font-size:0}.slider-captcha-close::before,.slider-captcha-close::after{content:'';position:absolute;width:16px;height:2px;background-color:var(--sc-text-light);border-radius:1px;transition:all var(--sc-transition)}.slider-captcha-close::before{transform:rotate(45deg)}.slider-captcha-close::after{transform:rotate(-45deg)}.slider-captcha-close:hover{background:#f5f5f5;transform:scale(1.1)}.slider-captcha-close:hover::before,.slider-captcha-close:hover::after{background-color:var(--sc-danger)}.slider-captcha-refresh{margin-left:10px}.slider-captcha-refresh svg{width:20px;height:20px;fill:var(--sc-text-light);transition:all var(--sc-transition)}.slider-captcha-refresh:hover{background:#f5f5f5;transform:scale(1.1)}.slider-captcha-refresh:hover svg{fill:var(--sc-primary);transform:rotate(180deg)}.slider-captcha-floating-time{position:absolute;bottom:-40px;left:50%;transform:translateX(-50%);color:#fff;font-size:12px;white-space:nowrap;opacity:0;pointer-events:none;z-index:10;transition:all var(--sc-transition);background:#fff;padding:2px 15px;border-radius:10px}.slider-captcha-floating-time.show{opacity:1;transform:translateX(-50%) translateY(-45px)}.slider-captcha-floating-time.success{color:var(--sc-success)}.slider-captcha-floating-time.fail{color:var(--sc-danger)}.slider-captcha-bg{width:100%;height:100%;object-fit:cover;display:block}.slider-captcha-piece{position:absolute;top:0;left:0;cursor:pointer;transition:none;z-index:2}.slider-captcha-finger{position:absolute;top:50%;left:10px;transform:translateY(-50%);font-size:20px;animation:fingerSlide 2s ease-in-out infinite;pointer-events:none;z-index:1;opacity:.6}.slider-captcha-hint{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);color:var(--sc-text-light);font-size:14px;pointer-events:none;z-index:1;transition:all var(--sc-transition)}.slider-captcha-header-buttons{display:flex;align-items:center}@keyframes fingerSlide{0%{left:10px;opacity:.6}50%{opacity:1}100%{left:calc(50% - 10px);opacity:.6}}"}static ERROR_TYPES={NETWORK_ERROR:"NETWORK_ERROR",TIMEOUT_ERROR:"TIMEOUT_ERROR",VALIDATION_ERROR:"VALIDATION_ERROR",IMAGE_LOAD_ERROR:"IMAGE_LOAD_ERROR",CAPTCHA_DATA_ERROR:"CAPTCHA_DATA_ERROR"};constructor(t={}){this.options={...PopupSliderCaptcha.DEFAULTS,...t},this.options.apiUrl=this.normalizeUrl(this.options.apiUrl,this.options.baseUrl),this.options.verifyUrl=this.normalizeUrl(this.options.verifyUrl,this.options.baseUrl);const{elements:e={},state:i=this.createInitialState(),captchaData:s=null,times:a=[],startTime:r=null,eventListeners:n=[],timers:o=new Set,rafId:c=null,cachedDimensions:h=null,imageCache:l=new Map,abortController:d=null}=this;Object.assign(this,{elements:e,state:i,captchaData:s,times:a,startTime:r,eventListeners:n,timers:o,rafId:c,cachedDimensions:h,imageCache:l,abortController:d}),this.throttledHandleMove=this.throttle(t=>this.handleMove(t),this.options.throttleDelay);try{this.init()}catch(t){this.handleError(PopupSliderCaptcha.ERROR_TYPES.VALIDATION_ERROR,t.message)}}createInitialState(){return{isVisible:!1,isDragging:!1,currentX:0,startX:0,retryCount:0,isLoading:!1}}normalizeUrl(t,e){return t?/^https?:\/\//.test(t)||!e?t:(e.endsWith("/")?e:e+"/")+(t.startsWith("/")?t.substring(1):t):t}init(){this.injectStyles(),this.createElements(),this.bindEvents()}injectStyles(){if(document.querySelector("#slider-captcha-styles"))return;const t=Object.assign(document.createElement("style"),{id:"slider-captcha-styles",textContent:PopupSliderCaptcha.getStyles()});document.head.appendChild(t)}createElements(){const{elements:t,options:e}=this,i={overlay:["div",PopupSliderCaptcha.CSS_CLASSES.overlay],modal:["div",PopupSliderCaptcha.CSS_CLASSES.modal],header:["div",PopupSliderCaptcha.CSS_CLASSES.header],title:["h3","slider-captcha-title","安全验证"],closeBtn:["button","slider-captcha-close"],refreshBtn:["button","slider-captcha-refresh"],container:["div",PopupSliderCaptcha.CSS_CLASSES.container],backgroundImg:["img","slider-captcha-bg"],sliderImg:["img","slider-captcha-piece"],loadingText:["div",PopupSliderCaptcha.CSS_CLASSES.loading,"加载中..."],floatingTime:["div","slider-captcha-floating-time"],track:["div",PopupSliderCaptcha.CSS_CLASSES.track],fingerAnimation:["div","slider-captcha-finger","👉"],btn:["div",PopupSliderCaptcha.CSS_CLASSES.btn],icon:["div","","→"],hint:["div",PopupSliderCaptcha.CSS_CLASSES.hint,"向右滑动完成验证"],error:["div",PopupSliderCaptcha.CSS_CLASSES.error]};Object.entries(i).forEach(([e,[i,s,a]])=>{t[e]=this.createElement(i,s,a)}),t.container.style.cssText=`width:${e.width}px;height:${e.height}px`,t.refreshBtn.innerHTML='\n      <svg viewBox="0 0 24 24">\n        <path d="M17.65,6.35C16.2,4.9 14.21,4 12,4A8,8 0 0,0 4,12A8,8 0 0,0 12,20C15.73,20 18.84,17.45 19.73,14H17.65C16.83,16.33 14.61,18 12,18A6,6 0 0,1 6,12A6,6 0 0,1 12,6C13.66,6 15.14,6.69 16.22,7.78L13,11H20V4L17.65,6.35Z"/>\n      </svg>\n    ',this.assembleDOM(),this.setInitialState()}createElement(t,e="",i=""){return Object.assign(document.createElement(t),{className:e,textContent:i})}assembleDOM(){const{elements:t}=this,e=this.createElement("div","slider-captcha-header-buttons");e.append(t.refreshBtn,t.closeBtn),t.header.append(t.title,e),t.container.append(t.backgroundImg,t.sliderImg,t.loadingText,t.floatingTime),t.btn.appendChild(t.icon),t.track.append(t.fingerAnimation,t.btn,t.hint),t.modal.append(t.header,t.container,t.track,t.error),t.overlay.appendChild(t.modal),document.body.appendChild(t.overlay)}setInitialState(){Object.assign(this.elements.container.style,{display:"none"}),Object.assign(this.elements.track.style,{display:"none"})}bindEvents(){const{elements:t}=this;[[t.closeBtn,"click",()=>this.hide()],[t.refreshBtn,"click",()=>this.refresh()],[t.overlay,"click",e=>{e.target===t.overlay&&this.options.clickMaskClose&&this.hide()}],[document,"keydown",t=>{"Escape"===t.key&&this.state.isVisible&&this.hide()}],[document,"visibilitychange",()=>this.handleVisibilityChange()]].forEach(([t,e,i])=>{this.addEventListener(t,e,i)}),this.bindSliderEvents()}bindSliderEvents(){const{elements:t}=this,e={start:t=>this.handleStart(t),move:this.throttledHandleMove,end:()=>this.handleEnd()};[[t.btn,"mousedown",e.start],[t.btn,"touchstart",e.start],[t.sliderImg,"mousedown",e.start],[t.sliderImg,"touchstart",e.start],[document,"mousemove",e.move,{passive:!1}],[document,"touchmove",e.move,{passive:!1}],[document,"mouseup",e.end],[document,"touchend",e.end]].forEach(([t,e,i,s])=>{this.addEventListener(t,e,i,s)})}addEventListener(t,e,i,s={}){t&&"function"==typeof i&&(t.addEventListener(e,i,s),this.eventListeners.push({element:t,event:e,handler:i,options:s}))}removeAllEventListeners(){this.eventListeners.forEach(({element:t,event:e,handler:i,options:s})=>{try{t?.removeEventListener?.(e,i,s)}catch(t){}}),this.eventListeners.length=0}getDimensions(){if(!this.cachedDimensions){const{track:t,btn:e}=this.elements;this.cachedDimensions={trackWidth:t.offsetWidth,btnWidth:e.offsetWidth,get maxX(){return this.trackWidth-this.btnWidth}}}return this.cachedDimensions}getPosition(){const{maxX:t}=this.getDimensions(),e=this.state.currentX/t;return Math.round(e*(this.options.width-this.options.sliderSize))}handleStart(t){!this.captchaData||this.state.isDragging||this.state.isLoading||(t.preventDefault(),Object.assign(this.state,{isDragging:!0,startX:this.getClientX(t)-this.state.currentX}),this.dragStartTime=Date.now(),this.times=[{time:Date.now(),position:this.getPosition()}],this.setTransition(!1),this.updateUIState("dragging"),this.cachedDimensions=null)}handleMove(t){if(!this.state.isDragging)return;t.preventDefault();const e=this.getClientX(t)-this.state.startX,{maxX:i}=this.getDimensions();this.state.currentX=Math.max(0,Math.min(e,i)),this.times.push({time:Date.now(),position:this.getPosition()}),this.rafId&&cancelAnimationFrame(this.rafId),this.rafId=requestAnimationFrame(()=>this.updateSliderPosition())}handleEnd(){this.state.isDragging&&(this.times.push({time:Date.now(),position:this.getPosition()}),this.state.isDragging=!1,this.rafId&&(cancelAnimationFrame(this.rafId),this.rafId=null),this.verify())}handleVisibilityChange(){const t=document.hidden?"paused":"running";this.elements.fingerAnimation?.style&&(this.elements.fingerAnimation.style.animationPlayState=t)}getClientX=t=>t.type.includes("touch")?t.touches[0].clientX:t.clientX;setTransition(t){const e=t?"all 0.3s ease":"none";requestAnimationFrame(()=>{const{btn:t,sliderImg:i}=this.elements;t.style.transition=i.style.transition=e})}updateUIState(t){const{elements:e}=this,i={dragging:()=>{e.hint.style.opacity="0",e.fingerAnimation.style.display="none"},success:()=>{Object.assign(e.btn.style,{background:"var(--sc-success)"}),Object.assign(e.icon.style,{color:"white"}),e.icon.textContent="✓"},fail:()=>{Object.assign(e.btn.style,{background:"var(--sc-danger)"}),Object.assign(e.icon.style,{color:"white"}),e.icon.textContent="✗"},reset:()=>{Object.assign(e.btn.style,{background:"white"}),Object.assign(e.icon.style,{color:"#666"}),e.icon.textContent="→",e.fingerAnimation.style.display="block",this.updateHintText("向右滑动完成验证","var(--sc-text-light)")},loading:()=>{e.hint.style.opacity="0",e.fingerAnimation.style.display="none",Object.assign(e.track.style,{pointerEvents:"none",opacity:"0.6"})}};i[t]&&requestAnimationFrame(()=>{i[t](),"loading"!==t&&Object.assign(e.track.style,{pointerEvents:"auto",opacity:"1"})})}updateHintText(t,e){requestAnimationFrame(()=>{Object.assign(this.elements.hint,{textContent:t}),Object.assign(this.elements.hint.style,{color:e,opacity:"1"})})}updateSliderPosition(){const{elements:t,options:e,state:i}=this,{maxX:s}=this.getDimensions(),a=i.currentX/s*(e.width-e.sliderSize),r=i.currentX/s;requestAnimationFrame(()=>{t.btn.style.transform=`translateX(${i.currentX}px)`,t.sliderImg.style.transform=`translateX(${a}px)`,t.fingerAnimation.style.opacity=.8>r?"0.6":"0"})}show(){this.state.isVisible=!0,this.elements.overlay.style.display="flex",requestAnimationFrame(()=>{this.elements.overlay.classList.add("show"),this.elements.modal.classList.add("show")}),this.loadCaptcha()}hide(){this.state.isVisible=!1,this.elements.overlay.classList.remove("show"),this.elements.modal.classList.remove("show"),this.safeSetTimeout(()=>{this.elements.overlay.style.display="none",document.body.removeChild(this.elements.overlay),this.reset(),this.options.onClose?.(),this.elements.overlay=null},300)}handleError(t,e,i=null){const s={[PopupSliderCaptcha.ERROR_TYPES.NETWORK_ERROR]:"网络连接失败，请检查网络设置",[PopupSliderCaptcha.ERROR_TYPES.TIMEOUT_ERROR]:"请求超时，请重试",[PopupSliderCaptcha.ERROR_TYPES.VALIDATION_ERROR]:"验证失败，请重试",[PopupSliderCaptcha.ERROR_TYPES.IMAGE_LOAD_ERROR]:"图片加载失败，请刷新重试",[PopupSliderCaptcha.ERROR_TYPES.CAPTCHA_DATA_ERROR]:"验证码数据错误，请刷新重试"}[t]||e||"未知错误";this.options.onError&&this.options.onError({type:t,message:s,originalError:i}),this.showError(s)}async loadCaptcha(){try{this.showLoading(),this.startTime=Date.now(),this.abortController&&this.abortController.abort(),this.abortController=new AbortController;const t=await fetch(this.options.apiUrl,{method:"POST",headers:{"Content-Type":"application/json",...this.options.headers},body:JSON.stringify({timestamp:Date.now(),...this.options.requestData}),signal:this.abortController.signal});if(!t.ok)throw Error(`HTTP ${t.status}: ${t.statusText}`);const e=await t.json();if(!this.validateCaptchaData(e))throw Error("验证码数据格式错误");this.captchaData=e.data,this.showCaptcha(),await this.renderCaptcha()}catch(t){"AbortError"===t.name?this.handleError(PopupSliderCaptcha.ERROR_TYPES.TIMEOUT_ERROR,"请求被取消"):t.message.includes("Failed to fetch")||t.message.includes("NetworkError")?this.handleError(PopupSliderCaptcha.ERROR_TYPES.NETWORK_ERROR,"网络连接失败"):this.handleError(PopupSliderCaptcha.ERROR_TYPES.CAPTCHA_DATA_ERROR,t.message,t)}}validateCaptchaData(t){if(!t||"object"!=typeof t)return!1;const e=t.data||t;return["canvasSrc","blockSrc","canvasWidth","canvasHeight","blockWidth","blockHeight","blockY","nonceStr"].every(t=>{const i=e[t];return null!=i&&""!==i})}renderCaptcha(){return new Promise((t,e)=>{let i=!1;const s=[this.loadImageAsync(this.elements.backgroundImg,this.captchaData.canvasSrc,{width:this.captchaData.canvasWidth,height:this.captchaData.canvasHeight}),this.loadImageAsync(this.elements.sliderImg,this.captchaData.blockSrc,{width:this.captchaData.blockWidth,height:this.captchaData.blockHeight,top:this.captchaData.blockY})];Promise.all(s).then(()=>{i||(this.hideLoading(),t())}).catch(t=>{i||(i=!0,this.handleError(PopupSliderCaptcha.ERROR_TYPES.IMAGE_LOAD_ERROR,"图片加载失败",t),e(t))})})}loadImageAsync(t,e,i){return new Promise((s,a)=>{if(this.imageCache.has(e)){const a=this.imageCache.get(e);return t.src=a.src,this.applyStyles(t,i),void s()}const r=this.safeSetTimeout(()=>{a(Error("图片加载超时"))},1e4);t.onload=function(){this.safeClearTimeout(r),this.imageCache.set(e,t.cloneNode()),s()}.bind(this),t.onerror=function(t){this.safeClearTimeout(r),a(t)}.bind(this),t.src=e,this.applyStyles(t,i)})}applyStyles(t,e){Object.entries(e).forEach(([e,i])=>{t.style[e]="number"==typeof i?i+"px":i})}showLoading(){this.state.isLoading=!0,this.batchUpdateStyles({container:{display:"block"},loadingText:{display:"flex"},error:{display:"none"}}),this.updateUIState("loading")}hideLoading(){this.state.isLoading=!1,this.batchUpdateStyles({loadingText:{display:"none"}}),this.updateUIState("reset")}showCaptcha(){this.batchUpdateStyles({container:{display:"block"},track:{display:"block"},error:{display:"none"}})}showError(t){this.hideLoading(),this.batchUpdateStyles({error:{display:"block",textContent:t}})}batchUpdateStyles(t){requestAnimationFrame(()=>{Object.entries(t).forEach(([t,e])=>{const i=this.elements[t];i&&Object.entries(e).forEach(([t,e])=>{"textContent"===t?i.textContent=e:i.style[t]=e})})})}async verify(){if(this.captchaData)try{this.abortController&&this.abortController.abort(),this.abortController=new AbortController;const t=await fetch(this.options.verifyUrl,{method:"POST",headers:{"Content-Type":"application/json",...this.options.headers},body:JSON.stringify({loginVo:{nonceStr:this.captchaData.nonceStr,value:this.getPosition()},dragEventList:[...this.times],...this.options.verifyData}),signal:this.abortController.signal});if(!t.ok)throw Error(`HTTP ${t.status}: ${t.statusText}`);const e=await t.json();this.isVerifySuccess(e)?this.onVerifySuccess(e.data||e.result):this.onVerifyFail(e.message||e.msg||"验证失败，请重试！")}catch(t){"AbortError"===t.name?this.handleError(PopupSliderCaptcha.ERROR_TYPES.TIMEOUT_ERROR,"验证请求被取消"):t.message.includes("Failed to fetch")||t.message.includes("NetworkError")?this.handleError(PopupSliderCaptcha.ERROR_TYPES.NETWORK_ERROR,"网络连接失败"):this.handleError(PopupSliderCaptcha.ERROR_TYPES.VALIDATION_ERROR,t.message,t)}else this.onVerifyFail("验证码数据丢失")}isVerifySuccess(t){return!(!t||"object"!=typeof t)&&["0"===t.code,0===t.code,!0===t.success,"success"===t.status,!0===t.result].some(t=>!0===t)}onVerifySuccess(t){const e=this.dragStartTime?Date.now()-this.dragStartTime:Date.now()-this.startTime,i=`验证成功！耗时：${(e/1e3).toFixed(2)}s`;this.updateUIState("success"),this.showFloatingTime(i,"success"),this.safeSetTimeout(()=>{this.options.onSuccess?.({ticket:t,timestamp:Date.now(),duration:e}),this.hide()},2e3)}showFloatingTime(t,e="success"){const{elements:i}=this;i.floatingTime.textContent=t,i.floatingTime.className="slider-captcha-floating-time "+e,this.safeSetTimeout(()=>i.floatingTime.classList.add("show"),100),this.safeSetTimeout(()=>{i.floatingTime.className="slider-captcha-floating-time"},2500)}onVerifyFail(t){this.state.retryCount++,this.updateUIState("fail"),this.showFloatingTime(t,"fail"),this.safeSetTimeout(()=>{this.state.retryCount<this.options.maxRetries?this.reset():this.refresh()},2500)}reset(){this.clearAllTimers(),Object.assign(this.state,{isDragging:!1,currentX:0,startX:0,isLoading:!1}),this.times=[],this.startTime=null,this.dragStartTime=null,this.cachedDimensions=null,requestAnimationFrame(()=>{this.setTransition(!0),this.elements.btn.style.transform="translateX(0px)",this.elements.sliderImg.style.transform="translateX(0px)",this.updateUIState("reset"),this.elements.error.style.display="none"})}refresh(){try{this.reset(),this.state.retryCount=0,this.loadCaptcha()}catch(t){}}safeSetTimeout(t,e){const i=setTimeout(()=>{this.timers.delete(i),t()},e);return this.timers.add(i),i}safeClearTimeout(t){t&&(clearTimeout(t),this.timers.delete(t))}clearAllTimers(){this.timers.forEach(t=>{clearTimeout(t),clearInterval(t)}),this.timers.clear(),this.rafId&&(cancelAnimationFrame(this.rafId),this.rafId=null)}cleanupImages(){this.elements.backgroundImg&&(this.elements.backgroundImg.src="",this.elements.backgroundImg.onload=null,this.elements.backgroundImg.onerror=null),this.elements.sliderImg&&(this.elements.sliderImg.src="",this.elements.sliderImg.onload=null,this.elements.sliderImg.onerror=null),this.imageCache.clear()}throttle(t,e){let i=0;return(...s)=>{const a=Date.now();if(a-i>=e)return i=a,t.apply(this,s)}}destroy(){try{this.abortController&&(this.abortController.abort(),this.abortController=null),document.body&&(document.body.style.userSelect="",document.body.style.cursor=""),this.clearAllTimers(),this.removeAllEventListeners(),this.cleanupImages(),this.elements?.overlay?.parentNode&&this.elements.overlay.parentNode.removeChild(this.elements.overlay);const t=document.getElementById("slider-captcha-styles");t&&t.remove(),this.imageCache.clear(),this.cachedDimensions=null,Object.keys(this).forEach(t=>{"constructor"!==t&&(this[t]=null)}),this.options.onDestroy&&this.options.onDestroy()}catch(t){}}static create(t){return new PopupSliderCaptcha(t)}static show(t){const e=new PopupSliderCaptcha(t);return e.show(),e}}"undefined"!=typeof module&&module.exports?(module.exports=PopupSliderCaptcha,module.exports.default=PopupSliderCaptcha):"function"==typeof define&&define.amd?define([],()=>PopupSliderCaptcha):"undefined"!=typeof window&&(window.PopupSliderCaptcha=PopupSliderCaptcha,window.SliderCaptcha=PopupSliderCaptcha);export{PopupSliderCaptcha as default};