slider-captcha-sdk 1.0.19 → 1.0.20

package/dist/index.esm.js

@@ -13,7 +13,7 @@ class PopupSliderCaptcha {
     apiUrl: '/api/captcha',
     verifyUrl: '/api/captcha/verify',
     throttleDelay: 16,
-    clickMaskClose: false,
+    clickMaskClose: false
   }
 
   static CSS_CLASSES = {
@@ -25,7 +25,7 @@ class PopupSliderCaptcha {
     btn: 'slider-captcha-btn',
     hint: 'slider-captcha-hint',
     loading: 'slider-captcha-loading',
-    error: 'slider-captcha-error',
+    error: 'slider-captcha-error'
   }
 
   // 优化：提取CSS样式为独立方法，减少主体代码长度
@@ -39,7 +39,7 @@ class PopupSliderCaptcha {
     MAX_RETRY_ATTEMPTS: 3,
     DEFAULT_TIMEOUT: 30000,
     FLOATING_TIME_DURATION: 2500,
-    THROTTLE_DELAY: 16,
+    THROTTLE_DELAY: 16
   }
 
   static ERROR_TYPES = {
@@ -47,7 +47,7 @@ class PopupSliderCaptcha {
     TIMEOUT_ERROR: 'TIMEOUT_ERROR',
     VALIDATION_ERROR: 'VALIDATION_ERROR',
     IMAGE_LOAD_ERROR: 'IMAGE_LOAD_ERROR',
-    CAPTCHA_DATA_ERROR: 'CAPTCHA_DATA_ERROR',
+    CAPTCHA_DATA_ERROR: 'CAPTCHA_DATA_ERROR'
   }
 
   constructor(options = {}) {
@@ -56,7 +56,7 @@ class PopupSliderCaptcha {
       ...options,
       timeout: options.timeout || PopupSliderCaptcha.CONSTANTS.DEFAULT_TIMEOUT,
       maxRetries: options.maxRetries || PopupSliderCaptcha.CONSTANTS.MAX_RETRY_ATTEMPTS,
-      throttleDelay: options.throttleDelay || PopupSliderCaptcha.CONSTANTS.THROTTLE_DELAY,
+      throttleDelay: options.throttleDelay || PopupSliderCaptcha.CONSTANTS.THROTTLE_DELAY
     };
 
     this.elements = {};
@@ -88,7 +88,7 @@ class PopupSliderCaptcha {
       currentX: 0,
       startX: 0,
       retryCount: 0,
-      isLoading: false,
+      isLoading: false
     }
   }
 
@@ -99,7 +99,7 @@ class PopupSliderCaptcha {
   }
 
   injectStyles() {
-    if (document.querySelector('#slider-captcha-styles')) return
+    if (document.querySelector('#slider-captcha-styles')) { return }
 
     const style = document.createElement('style');
     style.id = 'slider-captcha-styles';
@@ -128,7 +128,7 @@ class PopupSliderCaptcha {
       ['btn', 'div', PopupSliderCaptcha.CSS_CLASSES.btn],
       ['icon', 'div', '', '→'],
       ['hint', 'div', PopupSliderCaptcha.CSS_CLASSES.hint, '向右滑动完成验证'],
-      ['error', 'div', PopupSliderCaptcha.CSS_CLASSES.error],
+      ['error', 'div', PopupSliderCaptcha.CSS_CLASSES.error]
     ];
 
     // 批量创建元素
@@ -148,8 +148,8 @@ class PopupSliderCaptcha {
 
   createElement(tag, className = '', textContent = '') {
     const element = document.createElement(tag);
-    if (className) element.className = className;
-    if (textContent) element.textContent = textContent;
+    if (className) { element.className = className; }
+    if (textContent) { element.textContent = textContent; }
     return element
   }
 
@@ -166,7 +166,7 @@ class PopupSliderCaptcha {
       elements.backgroundImg,
       elements.sliderImg,
       elements.loadingText,
-      elements.floatingTime,
+      elements.floatingTime
     );
 
     // 组装滑块轨道
@@ -194,10 +194,10 @@ class PopupSliderCaptcha {
     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();
+      if (e.target === elements.overlay && this.options.clickMaskClose) { this.hide(); }
     });
     this.addEventListener(document, 'keydown', (e) => {
-      if (e.key === 'Escape' && this.state.isVisible) this.hide();
+      if (e.key === 'Escape' && this.state.isVisible) { this.hide(); }
     });
     this.addEventListener(document, 'visibilitychange', () => this.handleVisibilityChange());
 
@@ -209,7 +209,7 @@ class PopupSliderCaptcha {
     const handlers = {
       start: (e) => this.handleStart(e),
       move: this.throttledHandleMove,
-      end: () => this.handleEnd(),
+      end: () => this.handleEnd()
     };
 
     // 滑块事件
@@ -224,7 +224,7 @@ class PopupSliderCaptcha {
   }
 
   addEventListener(element, event, handler, options = {}) {
-    if (!element || typeof handler !== 'function') return
+    if (!element || typeof handler !== 'function') { return }
 
     element.addEventListener(event, handler, options);
     this.eventListeners.push({ element, event, handler, options });
@@ -248,7 +248,7 @@ class PopupSliderCaptcha {
       this.cachedDimensions = {
         trackWidth,
         btnWidth,
-        maxX: trackWidth - btnWidth,
+        maxX: trackWidth - btnWidth
       };
     }
     return this.cachedDimensions
@@ -261,7 +261,7 @@ class PopupSliderCaptcha {
   }
 
   handleStart(e) {
-    if (!this.captchaData || this.state.isDragging || this.state.isLoading) return
+    if (!this.captchaData || this.state.isDragging || this.state.isLoading) { return }
 
     e.preventDefault();
     this.state.isDragging = true;
@@ -275,7 +275,7 @@ class PopupSliderCaptcha {
   }
 
   handleMove(e) {
-    if (!this.state.isDragging) return
+    if (!this.state.isDragging) { return }
     e.preventDefault();
 
     const clientX = this.getClientX(e);
@@ -286,12 +286,14 @@ class PopupSliderCaptcha {
     this.times.push({ time: Date.now(), position: this.getPosition() });
 
     // 优化：使用RAF批量更新
-    this.rafId && cancelAnimationFrame(this.rafId);
+    if (this.rafId) {
+      cancelAnimationFrame(this.rafId);
+    }
     this.rafId = requestAnimationFrame(() => this.updateSliderPosition());
   }
 
   handleEnd() {
-    if (!this.state.isDragging) return
+    if (!this.state.isDragging) { return }
 
     this.times.push({ time: Date.now(), position: this.getPosition() });
     this.state.isDragging = false;
@@ -352,7 +354,7 @@ class PopupSliderCaptcha {
         elements.hint.style.opacity = '0';
         elements.fingerAnimation.style.display = 'none';
         Object.assign(elements.track.style, { pointerEvents: 'none', opacity: '0.6' });
-      },
+      }
     };
 
     if (updates[state]) {
@@ -419,7 +421,7 @@ class PopupSliderCaptcha {
       [PopupSliderCaptcha.ERROR_TYPES.TIMEOUT_ERROR]: '请求超时，请重试',
       [PopupSliderCaptcha.ERROR_TYPES.VALIDATION_ERROR]: '验证失败，请重试',
       [PopupSliderCaptcha.ERROR_TYPES.IMAGE_LOAD_ERROR]: '图片加载失败，请刷新重试',
-      [PopupSliderCaptcha.ERROR_TYPES.CAPTCHA_DATA_ERROR]: '验证码数据错误，请刷新重试',
+      [PopupSliderCaptcha.ERROR_TYPES.CAPTCHA_DATA_ERROR]: '验证码数据错误，请刷新重试'
     };
 
     const errorMessage = errorMessages[errorType] || message || '未知错误';
@@ -429,7 +431,7 @@ class PopupSliderCaptcha {
       this.options.onError({
         type: errorType,
         message: errorMessage,
-        originalError,
+        originalError
       });
     }
 
@@ -453,13 +455,13 @@ class PopupSliderCaptcha {
         method: 'POST',
         headers: {
           'Content-Type': 'application/json',
-          ...this.options.headers,
+          ...this.options.headers
         },
         body: JSON.stringify({
           timestamp: Date.now(),
-          ...this.options.requestData,
+          ...this.options.requestData
         }),
-        signal: this.abortController.signal,
+        signal: this.abortController.signal
       });
 
       if (!response.ok) {
@@ -492,7 +494,7 @@ class PopupSliderCaptcha {
 
   // 优化：添加验证码数据验证方法
   validateCaptchaData(data) {
-    if (!data || typeof data !== 'object') return false
+    if (!data || typeof data !== 'object') { return false }
 
     const requiredFields = [
       'canvasSrc',
@@ -502,7 +504,7 @@ class PopupSliderCaptcha {
       'blockWidth',
       'blockHeight',
       'blockY',
-      'nonceStr',
+      'nonceStr'
     ];
     const dataObj = data.data || data;
 
@@ -516,17 +518,33 @@ class PopupSliderCaptcha {
     return new Promise((resolve, reject) => {
       let hasError = false;
 
+      // const _onLoad = () => {
+      //   if (hasError) { return }
+      //   loadedCount++
+      //   if (loadedCount === 2) {
+      //     this.hideLoading()
+      //     resolve()
+      //   }
+      // }
+      //
+      // const _onError = (error) => {
+      //   if (hasError) { return }
+      //   hasError = true
+      //   this.handleError(PopupSliderCaptcha.ERROR_TYPES.IMAGE_LOAD_ERROR, '图片加载失败', error)
+      //   reject(new Error('图片加载失败'))
+      // }
+
       // 优化：并行加载图片，提高性能
       const loadPromises = [
         this.loadImageAsync(this.elements.backgroundImg, this.captchaData.canvasSrc, {
           width: this.captchaData.canvasWidth,
-          height: this.captchaData.canvasHeight,
+          height: this.captchaData.canvasHeight
         }),
         this.loadImageAsync(this.elements.sliderImg, this.captchaData.blockSrc, {
           width: this.captchaData.blockWidth,
           height: this.captchaData.blockHeight,
-          top: this.captchaData.blockY,
-        }),
+          top: this.captchaData.blockY
+        })
       ];
 
       Promise.all(loadPromises)
@@ -562,16 +580,16 @@ class PopupSliderCaptcha {
         reject(new Error('图片加载超时'));
       }, 10000); // 10秒超时
 
-      imgElement.onload = () => {
+      imgElement.onload = function onImageLoad() {
         this.safeClearTimeout(timeoutId);
         this.imageCache.set(src, imgElement.cloneNode());
         resolve();
-      };
+      }.bind(this);
 
-      imgElement.onerror = (error) => {
+      imgElement.onerror = function onImageError(error) {
         this.safeClearTimeout(timeoutId);
         reject(error);
-      };
+      }.bind(this);
 
       imgElement.src = src;
       this.applyStyles(imgElement, styles);
@@ -581,7 +599,7 @@ class PopupSliderCaptcha {
   // 优化：提取样式应用逻辑
   applyStyles(element, styles) {
     Object.entries(styles).forEach(([key, value]) => {
-      element.style[key] = typeof value === 'number' ? value + 'px' : value;
+      element.style[key] = typeof value === 'number' ? `${value}px` : value;
     });
   }
 
@@ -591,7 +609,7 @@ class PopupSliderCaptcha {
     this.batchUpdateStyles({
       container: { display: 'block' },
       loadingText: { display: 'flex' },
-      error: { display: 'none' },
+      error: { display: 'none' }
     });
     this.updateUIState('loading');
   }
@@ -606,14 +624,14 @@ class PopupSliderCaptcha {
     this.batchUpdateStyles({
       container: { display: 'block' },
       track: { display: 'block' },
-      error: { display: 'none' },
+      error: { display: 'none' }
     });
   }
 
   showError(message) {
     this.hideLoading();
     this.batchUpdateStyles({
-      error: { display: 'block', textContent: message },
+      error: { display: 'block', textContent: message }
     });
   }
 
@@ -652,17 +670,17 @@ class PopupSliderCaptcha {
         method: 'POST',
         headers: {
           'Content-Type': 'application/json',
-          ...this.options.headers,
+          ...this.options.headers
         },
         body: JSON.stringify({
           loginVo: {
             nonceStr: this.captchaData.nonceStr,
-            value: this.getPosition(),
+            value: this.getPosition()
           },
           dragEventList: [...this.times],
-          ...this.options.verifyData,
+          ...this.options.verifyData
         }),
-        signal: this.abortController.signal,
+        signal: this.abortController.signal
       });
 
       if (!response.ok) {
@@ -693,7 +711,7 @@ class PopupSliderCaptcha {
 
   // 优化：添加验证成功判断方法
   isVerifySuccess(data) {
-    if (!data || typeof data !== 'object') return false
+    if (!data || typeof data !== 'object') { return false }
 
     // 支持多种成功标识
     const successIndicators = [
@@ -701,16 +719,16 @@ class PopupSliderCaptcha {
       data.code === 0,
       data.success === true,
       data.status === 'success',
-      data.result === true,
+      data.result === true
     ];
 
     return successIndicators.some((indicator) => indicator === true)
   }
 
   onVerifySuccess(ticket) {
-    const duration = this.dragStartTime
-      ? Date.now() - this.dragStartTime
-      : Date.now() - this.startTime;
+    const duration = this.dragStartTime ?
+      Date.now() - this.dragStartTime :
+      Date.now() - this.startTime;
     const durationText = `验证成功！耗时：${(duration / 1000).toFixed(2)}s`;
 
     this.updateUIState('success');
@@ -718,9 +736,9 @@ class PopupSliderCaptcha {
 
     this.safeSetTimeout(() => {
       this.options.onSuccess?.({
-        ticket: ticket,
+        ticket,
         timestamp: Date.now(),
-        duration,
+        duration
       });
       this.hide();
     }, 2000);
@@ -759,7 +777,7 @@ class PopupSliderCaptcha {
       isDragging: false,
       currentX: 0,
       startX: 0,
-      isLoading: false,
+      isLoading: false
     });
 
     this.times = [];
@@ -831,13 +849,15 @@ class PopupSliderCaptcha {
   // 工具函数：节流
   throttle(func, delay) {
     let lastCall = 0;
-    return function (...args) {
+    const throttledFunction = (...args) => {
       const now = Date.now();
       if (now - lastCall >= delay) {
         lastCall = now;
         return func.apply(this, args)
       }
-    }
+      return undefined
+    };
+    return throttledFunction
   }
 
   destroy() {
@@ -924,11 +944,10 @@ var PopupSliderCaptcha$1 = PopupSliderCaptcha;
  * 提供密码加密和校验功能
  */
 class PasswordValidator {
-  // 优化：添加常量定义
   static CONSTANTS = {
     DEFAULT_TIMEOUT: 10000,
     CACHE_DURATION: 5 * 60 * 1000, // 5分钟缓存
-    MIN_PASSWORD_LENGTH: 1,
+    MIN_PASSWORD_LENGTH: 1
   }
 
   static ERROR_TYPES = {
@@ -936,7 +955,7 @@ class PasswordValidator {
     TIMEOUT_ERROR: 'TIMEOUT_ERROR',
     ENCRYPTION_ERROR: 'ENCRYPTION_ERROR',
     VALIDATION_ERROR: 'VALIDATION_ERROR',
-    PUBLIC_KEY_ERROR: 'PUBLIC_KEY_ERROR',
+    PUBLIC_KEY_ERROR: 'PUBLIC_KEY_ERROR'
   }
 
   constructor(options = {}) {
@@ -946,7 +965,7 @@ class PasswordValidator {
       timeout: options.timeout || PasswordValidator.CONSTANTS.DEFAULT_TIMEOUT,
       headers: options.headers || {},
       cacheDuration: options.cacheDuration || PasswordValidator.CONSTANTS.CACHE_DURATION,
-      ...options,
+      ...options
     };
 
     // 缓存公钥，避免重复请求
@@ -966,11 +985,11 @@ class PasswordValidator {
 
     try {
       const response = await this.makeRequest(this.options.publicKeyUrl, {
-        method: 'GET',
+        method: 'GET'
       });
 
       if (!this.isSuccessResponse(response)) {
-        throw new Error('获取公钥失败：' + (response.message || response.msg || '未知错误'))
+        throw new Error(`获取公钥失败：${response.message || response.msg || '未知错误'}`)
       }
 
       // 验证公钥格式
@@ -987,7 +1006,7 @@ class PasswordValidator {
     } catch (error) {
       console.error('获取公钥失败:', error);
       this.handleError(PasswordValidator.ERROR_TYPES.PUBLIC_KEY_ERROR, error.message, error);
-      throw new Error('获取公钥失败: ' + error.message)
+      throw new Error(`获取公钥失败: ${error.message}`)
     }
   }
 
@@ -1002,7 +1021,7 @@ class PasswordValidator {
       response.code === 0,
       response.success === true,
       response.status === 'success',
-      response.result === true,
+      response.result === true
     ];
 
     return successIndicators.some((indicator) => indicator === true)
@@ -1014,7 +1033,7 @@ class PasswordValidator {
       [PasswordValidator.ERROR_TYPES.TIMEOUT_ERROR]: '请求超时，请重试',
       [PasswordValidator.ERROR_TYPES.ENCRYPTION_ERROR]: '密码加密失败',
       [PasswordValidator.ERROR_TYPES.VALIDATION_ERROR]: '密码验证失败',
-      [PasswordValidator.ERROR_TYPES.PUBLIC_KEY_ERROR]: '获取公钥失败',
+      [PasswordValidator.ERROR_TYPES.PUBLIC_KEY_ERROR]: '获取公钥失败'
     };
 
     const errorMessage = errorMessages[errorType] || message || '未知错误';
@@ -1024,7 +1043,7 @@ class PasswordValidator {
       this.options.onError({
         type: errorType,
         message: errorMessage,
-        originalError,
+        originalError
       });
     }
 
@@ -1067,7 +1086,7 @@ class PasswordValidator {
     } catch (error) {
       console.error('密码加密失败:', error);
       this.handleError(PasswordValidator.ERROR_TYPES.ENCRYPTION_ERROR, error.message, error);
-      throw new Error('密码加密失败: ' + error.message)
+      throw new Error(`密码加密失败: ${error.message}`)
     }
   }
 
@@ -1094,11 +1113,11 @@ class PasswordValidator {
       const response = await this.makeRequest(this.options.validateUrl, {
         method: 'POST',
         body: JSON.stringify({
-          userName: userName,
+          userName,
           password: encryptedPassword,
           timestamp: Date.now(),
-          ...additionalData,
-        }),
+          ...additionalData
+        })
       });
 
       return {
@@ -1106,7 +1125,7 @@ class PasswordValidator {
         data: response.data || response.result,
         message: response.message || response.msg || '验证完成',
         code: response.code || response.status,
-        originalResponse: response,
+        originalResponse: response
       }
     } catch (error) {
       console.error('密码校验失败:', error);
@@ -1127,7 +1146,7 @@ class PasswordValidator {
         success: false,
         message: error.message || '密码校验失败',
         code: errorType,
-        error: error,
+        error
       }
     }
   }
@@ -1152,9 +1171,9 @@ class PasswordValidator {
         headers: {
           'Content-Type': 'application/json',
           ...this.options.headers,
-          ...options.headers,
+          ...options.headers
         },
-        signal: abortController.signal,
+        signal: abortController.signal
       });
 
       clearTimeout(timeoutId);
@@ -1206,37 +1225,16 @@ class PasswordValidator {
     this.clearCache();
   }
 
-  /**
-   * 取消当前请求
-   * 注意：由于现在每个请求使用独立的AbortController，此方法主要用于向后兼容
-   */
-  cancelRequest() {
-    // 由于现在每个请求使用独立的AbortController，无法直接取消所有请求
-    // 如果需要取消特定请求，建议在调用validatePassword时保存返回的Promise并手动处理
-    console.warn('cancelRequest方法已过时，现在每个请求使用独立的AbortController');
-  }
-
-  /**
-   * 检查是否正在请求中
-   * @returns {boolean} 是否正在请求
-   * 注意：由于现在每个请求使用独立的AbortController，此方法无法准确判断
-   */
-  isRequesting() {
-    // 由于现在每个请求使用独立的AbortController，无法准确判断是否正在请求
-    console.warn('isRequesting方法已过时，现在每个请求使用独立的AbortController');
-    return false
-  }
-
   /**
    * 获取缓存状态
    * @returns {Object} 缓存状态信息
    */
   getCacheStatus() {
     return {
-      hasCache: !!this.publicKeyCache,
+      hasCache: Boolean(this.publicKeyCache),
       isExpired: this.publicKeyExpiry ? Date.now() > this.publicKeyExpiry : true,
       expiryTime: this.publicKeyExpiry,
-      remainingTime: this.publicKeyExpiry ? Math.max(0, this.publicKeyExpiry - Date.now()) : 0,
+      remainingTime: this.publicKeyExpiry ? Math.max(0, this.publicKeyExpiry - Date.now()) : 0
     }
   }
 
@@ -1245,9 +1243,6 @@ class PasswordValidator {
    */
   destroy() {
     try {
-      // 取消所有进行中的请求
-      this.cancelRequest();
-
       // 清除缓存
       this.clearCache();
 
@@ -1276,15 +1271,14 @@ function createPasswordValidator(options) {
 /**
  * 快速校验密码的便捷函数
  * @param {string} password 密码
+ * @param {string} userName 用户名
  * @param {Object} options 配置选项
  * @param {Object} additionalData 额外数据
  * @returns {Promise<Object>} 校验结果
  */
-async function validatePassword(password, options = {}, additionalData = {}) {
+function validatePassword(password, userName, options = {}, additionalData = {}) {
   const validator = new PasswordValidator(options);
-  // 修复：添加userName参数，可以从additionalData中提取或设为空字符串
-  const userName = additionalData.userName || '';
-  return await validator.validatePassword(password, userName, additionalData)
+  return validator.validatePassword(password, userName, additionalData)
 }
 
 // 导入滑块验证码组件（使用默认导入）