npm - slider-captcha-sdk - Versions diffs - 1.0.28 → 1.0.30 - Mend

slider-captcha-sdk 1.0.28 → 1.0.30

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (5) hide show

package/dist/index.esm.js +1 -1
package/dist/index.min.js +1 -1
package/dist/slider-captcha.esm.js +1 -1
package/dist/slider-captcha.min.js +1 -1
package/package.json +1 -1

package/dist/index.esm.js CHANGED Viewed

	@@ -1 +1 @@
1	- function t(t){return new PasswordValidator(t)}function i(t,i,s={},e={}){return new PasswordValidator(s).validatePassword(t,i,e)}var s,e,a;import JSEncrypt from"jsencrypt";class PopupSliderCaptcha{static DEFAULTS={width:320,height:240,sliderSize:40,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:#666;--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);will-change:opacity}.slider-captcha-overlay.show{opacity:1}.slider-captcha-modal{background:#fff;border-radius:var(--sc-radius);padding:16px 16px 5px;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);will-change:transform,opacity}.slider-captcha-modal.show{transform:scale(1) translateY(-10%);opacity:1}.slider-captcha-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px;}.slider-captcha-container{display:flex;align-items:center;position:relative;border-radius:4px;overflow:hidden;margin-bottom:12px;background:#837a7a;justify-content:center}.slider-captcha-track{width:100%;height:48px;min-height:48px;max-height:48px;line-height:48px;background:#e8f5e9;border: 1px solid rgba(0,200,112,0.15);border-radius:40px;position:relative;margin-bottom:15px;overflow:hidden;box-sizing:border-box;flex-shrink:0}.slider-captcha-btn{width:40px;height:40px;background: #00C870;border-radius:50%;position:absolute;top:4px;left:4px;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;will-change:transform}.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;line-height:12px;white-space:nowrap;opacity:0;pointer-events:none;z-index:10;transition:all var(--sc-transition);background:#fff;padding:4px 15px;border-radius:10px;will-change:transform,opacity}.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:none}.slider-captcha-piece{position:absolute;top:0;left:0;cursor:pointer;transition:none;z-index:2;will-change:transform;display:none}.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;will-change:left,opacity,transform;white-space:nowrap}.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:opacity var(--sc-transition);white-space:nowrap}.slider-captcha-header-buttons{display:flex;align-items:center}@keyframes fingerSlide{0%{left:10px;opacity:.6;transform:translateY(-50%) scale(1)}50%{opacity:1;transform:translateY(-50%) scale(1.1)}100%{left:calc(50% - 10px);opacity:.6;transform:translateY(-50%) scale(1)}}"}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),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.isInitialized=!1,this.throttledHandleMove=this.throttle(t=>this.handleMove(t),this.options.throttleDelay),this.lazyInit()}lazyInit(){this.injectStyles(),this.isInitialized=!0}createInitialState(){return{isVisible:!1,isDragging:!1,currentX:0,startX:0,retryCount:0,isLoading:!1}}normalizeUrl(t,i){return t&&i&&!/^https?:\/\//.test(t)?(i.endsWith("/")?i:i+"/")+(t.startsWith("/")?t.slice(1):t):t}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{options:t}=this,i=t.width,s=t.height,e=`\n <div class="${PopupSliderCaptcha.CSS_CLASSES.overlay}">\n <div class="${PopupSliderCaptcha.CSS_CLASSES.modal}">\n <div class="${PopupSliderCaptcha.CSS_CLASSES.header}">\n <h3 class="slider-captcha-title">安全验证</h3>\n <div class="slider-captcha-header-buttons">\n <button class="slider-captcha-refresh" title="刷新">\n <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>\n </button>\n <button class="slider-captcha-close" title="关闭"></button>\n </div>\n </div>\n <div class="${PopupSliderCaptcha.CSS_CLASSES.container}" style="width:${i}px;height:${s}px;display:none;">\n <img class="slider-captcha-bg" alt="" style="display:none;">\n <img class="slider-captcha-piece" alt="" style="display:none;">\n <div class="${PopupSliderCaptcha.CSS_CLASSES.loading}">加载中...</div>\n <div class="slider-captcha-floating-time"></div>\n </div>\n <div class="${PopupSliderCaptcha.CSS_CLASSES.track}">\n <div class="slider-captcha-finger">👉</div>\n <div class="${PopupSliderCaptcha.CSS_CLASSES.btn}">\n <div class="slider-captcha-icon">→</div>\n </div>\n <div class="${PopupSliderCaptcha.CSS_CLASSES.hint}">向右滑动完成验证</div>\n </div>\n <div class="${PopupSliderCaptcha.CSS_CLASSES.error}"></div>\n </div>\n </div>\n `,a=document.createElement("div");a.innerHTML=e.trim();const r=a.firstElementChild;document.body.appendChild(r),this.elements={overlay:r,modal:r.querySelector("."+PopupSliderCaptcha.CSS_CLASSES.modal),header:r.querySelector("."+PopupSliderCaptcha.CSS_CLASSES.header),title:r.querySelector(".slider-captcha-title"),closeBtn:r.querySelector(".slider-captcha-close"),refreshBtn:r.querySelector(".slider-captcha-refresh"),container:r.querySelector("."+PopupSliderCaptcha.CSS_CLASSES.container),backgroundImg:r.querySelector(".slider-captcha-bg"),sliderImg:r.querySelector(".slider-captcha-piece"),loadingText:r.querySelector("."+PopupSliderCaptcha.CSS_CLASSES.loading),floatingTime:r.querySelector(".slider-captcha-floating-time"),track:r.querySelector("."+PopupSliderCaptcha.CSS_CLASSES.track),fingerAnimation:r.querySelector(".slider-captcha-finger"),btn:r.querySelector("."+PopupSliderCaptcha.CSS_CLASSES.btn),icon:r.querySelector(".slider-captcha-icon"),hint:r.querySelector("."+PopupSliderCaptcha.CSS_CLASSES.hint),error:r.querySelector("."+PopupSliderCaptcha.CSS_CLASSES.error)}}bindEvents(){const{elements:t}=this;[[t.closeBtn,"click",()=>this.hide()],[t.refreshBtn,"click",()=>this.refresh()],[t.overlay,"click",i=>{i.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,i,s])=>{this.addEventListener(t,i,s)}),this.bindSliderEvents()}bindSliderEvents(){const{elements:t}=this,i={start:t=>this.handleStart(t)};[[t.btn,"mousedown",i.start],[t.btn,"touchstart",i.start],[t.sliderImg,"mousedown",i.start],[t.sliderImg,"touchstart",i.start]].forEach(([t,i,s,e])=>{this.addEventListener(t,i,s,e)})}addEventListener(t,i,s,e={}){t&&"function"==typeof s&&(t.addEventListener(i,s,e),this.eventListeners.push({element:t,event:i,handler:s,options:e}))}removeEventListener(t,i,s,e={}){t&&"function"==typeof s&&(t.removeEventListener(i,s,e),this.eventListeners=this.eventListeners.filter(e=>!(e.element===t&&e.event===i&&e.handler===s)))}removeAllEventListeners(){this.eventListeners.forEach(({element:t,event:i,handler:s,options:e})=>{try{t?.removeEventListener?.(i,s,e)}catch(t){}}),this.eventListeners.length=0}getDimensions(){if(!this.cachedDimensions){const{track:t,btn:i}=this.elements;this.cachedDimensions={trackWidth:t.offsetWidth,btnWidth:i.offsetWidth,get maxX(){return this.trackWidth-this.btnWidth}}}return this.cachedDimensions}getPosition(){const{maxX:t}=this.getDimensions(),i=this.state.currentX/t;return Math.round(i(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,this.boundHandleEnd=this.boundHandleEnd\|\|this.handleEnd.bind(this),document.addEventListener("mousemove",this.throttledHandleMove,{passive:!1}),document.addEventListener("touchmove",this.throttledHandleMove,{passive:!1}),document.addEventListener("mouseup",this.boundHandleEnd),document.addEventListener("touchend",this.boundHandleEnd))}handleMove(t){this.state.isDragging&&(t.preventDefault(),this.lastClientX=this.getClientX(t),this.rafId\|\|(this.rafId=requestAnimationFrame(()=>{const t=this.lastClientX-this.state.startX,{maxX:i}=this.getDimensions();this.state.currentX=Math.max(0,Math.min(t,i)),this.times.push({time:Date.now(),position:this.getPosition()}),this.updateSliderPosition(),this.rafId=null})))}handleEnd(){this.state.isDragging&&(document.removeEventListener("mousemove",this.throttledHandleMove),document.removeEventListener("touchmove",this.throttledHandleMove),document.removeEventListener("mouseup",this.boundHandleEnd),document.removeEventListener("touchend",this.boundHandleEnd),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 i=t?"all 0.3s ease":"none";requestAnimationFrame(()=>{const{btn:t,sliderImg:s}=this.elements;t.style.transition=s.style.transition=i})}updateUIState(t){const{elements:i}=this,s={dragging:()=>{i.hint.style.opacity="0",i.fingerAnimation.style.display="none"},success:()=>{Object.assign(i.btn.style,{background:"var(--sc-success)"}),Object.assign(i.icon.style,{color:"white"}),i.icon.textContent="✓"},fail:()=>{Object.assign(i.btn.style,{background:"var(--sc-danger)"}),Object.assign(i.icon.style,{color:"white"}),i.icon.textContent="✗"},reset:()=>{Object.assign(i.btn.style,{background:"#00C870"}),Object.assign(i.icon.style,{color:"white"}),i.icon.textContent="→",i.fingerAnimation.style.display="block",this.updateHintText("向右滑动完成验证","var(--sc-text-light)")},loading:()=>{i.hint.style.opacity="0",i.fingerAnimation.style.display="none",Object.assign(i.track.style,{pointerEvents:"none",opacity:"0.6"})}};s[t]&&requestAnimationFrame(()=>{s[t](),"loading"!==t&&Object.assign(i.track.style,{pointerEvents:"auto",opacity:"1"})})}updateHintText(t,i){requestAnimationFrame(()=>{Object.assign(this.elements.hint,{textContent:t}),Object.assign(this.elements.hint.style,{color:i,opacity:"1"})})}updateSliderPosition(){const{elements:t,options:i,state:s}=this,{maxX:e}=this.getDimensions(),a=s.currentX/e(i.width-i.sliderSize),r=s.currentX/e;requestAnimationFrame(()=>{t.btn.style.transform=`translate3d(${s.currentX}px, 0, 0)`,t.sliderImg.style.transform=`translate3d(${a}px, 0, 0)`,t.fingerAnimation.style.opacity=.8>r?"0.6":"0"})}show(){if(this.state.isVisible=!0,!this.elements.overlay){this.createElements(),this.bindEvents();const{track:t}=this.elements;t&&(t.style.height="48px",t.style.minHeight="48px",t.style.maxHeight="48px")}this.elements.overlay.style.display="flex",this.elements.overlay.style.transform="translate3d(0,0,0)",requestAnimationFrame(()=>{this.elements.overlay.classList.add("show"),this.elements.modal.classList.add("show"),this.preloadCaptcha()})}async preloadCaptcha(){try{this.showLoading();const[t]=await Promise.all([this.fetchCaptchaData(),this.preloadImages()]);this.captchaData=t,this.showCaptcha(),await this.renderCaptcha()}catch(t){this.handleError(PopupSliderCaptcha.ERROR_TYPES.CAPTCHA_DATA_ERROR,t.message,t)}}async makeRequest(t,i={}){this.abortController&&this.abortController.abort(),this.abortController=new AbortController;const s=await fetch(t,{method:"POST",headers:{"Content-Type":"application/json",...this.options.headers},body:JSON.stringify({canvasWidth:this.options.width,canvasHeight:this.options.height,timestamp:Date.now(),...this.options.requestData,...i}),signal:this.abortController.signal});if(!s.ok)throw Error(`HTTP ${s.status}: ${s.statusText}`);return s.json()}async fetchCaptchaData(){this.startTime=Date.now();const t=await this.makeRequest(this.options.apiUrl);if(!this.validateCaptchaData(t))throw Error("验证码数据格式错误");return t.data}preloadImages(){return Promise.all(["data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTE3LjY1LDYuMzVDMTYuMiw0LjkgMTQuMjEsNCAxMiw0QTgsOCAwIDAsMCA0LDEyQTgsOCAwIDAsMCAxMiwyMEMxNS43MywyMCAxOC44NCwxNy40NSAxOS43MywxNEgxNy42NUMxNi44MywxNi4zMyAxNC42MSwxOCAxMiwxOEE2LDYgMCAwLDEgNiwxMkE2LDYgMCAwLDEgMTIsNkMxMy42Niw2IDE1LjE0LDYuNjkgMTYuMjIsNy43OEwxMywxMUgyMFY0TDE3LjY1LDYuMzVaIiBmaWxsPSIjOTk5Ii8+Cjwvc3ZnPgo="].map(t=>new Promise(i=>{const s=new Image;s.onload=s.onerror=()=>i(),s.src=t})))}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)}handleRequestError(t){"AbortError"===t.name?this.handleError(PopupSliderCaptcha.ERROR_TYPES.TIMEOUT_ERROR,"请求被取消",t):t.message?.includes("Failed to fetch")\|\|t.message?.includes("NetworkError")?this.handleError(PopupSliderCaptcha.ERROR_TYPES.NETWORK_ERROR,"网络连接失败",t):this.handleError(PopupSliderCaptcha.ERROR_TYPES.CAPTCHA_DATA_ERROR,t.message,t)}handleError(t,i,s=null){const e={[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]\|\|i\|\|"未知错误";this.options.onError&&this.options.onError({type:t,message:e,originalError:s}),this.showError(e)}async loadCaptcha(){try{this.showLoading(),this.startTime=Date.now();const t=await this.makeRequest(this.options.apiUrl);if(!this.validateCaptchaData(t))throw Error("验证码数据格式错误");this.captchaData=t.data,this.showCaptcha(),await this.renderCaptcha()}catch(t){this.handleRequestError(t)}}validateCaptchaData(t){if(!t\|\|"object"!=typeof t)return!1;const i=t.data\|\|t;return["canvasSrc","blockSrc","canvasWidth","canvasHeight","blockWidth","blockHeight","blockY","nonceStr"].every(t=>{const s=i[t];return null!=s&&""!==s})}renderCaptcha(){return new Promise((t,i)=>{let s=!1;const e=[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(e).then(()=>{s\|\|(this.hideLoading(),t())}).catch(t=>{s\|\|(s=!0,this.handleError(PopupSliderCaptcha.ERROR_TYPES.IMAGE_LOAD_ERROR,"图片加载失败",t),i(t))})})}loadImageAsync(t,i,s){return new Promise((e,a)=>{if(this.imageCache.has(i)){const a=this.imageCache.get(i);return t.src=a.src,this.applyStyles(t,s),t.style.display="block",void e()}const r=this.safeSetTimeout(()=>{a(Error("图片加载超时"))},5e3),n=new Image;n.crossOrigin="anonymous",n.decoding="async",n.onload=function(){if(this.safeClearTimeout(r),"undefined"!=typeof OffscreenCanvas)try{const t=new OffscreenCanvas(n.width,n.height).getContext("2d");t.drawImage(n,0,0);const s=t.getImageData(0,0,n.width,n.height);this.imageCache.set(i,{src:n.src,imageData:s})}catch(t){this.imageCache.set(i,n.cloneNode())}else this.imageCache.set(i,n.cloneNode());t.src=n.src,this.applyStyles(t,s),t.style.display="block",e()}.bind(this),n.onerror=function(t){this.safeClearTimeout(r),a(t)}.bind(this),n.src=i})}applyStyles(t,i){Object.entries(i).forEach(([i,s])=>{t.style[i]="number"==typeof s?s+"px":s})}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"},error:{display:"none"}})}showError(t){this.hideLoading(),this.batchUpdateStyles({error:{display:"block",textContent:t}})}batchUpdateStyles(t){requestAnimationFrame(()=>{Object.entries(t).forEach(([t,i])=>{const s=this.elements[t];s&&Object.entries(i).forEach(([t,i])=>{"textContent"===t?s.textContent=i:s.style[t]=i})})})}async verify(){if(this.captchaData)try{const t=await this.makeRequest(this.options.verifyUrl,{loginVo:{nonceStr:this.captchaData.nonceStr,value:this.getPosition()},dragEventList:[...this.times],...this.options.verifyData});this.isVerifySuccess(t)?this.onVerifySuccess(t.data\|\|t.result):this.onVerifyFail(t.message\|\|t.msg\|\|"验证失败，请重试！")}catch(t){this.handleRequestError(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 i=this.dragStartTime?Date.now()-this.dragStartTime:Date.now()-this.startTime,s=`验证成功！耗时：${(i/1e3).toFixed(2)}s`;this.updateUIState("success"),this.showFloatingTime(s,"success"),this.safeSetTimeout(()=>{this.options.onSuccess?.({ticket:t,timestamp:Date.now(),duration:i}),this.hide()},2e3)}showFloatingTime(t,i="success"){const{elements:s}=this;s.floatingTime.textContent=t,s.floatingTime.className="slider-captcha-floating-time "+i,this.safeSetTimeout(()=>s.floatingTime.classList.add("show"),100),this.safeSetTimeout(()=>{s.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="translate3d(0px, 0, 0)",this.elements.sliderImg.style.transform="translate3d(0px, 0, 0)",this.updateUIState("reset"),this.elements.error.style.display="none"})}refresh(){try{this.reset(),this.state.retryCount=0,this.loadCaptcha()}catch(t){}}safeSetTimeout(t,i){const s=setTimeout(()=>{this.timers.delete(s),t()},i);return this.timers.add(s),s}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,i){let s=0;return(...e)=>{const a=Date.now();if(a-s>=i)return s=a,t.apply(this,e)}}destroy(){try{this.state.isDragging&&(document.removeEventListener("mousemove",this.throttledHandleMove),document.removeEventListener("touchmove",this.throttledHandleMove),this.boundHandleEnd&&(document.removeEventListener("mouseup",this.boundHandleEnd),document.removeEventListener("touchend",this.boundHandleEnd)),this.state.isDragging=!1),this.abortController&&(this.abortController.abort(),this.abortController=null),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,this.elements={},this.state={},this.times=[],this.eventListeners=[],this.timers.clear(),this.throttledHandleMove=null,this.boundHandleEnd=null,this.options.onDestroy&&this.options.onDestroy(),this.options=null}catch(t){}}static create(t){return new PopupSliderCaptcha(t)}static show(t){const i=new PopupSliderCaptcha(t);return i.show(),i}}"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),s=PopupSliderCaptcha;class PasswordValidator{static CONSTANTS={DEFAULT_TIMEOUT:1e4,CACHE_DURATION:3e5,MIN_PASSWORD_LENGTH:1};static ERROR_TYPES={NETWORK_ERROR:"NETWORK_ERROR",TIMEOUT_ERROR:"TIMEOUT_ERROR",ENCRYPTION_ERROR:"ENCRYPTION_ERROR",VALIDATION_ERROR:"VALIDATION_ERROR",PUBLIC_KEY_ERROR:"PUBLIC_KEY_ERROR"};constructor(t={}){this.options={publicKeyUrl:t.publicKeyUrl\|\|"/externalapi/commonservice/strongPassword/getPublicKey",validateUrl:t.validateUrl\|\|"/externalapi/commonservice/strongPassword/checkPassword",baseUrl:t.baseUrl\|\|"",timeout:t.timeout\|\|PasswordValidator.CONSTANTS.DEFAULT_TIMEOUT,headers:t.headers\|\|{},cacheDuration:t.cacheDuration\|\|PasswordValidator.CONSTANTS.CACHE_DURATION,...t},this.options.publicKeyUrl=this.normalizeUrl(this.options.publicKeyUrl,this.options.baseUrl),this.options.validateUrl=this.normalizeUrl(this.options.validateUrl,this.options.baseUrl),this.publicKeyCache=null,this.publicKeyExpiry=null,this.encryptor=null}normalizeUrl(t,i){return t?/^https?:\/\//.test(t)\|\|!i?t:(i.endsWith("/")?i:i+"/")+(t.startsWith("/")?t.substring(1):t):t}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(!this.isSuccessResponse(t))throw Error("获取公钥失败："+(t.message\|\|t.msg\|\|"未知错误"));const i=t.data\|\|t.result;if(!i)throw Error("公钥为空");return this.publicKeyCache=i,this.publicKeyExpiry=Date.now()+this.options.cacheDuration,this.publicKeyCache}catch(t){throw this.handleError(PasswordValidator.ERROR_TYPES.PUBLIC_KEY_ERROR,t.message,t),Error("获取公钥失败: "+t.message)}}isSuccessResponse(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)}handleError(t,i,s=null){const e={[PasswordValidator.ERROR_TYPES.NETWORK_ERROR]:"网络连接失败，请检查网络设置",[PasswordValidator.ERROR_TYPES.TIMEOUT_ERROR]:"请求超时，请重试",[PasswordValidator.ERROR_TYPES.ENCRYPTION_ERROR]:"密码加密失败",[PasswordValidator.ERROR_TYPES.VALIDATION_ERROR]:"密码验证失败",[PasswordValidator.ERROR_TYPES.PUBLIC_KEY_ERROR]:"获取公钥失败"}[t]\|\|i\|\|"未知错误";this.options.onError&&this.options.onError({type:t,message:e,originalError:s})}encryptPassword(t,i){try{if(!t)throw Error("密码不能为空");if(t.length<PasswordValidator.CONSTANTS.MIN_PASSWORD_LENGTH)throw Error("密码长度不足");if(!i)throw Error("公钥不能为空");if(void 0===JSEncrypt)throw Error("JSEncrypt库未正确加载，请确保已引入JSEncrypt库");this.encryptor\|\|(this.encryptor=new JSEncrypt),this.lastPublicKey!==i&&(this.encryptor.setPublicKey(i),this.lastPublicKey=i);const s=this.encryptor.encrypt(t);if(!s)throw Error("密码加密失败，可能是公钥格式不正确");return s}catch(t){throw this.handleError(PasswordValidator.ERROR_TYPES.ENCRYPTION_ERROR,t.message,t),Error("密码加密失败: "+t.message)}}async validatePassword(t,i,s={}){try{if(!t)throw Error("密码不能为空");if(!i)throw Error("用户名不能为空");const e=await this.getPublicKey(),a=this.encryptPassword(t,e),r=await this.makeRequest(this.options.validateUrl,{method:"POST",body:JSON.stringify({userName:i,password:a,timestamp:Date.now(),...s})});return{success:this.isSuccessResponse(r),data:r.data\|\|r.result,message:r.message\|\|r.msg\|\|"验证完成",code:r.code\|\|r.status,originalResponse:r}}catch(t){let i=PasswordValidator.ERROR_TYPES.VALIDATION_ERROR;return t.message.includes("网络")\|\|t.message.includes("fetch")?i=PasswordValidator.ERROR_TYPES.NETWORK_ERROR:t.message.includes("超时")\|\|t.message.includes("timeout")?i=PasswordValidator.ERROR_TYPES.TIMEOUT_ERROR:t.message.includes("加密")&&(i=PasswordValidator.ERROR_TYPES.ENCRYPTION_ERROR),this.handleError(i,t.message,t),{success:!1,message:t.message\|\|"密码校验失败",code:i,error:t}}}async makeRequest(t,i={}){const s=new AbortController,e=setTimeout(()=>{s.abort()},this.options.timeout);try{const a=await fetch(t,{...i,headers:{"Content-Type":"application/json",...this.options.headers,...i.headers},signal:s.signal});if(clearTimeout(e),!a.ok)throw Error(`HTTP错误: ${a.status} ${a.statusText}`);const r=await a.json();return this.options.debug,r}catch(t){if(clearTimeout(e),"AbortError"===t.name)throw this.handleError(PasswordValidator.ERROR_TYPES.TIMEOUT_ERROR,"请求超时",t),Error("请求超时");if(t.message.includes("Failed to fetch")\|\|t.message.includes("NetworkError"))throw this.handleError(PasswordValidator.ERROR_TYPES.NETWORK_ERROR,"网络连接失败",t),Error("网络连接失败");throw t}}clearCache(){this.publicKeyCache=null,this.publicKeyExpiry=null}updateOptions(t){this.options={...this.options,...t},this.clearCache()}getCacheStatus(){return{hasCache:!!this.publicKeyCache,isExpired:!this.publicKeyExpiry\|\|Date.now()>this.publicKeyExpiry,expiryTime:this.publicKeyExpiry,remainingTime:this.publicKeyExpiry?Math.max(0,this.publicKeyExpiry-Date.now()):0}}destroy(){try{this.clearCache(),this.encryptor=null,this.lastPublicKey=null,this.options.onDestroy&&this.options.onDestroy(),this.options=null}catch(t){}}}a={PopupSliderCaptcha:s,PasswordValidator:e=PasswordValidator,createPasswordValidator:t,validatePassword:i},"undefined"!=typeof window&&(window.SliderCaptcha=s,window.PopupSliderCaptcha=s,window.PasswordValidator=e,window.createPasswordValidator=t,window.validatePassword=i);export{e as PasswordValidator,s as PopupSliderCaptcha,t as createPasswordValidator,a as default,i as validatePassword};
1	+ function t(t){return new PasswordValidator(t)}function i(t,i,s={},e={}){return new PasswordValidator(s).validatePassword(t,i,e)}var s,e,a;import JSEncrypt from"jsencrypt";class PopupSliderCaptcha{static DEFAULTS={width:320,height:200,sliderSize:50,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:#666;--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);will-change:opacity}.slider-captcha-overlay.show{opacity:1}.slider-captcha-modal{background:#fff;border-radius:var(--sc-radius);padding:16px 16px 5px;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);will-change:transform,opacity}.slider-captcha-modal.show{transform:scale(1) translateY(-10%);opacity:1}.slider-captcha-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px;}.slider-captcha-container{display:flex;align-items:center;position:relative;border-radius:4px;overflow:hidden;margin-bottom:12px;background:#837a7a;justify-content:center}.slider-captcha-track{width:100%;height:48px;min-height:48px;max-height:48px;line-height:48px;background:#e8f5e9;border: 1px solid rgba(0,200,112,0.15);border-radius:40px;position:relative;margin-bottom:15px;overflow:hidden;box-sizing:border-box;flex-shrink:0}.slider-captcha-btn{width:40px;height:40px;background: #00C870;border-radius:50%;position:absolute;top:3px;left:3px;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;will-change:transform}.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;line-height:12px;white-space:nowrap;opacity:0;pointer-events:none;z-index:10;transition:all var(--sc-transition);background:#fff;padding:4px 15px;border-radius:10px;will-change:transform,opacity}.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:none}.slider-captcha-piece{position:absolute;top:0;left:0;cursor:pointer;transition:none;z-index:2;will-change:transform;display:none}.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:opacity var(--sc-transition);white-space:nowrap}.slider-captcha-header-buttons{display:flex;align-items:center}"}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),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.isInitialized=!1,this.throttledHandleMove=this.throttle(t=>this.handleMove(t),this.options.throttleDelay),this.lazyInit()}lazyInit(){this.injectStyles(),this.isInitialized=!0}createInitialState(){return{isVisible:!1,isDragging:!1,currentX:0,startX:0,retryCount:0,isLoading:!1}}normalizeUrl(t,i){return t&&i&&!/^https?:\/\//.test(t)?(i.endsWith("/")?i:i+"/")+(t.startsWith("/")?t.slice(1):t):t}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{options:t}=this,i=t.width,s=t.height,e=`\n <div class="${PopupSliderCaptcha.CSS_CLASSES.overlay}">\n <div class="${PopupSliderCaptcha.CSS_CLASSES.modal}">\n <div class="${PopupSliderCaptcha.CSS_CLASSES.header}">\n <h3 class="slider-captcha-title">安全验证</h3>\n <div class="slider-captcha-header-buttons">\n <button class="slider-captcha-refresh" title="刷新">\n <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>\n </button>\n <button class="slider-captcha-close" title="关闭"></button>\n </div>\n </div>\n <div class="${PopupSliderCaptcha.CSS_CLASSES.container}" style="width:${i}px;height:${s}px;display:none;">\n <img class="slider-captcha-bg" alt="" style="display:none;">\n <img class="slider-captcha-piece" alt="" style="display:none;">\n <div class="${PopupSliderCaptcha.CSS_CLASSES.loading}">加载中...</div>\n <div class="slider-captcha-floating-time"></div>\n </div>\n <div class="${PopupSliderCaptcha.CSS_CLASSES.track}">\n <div class="${PopupSliderCaptcha.CSS_CLASSES.btn}">\n <div class="slider-captcha-icon">→</div>\n </div>\n <div class="${PopupSliderCaptcha.CSS_CLASSES.hint}">向右滑动完成验证</div>\n </div>\n <div class="${PopupSliderCaptcha.CSS_CLASSES.error}"></div>\n </div>\n </div>\n `,a=document.createElement("div");a.innerHTML=e.trim();const r=a.firstElementChild;document.body.appendChild(r),this.elements={overlay:r,modal:r.querySelector("."+PopupSliderCaptcha.CSS_CLASSES.modal),header:r.querySelector("."+PopupSliderCaptcha.CSS_CLASSES.header),title:r.querySelector(".slider-captcha-title"),closeBtn:r.querySelector(".slider-captcha-close"),refreshBtn:r.querySelector(".slider-captcha-refresh"),container:r.querySelector("."+PopupSliderCaptcha.CSS_CLASSES.container),backgroundImg:r.querySelector(".slider-captcha-bg"),sliderImg:r.querySelector(".slider-captcha-piece"),loadingText:r.querySelector("."+PopupSliderCaptcha.CSS_CLASSES.loading),floatingTime:r.querySelector(".slider-captcha-floating-time"),track:r.querySelector("."+PopupSliderCaptcha.CSS_CLASSES.track),btn:r.querySelector("."+PopupSliderCaptcha.CSS_CLASSES.btn),icon:r.querySelector(".slider-captcha-icon"),hint:r.querySelector("."+PopupSliderCaptcha.CSS_CLASSES.hint),error:r.querySelector("."+PopupSliderCaptcha.CSS_CLASSES.error)}}bindEvents(){const{elements:t}=this;[[t.closeBtn,"click",()=>this.hide()],[t.refreshBtn,"click",()=>this.refresh()],[t.overlay,"click",i=>{i.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,i,s])=>{this.addEventListener(t,i,s)}),this.bindSliderEvents()}bindSliderEvents(){const{elements:t}=this,i={start:t=>this.handleStart(t)};[[t.btn,"mousedown",i.start],[t.btn,"touchstart",i.start],[t.sliderImg,"mousedown",i.start],[t.sliderImg,"touchstart",i.start]].forEach(([t,i,s,e])=>{this.addEventListener(t,i,s,e)})}addEventListener(t,i,s,e={}){t&&"function"==typeof s&&(t.addEventListener(i,s,e),this.eventListeners.push({element:t,event:i,handler:s,options:e}))}removeEventListener(t,i,s,e={}){t&&"function"==typeof s&&(t.removeEventListener(i,s,e),this.eventListeners=this.eventListeners.filter(e=>!(e.element===t&&e.event===i&&e.handler===s)))}removeAllEventListeners(){this.eventListeners.forEach(({element:t,event:i,handler:s,options:e})=>{try{t?.removeEventListener?.(i,s,e)}catch(t){}}),this.eventListeners.length=0}getDimensions(){if(!this.cachedDimensions){const{track:t,btn:i}=this.elements;this.cachedDimensions={trackWidth:t.offsetWidth,btnWidth:i.offsetWidth,get maxX(){return this.trackWidth-this.btnWidth}}}return this.cachedDimensions}getPosition(){const{maxX:t}=this.getDimensions(),i=this.state.currentX/t;return Math.round(i(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,this.boundHandleEnd=this.boundHandleEnd\|\|this.handleEnd.bind(this),document.addEventListener("mousemove",this.throttledHandleMove,{passive:!1}),document.addEventListener("touchmove",this.throttledHandleMove,{passive:!1}),document.addEventListener("mouseup",this.boundHandleEnd),document.addEventListener("touchend",this.boundHandleEnd))}handleMove(t){this.state.isDragging&&(t.preventDefault(),this.lastClientX=this.getClientX(t),this.rafId\|\|(this.rafId=requestAnimationFrame(()=>{const t=this.lastClientX-this.state.startX,{maxX:i}=this.getDimensions();this.state.currentX=Math.max(0,Math.min(t,i)),this.times.push({time:Date.now(),position:this.getPosition()}),this.updateSliderPosition(),this.rafId=null})))}handleEnd(){this.state.isDragging&&(document.removeEventListener("mousemove",this.throttledHandleMove),document.removeEventListener("touchmove",this.throttledHandleMove),document.removeEventListener("mouseup",this.boundHandleEnd),document.removeEventListener("touchend",this.boundHandleEnd),this.times.push({time:Date.now(),position:this.getPosition()}),this.state.isDragging=!1,this.rafId&&(cancelAnimationFrame(this.rafId),this.rafId=null),this.verify())}handleVisibilityChange(){}getClientX=t=>t.type.includes("touch")?t.touches[0].clientX:t.clientX;setTransition(t){const i=t?"all 0.3s ease":"none";requestAnimationFrame(()=>{const{btn:t,sliderImg:s}=this.elements;t.style.transition=s.style.transition=i})}updateUIState(t){const{elements:i}=this,s={dragging:()=>{i.hint.style.opacity="0"},success:()=>{Object.assign(i.btn.style,{background:"var(--sc-success)"}),Object.assign(i.icon.style,{color:"white"}),i.icon.textContent="✓"},fail:()=>{Object.assign(i.btn.style,{background:"var(--sc-danger)"}),Object.assign(i.icon.style,{color:"white"}),i.icon.textContent="✗"},reset:()=>{Object.assign(i.btn.style,{background:"#00C870"}),Object.assign(i.icon.style,{color:"white"}),i.icon.textContent="→",this.updateHintText("向右滑动完成验证","var(--sc-text-light)")},loading:()=>{i.hint.style.opacity="0",Object.assign(i.track.style,{pointerEvents:"none",opacity:"0.6"})}};s[t]&&requestAnimationFrame(()=>{s[t](),"loading"!==t&&Object.assign(i.track.style,{pointerEvents:"auto",opacity:"1"})})}updateHintText(t,i){requestAnimationFrame(()=>{Object.assign(this.elements.hint,{textContent:t}),Object.assign(this.elements.hint.style,{color:i,opacity:"1"})})}updateSliderPosition(){const{elements:t,options:i,state:s}=this,{maxX:e}=this.getDimensions(),a=s.currentX/e(i.width-i.sliderSize);requestAnimationFrame(()=>{t.btn.style.transform=`translate3d(${s.currentX}px, 0, 0)`,t.sliderImg.style.transform=`translate3d(${a}px, 0, 0)`})}show(){if(this.state.isVisible=!0,!this.elements.overlay){this.createElements(),this.bindEvents();const{track:t}=this.elements;t&&(t.style.height="48px",t.style.minHeight="48px",t.style.maxHeight="48px")}this.elements.overlay.style.display="flex",this.elements.overlay.style.transform="translate3d(0,0,0)",requestAnimationFrame(()=>{this.elements.overlay.classList.add("show"),this.elements.modal.classList.add("show"),this.preloadCaptcha()})}async preloadCaptcha(){try{this.showLoading();const[t]=await Promise.all([this.fetchCaptchaData(),this.preloadImages()]);this.captchaData=t,this.showCaptcha(),await this.renderCaptcha()}catch(t){this.handleError(PopupSliderCaptcha.ERROR_TYPES.CAPTCHA_DATA_ERROR,t.message,t)}}async makeRequest(t,i={}){this.abortController&&this.abortController.abort(),this.abortController=new AbortController;const s=await fetch(t,{method:"POST",headers:{"Content-Type":"application/json",...this.options.headers},body:JSON.stringify({canvasWidth:this.options.width,canvasHeight:this.options.height,blockHeight:this.options.sliderSize,blockWidth:this.options.sliderSize,timestamp:Date.now(),...this.options.requestData,...i}),signal:this.abortController.signal});if(!s.ok)throw Error(`HTTP ${s.status}: ${s.statusText}`);return s.json()}async fetchCaptchaData(){this.startTime=Date.now();const t=await this.makeRequest(this.options.apiUrl);if(!this.validateCaptchaData(t))throw Error("验证码数据格式错误");return t.data}preloadImages(){return Promise.all(["data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTE3LjY1LDYuMzVDMTYuMiw0LjkgMTQuMjEsNCAxMiw0QTgsOCAwIDAsMCA0LDEyQTgsOCAwIDAsMCAxMiwyMEMxNS43MywyMCAxOC44NCwxNy40NSAxOS43MywxNEgxNy42NUMxNi44MywxNi4zMyAxNC42MSwxOCAxMiwxOEE2LDYgMCAwLDEgNiwxMkE2LDYgMCAwLDEgMTIsNkMxMy42Niw2IDE1LjE0LDYuNjkgMTYuMjIsNy43OEwxMywxMUgyMFY0TDE3LjY1LDYuMzVaIiBmaWxsPSIjOTk5Ii8+Cjwvc3ZnPgo="].map(t=>new Promise(i=>{const s=new Image;s.onload=s.onerror=()=>i(),s.src=t})))}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)}handleRequestError(t){"AbortError"===t.name?this.handleError(PopupSliderCaptcha.ERROR_TYPES.TIMEOUT_ERROR,"请求被取消",t):t.message?.includes("Failed to fetch")\|\|t.message?.includes("NetworkError")?this.handleError(PopupSliderCaptcha.ERROR_TYPES.NETWORK_ERROR,"网络连接失败",t):this.handleError(PopupSliderCaptcha.ERROR_TYPES.CAPTCHA_DATA_ERROR,t.message,t)}handleError(t,i,s=null){const e={[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]\|\|i\|\|"未知错误";this.options.onError&&this.options.onError({type:t,message:e,originalError:s}),this.showError(e)}async loadCaptcha(){try{this.showLoading(),this.startTime=Date.now();const t=await this.makeRequest(this.options.apiUrl);if(!this.validateCaptchaData(t))throw Error("验证码数据格式错误");this.captchaData=t.data,this.showCaptcha(),await this.renderCaptcha()}catch(t){this.handleRequestError(t)}}validateCaptchaData(t){if(!t\|\|"object"!=typeof t)return!1;const i=t.data\|\|t;return["canvasSrc","blockSrc","canvasWidth","canvasHeight","blockWidth","blockHeight","blockY","nonceStr"].every(t=>{const s=i[t];return null!=s&&""!==s})}renderCaptcha(){return new Promise((t,i)=>{let s=!1;const e=[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(e).then(()=>{s\|\|(this.hideLoading(),t())}).catch(t=>{s\|\|(s=!0,this.handleError(PopupSliderCaptcha.ERROR_TYPES.IMAGE_LOAD_ERROR,"图片加载失败",t),i(t))})})}loadImageAsync(t,i,s){return new Promise((e,a)=>{if(this.imageCache.has(i)){const a=this.imageCache.get(i);return t.src=a.src,this.applyStyles(t,s),t.style.display="block",void e()}const r=this.safeSetTimeout(()=>{a(Error("图片加载超时"))},5e3),n=new Image;n.crossOrigin="anonymous",n.decoding="async",n.onload=function(){if(this.safeClearTimeout(r),"undefined"!=typeof OffscreenCanvas)try{const t=new OffscreenCanvas(n.width,n.height).getContext("2d");t.drawImage(n,0,0);const s=t.getImageData(0,0,n.width,n.height);this.imageCache.set(i,{src:n.src,imageData:s})}catch(t){this.imageCache.set(i,n.cloneNode())}else this.imageCache.set(i,n.cloneNode());t.src=n.src,this.applyStyles(t,s),t.style.display="block",e()}.bind(this),n.onerror=function(t){this.safeClearTimeout(r),a(t)}.bind(this),n.src=i})}applyStyles(t,i){Object.entries(i).forEach(([i,s])=>{t.style[i]="number"==typeof s?s+"px":s})}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"},error:{display:"none"}})}showError(t){this.hideLoading(),this.batchUpdateStyles({error:{display:"block",textContent:t}})}batchUpdateStyles(t){requestAnimationFrame(()=>{Object.entries(t).forEach(([t,i])=>{const s=this.elements[t];s&&Object.entries(i).forEach(([t,i])=>{"textContent"===t?s.textContent=i:s.style[t]=i})})})}async verify(){if(this.captchaData)try{const t=await this.makeRequest(this.options.verifyUrl,{loginVo:{nonceStr:this.captchaData.nonceStr,value:this.getPosition()},dragEventList:[...this.times],...this.options.verifyData});this.isVerifySuccess(t)?this.onVerifySuccess(t.data\|\|t.result):this.onVerifyFail(t.message\|\|t.msg\|\|"验证失败，请重试！")}catch(t){this.handleRequestError(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 i=this.dragStartTime?Date.now()-this.dragStartTime:Date.now()-this.startTime,s=`验证成功！耗时：${(i/1e3).toFixed(2)}s`;this.updateUIState("success"),this.showFloatingTime(s,"success"),this.safeSetTimeout(()=>{this.options.onSuccess?.({ticket:t,timestamp:Date.now(),duration:i}),this.hide()},2e3)}showFloatingTime(t,i="success"){const{elements:s}=this;s.floatingTime.textContent=t,s.floatingTime.className="slider-captcha-floating-time "+i,this.safeSetTimeout(()=>s.floatingTime.classList.add("show"),100),this.safeSetTimeout(()=>{s.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="translate3d(0px, 0, 0)",this.elements.sliderImg.style.transform="translate3d(0px, 0, 0)",this.updateUIState("reset"),this.elements.error.style.display="none"})}refresh(){try{this.reset(),this.state.retryCount=0,this.loadCaptcha()}catch(t){}}safeSetTimeout(t,i){const s=setTimeout(()=>{this.timers.delete(s),t()},i);return this.timers.add(s),s}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,i){let s=0;return(...e)=>{const a=Date.now();if(a-s>=i)return s=a,t.apply(this,e)}}destroy(){try{this.state.isDragging&&(document.removeEventListener("mousemove",this.throttledHandleMove),document.removeEventListener("touchmove",this.throttledHandleMove),this.boundHandleEnd&&(document.removeEventListener("mouseup",this.boundHandleEnd),document.removeEventListener("touchend",this.boundHandleEnd)),this.state.isDragging=!1),this.abortController&&(this.abortController.abort(),this.abortController=null),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,this.elements={},this.state={},this.times=[],this.eventListeners=[],this.timers.clear(),this.throttledHandleMove=null,this.boundHandleEnd=null,this.options.onDestroy&&this.options.onDestroy(),this.options=null}catch(t){}}static create(t){return new PopupSliderCaptcha(t)}static show(t){const i=new PopupSliderCaptcha(t);return i.show(),i}}"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),s=PopupSliderCaptcha;class PasswordValidator{static CONSTANTS={DEFAULT_TIMEOUT:1e4,CACHE_DURATION:3e5,MIN_PASSWORD_LENGTH:1};static ERROR_TYPES={NETWORK_ERROR:"NETWORK_ERROR",TIMEOUT_ERROR:"TIMEOUT_ERROR",ENCRYPTION_ERROR:"ENCRYPTION_ERROR",VALIDATION_ERROR:"VALIDATION_ERROR",PUBLIC_KEY_ERROR:"PUBLIC_KEY_ERROR"};constructor(t={}){this.options={publicKeyUrl:t.publicKeyUrl\|\|"/externalapi/commonservice/strongPassword/getPublicKey",validateUrl:t.validateUrl\|\|"/externalapi/commonservice/strongPassword/checkPassword",baseUrl:t.baseUrl\|\|"",timeout:t.timeout\|\|PasswordValidator.CONSTANTS.DEFAULT_TIMEOUT,headers:t.headers\|\|{},cacheDuration:t.cacheDuration\|\|PasswordValidator.CONSTANTS.CACHE_DURATION,...t},this.options.publicKeyUrl=this.normalizeUrl(this.options.publicKeyUrl,this.options.baseUrl),this.options.validateUrl=this.normalizeUrl(this.options.validateUrl,this.options.baseUrl),this.publicKeyCache=null,this.publicKeyExpiry=null,this.encryptor=null}normalizeUrl(t,i){return t?/^https?:\/\//.test(t)\|\|!i?t:(i.endsWith("/")?i:i+"/")+(t.startsWith("/")?t.substring(1):t):t}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(!this.isSuccessResponse(t))throw Error("获取公钥失败："+(t.message\|\|t.msg\|\|"未知错误"));const i=t.data\|\|t.result;if(!i)throw Error("公钥为空");return this.publicKeyCache=i,this.publicKeyExpiry=Date.now()+this.options.cacheDuration,this.publicKeyCache}catch(t){throw this.handleError(PasswordValidator.ERROR_TYPES.PUBLIC_KEY_ERROR,t.message,t),Error("获取公钥失败: "+t.message)}}isSuccessResponse(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)}handleError(t,i,s=null){const e={[PasswordValidator.ERROR_TYPES.NETWORK_ERROR]:"网络连接失败，请检查网络设置",[PasswordValidator.ERROR_TYPES.TIMEOUT_ERROR]:"请求超时，请重试",[PasswordValidator.ERROR_TYPES.ENCRYPTION_ERROR]:"密码加密失败",[PasswordValidator.ERROR_TYPES.VALIDATION_ERROR]:"密码验证失败",[PasswordValidator.ERROR_TYPES.PUBLIC_KEY_ERROR]:"获取公钥失败"}[t]\|\|i\|\|"未知错误";this.options.onError&&this.options.onError({type:t,message:e,originalError:s})}encryptPassword(t,i){try{if(!t)throw Error("密码不能为空");if(t.length<PasswordValidator.CONSTANTS.MIN_PASSWORD_LENGTH)throw Error("密码长度不足");if(!i)throw Error("公钥不能为空");if(void 0===JSEncrypt)throw Error("JSEncrypt库未正确加载，请确保已引入JSEncrypt库");this.encryptor\|\|(this.encryptor=new JSEncrypt),this.lastPublicKey!==i&&(this.encryptor.setPublicKey(i),this.lastPublicKey=i);const s=this.encryptor.encrypt(t);if(!s)throw Error("密码加密失败，可能是公钥格式不正确");return s}catch(t){throw this.handleError(PasswordValidator.ERROR_TYPES.ENCRYPTION_ERROR,t.message,t),Error("密码加密失败: "+t.message)}}async validatePassword(t,i,s={}){try{if(!t)throw Error("密码不能为空");if(!i)throw Error("用户名不能为空");const e=await this.getPublicKey(),a=this.encryptPassword(t,e),r=await this.makeRequest(this.options.validateUrl,{method:"POST",body:JSON.stringify({userName:i,password:a,timestamp:Date.now(),...s})});return{success:this.isSuccessResponse(r),data:r.data\|\|r.result,message:r.message\|\|r.msg\|\|"验证完成",code:r.code\|\|r.status,originalResponse:r}}catch(t){let i=PasswordValidator.ERROR_TYPES.VALIDATION_ERROR;return t.message.includes("网络")\|\|t.message.includes("fetch")?i=PasswordValidator.ERROR_TYPES.NETWORK_ERROR:t.message.includes("超时")\|\|t.message.includes("timeout")?i=PasswordValidator.ERROR_TYPES.TIMEOUT_ERROR:t.message.includes("加密")&&(i=PasswordValidator.ERROR_TYPES.ENCRYPTION_ERROR),this.handleError(i,t.message,t),{success:!1,message:t.message\|\|"密码校验失败",code:i,error:t}}}async makeRequest(t,i={}){const s=new AbortController,e=setTimeout(()=>{s.abort()},this.options.timeout);try{const a=await fetch(t,{...i,headers:{"Content-Type":"application/json",...this.options.headers,...i.headers},signal:s.signal});if(clearTimeout(e),!a.ok)throw Error(`HTTP错误: ${a.status} ${a.statusText}`);const r=await a.json();return this.options.debug,r}catch(t){if(clearTimeout(e),"AbortError"===t.name)throw this.handleError(PasswordValidator.ERROR_TYPES.TIMEOUT_ERROR,"请求超时",t),Error("请求超时");if(t.message.includes("Failed to fetch")\|\|t.message.includes("NetworkError"))throw this.handleError(PasswordValidator.ERROR_TYPES.NETWORK_ERROR,"网络连接失败",t),Error("网络连接失败");throw t}}clearCache(){this.publicKeyCache=null,this.publicKeyExpiry=null}updateOptions(t){this.options={...this.options,...t},this.clearCache()}getCacheStatus(){return{hasCache:!!this.publicKeyCache,isExpired:!this.publicKeyExpiry\|\|Date.now()>this.publicKeyExpiry,expiryTime:this.publicKeyExpiry,remainingTime:this.publicKeyExpiry?Math.max(0,this.publicKeyExpiry-Date.now()):0}}destroy(){try{this.clearCache(),this.encryptor=null,this.lastPublicKey=null,this.options.onDestroy&&this.options.onDestroy(),this.options=null}catch(t){}}}a={PopupSliderCaptcha:s,PasswordValidator:e=PasswordValidator,createPasswordValidator:t,validatePassword:i},"undefined"!=typeof window&&(window.SliderCaptcha=s,window.PopupSliderCaptcha=s,window.PasswordValidator=e,window.createPasswordValidator=t,window.validatePassword=i);export{e as PasswordValidator,s as PopupSliderCaptcha,t as createPasswordValidator,a as default,i as validatePassword};

package/dist/index.min.js CHANGED Viewed

	@@ -1 +1 @@
1	- !function(t,i){"object"==typeof exports&&"undefined"!=typeof module?i(exports,require("jsencrypt")):"function"==typeof define&&define.amd?define(["exports","jsencrypt"],i):i((t="undefined"!=typeof globalThis?globalThis:t\|\|self).SliderCaptchaSDK={},t.JSEncrypt)}(this,function(t,JSEncrypt){"use strict";function i(t){return new PasswordValidator(t)}function s(t,i,s={},e={}){return new PasswordValidator(s).validatePassword(t,i,e)}var e,a,r;class PopupSliderCaptcha{static DEFAULTS={width:320,height:240,sliderSize:40,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:#666;--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);will-change:opacity}.slider-captcha-overlay.show{opacity:1}.slider-captcha-modal{background:#fff;border-radius:var(--sc-radius);padding:16px 16px 5px;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);will-change:transform,opacity}.slider-captcha-modal.show{transform:scale(1) translateY(-10%);opacity:1}.slider-captcha-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px;}.slider-captcha-container{display:flex;align-items:center;position:relative;border-radius:4px;overflow:hidden;margin-bottom:12px;background:#837a7a;justify-content:center}.slider-captcha-track{width:100%;height:48px;min-height:48px;max-height:48px;line-height:48px;background:#e8f5e9;border: 1px solid rgba(0,200,112,0.15);border-radius:40px;position:relative;margin-bottom:15px;overflow:hidden;box-sizing:border-box;flex-shrink:0}.slider-captcha-btn{width:40px;height:40px;background: #00C870;border-radius:50%;position:absolute;top:4px;left:4px;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;will-change:transform}.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;line-height:12px;white-space:nowrap;opacity:0;pointer-events:none;z-index:10;transition:all var(--sc-transition);background:#fff;padding:4px 15px;border-radius:10px;will-change:transform,opacity}.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:none}.slider-captcha-piece{position:absolute;top:0;left:0;cursor:pointer;transition:none;z-index:2;will-change:transform;display:none}.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;will-change:left,opacity,transform;white-space:nowrap}.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:opacity var(--sc-transition);white-space:nowrap}.slider-captcha-header-buttons{display:flex;align-items:center}@keyframes fingerSlide{0%{left:10px;opacity:.6;transform:translateY(-50%) scale(1)}50%{opacity:1;transform:translateY(-50%) scale(1.1)}100%{left:calc(50% - 10px);opacity:.6;transform:translateY(-50%) scale(1)}}"}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),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.isInitialized=!1,this.throttledHandleMove=this.throttle(t=>this.handleMove(t),this.options.throttleDelay),this.lazyInit()}lazyInit(){this.injectStyles(),this.isInitialized=!0}createInitialState(){return{isVisible:!1,isDragging:!1,currentX:0,startX:0,retryCount:0,isLoading:!1}}normalizeUrl(t,i){return t&&i&&!/^https?:\/\//.test(t)?(i.endsWith("/")?i:i+"/")+(t.startsWith("/")?t.slice(1):t):t}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{options:t}=this,i=t.width,s=t.height,e=`\n <div class="${PopupSliderCaptcha.CSS_CLASSES.overlay}">\n <div class="${PopupSliderCaptcha.CSS_CLASSES.modal}">\n <div class="${PopupSliderCaptcha.CSS_CLASSES.header}">\n <h3 class="slider-captcha-title">安全验证</h3>\n <div class="slider-captcha-header-buttons">\n <button class="slider-captcha-refresh" title="刷新">\n <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>\n </button>\n <button class="slider-captcha-close" title="关闭"></button>\n </div>\n </div>\n <div class="${PopupSliderCaptcha.CSS_CLASSES.container}" style="width:${i}px;height:${s}px;display:none;">\n <img class="slider-captcha-bg" alt="" style="display:none;">\n <img class="slider-captcha-piece" alt="" style="display:none;">\n <div class="${PopupSliderCaptcha.CSS_CLASSES.loading}">加载中...</div>\n <div class="slider-captcha-floating-time"></div>\n </div>\n <div class="${PopupSliderCaptcha.CSS_CLASSES.track}">\n <div class="slider-captcha-finger">👉</div>\n <div class="${PopupSliderCaptcha.CSS_CLASSES.btn}">\n <div class="slider-captcha-icon">→</div>\n </div>\n <div class="${PopupSliderCaptcha.CSS_CLASSES.hint}">向右滑动完成验证</div>\n </div>\n <div class="${PopupSliderCaptcha.CSS_CLASSES.error}"></div>\n </div>\n </div>\n `,a=document.createElement("div");a.innerHTML=e.trim();const r=a.firstElementChild;document.body.appendChild(r),this.elements={overlay:r,modal:r.querySelector("."+PopupSliderCaptcha.CSS_CLASSES.modal),header:r.querySelector("."+PopupSliderCaptcha.CSS_CLASSES.header),title:r.querySelector(".slider-captcha-title"),closeBtn:r.querySelector(".slider-captcha-close"),refreshBtn:r.querySelector(".slider-captcha-refresh"),container:r.querySelector("."+PopupSliderCaptcha.CSS_CLASSES.container),backgroundImg:r.querySelector(".slider-captcha-bg"),sliderImg:r.querySelector(".slider-captcha-piece"),loadingText:r.querySelector("."+PopupSliderCaptcha.CSS_CLASSES.loading),floatingTime:r.querySelector(".slider-captcha-floating-time"),track:r.querySelector("."+PopupSliderCaptcha.CSS_CLASSES.track),fingerAnimation:r.querySelector(".slider-captcha-finger"),btn:r.querySelector("."+PopupSliderCaptcha.CSS_CLASSES.btn),icon:r.querySelector(".slider-captcha-icon"),hint:r.querySelector("."+PopupSliderCaptcha.CSS_CLASSES.hint),error:r.querySelector("."+PopupSliderCaptcha.CSS_CLASSES.error)}}bindEvents(){const{elements:t}=this;[[t.closeBtn,"click",()=>this.hide()],[t.refreshBtn,"click",()=>this.refresh()],[t.overlay,"click",i=>{i.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,i,s])=>{this.addEventListener(t,i,s)}),this.bindSliderEvents()}bindSliderEvents(){const{elements:t}=this,i={start:t=>this.handleStart(t)};[[t.btn,"mousedown",i.start],[t.btn,"touchstart",i.start],[t.sliderImg,"mousedown",i.start],[t.sliderImg,"touchstart",i.start]].forEach(([t,i,s,e])=>{this.addEventListener(t,i,s,e)})}addEventListener(t,i,s,e={}){t&&"function"==typeof s&&(t.addEventListener(i,s,e),this.eventListeners.push({element:t,event:i,handler:s,options:e}))}removeEventListener(t,i,s,e={}){t&&"function"==typeof s&&(t.removeEventListener(i,s,e),this.eventListeners=this.eventListeners.filter(e=>!(e.element===t&&e.event===i&&e.handler===s)))}removeAllEventListeners(){this.eventListeners.forEach(({element:t,event:i,handler:s,options:e})=>{try{t?.removeEventListener?.(i,s,e)}catch(t){}}),this.eventListeners.length=0}getDimensions(){if(!this.cachedDimensions){const{track:t,btn:i}=this.elements;this.cachedDimensions={trackWidth:t.offsetWidth,btnWidth:i.offsetWidth,get maxX(){return this.trackWidth-this.btnWidth}}}return this.cachedDimensions}getPosition(){const{maxX:t}=this.getDimensions(),i=this.state.currentX/t;return Math.round(i(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,this.boundHandleEnd=this.boundHandleEnd\|\|this.handleEnd.bind(this),document.addEventListener("mousemove",this.throttledHandleMove,{passive:!1}),document.addEventListener("touchmove",this.throttledHandleMove,{passive:!1}),document.addEventListener("mouseup",this.boundHandleEnd),document.addEventListener("touchend",this.boundHandleEnd))}handleMove(t){this.state.isDragging&&(t.preventDefault(),this.lastClientX=this.getClientX(t),this.rafId\|\|(this.rafId=requestAnimationFrame(()=>{const t=this.lastClientX-this.state.startX,{maxX:i}=this.getDimensions();this.state.currentX=Math.max(0,Math.min(t,i)),this.times.push({time:Date.now(),position:this.getPosition()}),this.updateSliderPosition(),this.rafId=null})))}handleEnd(){this.state.isDragging&&(document.removeEventListener("mousemove",this.throttledHandleMove),document.removeEventListener("touchmove",this.throttledHandleMove),document.removeEventListener("mouseup",this.boundHandleEnd),document.removeEventListener("touchend",this.boundHandleEnd),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 i=t?"all 0.3s ease":"none";requestAnimationFrame(()=>{const{btn:t,sliderImg:s}=this.elements;t.style.transition=s.style.transition=i})}updateUIState(t){const{elements:i}=this,s={dragging:()=>{i.hint.style.opacity="0",i.fingerAnimation.style.display="none"},success:()=>{Object.assign(i.btn.style,{background:"var(--sc-success)"}),Object.assign(i.icon.style,{color:"white"}),i.icon.textContent="✓"},fail:()=>{Object.assign(i.btn.style,{background:"var(--sc-danger)"}),Object.assign(i.icon.style,{color:"white"}),i.icon.textContent="✗"},reset:()=>{Object.assign(i.btn.style,{background:"#00C870"}),Object.assign(i.icon.style,{color:"white"}),i.icon.textContent="→",i.fingerAnimation.style.display="block",this.updateHintText("向右滑动完成验证","var(--sc-text-light)")},loading:()=>{i.hint.style.opacity="0",i.fingerAnimation.style.display="none",Object.assign(i.track.style,{pointerEvents:"none",opacity:"0.6"})}};s[t]&&requestAnimationFrame(()=>{s[t](),"loading"!==t&&Object.assign(i.track.style,{pointerEvents:"auto",opacity:"1"})})}updateHintText(t,i){requestAnimationFrame(()=>{Object.assign(this.elements.hint,{textContent:t}),Object.assign(this.elements.hint.style,{color:i,opacity:"1"})})}updateSliderPosition(){const{elements:t,options:i,state:s}=this,{maxX:e}=this.getDimensions(),a=s.currentX/e(i.width-i.sliderSize),r=s.currentX/e;requestAnimationFrame(()=>{t.btn.style.transform=`translate3d(${s.currentX}px, 0, 0)`,t.sliderImg.style.transform=`translate3d(${a}px, 0, 0)`,t.fingerAnimation.style.opacity=.8>r?"0.6":"0"})}show(){if(this.state.isVisible=!0,!this.elements.overlay){this.createElements(),this.bindEvents();const{track:t}=this.elements;t&&(t.style.height="48px",t.style.minHeight="48px",t.style.maxHeight="48px")}this.elements.overlay.style.display="flex",this.elements.overlay.style.transform="translate3d(0,0,0)",requestAnimationFrame(()=>{this.elements.overlay.classList.add("show"),this.elements.modal.classList.add("show"),this.preloadCaptcha()})}async preloadCaptcha(){try{this.showLoading();const[t]=await Promise.all([this.fetchCaptchaData(),this.preloadImages()]);this.captchaData=t,this.showCaptcha(),await this.renderCaptcha()}catch(t){this.handleError(PopupSliderCaptcha.ERROR_TYPES.CAPTCHA_DATA_ERROR,t.message,t)}}async makeRequest(t,i={}){this.abortController&&this.abortController.abort(),this.abortController=new AbortController;const s=await fetch(t,{method:"POST",headers:{"Content-Type":"application/json",...this.options.headers},body:JSON.stringify({canvasWidth:this.options.width,canvasHeight:this.options.height,timestamp:Date.now(),...this.options.requestData,...i}),signal:this.abortController.signal});if(!s.ok)throw Error(`HTTP ${s.status}: ${s.statusText}`);return s.json()}async fetchCaptchaData(){this.startTime=Date.now();const t=await this.makeRequest(this.options.apiUrl);if(!this.validateCaptchaData(t))throw Error("验证码数据格式错误");return t.data}preloadImages(){return Promise.all(["data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTE3LjY1LDYuMzVDMTYuMiw0LjkgMTQuMjEsNCAxMiw0QTgsOCAwIDAsMCA0LDEyQTgsOCAwIDAsMCAxMiwyMEMxNS43MywyMCAxOC44NCwxNy40NSAxOS43MywxNEgxNy42NUMxNi44MywxNi4zMyAxNC42MSwxOCAxMiwxOEE2LDYgMCAwLDEgNiwxMkE2LDYgMCAwLDEgMTIsNkMxMy42Niw2IDE1LjE0LDYuNjkgMTYuMjIsNy43OEwxMywxMUgyMFY0TDE3LjY1LDYuMzVaIiBmaWxsPSIjOTk5Ii8+Cjwvc3ZnPgo="].map(t=>new Promise(i=>{const s=new Image;s.onload=s.onerror=()=>i(),s.src=t})))}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)}handleRequestError(t){"AbortError"===t.name?this.handleError(PopupSliderCaptcha.ERROR_TYPES.TIMEOUT_ERROR,"请求被取消",t):t.message?.includes("Failed to fetch")\|\|t.message?.includes("NetworkError")?this.handleError(PopupSliderCaptcha.ERROR_TYPES.NETWORK_ERROR,"网络连接失败",t):this.handleError(PopupSliderCaptcha.ERROR_TYPES.CAPTCHA_DATA_ERROR,t.message,t)}handleError(t,i,s=null){const e={[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]\|\|i\|\|"未知错误";this.options.onError&&this.options.onError({type:t,message:e,originalError:s}),this.showError(e)}async loadCaptcha(){try{this.showLoading(),this.startTime=Date.now();const t=await this.makeRequest(this.options.apiUrl);if(!this.validateCaptchaData(t))throw Error("验证码数据格式错误");this.captchaData=t.data,this.showCaptcha(),await this.renderCaptcha()}catch(t){this.handleRequestError(t)}}validateCaptchaData(t){if(!t\|\|"object"!=typeof t)return!1;const i=t.data\|\|t;return["canvasSrc","blockSrc","canvasWidth","canvasHeight","blockWidth","blockHeight","blockY","nonceStr"].every(t=>{const s=i[t];return null!=s&&""!==s})}renderCaptcha(){return new Promise((t,i)=>{let s=!1;const e=[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(e).then(()=>{s\|\|(this.hideLoading(),t())}).catch(t=>{s\|\|(s=!0,this.handleError(PopupSliderCaptcha.ERROR_TYPES.IMAGE_LOAD_ERROR,"图片加载失败",t),i(t))})})}loadImageAsync(t,i,s){return new Promise((e,a)=>{if(this.imageCache.has(i)){const a=this.imageCache.get(i);return t.src=a.src,this.applyStyles(t,s),t.style.display="block",void e()}const r=this.safeSetTimeout(()=>{a(Error("图片加载超时"))},5e3),n=new Image;n.crossOrigin="anonymous",n.decoding="async",n.onload=function(){if(this.safeClearTimeout(r),"undefined"!=typeof OffscreenCanvas)try{const t=new OffscreenCanvas(n.width,n.height).getContext("2d");t.drawImage(n,0,0);const s=t.getImageData(0,0,n.width,n.height);this.imageCache.set(i,{src:n.src,imageData:s})}catch(t){this.imageCache.set(i,n.cloneNode())}else this.imageCache.set(i,n.cloneNode());t.src=n.src,this.applyStyles(t,s),t.style.display="block",e()}.bind(this),n.onerror=function(t){this.safeClearTimeout(r),a(t)}.bind(this),n.src=i})}applyStyles(t,i){Object.entries(i).forEach(([i,s])=>{t.style[i]="number"==typeof s?s+"px":s})}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"},error:{display:"none"}})}showError(t){this.hideLoading(),this.batchUpdateStyles({error:{display:"block",textContent:t}})}batchUpdateStyles(t){requestAnimationFrame(()=>{Object.entries(t).forEach(([t,i])=>{const s=this.elements[t];s&&Object.entries(i).forEach(([t,i])=>{"textContent"===t?s.textContent=i:s.style[t]=i})})})}async verify(){if(this.captchaData)try{const t=await this.makeRequest(this.options.verifyUrl,{loginVo:{nonceStr:this.captchaData.nonceStr,value:this.getPosition()},dragEventList:[...this.times],...this.options.verifyData});this.isVerifySuccess(t)?this.onVerifySuccess(t.data\|\|t.result):this.onVerifyFail(t.message\|\|t.msg\|\|"验证失败，请重试！")}catch(t){this.handleRequestError(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 i=this.dragStartTime?Date.now()-this.dragStartTime:Date.now()-this.startTime,s=`验证成功！耗时：${(i/1e3).toFixed(2)}s`;this.updateUIState("success"),this.showFloatingTime(s,"success"),this.safeSetTimeout(()=>{this.options.onSuccess?.({ticket:t,timestamp:Date.now(),duration:i}),this.hide()},2e3)}showFloatingTime(t,i="success"){const{elements:s}=this;s.floatingTime.textContent=t,s.floatingTime.className="slider-captcha-floating-time "+i,this.safeSetTimeout(()=>s.floatingTime.classList.add("show"),100),this.safeSetTimeout(()=>{s.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="translate3d(0px, 0, 0)",this.elements.sliderImg.style.transform="translate3d(0px, 0, 0)",this.updateUIState("reset"),this.elements.error.style.display="none"})}refresh(){try{this.reset(),this.state.retryCount=0,this.loadCaptcha()}catch(t){}}safeSetTimeout(t,i){const s=setTimeout(()=>{this.timers.delete(s),t()},i);return this.timers.add(s),s}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,i){let s=0;return(...e)=>{const a=Date.now();if(a-s>=i)return s=a,t.apply(this,e)}}destroy(){try{this.state.isDragging&&(document.removeEventListener("mousemove",this.throttledHandleMove),document.removeEventListener("touchmove",this.throttledHandleMove),this.boundHandleEnd&&(document.removeEventListener("mouseup",this.boundHandleEnd),document.removeEventListener("touchend",this.boundHandleEnd)),this.state.isDragging=!1),this.abortController&&(this.abortController.abort(),this.abortController=null),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,this.elements={},this.state={},this.times=[],this.eventListeners=[],this.timers.clear(),this.throttledHandleMove=null,this.boundHandleEnd=null,this.options.onDestroy&&this.options.onDestroy(),this.options=null}catch(t){}}static create(t){return new PopupSliderCaptcha(t)}static show(t){const i=new PopupSliderCaptcha(t);return i.show(),i}}"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),e=PopupSliderCaptcha;class PasswordValidator{static CONSTANTS={DEFAULT_TIMEOUT:1e4,CACHE_DURATION:3e5,MIN_PASSWORD_LENGTH:1};static ERROR_TYPES={NETWORK_ERROR:"NETWORK_ERROR",TIMEOUT_ERROR:"TIMEOUT_ERROR",ENCRYPTION_ERROR:"ENCRYPTION_ERROR",VALIDATION_ERROR:"VALIDATION_ERROR",PUBLIC_KEY_ERROR:"PUBLIC_KEY_ERROR"};constructor(t={}){this.options={publicKeyUrl:t.publicKeyUrl\|\|"/externalapi/commonservice/strongPassword/getPublicKey",validateUrl:t.validateUrl\|\|"/externalapi/commonservice/strongPassword/checkPassword",baseUrl:t.baseUrl\|\|"",timeout:t.timeout\|\|PasswordValidator.CONSTANTS.DEFAULT_TIMEOUT,headers:t.headers\|\|{},cacheDuration:t.cacheDuration\|\|PasswordValidator.CONSTANTS.CACHE_DURATION,...t},this.options.publicKeyUrl=this.normalizeUrl(this.options.publicKeyUrl,this.options.baseUrl),this.options.validateUrl=this.normalizeUrl(this.options.validateUrl,this.options.baseUrl),this.publicKeyCache=null,this.publicKeyExpiry=null,this.encryptor=null}normalizeUrl(t,i){return t?/^https?:\/\//.test(t)\|\|!i?t:(i.endsWith("/")?i:i+"/")+(t.startsWith("/")?t.substring(1):t):t}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(!this.isSuccessResponse(t))throw Error("获取公钥失败："+(t.message\|\|t.msg\|\|"未知错误"));const i=t.data\|\|t.result;if(!i)throw Error("公钥为空");return this.publicKeyCache=i,this.publicKeyExpiry=Date.now()+this.options.cacheDuration,this.publicKeyCache}catch(t){throw this.handleError(PasswordValidator.ERROR_TYPES.PUBLIC_KEY_ERROR,t.message,t),Error("获取公钥失败: "+t.message)}}isSuccessResponse(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)}handleError(t,i,s=null){const e={[PasswordValidator.ERROR_TYPES.NETWORK_ERROR]:"网络连接失败，请检查网络设置",[PasswordValidator.ERROR_TYPES.TIMEOUT_ERROR]:"请求超时，请重试",[PasswordValidator.ERROR_TYPES.ENCRYPTION_ERROR]:"密码加密失败",[PasswordValidator.ERROR_TYPES.VALIDATION_ERROR]:"密码验证失败",[PasswordValidator.ERROR_TYPES.PUBLIC_KEY_ERROR]:"获取公钥失败"}[t]\|\|i\|\|"未知错误";this.options.onError&&this.options.onError({type:t,message:e,originalError:s})}encryptPassword(t,i){try{if(!t)throw Error("密码不能为空");if(t.length<PasswordValidator.CONSTANTS.MIN_PASSWORD_LENGTH)throw Error("密码长度不足");if(!i)throw Error("公钥不能为空");if(void 0===JSEncrypt)throw Error("JSEncrypt库未正确加载，请确保已引入JSEncrypt库");this.encryptor\|\|(this.encryptor=new JSEncrypt),this.lastPublicKey!==i&&(this.encryptor.setPublicKey(i),this.lastPublicKey=i);const s=this.encryptor.encrypt(t);if(!s)throw Error("密码加密失败，可能是公钥格式不正确");return s}catch(t){throw this.handleError(PasswordValidator.ERROR_TYPES.ENCRYPTION_ERROR,t.message,t),Error("密码加密失败: "+t.message)}}async validatePassword(t,i,s={}){try{if(!t)throw Error("密码不能为空");if(!i)throw Error("用户名不能为空");const e=await this.getPublicKey(),a=this.encryptPassword(t,e),r=await this.makeRequest(this.options.validateUrl,{method:"POST",body:JSON.stringify({userName:i,password:a,timestamp:Date.now(),...s})});return{success:this.isSuccessResponse(r),data:r.data\|\|r.result,message:r.message\|\|r.msg\|\|"验证完成",code:r.code\|\|r.status,originalResponse:r}}catch(t){let i=PasswordValidator.ERROR_TYPES.VALIDATION_ERROR;return t.message.includes("网络")\|\|t.message.includes("fetch")?i=PasswordValidator.ERROR_TYPES.NETWORK_ERROR:t.message.includes("超时")\|\|t.message.includes("timeout")?i=PasswordValidator.ERROR_TYPES.TIMEOUT_ERROR:t.message.includes("加密")&&(i=PasswordValidator.ERROR_TYPES.ENCRYPTION_ERROR),this.handleError(i,t.message,t),{success:!1,message:t.message\|\|"密码校验失败",code:i,error:t}}}async makeRequest(t,i={}){const s=new AbortController,e=setTimeout(()=>{s.abort()},this.options.timeout);try{const a=await fetch(t,{...i,headers:{"Content-Type":"application/json",...this.options.headers,...i.headers},signal:s.signal});if(clearTimeout(e),!a.ok)throw Error(`HTTP错误: ${a.status} ${a.statusText}`);const r=await a.json();return this.options.debug,r}catch(t){if(clearTimeout(e),"AbortError"===t.name)throw this.handleError(PasswordValidator.ERROR_TYPES.TIMEOUT_ERROR,"请求超时",t),Error("请求超时");if(t.message.includes("Failed to fetch")\|\|t.message.includes("NetworkError"))throw this.handleError(PasswordValidator.ERROR_TYPES.NETWORK_ERROR,"网络连接失败",t),Error("网络连接失败");throw t}}clearCache(){this.publicKeyCache=null,this.publicKeyExpiry=null}updateOptions(t){this.options={...this.options,...t},this.clearCache()}getCacheStatus(){return{hasCache:!!this.publicKeyCache,isExpired:!this.publicKeyExpiry\|\|Date.now()>this.publicKeyExpiry,expiryTime:this.publicKeyExpiry,remainingTime:this.publicKeyExpiry?Math.max(0,this.publicKeyExpiry-Date.now()):0}}destroy(){try{this.clearCache(),this.encryptor=null,this.lastPublicKey=null,this.options.onDestroy&&this.options.onDestroy(),this.options=null}catch(t){}}}r={PopupSliderCaptcha:e,PasswordValidator:a=PasswordValidator,createPasswordValidator:i,validatePassword:s},"undefined"!=typeof window&&(window.SliderCaptcha=e,window.PopupSliderCaptcha=e,window.PasswordValidator=a,window.createPasswordValidator=i,window.validatePassword=s),t.PasswordValidator=a,t.PopupSliderCaptcha=e,t.createPasswordValidator=i,t.default=r,t.validatePassword=s,Object.defineProperty(t,"t",{value:!0})});
1	+ !function(t,i){"object"==typeof exports&&"undefined"!=typeof module?i(exports,require("jsencrypt")):"function"==typeof define&&define.amd?define(["exports","jsencrypt"],i):i((t="undefined"!=typeof globalThis?globalThis:t\|\|self).SliderCaptchaSDK={},t.JSEncrypt)}(this,function(t,JSEncrypt){"use strict";function i(t){return new PasswordValidator(t)}function s(t,i,s={},e={}){return new PasswordValidator(s).validatePassword(t,i,e)}var e,a,r;class PopupSliderCaptcha{static DEFAULTS={width:320,height:200,sliderSize:50,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:#666;--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);will-change:opacity}.slider-captcha-overlay.show{opacity:1}.slider-captcha-modal{background:#fff;border-radius:var(--sc-radius);padding:16px 16px 5px;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);will-change:transform,opacity}.slider-captcha-modal.show{transform:scale(1) translateY(-10%);opacity:1}.slider-captcha-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px;}.slider-captcha-container{display:flex;align-items:center;position:relative;border-radius:4px;overflow:hidden;margin-bottom:12px;background:#837a7a;justify-content:center}.slider-captcha-track{width:100%;height:48px;min-height:48px;max-height:48px;line-height:48px;background:#e8f5e9;border: 1px solid rgba(0,200,112,0.15);border-radius:40px;position:relative;margin-bottom:15px;overflow:hidden;box-sizing:border-box;flex-shrink:0}.slider-captcha-btn{width:40px;height:40px;background: #00C870;border-radius:50%;position:absolute;top:3px;left:3px;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;will-change:transform}.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;line-height:12px;white-space:nowrap;opacity:0;pointer-events:none;z-index:10;transition:all var(--sc-transition);background:#fff;padding:4px 15px;border-radius:10px;will-change:transform,opacity}.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:none}.slider-captcha-piece{position:absolute;top:0;left:0;cursor:pointer;transition:none;z-index:2;will-change:transform;display:none}.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:opacity var(--sc-transition);white-space:nowrap}.slider-captcha-header-buttons{display:flex;align-items:center}"}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),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.isInitialized=!1,this.throttledHandleMove=this.throttle(t=>this.handleMove(t),this.options.throttleDelay),this.lazyInit()}lazyInit(){this.injectStyles(),this.isInitialized=!0}createInitialState(){return{isVisible:!1,isDragging:!1,currentX:0,startX:0,retryCount:0,isLoading:!1}}normalizeUrl(t,i){return t&&i&&!/^https?:\/\//.test(t)?(i.endsWith("/")?i:i+"/")+(t.startsWith("/")?t.slice(1):t):t}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{options:t}=this,i=t.width,s=t.height,e=`\n <div class="${PopupSliderCaptcha.CSS_CLASSES.overlay}">\n <div class="${PopupSliderCaptcha.CSS_CLASSES.modal}">\n <div class="${PopupSliderCaptcha.CSS_CLASSES.header}">\n <h3 class="slider-captcha-title">安全验证</h3>\n <div class="slider-captcha-header-buttons">\n <button class="slider-captcha-refresh" title="刷新">\n <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>\n </button>\n <button class="slider-captcha-close" title="关闭"></button>\n </div>\n </div>\n <div class="${PopupSliderCaptcha.CSS_CLASSES.container}" style="width:${i}px;height:${s}px;display:none;">\n <img class="slider-captcha-bg" alt="" style="display:none;">\n <img class="slider-captcha-piece" alt="" style="display:none;">\n <div class="${PopupSliderCaptcha.CSS_CLASSES.loading}">加载中...</div>\n <div class="slider-captcha-floating-time"></div>\n </div>\n <div class="${PopupSliderCaptcha.CSS_CLASSES.track}">\n <div class="${PopupSliderCaptcha.CSS_CLASSES.btn}">\n <div class="slider-captcha-icon">→</div>\n </div>\n <div class="${PopupSliderCaptcha.CSS_CLASSES.hint}">向右滑动完成验证</div>\n </div>\n <div class="${PopupSliderCaptcha.CSS_CLASSES.error}"></div>\n </div>\n </div>\n `,a=document.createElement("div");a.innerHTML=e.trim();const r=a.firstElementChild;document.body.appendChild(r),this.elements={overlay:r,modal:r.querySelector("."+PopupSliderCaptcha.CSS_CLASSES.modal),header:r.querySelector("."+PopupSliderCaptcha.CSS_CLASSES.header),title:r.querySelector(".slider-captcha-title"),closeBtn:r.querySelector(".slider-captcha-close"),refreshBtn:r.querySelector(".slider-captcha-refresh"),container:r.querySelector("."+PopupSliderCaptcha.CSS_CLASSES.container),backgroundImg:r.querySelector(".slider-captcha-bg"),sliderImg:r.querySelector(".slider-captcha-piece"),loadingText:r.querySelector("."+PopupSliderCaptcha.CSS_CLASSES.loading),floatingTime:r.querySelector(".slider-captcha-floating-time"),track:r.querySelector("."+PopupSliderCaptcha.CSS_CLASSES.track),btn:r.querySelector("."+PopupSliderCaptcha.CSS_CLASSES.btn),icon:r.querySelector(".slider-captcha-icon"),hint:r.querySelector("."+PopupSliderCaptcha.CSS_CLASSES.hint),error:r.querySelector("."+PopupSliderCaptcha.CSS_CLASSES.error)}}bindEvents(){const{elements:t}=this;[[t.closeBtn,"click",()=>this.hide()],[t.refreshBtn,"click",()=>this.refresh()],[t.overlay,"click",i=>{i.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,i,s])=>{this.addEventListener(t,i,s)}),this.bindSliderEvents()}bindSliderEvents(){const{elements:t}=this,i={start:t=>this.handleStart(t)};[[t.btn,"mousedown",i.start],[t.btn,"touchstart",i.start],[t.sliderImg,"mousedown",i.start],[t.sliderImg,"touchstart",i.start]].forEach(([t,i,s,e])=>{this.addEventListener(t,i,s,e)})}addEventListener(t,i,s,e={}){t&&"function"==typeof s&&(t.addEventListener(i,s,e),this.eventListeners.push({element:t,event:i,handler:s,options:e}))}removeEventListener(t,i,s,e={}){t&&"function"==typeof s&&(t.removeEventListener(i,s,e),this.eventListeners=this.eventListeners.filter(e=>!(e.element===t&&e.event===i&&e.handler===s)))}removeAllEventListeners(){this.eventListeners.forEach(({element:t,event:i,handler:s,options:e})=>{try{t?.removeEventListener?.(i,s,e)}catch(t){}}),this.eventListeners.length=0}getDimensions(){if(!this.cachedDimensions){const{track:t,btn:i}=this.elements;this.cachedDimensions={trackWidth:t.offsetWidth,btnWidth:i.offsetWidth,get maxX(){return this.trackWidth-this.btnWidth}}}return this.cachedDimensions}getPosition(){const{maxX:t}=this.getDimensions(),i=this.state.currentX/t;return Math.round(i(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,this.boundHandleEnd=this.boundHandleEnd\|\|this.handleEnd.bind(this),document.addEventListener("mousemove",this.throttledHandleMove,{passive:!1}),document.addEventListener("touchmove",this.throttledHandleMove,{passive:!1}),document.addEventListener("mouseup",this.boundHandleEnd),document.addEventListener("touchend",this.boundHandleEnd))}handleMove(t){this.state.isDragging&&(t.preventDefault(),this.lastClientX=this.getClientX(t),this.rafId\|\|(this.rafId=requestAnimationFrame(()=>{const t=this.lastClientX-this.state.startX,{maxX:i}=this.getDimensions();this.state.currentX=Math.max(0,Math.min(t,i)),this.times.push({time:Date.now(),position:this.getPosition()}),this.updateSliderPosition(),this.rafId=null})))}handleEnd(){this.state.isDragging&&(document.removeEventListener("mousemove",this.throttledHandleMove),document.removeEventListener("touchmove",this.throttledHandleMove),document.removeEventListener("mouseup",this.boundHandleEnd),document.removeEventListener("touchend",this.boundHandleEnd),this.times.push({time:Date.now(),position:this.getPosition()}),this.state.isDragging=!1,this.rafId&&(cancelAnimationFrame(this.rafId),this.rafId=null),this.verify())}handleVisibilityChange(){}getClientX=t=>t.type.includes("touch")?t.touches[0].clientX:t.clientX;setTransition(t){const i=t?"all 0.3s ease":"none";requestAnimationFrame(()=>{const{btn:t,sliderImg:s}=this.elements;t.style.transition=s.style.transition=i})}updateUIState(t){const{elements:i}=this,s={dragging:()=>{i.hint.style.opacity="0"},success:()=>{Object.assign(i.btn.style,{background:"var(--sc-success)"}),Object.assign(i.icon.style,{color:"white"}),i.icon.textContent="✓"},fail:()=>{Object.assign(i.btn.style,{background:"var(--sc-danger)"}),Object.assign(i.icon.style,{color:"white"}),i.icon.textContent="✗"},reset:()=>{Object.assign(i.btn.style,{background:"#00C870"}),Object.assign(i.icon.style,{color:"white"}),i.icon.textContent="→",this.updateHintText("向右滑动完成验证","var(--sc-text-light)")},loading:()=>{i.hint.style.opacity="0",Object.assign(i.track.style,{pointerEvents:"none",opacity:"0.6"})}};s[t]&&requestAnimationFrame(()=>{s[t](),"loading"!==t&&Object.assign(i.track.style,{pointerEvents:"auto",opacity:"1"})})}updateHintText(t,i){requestAnimationFrame(()=>{Object.assign(this.elements.hint,{textContent:t}),Object.assign(this.elements.hint.style,{color:i,opacity:"1"})})}updateSliderPosition(){const{elements:t,options:i,state:s}=this,{maxX:e}=this.getDimensions(),a=s.currentX/e(i.width-i.sliderSize);requestAnimationFrame(()=>{t.btn.style.transform=`translate3d(${s.currentX}px, 0, 0)`,t.sliderImg.style.transform=`translate3d(${a}px, 0, 0)`})}show(){if(this.state.isVisible=!0,!this.elements.overlay){this.createElements(),this.bindEvents();const{track:t}=this.elements;t&&(t.style.height="48px",t.style.minHeight="48px",t.style.maxHeight="48px")}this.elements.overlay.style.display="flex",this.elements.overlay.style.transform="translate3d(0,0,0)",requestAnimationFrame(()=>{this.elements.overlay.classList.add("show"),this.elements.modal.classList.add("show"),this.preloadCaptcha()})}async preloadCaptcha(){try{this.showLoading();const[t]=await Promise.all([this.fetchCaptchaData(),this.preloadImages()]);this.captchaData=t,this.showCaptcha(),await this.renderCaptcha()}catch(t){this.handleError(PopupSliderCaptcha.ERROR_TYPES.CAPTCHA_DATA_ERROR,t.message,t)}}async makeRequest(t,i={}){this.abortController&&this.abortController.abort(),this.abortController=new AbortController;const s=await fetch(t,{method:"POST",headers:{"Content-Type":"application/json",...this.options.headers},body:JSON.stringify({canvasWidth:this.options.width,canvasHeight:this.options.height,blockHeight:this.options.sliderSize,blockWidth:this.options.sliderSize,timestamp:Date.now(),...this.options.requestData,...i}),signal:this.abortController.signal});if(!s.ok)throw Error(`HTTP ${s.status}: ${s.statusText}`);return s.json()}async fetchCaptchaData(){this.startTime=Date.now();const t=await this.makeRequest(this.options.apiUrl);if(!this.validateCaptchaData(t))throw Error("验证码数据格式错误");return t.data}preloadImages(){return Promise.all(["data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTE3LjY1LDYuMzVDMTYuMiw0LjkgMTQuMjEsNCAxMiw0QTgsOCAwIDAsMCA0LDEyQTgsOCAwIDAsMCAxMiwyMEMxNS43MywyMCAxOC44NCwxNy40NSAxOS43MywxNEgxNy42NUMxNi44MywxNi4zMyAxNC42MSwxOCAxMiwxOEE2LDYgMCAwLDEgNiwxMkE2LDYgMCAwLDEgMTIsNkMxMy42Niw2IDE1LjE0LDYuNjkgMTYuMjIsNy43OEwxMywxMUgyMFY0TDE3LjY1LDYuMzVaIiBmaWxsPSIjOTk5Ii8+Cjwvc3ZnPgo="].map(t=>new Promise(i=>{const s=new Image;s.onload=s.onerror=()=>i(),s.src=t})))}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)}handleRequestError(t){"AbortError"===t.name?this.handleError(PopupSliderCaptcha.ERROR_TYPES.TIMEOUT_ERROR,"请求被取消",t):t.message?.includes("Failed to fetch")\|\|t.message?.includes("NetworkError")?this.handleError(PopupSliderCaptcha.ERROR_TYPES.NETWORK_ERROR,"网络连接失败",t):this.handleError(PopupSliderCaptcha.ERROR_TYPES.CAPTCHA_DATA_ERROR,t.message,t)}handleError(t,i,s=null){const e={[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]\|\|i\|\|"未知错误";this.options.onError&&this.options.onError({type:t,message:e,originalError:s}),this.showError(e)}async loadCaptcha(){try{this.showLoading(),this.startTime=Date.now();const t=await this.makeRequest(this.options.apiUrl);if(!this.validateCaptchaData(t))throw Error("验证码数据格式错误");this.captchaData=t.data,this.showCaptcha(),await this.renderCaptcha()}catch(t){this.handleRequestError(t)}}validateCaptchaData(t){if(!t\|\|"object"!=typeof t)return!1;const i=t.data\|\|t;return["canvasSrc","blockSrc","canvasWidth","canvasHeight","blockWidth","blockHeight","blockY","nonceStr"].every(t=>{const s=i[t];return null!=s&&""!==s})}renderCaptcha(){return new Promise((t,i)=>{let s=!1;const e=[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(e).then(()=>{s\|\|(this.hideLoading(),t())}).catch(t=>{s\|\|(s=!0,this.handleError(PopupSliderCaptcha.ERROR_TYPES.IMAGE_LOAD_ERROR,"图片加载失败",t),i(t))})})}loadImageAsync(t,i,s){return new Promise((e,a)=>{if(this.imageCache.has(i)){const a=this.imageCache.get(i);return t.src=a.src,this.applyStyles(t,s),t.style.display="block",void e()}const r=this.safeSetTimeout(()=>{a(Error("图片加载超时"))},5e3),n=new Image;n.crossOrigin="anonymous",n.decoding="async",n.onload=function(){if(this.safeClearTimeout(r),"undefined"!=typeof OffscreenCanvas)try{const t=new OffscreenCanvas(n.width,n.height).getContext("2d");t.drawImage(n,0,0);const s=t.getImageData(0,0,n.width,n.height);this.imageCache.set(i,{src:n.src,imageData:s})}catch(t){this.imageCache.set(i,n.cloneNode())}else this.imageCache.set(i,n.cloneNode());t.src=n.src,this.applyStyles(t,s),t.style.display="block",e()}.bind(this),n.onerror=function(t){this.safeClearTimeout(r),a(t)}.bind(this),n.src=i})}applyStyles(t,i){Object.entries(i).forEach(([i,s])=>{t.style[i]="number"==typeof s?s+"px":s})}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"},error:{display:"none"}})}showError(t){this.hideLoading(),this.batchUpdateStyles({error:{display:"block",textContent:t}})}batchUpdateStyles(t){requestAnimationFrame(()=>{Object.entries(t).forEach(([t,i])=>{const s=this.elements[t];s&&Object.entries(i).forEach(([t,i])=>{"textContent"===t?s.textContent=i:s.style[t]=i})})})}async verify(){if(this.captchaData)try{const t=await this.makeRequest(this.options.verifyUrl,{loginVo:{nonceStr:this.captchaData.nonceStr,value:this.getPosition()},dragEventList:[...this.times],...this.options.verifyData});this.isVerifySuccess(t)?this.onVerifySuccess(t.data\|\|t.result):this.onVerifyFail(t.message\|\|t.msg\|\|"验证失败，请重试！")}catch(t){this.handleRequestError(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 i=this.dragStartTime?Date.now()-this.dragStartTime:Date.now()-this.startTime,s=`验证成功！耗时：${(i/1e3).toFixed(2)}s`;this.updateUIState("success"),this.showFloatingTime(s,"success"),this.safeSetTimeout(()=>{this.options.onSuccess?.({ticket:t,timestamp:Date.now(),duration:i}),this.hide()},2e3)}showFloatingTime(t,i="success"){const{elements:s}=this;s.floatingTime.textContent=t,s.floatingTime.className="slider-captcha-floating-time "+i,this.safeSetTimeout(()=>s.floatingTime.classList.add("show"),100),this.safeSetTimeout(()=>{s.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="translate3d(0px, 0, 0)",this.elements.sliderImg.style.transform="translate3d(0px, 0, 0)",this.updateUIState("reset"),this.elements.error.style.display="none"})}refresh(){try{this.reset(),this.state.retryCount=0,this.loadCaptcha()}catch(t){}}safeSetTimeout(t,i){const s=setTimeout(()=>{this.timers.delete(s),t()},i);return this.timers.add(s),s}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,i){let s=0;return(...e)=>{const a=Date.now();if(a-s>=i)return s=a,t.apply(this,e)}}destroy(){try{this.state.isDragging&&(document.removeEventListener("mousemove",this.throttledHandleMove),document.removeEventListener("touchmove",this.throttledHandleMove),this.boundHandleEnd&&(document.removeEventListener("mouseup",this.boundHandleEnd),document.removeEventListener("touchend",this.boundHandleEnd)),this.state.isDragging=!1),this.abortController&&(this.abortController.abort(),this.abortController=null),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,this.elements={},this.state={},this.times=[],this.eventListeners=[],this.timers.clear(),this.throttledHandleMove=null,this.boundHandleEnd=null,this.options.onDestroy&&this.options.onDestroy(),this.options=null}catch(t){}}static create(t){return new PopupSliderCaptcha(t)}static show(t){const i=new PopupSliderCaptcha(t);return i.show(),i}}"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),e=PopupSliderCaptcha;class PasswordValidator{static CONSTANTS={DEFAULT_TIMEOUT:1e4,CACHE_DURATION:3e5,MIN_PASSWORD_LENGTH:1};static ERROR_TYPES={NETWORK_ERROR:"NETWORK_ERROR",TIMEOUT_ERROR:"TIMEOUT_ERROR",ENCRYPTION_ERROR:"ENCRYPTION_ERROR",VALIDATION_ERROR:"VALIDATION_ERROR",PUBLIC_KEY_ERROR:"PUBLIC_KEY_ERROR"};constructor(t={}){this.options={publicKeyUrl:t.publicKeyUrl\|\|"/externalapi/commonservice/strongPassword/getPublicKey",validateUrl:t.validateUrl\|\|"/externalapi/commonservice/strongPassword/checkPassword",baseUrl:t.baseUrl\|\|"",timeout:t.timeout\|\|PasswordValidator.CONSTANTS.DEFAULT_TIMEOUT,headers:t.headers\|\|{},cacheDuration:t.cacheDuration\|\|PasswordValidator.CONSTANTS.CACHE_DURATION,...t},this.options.publicKeyUrl=this.normalizeUrl(this.options.publicKeyUrl,this.options.baseUrl),this.options.validateUrl=this.normalizeUrl(this.options.validateUrl,this.options.baseUrl),this.publicKeyCache=null,this.publicKeyExpiry=null,this.encryptor=null}normalizeUrl(t,i){return t?/^https?:\/\//.test(t)\|\|!i?t:(i.endsWith("/")?i:i+"/")+(t.startsWith("/")?t.substring(1):t):t}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(!this.isSuccessResponse(t))throw Error("获取公钥失败："+(t.message\|\|t.msg\|\|"未知错误"));const i=t.data\|\|t.result;if(!i)throw Error("公钥为空");return this.publicKeyCache=i,this.publicKeyExpiry=Date.now()+this.options.cacheDuration,this.publicKeyCache}catch(t){throw this.handleError(PasswordValidator.ERROR_TYPES.PUBLIC_KEY_ERROR,t.message,t),Error("获取公钥失败: "+t.message)}}isSuccessResponse(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)}handleError(t,i,s=null){const e={[PasswordValidator.ERROR_TYPES.NETWORK_ERROR]:"网络连接失败，请检查网络设置",[PasswordValidator.ERROR_TYPES.TIMEOUT_ERROR]:"请求超时，请重试",[PasswordValidator.ERROR_TYPES.ENCRYPTION_ERROR]:"密码加密失败",[PasswordValidator.ERROR_TYPES.VALIDATION_ERROR]:"密码验证失败",[PasswordValidator.ERROR_TYPES.PUBLIC_KEY_ERROR]:"获取公钥失败"}[t]\|\|i\|\|"未知错误";this.options.onError&&this.options.onError({type:t,message:e,originalError:s})}encryptPassword(t,i){try{if(!t)throw Error("密码不能为空");if(t.length<PasswordValidator.CONSTANTS.MIN_PASSWORD_LENGTH)throw Error("密码长度不足");if(!i)throw Error("公钥不能为空");if(void 0===JSEncrypt)throw Error("JSEncrypt库未正确加载，请确保已引入JSEncrypt库");this.encryptor\|\|(this.encryptor=new JSEncrypt),this.lastPublicKey!==i&&(this.encryptor.setPublicKey(i),this.lastPublicKey=i);const s=this.encryptor.encrypt(t);if(!s)throw Error("密码加密失败，可能是公钥格式不正确");return s}catch(t){throw this.handleError(PasswordValidator.ERROR_TYPES.ENCRYPTION_ERROR,t.message,t),Error("密码加密失败: "+t.message)}}async validatePassword(t,i,s={}){try{if(!t)throw Error("密码不能为空");if(!i)throw Error("用户名不能为空");const e=await this.getPublicKey(),a=this.encryptPassword(t,e),r=await this.makeRequest(this.options.validateUrl,{method:"POST",body:JSON.stringify({userName:i,password:a,timestamp:Date.now(),...s})});return{success:this.isSuccessResponse(r),data:r.data\|\|r.result,message:r.message\|\|r.msg\|\|"验证完成",code:r.code\|\|r.status,originalResponse:r}}catch(t){let i=PasswordValidator.ERROR_TYPES.VALIDATION_ERROR;return t.message.includes("网络")\|\|t.message.includes("fetch")?i=PasswordValidator.ERROR_TYPES.NETWORK_ERROR:t.message.includes("超时")\|\|t.message.includes("timeout")?i=PasswordValidator.ERROR_TYPES.TIMEOUT_ERROR:t.message.includes("加密")&&(i=PasswordValidator.ERROR_TYPES.ENCRYPTION_ERROR),this.handleError(i,t.message,t),{success:!1,message:t.message\|\|"密码校验失败",code:i,error:t}}}async makeRequest(t,i={}){const s=new AbortController,e=setTimeout(()=>{s.abort()},this.options.timeout);try{const a=await fetch(t,{...i,headers:{"Content-Type":"application/json",...this.options.headers,...i.headers},signal:s.signal});if(clearTimeout(e),!a.ok)throw Error(`HTTP错误: ${a.status} ${a.statusText}`);const r=await a.json();return this.options.debug,r}catch(t){if(clearTimeout(e),"AbortError"===t.name)throw this.handleError(PasswordValidator.ERROR_TYPES.TIMEOUT_ERROR,"请求超时",t),Error("请求超时");if(t.message.includes("Failed to fetch")\|\|t.message.includes("NetworkError"))throw this.handleError(PasswordValidator.ERROR_TYPES.NETWORK_ERROR,"网络连接失败",t),Error("网络连接失败");throw t}}clearCache(){this.publicKeyCache=null,this.publicKeyExpiry=null}updateOptions(t){this.options={...this.options,...t},this.clearCache()}getCacheStatus(){return{hasCache:!!this.publicKeyCache,isExpired:!this.publicKeyExpiry\|\|Date.now()>this.publicKeyExpiry,expiryTime:this.publicKeyExpiry,remainingTime:this.publicKeyExpiry?Math.max(0,this.publicKeyExpiry-Date.now()):0}}destroy(){try{this.clearCache(),this.encryptor=null,this.lastPublicKey=null,this.options.onDestroy&&this.options.onDestroy(),this.options=null}catch(t){}}}r={PopupSliderCaptcha:e,PasswordValidator:a=PasswordValidator,createPasswordValidator:i,validatePassword:s},"undefined"!=typeof window&&(window.SliderCaptcha=e,window.PopupSliderCaptcha=e,window.PasswordValidator=a,window.createPasswordValidator=i,window.validatePassword=s),t.PasswordValidator=a,t.PopupSliderCaptcha=e,t.createPasswordValidator=i,t.default=r,t.validatePassword=s,Object.defineProperty(t,"t",{value:!0})});

package/dist/slider-captcha.esm.js CHANGED Viewed

	@@ -1 +1 @@
1	- class PopupSliderCaptcha{static DEFAULTS={width:320,height:240,sliderSize:40,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:#666;--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);will-change:opacity}.slider-captcha-overlay.show{opacity:1}.slider-captcha-modal{background:#fff;border-radius:var(--sc-radius);padding:16px 16px 5px;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);will-change:transform,opacity}.slider-captcha-modal.show{transform:scale(1) translateY(-10%);opacity:1}.slider-captcha-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px;}.slider-captcha-container{display:flex;align-items:center;position:relative;border-radius:4px;overflow:hidden;margin-bottom:12px;background:#837a7a;justify-content:center}.slider-captcha-track{width:100%;height:48px;min-height:48px;max-height:48px;line-height:48px;background:#e8f5e9;border: 1px solid rgba(0,200,112,0.15);border-radius:40px;position:relative;margin-bottom:15px;overflow:hidden;box-sizing:border-box;flex-shrink:0}.slider-captcha-btn{width:40px;height:40px;background: #00C870;border-radius:50%;position:absolute;top:4px;left:4px;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;will-change:transform}.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;line-height:12px;white-space:nowrap;opacity:0;pointer-events:none;z-index:10;transition:all var(--sc-transition);background:#fff;padding:4px 15px;border-radius:10px;will-change:transform,opacity}.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:none}.slider-captcha-piece{position:absolute;top:0;left:0;cursor:pointer;transition:none;z-index:2;will-change:transform;display:none}.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;will-change:left,opacity,transform;white-space:nowrap}.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:opacity var(--sc-transition);white-space:nowrap}.slider-captcha-header-buttons{display:flex;align-items:center}@keyframes fingerSlide{0%{left:10px;opacity:.6;transform:translateY(-50%) scale(1)}50%{opacity:1;transform:translateY(-50%) scale(1.1)}100%{left:calc(50% - 10px);opacity:.6;transform:translateY(-50%) scale(1)}}"}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),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.isInitialized=!1,this.throttledHandleMove=this.throttle(t=>this.handleMove(t),this.options.throttleDelay),this.lazyInit()}lazyInit(){this.injectStyles(),this.isInitialized=!0}createInitialState(){return{isVisible:!1,isDragging:!1,currentX:0,startX:0,retryCount:0,isLoading:!1}}normalizeUrl(t,i){return t&&i&&!/^https?:\/\//.test(t)?(i.endsWith("/")?i:i+"/")+(t.startsWith("/")?t.slice(1):t):t}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{options:t}=this,i=t.width,s=t.height,e=`\n <div class="${PopupSliderCaptcha.CSS_CLASSES.overlay}">\n <div class="${PopupSliderCaptcha.CSS_CLASSES.modal}">\n <div class="${PopupSliderCaptcha.CSS_CLASSES.header}">\n <h3 class="slider-captcha-title">安全验证</h3>\n <div class="slider-captcha-header-buttons">\n <button class="slider-captcha-refresh" title="刷新">\n <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>\n </button>\n <button class="slider-captcha-close" title="关闭"></button>\n </div>\n </div>\n <div class="${PopupSliderCaptcha.CSS_CLASSES.container}" style="width:${i}px;height:${s}px;display:none;">\n <img class="slider-captcha-bg" alt="" style="display:none;">\n <img class="slider-captcha-piece" alt="" style="display:none;">\n <div class="${PopupSliderCaptcha.CSS_CLASSES.loading}">加载中...</div>\n <div class="slider-captcha-floating-time"></div>\n </div>\n <div class="${PopupSliderCaptcha.CSS_CLASSES.track}">\n <div class="slider-captcha-finger">👉</div>\n <div class="${PopupSliderCaptcha.CSS_CLASSES.btn}">\n <div class="slider-captcha-icon">→</div>\n </div>\n <div class="${PopupSliderCaptcha.CSS_CLASSES.hint}">向右滑动完成验证</div>\n </div>\n <div class="${PopupSliderCaptcha.CSS_CLASSES.error}"></div>\n </div>\n </div>\n `,a=document.createElement("div");a.innerHTML=e.trim();const n=a.firstElementChild;document.body.appendChild(n),this.elements={overlay:n,modal:n.querySelector("."+PopupSliderCaptcha.CSS_CLASSES.modal),header:n.querySelector("."+PopupSliderCaptcha.CSS_CLASSES.header),title:n.querySelector(".slider-captcha-title"),closeBtn:n.querySelector(".slider-captcha-close"),refreshBtn:n.querySelector(".slider-captcha-refresh"),container:n.querySelector("."+PopupSliderCaptcha.CSS_CLASSES.container),backgroundImg:n.querySelector(".slider-captcha-bg"),sliderImg:n.querySelector(".slider-captcha-piece"),loadingText:n.querySelector("."+PopupSliderCaptcha.CSS_CLASSES.loading),floatingTime:n.querySelector(".slider-captcha-floating-time"),track:n.querySelector("."+PopupSliderCaptcha.CSS_CLASSES.track),fingerAnimation:n.querySelector(".slider-captcha-finger"),btn:n.querySelector("."+PopupSliderCaptcha.CSS_CLASSES.btn),icon:n.querySelector(".slider-captcha-icon"),hint:n.querySelector("."+PopupSliderCaptcha.CSS_CLASSES.hint),error:n.querySelector("."+PopupSliderCaptcha.CSS_CLASSES.error)}}bindEvents(){const{elements:t}=this;[[t.closeBtn,"click",()=>this.hide()],[t.refreshBtn,"click",()=>this.refresh()],[t.overlay,"click",i=>{i.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,i,s])=>{this.addEventListener(t,i,s)}),this.bindSliderEvents()}bindSliderEvents(){const{elements:t}=this,i={start:t=>this.handleStart(t)};[[t.btn,"mousedown",i.start],[t.btn,"touchstart",i.start],[t.sliderImg,"mousedown",i.start],[t.sliderImg,"touchstart",i.start]].forEach(([t,i,s,e])=>{this.addEventListener(t,i,s,e)})}addEventListener(t,i,s,e={}){t&&"function"==typeof s&&(t.addEventListener(i,s,e),this.eventListeners.push({element:t,event:i,handler:s,options:e}))}removeEventListener(t,i,s,e={}){t&&"function"==typeof s&&(t.removeEventListener(i,s,e),this.eventListeners=this.eventListeners.filter(e=>!(e.element===t&&e.event===i&&e.handler===s)))}removeAllEventListeners(){this.eventListeners.forEach(({element:t,event:i,handler:s,options:e})=>{try{t?.removeEventListener?.(i,s,e)}catch(t){}}),this.eventListeners.length=0}getDimensions(){if(!this.cachedDimensions){const{track:t,btn:i}=this.elements;this.cachedDimensions={trackWidth:t.offsetWidth,btnWidth:i.offsetWidth,get maxX(){return this.trackWidth-this.btnWidth}}}return this.cachedDimensions}getPosition(){const{maxX:t}=this.getDimensions(),i=this.state.currentX/t;return Math.round(i(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,this.boundHandleEnd=this.boundHandleEnd\|\|this.handleEnd.bind(this),document.addEventListener("mousemove",this.throttledHandleMove,{passive:!1}),document.addEventListener("touchmove",this.throttledHandleMove,{passive:!1}),document.addEventListener("mouseup",this.boundHandleEnd),document.addEventListener("touchend",this.boundHandleEnd))}handleMove(t){this.state.isDragging&&(t.preventDefault(),this.lastClientX=this.getClientX(t),this.rafId\|\|(this.rafId=requestAnimationFrame(()=>{const t=this.lastClientX-this.state.startX,{maxX:i}=this.getDimensions();this.state.currentX=Math.max(0,Math.min(t,i)),this.times.push({time:Date.now(),position:this.getPosition()}),this.updateSliderPosition(),this.rafId=null})))}handleEnd(){this.state.isDragging&&(document.removeEventListener("mousemove",this.throttledHandleMove),document.removeEventListener("touchmove",this.throttledHandleMove),document.removeEventListener("mouseup",this.boundHandleEnd),document.removeEventListener("touchend",this.boundHandleEnd),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 i=t?"all 0.3s ease":"none";requestAnimationFrame(()=>{const{btn:t,sliderImg:s}=this.elements;t.style.transition=s.style.transition=i})}updateUIState(t){const{elements:i}=this,s={dragging:()=>{i.hint.style.opacity="0",i.fingerAnimation.style.display="none"},success:()=>{Object.assign(i.btn.style,{background:"var(--sc-success)"}),Object.assign(i.icon.style,{color:"white"}),i.icon.textContent="✓"},fail:()=>{Object.assign(i.btn.style,{background:"var(--sc-danger)"}),Object.assign(i.icon.style,{color:"white"}),i.icon.textContent="✗"},reset:()=>{Object.assign(i.btn.style,{background:"#00C870"}),Object.assign(i.icon.style,{color:"white"}),i.icon.textContent="→",i.fingerAnimation.style.display="block",this.updateHintText("向右滑动完成验证","var(--sc-text-light)")},loading:()=>{i.hint.style.opacity="0",i.fingerAnimation.style.display="none",Object.assign(i.track.style,{pointerEvents:"none",opacity:"0.6"})}};s[t]&&requestAnimationFrame(()=>{s[t](),"loading"!==t&&Object.assign(i.track.style,{pointerEvents:"auto",opacity:"1"})})}updateHintText(t,i){requestAnimationFrame(()=>{Object.assign(this.elements.hint,{textContent:t}),Object.assign(this.elements.hint.style,{color:i,opacity:"1"})})}updateSliderPosition(){const{elements:t,options:i,state:s}=this,{maxX:e}=this.getDimensions(),a=s.currentX/e(i.width-i.sliderSize),n=s.currentX/e;requestAnimationFrame(()=>{t.btn.style.transform=`translate3d(${s.currentX}px, 0, 0)`,t.sliderImg.style.transform=`translate3d(${a}px, 0, 0)`,t.fingerAnimation.style.opacity=.8>n?"0.6":"0"})}show(){if(this.state.isVisible=!0,!this.elements.overlay){this.createElements(),this.bindEvents();const{track:t}=this.elements;t&&(t.style.height="48px",t.style.minHeight="48px",t.style.maxHeight="48px")}this.elements.overlay.style.display="flex",this.elements.overlay.style.transform="translate3d(0,0,0)",requestAnimationFrame(()=>{this.elements.overlay.classList.add("show"),this.elements.modal.classList.add("show"),this.preloadCaptcha()})}async preloadCaptcha(){try{this.showLoading();const[t]=await Promise.all([this.fetchCaptchaData(),this.preloadImages()]);this.captchaData=t,this.showCaptcha(),await this.renderCaptcha()}catch(t){this.handleError(PopupSliderCaptcha.ERROR_TYPES.CAPTCHA_DATA_ERROR,t.message,t)}}async makeRequest(t,i={}){this.abortController&&this.abortController.abort(),this.abortController=new AbortController;const s=await fetch(t,{method:"POST",headers:{"Content-Type":"application/json",...this.options.headers},body:JSON.stringify({canvasWidth:this.options.width,canvasHeight:this.options.height,timestamp:Date.now(),...this.options.requestData,...i}),signal:this.abortController.signal});if(!s.ok)throw Error(`HTTP ${s.status}: ${s.statusText}`);return s.json()}async fetchCaptchaData(){this.startTime=Date.now();const t=await this.makeRequest(this.options.apiUrl);if(!this.validateCaptchaData(t))throw Error("验证码数据格式错误");return t.data}preloadImages(){return Promise.all(["data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTE3LjY1LDYuMzVDMTYuMiw0LjkgMTQuMjEsNCAxMiw0QTgsOCAwIDAsMCA0LDEyQTgsOCAwIDAsMCAxMiwyMEMxNS43MywyMCAxOC44NCwxNy40NSAxOS43MywxNEgxNy42NUMxNi44MywxNi4zMyAxNC42MSwxOCAxMiwxOEE2LDYgMCAwLDEgNiwxMkE2LDYgMCAwLDEgMTIsNkMxMy42Niw2IDE1LjE0LDYuNjkgMTYuMjIsNy43OEwxMywxMUgyMFY0TDE3LjY1LDYuMzVaIiBmaWxsPSIjOTk5Ii8+Cjwvc3ZnPgo="].map(t=>new Promise(i=>{const s=new Image;s.onload=s.onerror=()=>i(),s.src=t})))}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)}handleRequestError(t){"AbortError"===t.name?this.handleError(PopupSliderCaptcha.ERROR_TYPES.TIMEOUT_ERROR,"请求被取消",t):t.message?.includes("Failed to fetch")\|\|t.message?.includes("NetworkError")?this.handleError(PopupSliderCaptcha.ERROR_TYPES.NETWORK_ERROR,"网络连接失败",t):this.handleError(PopupSliderCaptcha.ERROR_TYPES.CAPTCHA_DATA_ERROR,t.message,t)}handleError(t,i,s=null){const e={[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]\|\|i\|\|"未知错误";this.options.onError&&this.options.onError({type:t,message:e,originalError:s}),this.showError(e)}async loadCaptcha(){try{this.showLoading(),this.startTime=Date.now();const t=await this.makeRequest(this.options.apiUrl);if(!this.validateCaptchaData(t))throw Error("验证码数据格式错误");this.captchaData=t.data,this.showCaptcha(),await this.renderCaptcha()}catch(t){this.handleRequestError(t)}}validateCaptchaData(t){if(!t\|\|"object"!=typeof t)return!1;const i=t.data\|\|t;return["canvasSrc","blockSrc","canvasWidth","canvasHeight","blockWidth","blockHeight","blockY","nonceStr"].every(t=>{const s=i[t];return null!=s&&""!==s})}renderCaptcha(){return new Promise((t,i)=>{let s=!1;const e=[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(e).then(()=>{s\|\|(this.hideLoading(),t())}).catch(t=>{s\|\|(s=!0,this.handleError(PopupSliderCaptcha.ERROR_TYPES.IMAGE_LOAD_ERROR,"图片加载失败",t),i(t))})})}loadImageAsync(t,i,s){return new Promise((e,a)=>{if(this.imageCache.has(i)){const a=this.imageCache.get(i);return t.src=a.src,this.applyStyles(t,s),t.style.display="block",void e()}const n=this.safeSetTimeout(()=>{a(Error("图片加载超时"))},5e3),r=new Image;r.crossOrigin="anonymous",r.decoding="async",r.onload=function(){if(this.safeClearTimeout(n),"undefined"!=typeof OffscreenCanvas)try{const t=new OffscreenCanvas(r.width,r.height).getContext("2d");t.drawImage(r,0,0);const s=t.getImageData(0,0,r.width,r.height);this.imageCache.set(i,{src:r.src,imageData:s})}catch(t){this.imageCache.set(i,r.cloneNode())}else this.imageCache.set(i,r.cloneNode());t.src=r.src,this.applyStyles(t,s),t.style.display="block",e()}.bind(this),r.onerror=function(t){this.safeClearTimeout(n),a(t)}.bind(this),r.src=i})}applyStyles(t,i){Object.entries(i).forEach(([i,s])=>{t.style[i]="number"==typeof s?s+"px":s})}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"},error:{display:"none"}})}showError(t){this.hideLoading(),this.batchUpdateStyles({error:{display:"block",textContent:t}})}batchUpdateStyles(t){requestAnimationFrame(()=>{Object.entries(t).forEach(([t,i])=>{const s=this.elements[t];s&&Object.entries(i).forEach(([t,i])=>{"textContent"===t?s.textContent=i:s.style[t]=i})})})}async verify(){if(this.captchaData)try{const t=await this.makeRequest(this.options.verifyUrl,{loginVo:{nonceStr:this.captchaData.nonceStr,value:this.getPosition()},dragEventList:[...this.times],...this.options.verifyData});this.isVerifySuccess(t)?this.onVerifySuccess(t.data\|\|t.result):this.onVerifyFail(t.message\|\|t.msg\|\|"验证失败，请重试！")}catch(t){this.handleRequestError(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 i=this.dragStartTime?Date.now()-this.dragStartTime:Date.now()-this.startTime,s=`验证成功！耗时：${(i/1e3).toFixed(2)}s`;this.updateUIState("success"),this.showFloatingTime(s,"success"),this.safeSetTimeout(()=>{this.options.onSuccess?.({ticket:t,timestamp:Date.now(),duration:i}),this.hide()},2e3)}showFloatingTime(t,i="success"){const{elements:s}=this;s.floatingTime.textContent=t,s.floatingTime.className="slider-captcha-floating-time "+i,this.safeSetTimeout(()=>s.floatingTime.classList.add("show"),100),this.safeSetTimeout(()=>{s.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="translate3d(0px, 0, 0)",this.elements.sliderImg.style.transform="translate3d(0px, 0, 0)",this.updateUIState("reset"),this.elements.error.style.display="none"})}refresh(){try{this.reset(),this.state.retryCount=0,this.loadCaptcha()}catch(t){}}safeSetTimeout(t,i){const s=setTimeout(()=>{this.timers.delete(s),t()},i);return this.timers.add(s),s}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,i){let s=0;return(...e)=>{const a=Date.now();if(a-s>=i)return s=a,t.apply(this,e)}}destroy(){try{this.state.isDragging&&(document.removeEventListener("mousemove",this.throttledHandleMove),document.removeEventListener("touchmove",this.throttledHandleMove),this.boundHandleEnd&&(document.removeEventListener("mouseup",this.boundHandleEnd),document.removeEventListener("touchend",this.boundHandleEnd)),this.state.isDragging=!1),this.abortController&&(this.abortController.abort(),this.abortController=null),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,this.elements={},this.state={},this.times=[],this.eventListeners=[],this.timers.clear(),this.throttledHandleMove=null,this.boundHandleEnd=null,this.options.onDestroy&&this.options.onDestroy(),this.options=null}catch(t){}}static create(t){return new PopupSliderCaptcha(t)}static show(t){const i=new PopupSliderCaptcha(t);return i.show(),i}}"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};
1	+ class PopupSliderCaptcha{static DEFAULTS={width:320,height:200,sliderSize:50,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:#666;--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);will-change:opacity}.slider-captcha-overlay.show{opacity:1}.slider-captcha-modal{background:#fff;border-radius:var(--sc-radius);padding:16px 16px 5px;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);will-change:transform,opacity}.slider-captcha-modal.show{transform:scale(1) translateY(-10%);opacity:1}.slider-captcha-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px;}.slider-captcha-container{display:flex;align-items:center;position:relative;border-radius:4px;overflow:hidden;margin-bottom:12px;background:#837a7a;justify-content:center}.slider-captcha-track{width:100%;height:48px;min-height:48px;max-height:48px;line-height:48px;background:#e8f5e9;border: 1px solid rgba(0,200,112,0.15);border-radius:40px;position:relative;margin-bottom:15px;overflow:hidden;box-sizing:border-box;flex-shrink:0}.slider-captcha-btn{width:40px;height:40px;background: #00C870;border-radius:50%;position:absolute;top:3px;left:3px;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;will-change:transform}.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;line-height:12px;white-space:nowrap;opacity:0;pointer-events:none;z-index:10;transition:all var(--sc-transition);background:#fff;padding:4px 15px;border-radius:10px;will-change:transform,opacity}.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:none}.slider-captcha-piece{position:absolute;top:0;left:0;cursor:pointer;transition:none;z-index:2;will-change:transform;display:none}.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:opacity var(--sc-transition);white-space:nowrap}.slider-captcha-header-buttons{display:flex;align-items:center}"}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),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.isInitialized=!1,this.throttledHandleMove=this.throttle(t=>this.handleMove(t),this.options.throttleDelay),this.lazyInit()}lazyInit(){this.injectStyles(),this.isInitialized=!0}createInitialState(){return{isVisible:!1,isDragging:!1,currentX:0,startX:0,retryCount:0,isLoading:!1}}normalizeUrl(t,i){return t&&i&&!/^https?:\/\//.test(t)?(i.endsWith("/")?i:i+"/")+(t.startsWith("/")?t.slice(1):t):t}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{options:t}=this,i=t.width,s=t.height,e=`\n <div class="${PopupSliderCaptcha.CSS_CLASSES.overlay}">\n <div class="${PopupSliderCaptcha.CSS_CLASSES.modal}">\n <div class="${PopupSliderCaptcha.CSS_CLASSES.header}">\n <h3 class="slider-captcha-title">安全验证</h3>\n <div class="slider-captcha-header-buttons">\n <button class="slider-captcha-refresh" title="刷新">\n <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>\n </button>\n <button class="slider-captcha-close" title="关闭"></button>\n </div>\n </div>\n <div class="${PopupSliderCaptcha.CSS_CLASSES.container}" style="width:${i}px;height:${s}px;display:none;">\n <img class="slider-captcha-bg" alt="" style="display:none;">\n <img class="slider-captcha-piece" alt="" style="display:none;">\n <div class="${PopupSliderCaptcha.CSS_CLASSES.loading}">加载中...</div>\n <div class="slider-captcha-floating-time"></div>\n </div>\n <div class="${PopupSliderCaptcha.CSS_CLASSES.track}">\n <div class="${PopupSliderCaptcha.CSS_CLASSES.btn}">\n <div class="slider-captcha-icon">→</div>\n </div>\n <div class="${PopupSliderCaptcha.CSS_CLASSES.hint}">向右滑动完成验证</div>\n </div>\n <div class="${PopupSliderCaptcha.CSS_CLASSES.error}"></div>\n </div>\n </div>\n `,a=document.createElement("div");a.innerHTML=e.trim();const n=a.firstElementChild;document.body.appendChild(n),this.elements={overlay:n,modal:n.querySelector("."+PopupSliderCaptcha.CSS_CLASSES.modal),header:n.querySelector("."+PopupSliderCaptcha.CSS_CLASSES.header),title:n.querySelector(".slider-captcha-title"),closeBtn:n.querySelector(".slider-captcha-close"),refreshBtn:n.querySelector(".slider-captcha-refresh"),container:n.querySelector("."+PopupSliderCaptcha.CSS_CLASSES.container),backgroundImg:n.querySelector(".slider-captcha-bg"),sliderImg:n.querySelector(".slider-captcha-piece"),loadingText:n.querySelector("."+PopupSliderCaptcha.CSS_CLASSES.loading),floatingTime:n.querySelector(".slider-captcha-floating-time"),track:n.querySelector("."+PopupSliderCaptcha.CSS_CLASSES.track),btn:n.querySelector("."+PopupSliderCaptcha.CSS_CLASSES.btn),icon:n.querySelector(".slider-captcha-icon"),hint:n.querySelector("."+PopupSliderCaptcha.CSS_CLASSES.hint),error:n.querySelector("."+PopupSliderCaptcha.CSS_CLASSES.error)}}bindEvents(){const{elements:t}=this;[[t.closeBtn,"click",()=>this.hide()],[t.refreshBtn,"click",()=>this.refresh()],[t.overlay,"click",i=>{i.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,i,s])=>{this.addEventListener(t,i,s)}),this.bindSliderEvents()}bindSliderEvents(){const{elements:t}=this,i={start:t=>this.handleStart(t)};[[t.btn,"mousedown",i.start],[t.btn,"touchstart",i.start],[t.sliderImg,"mousedown",i.start],[t.sliderImg,"touchstart",i.start]].forEach(([t,i,s,e])=>{this.addEventListener(t,i,s,e)})}addEventListener(t,i,s,e={}){t&&"function"==typeof s&&(t.addEventListener(i,s,e),this.eventListeners.push({element:t,event:i,handler:s,options:e}))}removeEventListener(t,i,s,e={}){t&&"function"==typeof s&&(t.removeEventListener(i,s,e),this.eventListeners=this.eventListeners.filter(e=>!(e.element===t&&e.event===i&&e.handler===s)))}removeAllEventListeners(){this.eventListeners.forEach(({element:t,event:i,handler:s,options:e})=>{try{t?.removeEventListener?.(i,s,e)}catch(t){}}),this.eventListeners.length=0}getDimensions(){if(!this.cachedDimensions){const{track:t,btn:i}=this.elements;this.cachedDimensions={trackWidth:t.offsetWidth,btnWidth:i.offsetWidth,get maxX(){return this.trackWidth-this.btnWidth}}}return this.cachedDimensions}getPosition(){const{maxX:t}=this.getDimensions(),i=this.state.currentX/t;return Math.round(i(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,this.boundHandleEnd=this.boundHandleEnd\|\|this.handleEnd.bind(this),document.addEventListener("mousemove",this.throttledHandleMove,{passive:!1}),document.addEventListener("touchmove",this.throttledHandleMove,{passive:!1}),document.addEventListener("mouseup",this.boundHandleEnd),document.addEventListener("touchend",this.boundHandleEnd))}handleMove(t){this.state.isDragging&&(t.preventDefault(),this.lastClientX=this.getClientX(t),this.rafId\|\|(this.rafId=requestAnimationFrame(()=>{const t=this.lastClientX-this.state.startX,{maxX:i}=this.getDimensions();this.state.currentX=Math.max(0,Math.min(t,i)),this.times.push({time:Date.now(),position:this.getPosition()}),this.updateSliderPosition(),this.rafId=null})))}handleEnd(){this.state.isDragging&&(document.removeEventListener("mousemove",this.throttledHandleMove),document.removeEventListener("touchmove",this.throttledHandleMove),document.removeEventListener("mouseup",this.boundHandleEnd),document.removeEventListener("touchend",this.boundHandleEnd),this.times.push({time:Date.now(),position:this.getPosition()}),this.state.isDragging=!1,this.rafId&&(cancelAnimationFrame(this.rafId),this.rafId=null),this.verify())}handleVisibilityChange(){}getClientX=t=>t.type.includes("touch")?t.touches[0].clientX:t.clientX;setTransition(t){const i=t?"all 0.3s ease":"none";requestAnimationFrame(()=>{const{btn:t,sliderImg:s}=this.elements;t.style.transition=s.style.transition=i})}updateUIState(t){const{elements:i}=this,s={dragging:()=>{i.hint.style.opacity="0"},success:()=>{Object.assign(i.btn.style,{background:"var(--sc-success)"}),Object.assign(i.icon.style,{color:"white"}),i.icon.textContent="✓"},fail:()=>{Object.assign(i.btn.style,{background:"var(--sc-danger)"}),Object.assign(i.icon.style,{color:"white"}),i.icon.textContent="✗"},reset:()=>{Object.assign(i.btn.style,{background:"#00C870"}),Object.assign(i.icon.style,{color:"white"}),i.icon.textContent="→",this.updateHintText("向右滑动完成验证","var(--sc-text-light)")},loading:()=>{i.hint.style.opacity="0",Object.assign(i.track.style,{pointerEvents:"none",opacity:"0.6"})}};s[t]&&requestAnimationFrame(()=>{s[t](),"loading"!==t&&Object.assign(i.track.style,{pointerEvents:"auto",opacity:"1"})})}updateHintText(t,i){requestAnimationFrame(()=>{Object.assign(this.elements.hint,{textContent:t}),Object.assign(this.elements.hint.style,{color:i,opacity:"1"})})}updateSliderPosition(){const{elements:t,options:i,state:s}=this,{maxX:e}=this.getDimensions(),a=s.currentX/e(i.width-i.sliderSize);requestAnimationFrame(()=>{t.btn.style.transform=`translate3d(${s.currentX}px, 0, 0)`,t.sliderImg.style.transform=`translate3d(${a}px, 0, 0)`})}show(){if(this.state.isVisible=!0,!this.elements.overlay){this.createElements(),this.bindEvents();const{track:t}=this.elements;t&&(t.style.height="48px",t.style.minHeight="48px",t.style.maxHeight="48px")}this.elements.overlay.style.display="flex",this.elements.overlay.style.transform="translate3d(0,0,0)",requestAnimationFrame(()=>{this.elements.overlay.classList.add("show"),this.elements.modal.classList.add("show"),this.preloadCaptcha()})}async preloadCaptcha(){try{this.showLoading();const[t]=await Promise.all([this.fetchCaptchaData(),this.preloadImages()]);this.captchaData=t,this.showCaptcha(),await this.renderCaptcha()}catch(t){this.handleError(PopupSliderCaptcha.ERROR_TYPES.CAPTCHA_DATA_ERROR,t.message,t)}}async makeRequest(t,i={}){this.abortController&&this.abortController.abort(),this.abortController=new AbortController;const s=await fetch(t,{method:"POST",headers:{"Content-Type":"application/json",...this.options.headers},body:JSON.stringify({canvasWidth:this.options.width,canvasHeight:this.options.height,blockHeight:this.options.sliderSize,blockWidth:this.options.sliderSize,timestamp:Date.now(),...this.options.requestData,...i}),signal:this.abortController.signal});if(!s.ok)throw Error(`HTTP ${s.status}: ${s.statusText}`);return s.json()}async fetchCaptchaData(){this.startTime=Date.now();const t=await this.makeRequest(this.options.apiUrl);if(!this.validateCaptchaData(t))throw Error("验证码数据格式错误");return t.data}preloadImages(){return Promise.all(["data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTE3LjY1LDYuMzVDMTYuMiw0LjkgMTQuMjEsNCAxMiw0QTgsOCAwIDAsMCA0LDEyQTgsOCAwIDAsMCAxMiwyMEMxNS43MywyMCAxOC44NCwxNy40NSAxOS43MywxNEgxNy42NUMxNi44MywxNi4zMyAxNC42MSwxOCAxMiwxOEE2LDYgMCAwLDEgNiwxMkE2LDYgMCAwLDEgMTIsNkMxMy42Niw2IDE1LjE0LDYuNjkgMTYuMjIsNy43OEwxMywxMUgyMFY0TDE3LjY1LDYuMzVaIiBmaWxsPSIjOTk5Ii8+Cjwvc3ZnPgo="].map(t=>new Promise(i=>{const s=new Image;s.onload=s.onerror=()=>i(),s.src=t})))}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)}handleRequestError(t){"AbortError"===t.name?this.handleError(PopupSliderCaptcha.ERROR_TYPES.TIMEOUT_ERROR,"请求被取消",t):t.message?.includes("Failed to fetch")\|\|t.message?.includes("NetworkError")?this.handleError(PopupSliderCaptcha.ERROR_TYPES.NETWORK_ERROR,"网络连接失败",t):this.handleError(PopupSliderCaptcha.ERROR_TYPES.CAPTCHA_DATA_ERROR,t.message,t)}handleError(t,i,s=null){const e={[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]\|\|i\|\|"未知错误";this.options.onError&&this.options.onError({type:t,message:e,originalError:s}),this.showError(e)}async loadCaptcha(){try{this.showLoading(),this.startTime=Date.now();const t=await this.makeRequest(this.options.apiUrl);if(!this.validateCaptchaData(t))throw Error("验证码数据格式错误");this.captchaData=t.data,this.showCaptcha(),await this.renderCaptcha()}catch(t){this.handleRequestError(t)}}validateCaptchaData(t){if(!t\|\|"object"!=typeof t)return!1;const i=t.data\|\|t;return["canvasSrc","blockSrc","canvasWidth","canvasHeight","blockWidth","blockHeight","blockY","nonceStr"].every(t=>{const s=i[t];return null!=s&&""!==s})}renderCaptcha(){return new Promise((t,i)=>{let s=!1;const e=[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(e).then(()=>{s\|\|(this.hideLoading(),t())}).catch(t=>{s\|\|(s=!0,this.handleError(PopupSliderCaptcha.ERROR_TYPES.IMAGE_LOAD_ERROR,"图片加载失败",t),i(t))})})}loadImageAsync(t,i,s){return new Promise((e,a)=>{if(this.imageCache.has(i)){const a=this.imageCache.get(i);return t.src=a.src,this.applyStyles(t,s),t.style.display="block",void e()}const n=this.safeSetTimeout(()=>{a(Error("图片加载超时"))},5e3),r=new Image;r.crossOrigin="anonymous",r.decoding="async",r.onload=function(){if(this.safeClearTimeout(n),"undefined"!=typeof OffscreenCanvas)try{const t=new OffscreenCanvas(r.width,r.height).getContext("2d");t.drawImage(r,0,0);const s=t.getImageData(0,0,r.width,r.height);this.imageCache.set(i,{src:r.src,imageData:s})}catch(t){this.imageCache.set(i,r.cloneNode())}else this.imageCache.set(i,r.cloneNode());t.src=r.src,this.applyStyles(t,s),t.style.display="block",e()}.bind(this),r.onerror=function(t){this.safeClearTimeout(n),a(t)}.bind(this),r.src=i})}applyStyles(t,i){Object.entries(i).forEach(([i,s])=>{t.style[i]="number"==typeof s?s+"px":s})}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"},error:{display:"none"}})}showError(t){this.hideLoading(),this.batchUpdateStyles({error:{display:"block",textContent:t}})}batchUpdateStyles(t){requestAnimationFrame(()=>{Object.entries(t).forEach(([t,i])=>{const s=this.elements[t];s&&Object.entries(i).forEach(([t,i])=>{"textContent"===t?s.textContent=i:s.style[t]=i})})})}async verify(){if(this.captchaData)try{const t=await this.makeRequest(this.options.verifyUrl,{loginVo:{nonceStr:this.captchaData.nonceStr,value:this.getPosition()},dragEventList:[...this.times],...this.options.verifyData});this.isVerifySuccess(t)?this.onVerifySuccess(t.data\|\|t.result):this.onVerifyFail(t.message\|\|t.msg\|\|"验证失败，请重试！")}catch(t){this.handleRequestError(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 i=this.dragStartTime?Date.now()-this.dragStartTime:Date.now()-this.startTime,s=`验证成功！耗时：${(i/1e3).toFixed(2)}s`;this.updateUIState("success"),this.showFloatingTime(s,"success"),this.safeSetTimeout(()=>{this.options.onSuccess?.({ticket:t,timestamp:Date.now(),duration:i}),this.hide()},2e3)}showFloatingTime(t,i="success"){const{elements:s}=this;s.floatingTime.textContent=t,s.floatingTime.className="slider-captcha-floating-time "+i,this.safeSetTimeout(()=>s.floatingTime.classList.add("show"),100),this.safeSetTimeout(()=>{s.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="translate3d(0px, 0, 0)",this.elements.sliderImg.style.transform="translate3d(0px, 0, 0)",this.updateUIState("reset"),this.elements.error.style.display="none"})}refresh(){try{this.reset(),this.state.retryCount=0,this.loadCaptcha()}catch(t){}}safeSetTimeout(t,i){const s=setTimeout(()=>{this.timers.delete(s),t()},i);return this.timers.add(s),s}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,i){let s=0;return(...e)=>{const a=Date.now();if(a-s>=i)return s=a,t.apply(this,e)}}destroy(){try{this.state.isDragging&&(document.removeEventListener("mousemove",this.throttledHandleMove),document.removeEventListener("touchmove",this.throttledHandleMove),this.boundHandleEnd&&(document.removeEventListener("mouseup",this.boundHandleEnd),document.removeEventListener("touchend",this.boundHandleEnd)),this.state.isDragging=!1),this.abortController&&(this.abortController.abort(),this.abortController=null),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,this.elements={},this.state={},this.times=[],this.eventListeners=[],this.timers.clear(),this.throttledHandleMove=null,this.boundHandleEnd=null,this.options.onDestroy&&this.options.onDestroy(),this.options=null}catch(t){}}static create(t){return new PopupSliderCaptcha(t)}static show(t){const i=new PopupSliderCaptcha(t);return i.show(),i}}"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};

package/dist/slider-captcha.min.js CHANGED Viewed

	@@ -1 +1 @@
1	- !function(t,i){"object"==typeof exports&&"undefined"!=typeof module?module.exports=i():"function"==typeof define&&define.amd?define(i):(t="undefined"!=typeof globalThis?globalThis:t\|\|self).SliderCaptcha=i()}(this,function(){"use strict";class PopupSliderCaptcha{static DEFAULTS={width:320,height:240,sliderSize:40,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:#666;--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);will-change:opacity}.slider-captcha-overlay.show{opacity:1}.slider-captcha-modal{background:#fff;border-radius:var(--sc-radius);padding:16px 16px 5px;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);will-change:transform,opacity}.slider-captcha-modal.show{transform:scale(1) translateY(-10%);opacity:1}.slider-captcha-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px;}.slider-captcha-container{display:flex;align-items:center;position:relative;border-radius:4px;overflow:hidden;margin-bottom:12px;background:#837a7a;justify-content:center}.slider-captcha-track{width:100%;height:48px;min-height:48px;max-height:48px;line-height:48px;background:#e8f5e9;border: 1px solid rgba(0,200,112,0.15);border-radius:40px;position:relative;margin-bottom:15px;overflow:hidden;box-sizing:border-box;flex-shrink:0}.slider-captcha-btn{width:40px;height:40px;background: #00C870;border-radius:50%;position:absolute;top:4px;left:4px;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;will-change:transform}.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;line-height:12px;white-space:nowrap;opacity:0;pointer-events:none;z-index:10;transition:all var(--sc-transition);background:#fff;padding:4px 15px;border-radius:10px;will-change:transform,opacity}.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:none}.slider-captcha-piece{position:absolute;top:0;left:0;cursor:pointer;transition:none;z-index:2;will-change:transform;display:none}.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;will-change:left,opacity,transform;white-space:nowrap}.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:opacity var(--sc-transition);white-space:nowrap}.slider-captcha-header-buttons{display:flex;align-items:center}@keyframes fingerSlide{0%{left:10px;opacity:.6;transform:translateY(-50%) scale(1)}50%{opacity:1;transform:translateY(-50%) scale(1.1)}100%{left:calc(50% - 10px);opacity:.6;transform:translateY(-50%) scale(1)}}"}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),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.isInitialized=!1,this.throttledHandleMove=this.throttle(t=>this.handleMove(t),this.options.throttleDelay),this.lazyInit()}lazyInit(){this.injectStyles(),this.isInitialized=!0}createInitialState(){return{isVisible:!1,isDragging:!1,currentX:0,startX:0,retryCount:0,isLoading:!1}}normalizeUrl(t,i){return t&&i&&!/^https?:\/\//.test(t)?(i.endsWith("/")?i:i+"/")+(t.startsWith("/")?t.slice(1):t):t}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{options:t}=this,i=t.width,s=t.height,e=`\n <div class="${PopupSliderCaptcha.CSS_CLASSES.overlay}">\n <div class="${PopupSliderCaptcha.CSS_CLASSES.modal}">\n <div class="${PopupSliderCaptcha.CSS_CLASSES.header}">\n <h3 class="slider-captcha-title">安全验证</h3>\n <div class="slider-captcha-header-buttons">\n <button class="slider-captcha-refresh" title="刷新">\n <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>\n </button>\n <button class="slider-captcha-close" title="关闭"></button>\n </div>\n </div>\n <div class="${PopupSliderCaptcha.CSS_CLASSES.container}" style="width:${i}px;height:${s}px;display:none;">\n <img class="slider-captcha-bg" alt="" style="display:none;">\n <img class="slider-captcha-piece" alt="" style="display:none;">\n <div class="${PopupSliderCaptcha.CSS_CLASSES.loading}">加载中...</div>\n <div class="slider-captcha-floating-time"></div>\n </div>\n <div class="${PopupSliderCaptcha.CSS_CLASSES.track}">\n <div class="slider-captcha-finger">👉</div>\n <div class="${PopupSliderCaptcha.CSS_CLASSES.btn}">\n <div class="slider-captcha-icon">→</div>\n </div>\n <div class="${PopupSliderCaptcha.CSS_CLASSES.hint}">向右滑动完成验证</div>\n </div>\n <div class="${PopupSliderCaptcha.CSS_CLASSES.error}"></div>\n </div>\n </div>\n `,a=document.createElement("div");a.innerHTML=e.trim();const n=a.firstElementChild;document.body.appendChild(n),this.elements={overlay:n,modal:n.querySelector("."+PopupSliderCaptcha.CSS_CLASSES.modal),header:n.querySelector("."+PopupSliderCaptcha.CSS_CLASSES.header),title:n.querySelector(".slider-captcha-title"),closeBtn:n.querySelector(".slider-captcha-close"),refreshBtn:n.querySelector(".slider-captcha-refresh"),container:n.querySelector("."+PopupSliderCaptcha.CSS_CLASSES.container),backgroundImg:n.querySelector(".slider-captcha-bg"),sliderImg:n.querySelector(".slider-captcha-piece"),loadingText:n.querySelector("."+PopupSliderCaptcha.CSS_CLASSES.loading),floatingTime:n.querySelector(".slider-captcha-floating-time"),track:n.querySelector("."+PopupSliderCaptcha.CSS_CLASSES.track),fingerAnimation:n.querySelector(".slider-captcha-finger"),btn:n.querySelector("."+PopupSliderCaptcha.CSS_CLASSES.btn),icon:n.querySelector(".slider-captcha-icon"),hint:n.querySelector("."+PopupSliderCaptcha.CSS_CLASSES.hint),error:n.querySelector("."+PopupSliderCaptcha.CSS_CLASSES.error)}}bindEvents(){const{elements:t}=this;[[t.closeBtn,"click",()=>this.hide()],[t.refreshBtn,"click",()=>this.refresh()],[t.overlay,"click",i=>{i.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,i,s])=>{this.addEventListener(t,i,s)}),this.bindSliderEvents()}bindSliderEvents(){const{elements:t}=this,i={start:t=>this.handleStart(t)};[[t.btn,"mousedown",i.start],[t.btn,"touchstart",i.start],[t.sliderImg,"mousedown",i.start],[t.sliderImg,"touchstart",i.start]].forEach(([t,i,s,e])=>{this.addEventListener(t,i,s,e)})}addEventListener(t,i,s,e={}){t&&"function"==typeof s&&(t.addEventListener(i,s,e),this.eventListeners.push({element:t,event:i,handler:s,options:e}))}removeEventListener(t,i,s,e={}){t&&"function"==typeof s&&(t.removeEventListener(i,s,e),this.eventListeners=this.eventListeners.filter(e=>!(e.element===t&&e.event===i&&e.handler===s)))}removeAllEventListeners(){this.eventListeners.forEach(({element:t,event:i,handler:s,options:e})=>{try{t?.removeEventListener?.(i,s,e)}catch(t){}}),this.eventListeners.length=0}getDimensions(){if(!this.cachedDimensions){const{track:t,btn:i}=this.elements;this.cachedDimensions={trackWidth:t.offsetWidth,btnWidth:i.offsetWidth,get maxX(){return this.trackWidth-this.btnWidth}}}return this.cachedDimensions}getPosition(){const{maxX:t}=this.getDimensions(),i=this.state.currentX/t;return Math.round(i(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,this.boundHandleEnd=this.boundHandleEnd\|\|this.handleEnd.bind(this),document.addEventListener("mousemove",this.throttledHandleMove,{passive:!1}),document.addEventListener("touchmove",this.throttledHandleMove,{passive:!1}),document.addEventListener("mouseup",this.boundHandleEnd),document.addEventListener("touchend",this.boundHandleEnd))}handleMove(t){this.state.isDragging&&(t.preventDefault(),this.lastClientX=this.getClientX(t),this.rafId\|\|(this.rafId=requestAnimationFrame(()=>{const t=this.lastClientX-this.state.startX,{maxX:i}=this.getDimensions();this.state.currentX=Math.max(0,Math.min(t,i)),this.times.push({time:Date.now(),position:this.getPosition()}),this.updateSliderPosition(),this.rafId=null})))}handleEnd(){this.state.isDragging&&(document.removeEventListener("mousemove",this.throttledHandleMove),document.removeEventListener("touchmove",this.throttledHandleMove),document.removeEventListener("mouseup",this.boundHandleEnd),document.removeEventListener("touchend",this.boundHandleEnd),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 i=t?"all 0.3s ease":"none";requestAnimationFrame(()=>{const{btn:t,sliderImg:s}=this.elements;t.style.transition=s.style.transition=i})}updateUIState(t){const{elements:i}=this,s={dragging:()=>{i.hint.style.opacity="0",i.fingerAnimation.style.display="none"},success:()=>{Object.assign(i.btn.style,{background:"var(--sc-success)"}),Object.assign(i.icon.style,{color:"white"}),i.icon.textContent="✓"},fail:()=>{Object.assign(i.btn.style,{background:"var(--sc-danger)"}),Object.assign(i.icon.style,{color:"white"}),i.icon.textContent="✗"},reset:()=>{Object.assign(i.btn.style,{background:"#00C870"}),Object.assign(i.icon.style,{color:"white"}),i.icon.textContent="→",i.fingerAnimation.style.display="block",this.updateHintText("向右滑动完成验证","var(--sc-text-light)")},loading:()=>{i.hint.style.opacity="0",i.fingerAnimation.style.display="none",Object.assign(i.track.style,{pointerEvents:"none",opacity:"0.6"})}};s[t]&&requestAnimationFrame(()=>{s[t](),"loading"!==t&&Object.assign(i.track.style,{pointerEvents:"auto",opacity:"1"})})}updateHintText(t,i){requestAnimationFrame(()=>{Object.assign(this.elements.hint,{textContent:t}),Object.assign(this.elements.hint.style,{color:i,opacity:"1"})})}updateSliderPosition(){const{elements:t,options:i,state:s}=this,{maxX:e}=this.getDimensions(),a=s.currentX/e(i.width-i.sliderSize),n=s.currentX/e;requestAnimationFrame(()=>{t.btn.style.transform=`translate3d(${s.currentX}px, 0, 0)`,t.sliderImg.style.transform=`translate3d(${a}px, 0, 0)`,t.fingerAnimation.style.opacity=.8>n?"0.6":"0"})}show(){if(this.state.isVisible=!0,!this.elements.overlay){this.createElements(),this.bindEvents();const{track:t}=this.elements;t&&(t.style.height="48px",t.style.minHeight="48px",t.style.maxHeight="48px")}this.elements.overlay.style.display="flex",this.elements.overlay.style.transform="translate3d(0,0,0)",requestAnimationFrame(()=>{this.elements.overlay.classList.add("show"),this.elements.modal.classList.add("show"),this.preloadCaptcha()})}async preloadCaptcha(){try{this.showLoading();const[t]=await Promise.all([this.fetchCaptchaData(),this.preloadImages()]);this.captchaData=t,this.showCaptcha(),await this.renderCaptcha()}catch(t){this.handleError(PopupSliderCaptcha.ERROR_TYPES.CAPTCHA_DATA_ERROR,t.message,t)}}async makeRequest(t,i={}){this.abortController&&this.abortController.abort(),this.abortController=new AbortController;const s=await fetch(t,{method:"POST",headers:{"Content-Type":"application/json",...this.options.headers},body:JSON.stringify({canvasWidth:this.options.width,canvasHeight:this.options.height,timestamp:Date.now(),...this.options.requestData,...i}),signal:this.abortController.signal});if(!s.ok)throw Error(`HTTP ${s.status}: ${s.statusText}`);return s.json()}async fetchCaptchaData(){this.startTime=Date.now();const t=await this.makeRequest(this.options.apiUrl);if(!this.validateCaptchaData(t))throw Error("验证码数据格式错误");return t.data}preloadImages(){return Promise.all(["data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTE3LjY1LDYuMzVDMTYuMiw0LjkgMTQuMjEsNCAxMiw0QTgsOCAwIDAsMCA0LDEyQTgsOCAwIDAsMCAxMiwyMEMxNS43MywyMCAxOC44NCwxNy40NSAxOS43MywxNEgxNy42NUMxNi44MywxNi4zMyAxNC42MSwxOCAxMiwxOEE2LDYgMCAwLDEgNiwxMkE2LDYgMCAwLDEgMTIsNkMxMy42Niw2IDE1LjE0LDYuNjkgMTYuMjIsNy43OEwxMywxMUgyMFY0TDE3LjY1LDYuMzVaIiBmaWxsPSIjOTk5Ii8+Cjwvc3ZnPgo="].map(t=>new Promise(i=>{const s=new Image;s.onload=s.onerror=()=>i(),s.src=t})))}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)}handleRequestError(t){"AbortError"===t.name?this.handleError(PopupSliderCaptcha.ERROR_TYPES.TIMEOUT_ERROR,"请求被取消",t):t.message?.includes("Failed to fetch")\|\|t.message?.includes("NetworkError")?this.handleError(PopupSliderCaptcha.ERROR_TYPES.NETWORK_ERROR,"网络连接失败",t):this.handleError(PopupSliderCaptcha.ERROR_TYPES.CAPTCHA_DATA_ERROR,t.message,t)}handleError(t,i,s=null){const e={[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]\|\|i\|\|"未知错误";this.options.onError&&this.options.onError({type:t,message:e,originalError:s}),this.showError(e)}async loadCaptcha(){try{this.showLoading(),this.startTime=Date.now();const t=await this.makeRequest(this.options.apiUrl);if(!this.validateCaptchaData(t))throw Error("验证码数据格式错误");this.captchaData=t.data,this.showCaptcha(),await this.renderCaptcha()}catch(t){this.handleRequestError(t)}}validateCaptchaData(t){if(!t\|\|"object"!=typeof t)return!1;const i=t.data\|\|t;return["canvasSrc","blockSrc","canvasWidth","canvasHeight","blockWidth","blockHeight","blockY","nonceStr"].every(t=>{const s=i[t];return null!=s&&""!==s})}renderCaptcha(){return new Promise((t,i)=>{let s=!1;const e=[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(e).then(()=>{s\|\|(this.hideLoading(),t())}).catch(t=>{s\|\|(s=!0,this.handleError(PopupSliderCaptcha.ERROR_TYPES.IMAGE_LOAD_ERROR,"图片加载失败",t),i(t))})})}loadImageAsync(t,i,s){return new Promise((e,a)=>{if(this.imageCache.has(i)){const a=this.imageCache.get(i);return t.src=a.src,this.applyStyles(t,s),t.style.display="block",void e()}const n=this.safeSetTimeout(()=>{a(Error("图片加载超时"))},5e3),r=new Image;r.crossOrigin="anonymous",r.decoding="async",r.onload=function(){if(this.safeClearTimeout(n),"undefined"!=typeof OffscreenCanvas)try{const t=new OffscreenCanvas(r.width,r.height).getContext("2d");t.drawImage(r,0,0);const s=t.getImageData(0,0,r.width,r.height);this.imageCache.set(i,{src:r.src,imageData:s})}catch(t){this.imageCache.set(i,r.cloneNode())}else this.imageCache.set(i,r.cloneNode());t.src=r.src,this.applyStyles(t,s),t.style.display="block",e()}.bind(this),r.onerror=function(t){this.safeClearTimeout(n),a(t)}.bind(this),r.src=i})}applyStyles(t,i){Object.entries(i).forEach(([i,s])=>{t.style[i]="number"==typeof s?s+"px":s})}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"},error:{display:"none"}})}showError(t){this.hideLoading(),this.batchUpdateStyles({error:{display:"block",textContent:t}})}batchUpdateStyles(t){requestAnimationFrame(()=>{Object.entries(t).forEach(([t,i])=>{const s=this.elements[t];s&&Object.entries(i).forEach(([t,i])=>{"textContent"===t?s.textContent=i:s.style[t]=i})})})}async verify(){if(this.captchaData)try{const t=await this.makeRequest(this.options.verifyUrl,{loginVo:{nonceStr:this.captchaData.nonceStr,value:this.getPosition()},dragEventList:[...this.times],...this.options.verifyData});this.isVerifySuccess(t)?this.onVerifySuccess(t.data\|\|t.result):this.onVerifyFail(t.message\|\|t.msg\|\|"验证失败，请重试！")}catch(t){this.handleRequestError(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 i=this.dragStartTime?Date.now()-this.dragStartTime:Date.now()-this.startTime,s=`验证成功！耗时：${(i/1e3).toFixed(2)}s`;this.updateUIState("success"),this.showFloatingTime(s,"success"),this.safeSetTimeout(()=>{this.options.onSuccess?.({ticket:t,timestamp:Date.now(),duration:i}),this.hide()},2e3)}showFloatingTime(t,i="success"){const{elements:s}=this;s.floatingTime.textContent=t,s.floatingTime.className="slider-captcha-floating-time "+i,this.safeSetTimeout(()=>s.floatingTime.classList.add("show"),100),this.safeSetTimeout(()=>{s.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="translate3d(0px, 0, 0)",this.elements.sliderImg.style.transform="translate3d(0px, 0, 0)",this.updateUIState("reset"),this.elements.error.style.display="none"})}refresh(){try{this.reset(),this.state.retryCount=0,this.loadCaptcha()}catch(t){}}safeSetTimeout(t,i){const s=setTimeout(()=>{this.timers.delete(s),t()},i);return this.timers.add(s),s}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,i){let s=0;return(...e)=>{const a=Date.now();if(a-s>=i)return s=a,t.apply(this,e)}}destroy(){try{this.state.isDragging&&(document.removeEventListener("mousemove",this.throttledHandleMove),document.removeEventListener("touchmove",this.throttledHandleMove),this.boundHandleEnd&&(document.removeEventListener("mouseup",this.boundHandleEnd),document.removeEventListener("touchend",this.boundHandleEnd)),this.state.isDragging=!1),this.abortController&&(this.abortController.abort(),this.abortController=null),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,this.elements={},this.state={},this.times=[],this.eventListeners=[],this.timers.clear(),this.throttledHandleMove=null,this.boundHandleEnd=null,this.options.onDestroy&&this.options.onDestroy(),this.options=null}catch(t){}}static create(t){return new PopupSliderCaptcha(t)}static show(t){const i=new PopupSliderCaptcha(t);return i.show(),i}}return"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),PopupSliderCaptcha});
1	+ !function(t,i){"object"==typeof exports&&"undefined"!=typeof module?module.exports=i():"function"==typeof define&&define.amd?define(i):(t="undefined"!=typeof globalThis?globalThis:t\|\|self).SliderCaptcha=i()}(this,function(){"use strict";class PopupSliderCaptcha{static DEFAULTS={width:320,height:200,sliderSize:50,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:#666;--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);will-change:opacity}.slider-captcha-overlay.show{opacity:1}.slider-captcha-modal{background:#fff;border-radius:var(--sc-radius);padding:16px 16px 5px;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);will-change:transform,opacity}.slider-captcha-modal.show{transform:scale(1) translateY(-10%);opacity:1}.slider-captcha-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px;}.slider-captcha-container{display:flex;align-items:center;position:relative;border-radius:4px;overflow:hidden;margin-bottom:12px;background:#837a7a;justify-content:center}.slider-captcha-track{width:100%;height:48px;min-height:48px;max-height:48px;line-height:48px;background:#e8f5e9;border: 1px solid rgba(0,200,112,0.15);border-radius:40px;position:relative;margin-bottom:15px;overflow:hidden;box-sizing:border-box;flex-shrink:0}.slider-captcha-btn{width:40px;height:40px;background: #00C870;border-radius:50%;position:absolute;top:3px;left:3px;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;will-change:transform}.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;line-height:12px;white-space:nowrap;opacity:0;pointer-events:none;z-index:10;transition:all var(--sc-transition);background:#fff;padding:4px 15px;border-radius:10px;will-change:transform,opacity}.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:none}.slider-captcha-piece{position:absolute;top:0;left:0;cursor:pointer;transition:none;z-index:2;will-change:transform;display:none}.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:opacity var(--sc-transition);white-space:nowrap}.slider-captcha-header-buttons{display:flex;align-items:center}"}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),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.isInitialized=!1,this.throttledHandleMove=this.throttle(t=>this.handleMove(t),this.options.throttleDelay),this.lazyInit()}lazyInit(){this.injectStyles(),this.isInitialized=!0}createInitialState(){return{isVisible:!1,isDragging:!1,currentX:0,startX:0,retryCount:0,isLoading:!1}}normalizeUrl(t,i){return t&&i&&!/^https?:\/\//.test(t)?(i.endsWith("/")?i:i+"/")+(t.startsWith("/")?t.slice(1):t):t}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{options:t}=this,i=t.width,s=t.height,e=`\n <div class="${PopupSliderCaptcha.CSS_CLASSES.overlay}">\n <div class="${PopupSliderCaptcha.CSS_CLASSES.modal}">\n <div class="${PopupSliderCaptcha.CSS_CLASSES.header}">\n <h3 class="slider-captcha-title">安全验证</h3>\n <div class="slider-captcha-header-buttons">\n <button class="slider-captcha-refresh" title="刷新">\n <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>\n </button>\n <button class="slider-captcha-close" title="关闭"></button>\n </div>\n </div>\n <div class="${PopupSliderCaptcha.CSS_CLASSES.container}" style="width:${i}px;height:${s}px;display:none;">\n <img class="slider-captcha-bg" alt="" style="display:none;">\n <img class="slider-captcha-piece" alt="" style="display:none;">\n <div class="${PopupSliderCaptcha.CSS_CLASSES.loading}">加载中...</div>\n <div class="slider-captcha-floating-time"></div>\n </div>\n <div class="${PopupSliderCaptcha.CSS_CLASSES.track}">\n <div class="${PopupSliderCaptcha.CSS_CLASSES.btn}">\n <div class="slider-captcha-icon">→</div>\n </div>\n <div class="${PopupSliderCaptcha.CSS_CLASSES.hint}">向右滑动完成验证</div>\n </div>\n <div class="${PopupSliderCaptcha.CSS_CLASSES.error}"></div>\n </div>\n </div>\n `,a=document.createElement("div");a.innerHTML=e.trim();const n=a.firstElementChild;document.body.appendChild(n),this.elements={overlay:n,modal:n.querySelector("."+PopupSliderCaptcha.CSS_CLASSES.modal),header:n.querySelector("."+PopupSliderCaptcha.CSS_CLASSES.header),title:n.querySelector(".slider-captcha-title"),closeBtn:n.querySelector(".slider-captcha-close"),refreshBtn:n.querySelector(".slider-captcha-refresh"),container:n.querySelector("."+PopupSliderCaptcha.CSS_CLASSES.container),backgroundImg:n.querySelector(".slider-captcha-bg"),sliderImg:n.querySelector(".slider-captcha-piece"),loadingText:n.querySelector("."+PopupSliderCaptcha.CSS_CLASSES.loading),floatingTime:n.querySelector(".slider-captcha-floating-time"),track:n.querySelector("."+PopupSliderCaptcha.CSS_CLASSES.track),btn:n.querySelector("."+PopupSliderCaptcha.CSS_CLASSES.btn),icon:n.querySelector(".slider-captcha-icon"),hint:n.querySelector("."+PopupSliderCaptcha.CSS_CLASSES.hint),error:n.querySelector("."+PopupSliderCaptcha.CSS_CLASSES.error)}}bindEvents(){const{elements:t}=this;[[t.closeBtn,"click",()=>this.hide()],[t.refreshBtn,"click",()=>this.refresh()],[t.overlay,"click",i=>{i.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,i,s])=>{this.addEventListener(t,i,s)}),this.bindSliderEvents()}bindSliderEvents(){const{elements:t}=this,i={start:t=>this.handleStart(t)};[[t.btn,"mousedown",i.start],[t.btn,"touchstart",i.start],[t.sliderImg,"mousedown",i.start],[t.sliderImg,"touchstart",i.start]].forEach(([t,i,s,e])=>{this.addEventListener(t,i,s,e)})}addEventListener(t,i,s,e={}){t&&"function"==typeof s&&(t.addEventListener(i,s,e),this.eventListeners.push({element:t,event:i,handler:s,options:e}))}removeEventListener(t,i,s,e={}){t&&"function"==typeof s&&(t.removeEventListener(i,s,e),this.eventListeners=this.eventListeners.filter(e=>!(e.element===t&&e.event===i&&e.handler===s)))}removeAllEventListeners(){this.eventListeners.forEach(({element:t,event:i,handler:s,options:e})=>{try{t?.removeEventListener?.(i,s,e)}catch(t){}}),this.eventListeners.length=0}getDimensions(){if(!this.cachedDimensions){const{track:t,btn:i}=this.elements;this.cachedDimensions={trackWidth:t.offsetWidth,btnWidth:i.offsetWidth,get maxX(){return this.trackWidth-this.btnWidth}}}return this.cachedDimensions}getPosition(){const{maxX:t}=this.getDimensions(),i=this.state.currentX/t;return Math.round(i(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,this.boundHandleEnd=this.boundHandleEnd\|\|this.handleEnd.bind(this),document.addEventListener("mousemove",this.throttledHandleMove,{passive:!1}),document.addEventListener("touchmove",this.throttledHandleMove,{passive:!1}),document.addEventListener("mouseup",this.boundHandleEnd),document.addEventListener("touchend",this.boundHandleEnd))}handleMove(t){this.state.isDragging&&(t.preventDefault(),this.lastClientX=this.getClientX(t),this.rafId\|\|(this.rafId=requestAnimationFrame(()=>{const t=this.lastClientX-this.state.startX,{maxX:i}=this.getDimensions();this.state.currentX=Math.max(0,Math.min(t,i)),this.times.push({time:Date.now(),position:this.getPosition()}),this.updateSliderPosition(),this.rafId=null})))}handleEnd(){this.state.isDragging&&(document.removeEventListener("mousemove",this.throttledHandleMove),document.removeEventListener("touchmove",this.throttledHandleMove),document.removeEventListener("mouseup",this.boundHandleEnd),document.removeEventListener("touchend",this.boundHandleEnd),this.times.push({time:Date.now(),position:this.getPosition()}),this.state.isDragging=!1,this.rafId&&(cancelAnimationFrame(this.rafId),this.rafId=null),this.verify())}handleVisibilityChange(){}getClientX=t=>t.type.includes("touch")?t.touches[0].clientX:t.clientX;setTransition(t){const i=t?"all 0.3s ease":"none";requestAnimationFrame(()=>{const{btn:t,sliderImg:s}=this.elements;t.style.transition=s.style.transition=i})}updateUIState(t){const{elements:i}=this,s={dragging:()=>{i.hint.style.opacity="0"},success:()=>{Object.assign(i.btn.style,{background:"var(--sc-success)"}),Object.assign(i.icon.style,{color:"white"}),i.icon.textContent="✓"},fail:()=>{Object.assign(i.btn.style,{background:"var(--sc-danger)"}),Object.assign(i.icon.style,{color:"white"}),i.icon.textContent="✗"},reset:()=>{Object.assign(i.btn.style,{background:"#00C870"}),Object.assign(i.icon.style,{color:"white"}),i.icon.textContent="→",this.updateHintText("向右滑动完成验证","var(--sc-text-light)")},loading:()=>{i.hint.style.opacity="0",Object.assign(i.track.style,{pointerEvents:"none",opacity:"0.6"})}};s[t]&&requestAnimationFrame(()=>{s[t](),"loading"!==t&&Object.assign(i.track.style,{pointerEvents:"auto",opacity:"1"})})}updateHintText(t,i){requestAnimationFrame(()=>{Object.assign(this.elements.hint,{textContent:t}),Object.assign(this.elements.hint.style,{color:i,opacity:"1"})})}updateSliderPosition(){const{elements:t,options:i,state:s}=this,{maxX:e}=this.getDimensions(),a=s.currentX/e(i.width-i.sliderSize);requestAnimationFrame(()=>{t.btn.style.transform=`translate3d(${s.currentX}px, 0, 0)`,t.sliderImg.style.transform=`translate3d(${a}px, 0, 0)`})}show(){if(this.state.isVisible=!0,!this.elements.overlay){this.createElements(),this.bindEvents();const{track:t}=this.elements;t&&(t.style.height="48px",t.style.minHeight="48px",t.style.maxHeight="48px")}this.elements.overlay.style.display="flex",this.elements.overlay.style.transform="translate3d(0,0,0)",requestAnimationFrame(()=>{this.elements.overlay.classList.add("show"),this.elements.modal.classList.add("show"),this.preloadCaptcha()})}async preloadCaptcha(){try{this.showLoading();const[t]=await Promise.all([this.fetchCaptchaData(),this.preloadImages()]);this.captchaData=t,this.showCaptcha(),await this.renderCaptcha()}catch(t){this.handleError(PopupSliderCaptcha.ERROR_TYPES.CAPTCHA_DATA_ERROR,t.message,t)}}async makeRequest(t,i={}){this.abortController&&this.abortController.abort(),this.abortController=new AbortController;const s=await fetch(t,{method:"POST",headers:{"Content-Type":"application/json",...this.options.headers},body:JSON.stringify({canvasWidth:this.options.width,canvasHeight:this.options.height,blockHeight:this.options.sliderSize,blockWidth:this.options.sliderSize,timestamp:Date.now(),...this.options.requestData,...i}),signal:this.abortController.signal});if(!s.ok)throw Error(`HTTP ${s.status}: ${s.statusText}`);return s.json()}async fetchCaptchaData(){this.startTime=Date.now();const t=await this.makeRequest(this.options.apiUrl);if(!this.validateCaptchaData(t))throw Error("验证码数据格式错误");return t.data}preloadImages(){return Promise.all(["data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTE3LjY1LDYuMzVDMTYuMiw0LjkgMTQuMjEsNCAxMiw0QTgsOCAwIDAsMCA0LDEyQTgsOCAwIDAsMCAxMiwyMEMxNS43MywyMCAxOC44NCwxNy40NSAxOS43MywxNEgxNy42NUMxNi44MywxNi4zMyAxNC42MSwxOCAxMiwxOEE2LDYgMCAwLDEgNiwxMkE2LDYgMCAwLDEgMTIsNkMxMy42Niw2IDE1LjE0LDYuNjkgMTYuMjIsNy43OEwxMywxMUgyMFY0TDE3LjY1LDYuMzVaIiBmaWxsPSIjOTk5Ii8+Cjwvc3ZnPgo="].map(t=>new Promise(i=>{const s=new Image;s.onload=s.onerror=()=>i(),s.src=t})))}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)}handleRequestError(t){"AbortError"===t.name?this.handleError(PopupSliderCaptcha.ERROR_TYPES.TIMEOUT_ERROR,"请求被取消",t):t.message?.includes("Failed to fetch")\|\|t.message?.includes("NetworkError")?this.handleError(PopupSliderCaptcha.ERROR_TYPES.NETWORK_ERROR,"网络连接失败",t):this.handleError(PopupSliderCaptcha.ERROR_TYPES.CAPTCHA_DATA_ERROR,t.message,t)}handleError(t,i,s=null){const e={[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]\|\|i\|\|"未知错误";this.options.onError&&this.options.onError({type:t,message:e,originalError:s}),this.showError(e)}async loadCaptcha(){try{this.showLoading(),this.startTime=Date.now();const t=await this.makeRequest(this.options.apiUrl);if(!this.validateCaptchaData(t))throw Error("验证码数据格式错误");this.captchaData=t.data,this.showCaptcha(),await this.renderCaptcha()}catch(t){this.handleRequestError(t)}}validateCaptchaData(t){if(!t\|\|"object"!=typeof t)return!1;const i=t.data\|\|t;return["canvasSrc","blockSrc","canvasWidth","canvasHeight","blockWidth","blockHeight","blockY","nonceStr"].every(t=>{const s=i[t];return null!=s&&""!==s})}renderCaptcha(){return new Promise((t,i)=>{let s=!1;const e=[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(e).then(()=>{s\|\|(this.hideLoading(),t())}).catch(t=>{s\|\|(s=!0,this.handleError(PopupSliderCaptcha.ERROR_TYPES.IMAGE_LOAD_ERROR,"图片加载失败",t),i(t))})})}loadImageAsync(t,i,s){return new Promise((e,a)=>{if(this.imageCache.has(i)){const a=this.imageCache.get(i);return t.src=a.src,this.applyStyles(t,s),t.style.display="block",void e()}const n=this.safeSetTimeout(()=>{a(Error("图片加载超时"))},5e3),r=new Image;r.crossOrigin="anonymous",r.decoding="async",r.onload=function(){if(this.safeClearTimeout(n),"undefined"!=typeof OffscreenCanvas)try{const t=new OffscreenCanvas(r.width,r.height).getContext("2d");t.drawImage(r,0,0);const s=t.getImageData(0,0,r.width,r.height);this.imageCache.set(i,{src:r.src,imageData:s})}catch(t){this.imageCache.set(i,r.cloneNode())}else this.imageCache.set(i,r.cloneNode());t.src=r.src,this.applyStyles(t,s),t.style.display="block",e()}.bind(this),r.onerror=function(t){this.safeClearTimeout(n),a(t)}.bind(this),r.src=i})}applyStyles(t,i){Object.entries(i).forEach(([i,s])=>{t.style[i]="number"==typeof s?s+"px":s})}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"},error:{display:"none"}})}showError(t){this.hideLoading(),this.batchUpdateStyles({error:{display:"block",textContent:t}})}batchUpdateStyles(t){requestAnimationFrame(()=>{Object.entries(t).forEach(([t,i])=>{const s=this.elements[t];s&&Object.entries(i).forEach(([t,i])=>{"textContent"===t?s.textContent=i:s.style[t]=i})})})}async verify(){if(this.captchaData)try{const t=await this.makeRequest(this.options.verifyUrl,{loginVo:{nonceStr:this.captchaData.nonceStr,value:this.getPosition()},dragEventList:[...this.times],...this.options.verifyData});this.isVerifySuccess(t)?this.onVerifySuccess(t.data\|\|t.result):this.onVerifyFail(t.message\|\|t.msg\|\|"验证失败，请重试！")}catch(t){this.handleRequestError(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 i=this.dragStartTime?Date.now()-this.dragStartTime:Date.now()-this.startTime,s=`验证成功！耗时：${(i/1e3).toFixed(2)}s`;this.updateUIState("success"),this.showFloatingTime(s,"success"),this.safeSetTimeout(()=>{this.options.onSuccess?.({ticket:t,timestamp:Date.now(),duration:i}),this.hide()},2e3)}showFloatingTime(t,i="success"){const{elements:s}=this;s.floatingTime.textContent=t,s.floatingTime.className="slider-captcha-floating-time "+i,this.safeSetTimeout(()=>s.floatingTime.classList.add("show"),100),this.safeSetTimeout(()=>{s.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="translate3d(0px, 0, 0)",this.elements.sliderImg.style.transform="translate3d(0px, 0, 0)",this.updateUIState("reset"),this.elements.error.style.display="none"})}refresh(){try{this.reset(),this.state.retryCount=0,this.loadCaptcha()}catch(t){}}safeSetTimeout(t,i){const s=setTimeout(()=>{this.timers.delete(s),t()},i);return this.timers.add(s),s}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,i){let s=0;return(...e)=>{const a=Date.now();if(a-s>=i)return s=a,t.apply(this,e)}}destroy(){try{this.state.isDragging&&(document.removeEventListener("mousemove",this.throttledHandleMove),document.removeEventListener("touchmove",this.throttledHandleMove),this.boundHandleEnd&&(document.removeEventListener("mouseup",this.boundHandleEnd),document.removeEventListener("touchend",this.boundHandleEnd)),this.state.isDragging=!1),this.abortController&&(this.abortController.abort(),this.abortController=null),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,this.elements={},this.state={},this.times=[],this.eventListeners=[],this.timers.clear(),this.throttledHandleMove=null,this.boundHandleEnd=null,this.options.onDestroy&&this.options.onDestroy(),this.options=null}catch(t){}}static create(t){return new PopupSliderCaptcha(t)}static show(t){const i=new PopupSliderCaptcha(t);return i.show(),i}}return"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),PopupSliderCaptcha});

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "slider-captcha-sdk",
-  "version": "1.0.28",
+  "version": "1.0.30",
   "description": "纯JavaScript滑块验证码SDK和密码校验工具，无依赖，支持多种模块格式",
   "type": "module",
   "main": "dist/index.min.js",