slider-captcha-sdk 1.0.8 → 1.0.10

package/dist/index.esm.js

@@ -1 +1,988 @@
-import t from"jsencrypt";class PopupSliderCaptcha{static DEFAULTS={width:320,height:155,sliderSize:38,maxRetries:3,timeout:3e4,apiUrl:"/api/captcha",verifyUrl:"/api/captcha/verify",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}}"}constructor(t={}){this.options={...PopupSliderCaptcha.DEFAULTS,...t},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.throttledHandleMove=this.throttle(t=>this.handleMove(t),this.options.throttleDelay),this.init()}createInitialState(){return{isVisible:!1,isDragging:!1,currentX:0,startX:0,retryCount:0,isLoading:!1}}init(){this.injectStyles(),this.createElements(),this.bindEvents()}injectStyles(){if(document.querySelector("#slider-captcha-styles"))return;const t=document.createElement("style");t.id="slider-captcha-styles",t.textContent=PopupSliderCaptcha.getStyles(),document.head.appendChild(t)}createElements(){const{elements:t,options:e}=this;[["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]].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='<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(t,e="",i=""){const s=document.createElement(t);return e&&(s.className=e),i&&(s.textContent=i),s}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;this.addEventListener(t.closeBtn,"click",()=>this.hide()),this.addEventListener(t.refreshBtn,"click",()=>this.refresh()),this.addEventListener(t.overlay,"click",e=>{e.target===t.overlay&&this.options.clickMaskClose&&this.hide()}),this.addEventListener(document,"keydown",t=>{"Escape"===t.key&&this.state.isVisible&&this.hide()}),this.addEventListener(document,"visibilitychange",()=>this.handleVisibilityChange()),this.bindSliderEvents()}bindSliderEvents(){const{elements:t}=this,e={start:t=>this.handleStart(t),move:this.throttledHandleMove,end:()=>this.handleEnd()};this.addEventListener(t.btn,"mousedown",e.start),this.addEventListener(t.btn,"touchstart",e.start),this.addEventListener(t.sliderImg,"mousedown",e.start),this.addEventListener(t.sliderImg,"touchstart",e.start),this.addEventListener(document,"mousemove",e.move,{passive:!1}),this.addEventListener(document,"touchmove",e.move,{passive:!1}),this.addEventListener(document,"mouseup",e.end),this.addEventListener(document,"touchend",e.end)}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 t=this.elements.track.offsetWidth,e=this.elements.btn.offsetWidth;this.cachedDimensions={trackWidth:t,btnWidth:e,maxX:t-e}}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(),this.state.isDragging=!0,this.state.startX=this.getClientX(t)-this.state.currentX,this.startTime=this.startTime||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&&(this.elements.fingerAnimation.style.animationPlayState=t)}getClientX(t){return t.type.includes("touch")?t.touches[0].clientX:t.clientX}setTransition(t){const e=t?"all 0.3s ease":"none";requestAnimationFrame(()=>{this.elements.btn.style.transition=e,this.elements.sliderImg.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,{innerHTML:"✓",color:"white"}),e.icon.innerHTML="✓"},fail:()=>{Object.assign(e.btn.style,{background:"var(--sc-danger)"}),Object.assign(e.icon.style,{innerHTML:"✗",color:"white"}),e.icon.innerHTML="✗"},reset:()=>{Object.assign(e.btn.style,{background:"white"}),Object.assign(e.icon.style,{color:"#666"}),e.icon.innerHTML="→",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),n=i.currentX/s;requestAnimationFrame(()=>{t.btn.style.transform=`translateX(${i.currentX}px)`,t.sliderImg.style.transform=`translateX(${a}px)`,t.fingerAnimation.style.opacity=n>=.8?"0":"0.6"})}show(){this.state.isVisible=!0,this.elements.overlay.style.display="flex",this.elements.overlay.offsetHeight,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)}async loadCaptcha(){try{this.showLoading(),this.startTime=Date.now();const t=new AbortController,e=this.safeSetTimeout(()=>t.abort(),this.options.timeout),i=await fetch(this.options.apiUrl,{method:"POST",headers:{"Content-Type":"application/json"},body:JSON.stringify({place:2,timestamp:Date.now()}),signal:t.signal});if(this.safeClearTimeout(e),!i.ok)throw new Error(`HTTP ${i.status}`);const s=await i.json();if(!s.data?.canvasSrc||!s.data?.blockSrc)throw new Error("验证码数据格式错误");this.captchaData=s.data,this.showCaptcha(),await this.renderCaptcha()}catch(t){const e="AbortError"===t.name?"请求超时，请重试":`加载验证码失败: ${t.message}`;this.showError(e)}}async renderCaptcha(){return new Promise((t,e)=>{let i=0;const s=()=>2===++i&&(this.hideLoading(),t()),a=()=>e(new Error("图片加载失败"));this.loadImage(this.elements.backgroundImg,this.captchaData.canvasSrc,{width:this.captchaData.canvasWidth,height:this.captchaData.canvasHeight},s,a),this.loadImage(this.elements.sliderImg,this.captchaData.blockSrc,{width:this.captchaData.blockWidth,height:this.captchaData.blockHeight,top:this.captchaData.blockY},s,a)})}loadImage(t,e,i,s,a){if(this.imageCache.has(e)){const a=this.imageCache.get(e);return t.src=a.src,this.applyStyles(t,i),void s()}t.onload=()=>{this.imageCache.set(e,t.cloneNode()),s()},t.onerror=a,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{const t=new AbortController,e=this.safeSetTimeout(()=>t.abort(),this.options.timeout),i=await fetch(this.options.verifyUrl,{method:"POST",headers:{"Content-Type":"application/json"},body:JSON.stringify({loginVo:{nonceStr:this.captchaData.nonceStr,value:this.getPosition()},dragEventList:[...this.times]}),signal:t.signal});if(this.safeClearTimeout(e),!i.ok)throw new Error(`HTTP ${i.status}`);const s=await i.json();"0"===s.code||!0===s.success?this.onVerifySuccess():this.onVerifyFail(s.message||"验证失败，请重试！")}catch(t){const e="AbortError"===t.name?"验证超时，请重试":"网络错误";this.onVerifyFail(e)}else this.onVerifyFail("验证码数据丢失")}onVerifySuccess(){const t=Date.now()-this.startTime,e=`验证成功！耗时：${(t/1e3).toFixed(2)}s`;this.updateUIState("success"),this.showFloatingTime(e,"success"),this.safeSetTimeout(()=>{this.options.onSuccess?.({captchaId:this.captchaData.captchaId,timestamp:Date.now(),duration:t}),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.refresh():this.reset()},2500)}reset(){this.clearAllTimers(),Object.assign(this.state,{isDragging:!1,currentX:0,startX:0,isLoading:!1}),this.times=[],this.startTime=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(){this.reset(),this.state.retryCount=0,this.loadCaptcha()}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 function(...s){const a=Date.now();if(a-i>=e)return i=a,t.apply(this,s)}}debounce(t,e){let i;return function(...s){clearTimeout(i),i=setTimeout(()=>t.apply(this,s),e)}}destroy(){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(),Object.keys(this).forEach(t=>{"constructor"!==t&&(this[t]=null)})}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);class PasswordValidator{constructor(t={}){this.options={publicKeyUrl:t.publicKeyUrl||"/microservice/strongPassword/getPublicKey",validateUrl:t.validateUrl||"/microservice/strongPassword/checkPassword",timeout:t.timeout||1e4,headers:t.headers||{},...t},this.publicKeyCache=null,this.publicKeyExpiry=null}async getPublicKey(){if(this.publicKeyCache&&this.publicKeyExpiry&&Date.now()<this.publicKeyExpiry)return this.publicKeyCache;try{const t=await this.makeRequest(this.options.publicKeyUrl,{method:"GET"});if("0"!==t.code)throw new Error("获取公钥失败："+(t.message||"未知错误"));return this.publicKeyCache=t.data,this.publicKeyExpiry=Date.now()+3e5,this.publicKeyCache}catch(t){throw new Error("获取公钥失败: "+t.message)}}encryptPassword(e,i){try{if(!t)throw new Error("JSEncrypt库未正确加载");const s=new t;s.setPublicKey(i);const a=s.encrypt(e);if(!a)throw new Error("密码加密失败");return a}catch(t){throw new Error("密码加密失败: "+t.message)}}async validatePassword(t,e,i={}){try{const s=await this.getPublicKey(),a=this.encryptPassword(t,s),n=await this.makeRequest(this.options.validateUrl,{method:"POST",body:JSON.stringify({userName:e,password:a,timestamp:Date.now(),...i})});return{success:n.success,message:n.message,data:n.data,code:n.code}}catch(t){return{success:!1,message:t.message,code:"VALIDATION_ERROR"}}}async makeRequest(t,e={}){const i=new AbortController,s=setTimeout(()=>i.abort(),this.options.timeout);try{const a=await fetch(t,{...e,headers:{"Content-Type":"application/json",...this.options.headers,...e.headers},signal:i.signal});if(clearTimeout(s),!a.ok)throw new Error(`HTTP错误: ${a.status} ${a.statusText}`);return await a.json()}catch(t){if(clearTimeout(s),"AbortError"===t.name)throw new Error("请求超时");throw t}}clearCache(){this.publicKeyCache=null,this.publicKeyExpiry=null}updateOptions(t){this.options={...this.options,...t},this.clearCache()}}function e(t){return new PasswordValidator(t)}async function i(t,e={},i={}){const s=new PasswordValidator(e),a=i.userName||"";return await s.validatePassword(t,a,i)}var s={PopupSliderCaptcha:PopupSliderCaptcha,PasswordValidator:PasswordValidator,createPasswordValidator:e,validatePassword:i};"undefined"!=typeof window&&(window.SliderCaptcha=PopupSliderCaptcha,window.PopupSliderCaptcha=PopupSliderCaptcha,window.PasswordValidator=PasswordValidator,window.createPasswordValidator=e,window.validatePassword=i);export{PasswordValidator,PopupSliderCaptcha,e as createPasswordValidator,s as default,i as validatePassword};
+import JSEncrypt from 'jsencrypt';
+
+/**
+ * 纯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}}`
+  }
+
+  constructor(options = {}) {
+    this.options = { ...PopupSliderCaptcha.DEFAULTS, ...options };
+    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，避免重复bind调用
+    this.throttledHandleMove = this.throttle((e) => this.handleMove(e), this.options.throttleDelay);
+
+    this.init();
+  }
+
+  // 优化：提取初始状态创建为独立方法
+  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
+  }
+
+  // 优化：简化DOM组装逻辑
+  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.startTime = this.startTime || 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";
+    this.elements.overlay.offsetHeight; // 强制重绘
+
+    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);
+  }
+
+  // 优化：简化加载逻辑
+  async loadCaptcha() {
+    try {
+      this.showLoading();
+      this.startTime = Date.now();
+
+      const controller = new AbortController();
+      const timeoutId = this.safeSetTimeout(() => controller.abort(), this.options.timeout);
+
+      const response = await fetch(this.options.apiUrl, {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ place: 2, timestamp: Date.now() }),
+        signal: controller.signal
+      });
+
+      this.safeClearTimeout(timeoutId);
+
+      if (!response.ok) throw new Error(`HTTP ${response.status}`)
+      const data = await response.json();
+
+      if (data.data?.canvasSrc && data.data?.blockSrc) {
+        this.captchaData = data.data;
+        this.showCaptcha();
+        await this.renderCaptcha();
+      } else {
+        throw new Error("验证码数据格式错误")
+      }
+    } catch (error) {
+      const message = error.name === 'AbortError' ? "请求超时，请重试" : `加载验证码失败: ${error.message}`;
+      this.showError(message);
+    }
+  }
+
+  async renderCaptcha() {
+    return new Promise((resolve, reject) => {
+      let loadedCount = 0;
+      const onLoad = () => ++loadedCount === 2 && (this.hideLoading(), resolve());
+      const onError = () => reject(new Error("图片加载失败"));
+
+      this.loadImage(this.elements.backgroundImg, this.captchaData.canvasSrc, {
+        width: this.captchaData.canvasWidth,
+        height: this.captchaData.canvasHeight
+      }, onLoad, onError);
+
+      this.loadImage(this.elements.sliderImg, this.captchaData.blockSrc, {
+        width: this.captchaData.blockWidth,
+        height: this.captchaData.blockHeight,
+        top: this.captchaData.blockY
+      }, onLoad, onError);
+    })
+  }
+
+  loadImage(imgElement, src, styles, onLoad, onError) {
+    // 检查缓存
+    if (this.imageCache.has(src)) {
+      const cachedImg = this.imageCache.get(src);
+      imgElement.src = cachedImg.src;
+      this.applyStyles(imgElement, styles);
+      onLoad();
+      return
+    }
+
+    imgElement.onload = () => {
+      this.imageCache.set(src, imgElement.cloneNode());
+      onLoad();
+    };
+    imgElement.onerror = onError;
+    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 {
+      const controller = new AbortController();
+      const timeoutId = this.safeSetTimeout(() => controller.abort(), this.options.timeout);
+
+      const response = await fetch(this.options.verifyUrl, {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({
+          loginVo: {
+            nonceStr: this.captchaData.nonceStr,
+            value: this.getPosition()
+          },
+          dragEventList: [...this.times]
+        }),
+        signal: controller.signal
+      });
+
+      this.safeClearTimeout(timeoutId);
+
+      if (!response.ok) throw new Error(`HTTP ${response.status}`)
+      const data = await response.json();
+
+      if (data.code === "0" || data.success === true) {
+        this.onVerifySuccess();
+      } else {
+        this.onVerifyFail(data.message || "验证失败，请重试！");
+      }
+    } catch (error) {
+      const message = error.name === 'AbortError' ? "验证超时，请重试" : "网络错误";
+      this.onVerifyFail(message);
+    }
+  }
+
+  onVerifySuccess() {
+    const duration = Date.now() - this.startTime;
+    const durationText = `验证成功！耗时：${(duration / 1000).toFixed(2)}s`;
+
+    this.updateUIState("success");
+    this.showFloatingTime(durationText, "success");
+
+    this.safeSetTimeout(() => {
+      this.options.onSuccess?.({
+        captchaId: this.captchaData.captchaId,
+        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.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)
+      }
+    }
+  }
+
+  // 工具函数：防抖
+  debounce(func, delay) {
+    let timeoutId;
+    return function (...args) {
+      clearTimeout(timeoutId);
+      timeoutId = setTimeout(() => func.apply(this, args), delay);
+    }
+  }
+
+  destroy() {
+    // 恢复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();
+    }
+
+    // 清空所有属性
+    Object.keys(this).forEach(key => {
+      if (key !== 'constructor') {
+        this[key] = null;
+      }
+    });
+  }
+
+  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;
+}
+
+/**
+ * 密码校验工具类
+ * 提供密码加密和校验功能
+ */
+class PasswordValidator {
+  constructor(options = {}) {
+    this.options = {
+      // 获取公钥的接口地址
+      publicKeyUrl: options.publicKeyUrl || '/microservice/strongPassword/getPublicKey',
+      // 密码校验接口地址
+      validateUrl: options.validateUrl || '/microservice/strongPassword/checkPassword',
+      // 请求超时时间
+      timeout: options.timeout || 10000,
+      // 自定义请求头
+      headers: options.headers || {},
+      ...options
+    };
+
+    // 缓存公钥，避免重复请求
+    this.publicKeyCache = null;
+    this.publicKeyExpiry = null;
+  }
+
+  /**
+   * 获取公钥
+   * @returns {Promise<string>} 公钥字符串
+   */
+  async getPublicKey() {
+    // 检查缓存是否有效（5分钟有效期）
+    if (this.publicKeyCache && this.publicKeyExpiry && Date.now() < this.publicKeyExpiry) {
+      return this.publicKeyCache
+    }
+
+    try {
+      const response = await this.makeRequest(this.options.publicKeyUrl, {
+        method: 'GET'
+      });
+
+      if (response.code !== '0' ) {
+        throw new Error('获取公钥失败：' + (response.message || '未知错误'))
+      }
+
+      // 缓存公钥，设置5分钟过期时间
+      this.publicKeyCache = response.data;
+      this.publicKeyExpiry = Date.now() + 5 * 60 * 1000;
+
+      return this.publicKeyCache
+    } catch (error) {
+      console.error('获取公钥失败:', error);
+      throw new Error('获取公钥失败: ' + error.message)
+    }
+  }
+
+  /**
+   * 使用RSA公钥加密密码
+   * @param {string} password 原始密码
+   * @param {string} publicKey 公钥字符串
+   * @returns {string} 加密后的密码
+   */
+  encryptPassword(password, publicKey) {
+    try {
+      // 使用导入的JSEncrypt进行RSA加密
+      if (!JSEncrypt) {
+        throw new Error('JSEncrypt库未正确加载')
+      }
+
+      const encrypt = new JSEncrypt();
+      encrypt.setPublicKey(publicKey);
+      const encrypted = encrypt.encrypt(password);
+
+      if (!encrypted) {
+        throw new Error('密码加密失败')
+      }
+
+      return encrypted
+    } catch (error) {
+      console.error('密码加密失败:', error);
+      throw new Error('密码加密失败: ' + error.message)
+    }
+  }
+
+  /**
+   * 校验密码
+   * @param {string} password 原始密码
+   * @param {string} userName 用户
+   * @param {Object} additionalData 额外的校验数据
+   * @returns {Promise<Object>} 校验结果
+   */
+  async validatePassword(password, userName, additionalData = {}) {
+    try {
+      // 1. 获取公钥
+      const publicKey = await this.getPublicKey();
+
+      // 2. 加密密码
+      const encryptedPassword = this.encryptPassword(password, publicKey);
+
+      // 3. 调用校验接口
+      const response = await this.makeRequest(this.options.validateUrl, {
+        method: 'POST',
+        body: JSON.stringify({
+          userName: userName,
+          password: encryptedPassword,
+          timestamp: Date.now(),
+          ...additionalData
+        })
+      });
+
+      return {
+        success: response.success,
+        message: response.message,
+        data: response.data,
+        code: response.code
+      }
+    } catch (error) {
+      console.error('密码校验失败:', error);
+      return {
+        success: false,
+        message: error.message,
+        code: 'VALIDATION_ERROR'
+      }
+    }
+  }
+
+  /**
+   * 发送HTTP请求的通用方法
+   * @param {string} url 请求地址
+   * @param {Object} options 请求选项
+   * @returns {Promise<Object>} 响应结果
+   */
+  async makeRequest(url, options = {}) {
+    const controller = new AbortController();
+    const timeoutId = setTimeout(() => controller.abort(), this.options.timeout);
+
+    try {
+      const response = await fetch(url, {
+        ...options,
+        headers: {
+          'Content-Type': 'application/json',
+          ...this.options.headers,
+          ...options.headers
+        },
+        signal: controller.signal
+      });
+
+      clearTimeout(timeoutId);
+
+      if (!response.ok) {
+        throw new Error(`HTTP错误: ${response.status} ${response.statusText}`)
+      }
+
+      return await response.json()
+    } catch (error) {
+      clearTimeout(timeoutId);
+
+      if (error.name === 'AbortError') {
+        throw new Error('请求超时')
+      }
+
+      throw error
+    }
+  }
+
+  /**
+   * 清除公钥缓存
+   */
+  clearCache() {
+    this.publicKeyCache = null;
+    this.publicKeyExpiry = null;
+  }
+
+  /**
+   * 更新配置
+   * @param {Object} newOptions 新的配置选项
+   */
+  updateOptions(newOptions) {
+    this.options = { ...this.options, ...newOptions };
+    // 清除缓存，使用新配置重新获取
+    this.clearCache();
+  }
+}
+
+/**
+ * 创建密码校验器实例的工厂函数
+ * @param {Object} options 配置选项
+ * @returns {PasswordValidator} 密码校验器实例
+ */
+function createPasswordValidator(options) {
+  return new PasswordValidator(options)
+}
+
+/**
+ * 快速校验密码的便捷函数
+ * @param {string} password 密码
+ * @param {Object} options 配置选项
+ * @param {Object} additionalData 额外数据
+ * @returns {Promise<Object>} 校验结果
+ */
+async function validatePassword(password, options = {}, additionalData = {}) {
+  const validator = new PasswordValidator(options);
+  // 修复：添加userName参数，可以从additionalData中提取或设为空字符串
+  const userName = additionalData.userName || '';
+  return await validator.validatePassword(password, userName, additionalData)
+}
+
+// 导入滑块验证码组件（使用默认导入）
+
+// 默认导出（向后兼容）
+var index = {
+  PopupSliderCaptcha,
+  PasswordValidator,
+  createPasswordValidator,
+  validatePassword
+};
+
+// 全局注册（用于UMD构建）
+if (typeof window !== 'undefined') {
+  window.SliderCaptcha = PopupSliderCaptcha;
+  window.PopupSliderCaptcha = PopupSliderCaptcha;
+  window.PasswordValidator = PasswordValidator;
+  window.createPasswordValidator = createPasswordValidator;
+  window.validatePassword = validatePassword;
+}
+
+export { PasswordValidator, PopupSliderCaptcha, createPasswordValidator, index as default, validatePassword };