slider-captcha-sdk 1.0.2 → 1.0.3

package/dist/slider-captcha.ultra.min.js

@@ -1,50 +0,0 @@
-(function(t,n){"object"==typeof exports&&"undefined"!=typeof module?n(exports):"function"==typeof define&&define.amd?define(["exports"],n):n((t="undefined"!=typeof globalThis?globalThis:t||self).SliderCaptcha={})})(this,(function(t){"use strict"
-class PopupSliderCaptcha{static t={width:350,height:200,i:42,o:3,timeout:3e4,h:"/api/captcha",l:"/api/captcha/verify"}
-static p={u:"slider-captcha-overlay",m:"slider-captcha-modal",v:"slider-captcha-header",container:"slider-captcha-container",track:"slider-captcha-track",k:"slider-captcha-btn",S:"slider-captcha-finger",hint:"slider-captcha-hint",loading:"slider-captcha-loading",error:"slider-captcha-error"}
-static get version(){return"1.0.0"}static get info(){return{name:"Slider Captcha SDK",version:this.version,T:"Your Name",$:"MIT"}}constructor(t={}){this.options={...PopupSliderCaptcha.t,...t},this.elements={},this.state={isVisible:!1,j:!1,C:0,D:0,A:0},this.L=null,this.M=[],this.startTime=null,this.O=[],this.init()}init(){this.P(),this.I(),this._()}P(){if(document.querySelector("#slider-captcha-styles"))return
-const t=document.createElement("style")
-t.id="slider-captcha-styles",t.textContent=`\n      .${PopupSliderCaptcha.p.u} {\n        position: fixed;\n        top: 0;\n        left: 0;\n        width: 100%;\n        height: 100%;\n        background: rgba(0, 0, 0, 0.5);\n        z-index: 9999;\n        display: none;\n        justify-content: center;\n        align-items: center;\n        opacity: 0;\n        transition: opacity 0.3s ease-in-out;\n      }\n\n      .${PopupSliderCaptcha.p.u}.show {\n        opacity: 1;\n      }\n\n      .${PopupSliderCaptcha.p.m} {\n        background: white;\n        border-radius: 8px;\n        padding: 20px;\n        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);\n        position: relative;\n        max-width: 90vw;\n        max-height: 90vh;\n        transform: scale(0.8) translateY(-20px);\n        opacity: 0;\n        transition: all 0.3s ease-in-out;\n      }\n\n      .${PopupSliderCaptcha.p.m}.show {\n        transform: scale(1) translateY(0);\n        opacity: 1;\n      }\n\n\n      .${PopupSliderCaptcha.p.v} {\n        display: flex;\n        justify-content: space-between;\n        align-items: center;\n        margin-bottom: 15px;\n        padding-bottom: 10px;\n        border-bottom: 1px solid #eee;\n      }\n\n      .${PopupSliderCaptcha.p.container} {\n        display: flex;\n        align-items: center;\n        position: relative;\n        width: ${this.options.width}px;\n        height: ${this.options.height}px;\n        border-radius: 4px;\n        overflow: hidden;\n        margin-bottom: 15px;\n        background: #837a7a;\n        justify-content: center;\n      }\n\n      .${PopupSliderCaptcha.p.track} {\n        width: 100%;\n        height: 40px;\n        background: #f7f9fa;\n        border: 1px solid #e4e7eb;\n        border-radius: 20px;\n        position: relative;\n        margin-bottom: 15px;\n        overflow: hidden;\n      }\n\n      .${PopupSliderCaptcha.p.k} {\n        width: 38px;\n        height: 38px;\n        background: white;\n        border: 1px solid #ccc;\n        border-radius: 50%;\n        position: absolute;\n        top: 0;\n        left: 0;\n        cursor: pointer;\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);\n        transition: all 0.3s ease;\n        user-select: none;\n        z-index: 1\n      }\n\n      .${PopupSliderCaptcha.p.S} {\n        position: absolute;\n        top: 50%;\n        left: 10px;\n        transform: translateY(-50%);\n        font-size: 20px;\n        animation: fingerSlide 2s ease-in-out infinite;\n        pointer-events: none;\n        z-index: 1;\n        opacity: 0.6;\n      }\n\n      .${PopupSliderCaptcha.p.hint} {\n        position: absolute;\n        top: 50%;\n        left: 50%;\n        transform: translate(-50%, -50%);\n        color: #999;\n        font-size: 14px;\n        pointer-events: none;\n        z-index: 1;\n        transition: all 0.3s ease;\n      }\n\n      .${PopupSliderCaptcha.p.loading} {\n        position: absolute;\n        top: 0;\n        left: 0;\n        width: 100%;\n        height: 100%;\n        background: rgba(255, 255, 255, 0.9);\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        flex-direction: column;\n        color: #666;\n        font-size: 14px;\n        z-index: 10;\n        border-radius: 4px;\n      }\n\n      .loading-dots {\n        display: inline-block;\n        margin-left: 4px;\n      }\n\n      .loading-dots .dot {\n        display: inline-block;\n        animation: loading-dot 1.8s infinite both;\n        font-size: 25px;\n        font-weight: bold;\n      }\n\n      .loading-dots .dot:nth-child(1) { animation-delay: 0s; }\n      .loading-dots .dot:nth-child(2) { animation-delay: 0.6s; }\n      .loading-dots .dot:nth-child(3) { animation-delay: 1.2s; }\n\n      @keyframes loading-dot {\n        0%, 80%, 100% {\n          opacity: 0.3;\n          transform: scale(0.8);\n        }\n        40% {\n          opacity: 1;\n          transform: scale(1.2);\n        }\n      }\n\n      @keyframes fingerSlide {\n        0% {\n          left: 10px;\n          opacity: 0.6;\n        }\n        50% {\n          opacity: 1;\n        }\n        100% {\n          left: calc(50% - 10px);\n          opacity: 0.6;\n        }\n      }\n\n      .slider-captcha-bg {\n        width: 100%;\n        height: 100%;\n        object-fit: cover;\n        display: block;\n      }\n\n      .slider-captcha-piece {\n        position: absolute;\n        top: 0;\n        left: 0;\n        cursor: pointer;\n        transition: none;\n        z-index: 2;\n      }\n\n      .${PopupSliderCaptcha.p.error} {\n        color: #f56c6c;\n        font-size: 12px;\n        text-align: center;\n        margin-top: 10px;\n        display: none;\n      }\n\n      .slider-captcha-retry {\n        background: #409eff;\n        color: white;\n        border: none;\n        padding: 8px 16px;\n        border-radius: 4px;\n        cursor: pointer;\n        font-size: 12px;\n        margin-top: 10px;\n        display: none;\n      }\n\n      .slider-captcha-title {\n        margin: 0;\n        font-size: 16px;\n        color: #333;\n      }\n\n      .slider-captcha-close {\n        background: none;\n        border: none;\n        font-size: 24px;\n        cursor: pointer;\n        color: #999;\n        padding: 0;\n        width: 30px;\n        height: 30px;\n        display: flex;\n        align-items: center;\n        justify-content: center;\n      }\n\n      .slider-captcha-refresh {\n        background: none;\n        border: none;\n        font-size: 20px;\n        cursor: pointer;\n        color: #999;\n        padding: 0;\n        width: 30px;\n        height: 30px;\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        margin-left: 10px;\n        border-radius: 4px;\n        transition: all 0.3s ease;\n      }\n\n      .slider-captcha-refresh:hover {\n        background: #f5f5f5;\n        color: #409eff;\n      }\n\n      .slider-captcha-time {\n        position: relative;\n        top: 0;\n        left: 0;\n        transform: none;\n        color: #67c23a;\n        font-size: 14px;\n        font-weight: bold;\n        display: none;\n        background: rgba(255, 255, 255, 0.9);\n        padding: 8px 12px;\n        border-radius: 4px;\n        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);\n        text-align: center;\n        margin-top: 10px;\n        width: 100%;\n        box-sizing: border-box;\n      }\n\n      .slider-captcha-header-buttons {\n        display: flex;\n        align-items: center;\n      }\n\n      /* 移除重复的样式定义 */\n      .${PopupSliderCaptcha.p.m}.show {\n        transform: scale(1) translateY(0);\n        opacity: 1;\n      }\n\n      .slider-captcha-header-buttons {\n        display: flex;\n        align-items: center;\n      }\n    `,document.head.appendChild(t)}I(){const{elements:t}=this,{p:n}=PopupSliderCaptcha
-t.u=this.createElement("div",n.u),t.m=this.createElement("div",n.m),t.v=this.createElement("div",n.v),t.title=this.createElement("h3","slider-captcha-title","滑动验证"),t.Y=this.createElement("button","slider-captcha-close","×"),t.U=this.createElement("button","slider-captcha-refresh","⟳"),t.container=this.createElement("div",n.container),t.V=this.createElement("img","slider-captcha-bg"),t.F=this.createElement("img","slider-captcha-piece"),t.H=this.createElement("div",n.loading),t.N=this.createElement("div","slider-captcha-time"),t.track=this.createElement("div",n.track),t.X=this.createElement("div",n.S,"👉"),t.k=this.createElement("div",n.k),t.icon=this.createElement("div","","→"),t.hint=this.createElement("div",n.hint,"向右滑动完成验证"),t.error=this.createElement("div",n.error),t.J=this.createElement("button","slider-captcha-retry","重新获取"),t.H.innerHTML='\n      <span class="loading-dots">\n        <span class="dot">.</span>\n        <span class="dot">.</span>\n        <span class="dot">.</span>\n      </span>\n    ',this.W(),this.q()}createElement(t,n="",i=""){const e=document.createElement(t)
-return n&&(e.className=n),i&&(e.textContent=i),e}W(){const{elements:t}=this
-t.k.appendChild(t.icon),t.track.appendChild(t.X),t.track.appendChild(t.k),t.track.appendChild(t.hint)
-const n=this.createElement("div","slider-captcha-header-buttons")
-n.appendChild(t.U),n.appendChild(t.Y),t.v.appendChild(t.title),t.v.appendChild(n),t.container.appendChild(t.V),t.container.appendChild(t.F),t.container.appendChild(t.H),t.m.appendChild(t.v),t.m.appendChild(t.container),t.m.appendChild(t.track),t.m.appendChild(t.N),t.m.appendChild(t.error),t.m.appendChild(t.J),t.u.appendChild(t.m),document.body.appendChild(t.u)}q(){const{elements:t}=this
-t.container.style.display="none",t.track.style.display="none"}K(t,n,i){t&&(t.addEventListener(n,i),this.O.push({element:t,event:n,R:i}))}B(){this.O.forEach((({element:t,event:n,R:i})=>{t&&t.removeEventListener&&t.removeEventListener(n,i)})),this.O=[]}_(){const{elements:t}=this
-this.K(t.Y,"click",(()=>this.hide())),this.K(t.U,"click",(()=>this.refresh())),this.K(t.J,"click",(()=>this.refresh())),this.K(t.u,"click",(n=>{n.target===t.u&&this.hide()})),this.K(document,"keydown",(t=>{"Escape"===t.key&&this.state.isVisible&&this.hide()})),this.G()}G(){const{elements:t}=this,n={start:this.Z.bind(this),move:this.tt.bind(this),end:this.nt.bind(this)}
-this.K(t.k,"mousedown",n.start),this.K(t.k,"touchstart",n.start),this.K(t.F,"mousedown",n.start),this.K(t.F,"touchstart",n.start),this.K(document,"mousemove",n.move),this.K(document,"touchmove",n.move),this.K(document,"mouseup",n.end),this.K(document,"touchend",n.end)}it(){const{elements:t,options:n}=this,i=t.track.offsetWidth-t.k.offsetWidth,e=this.state.C/i
-return Math.round(e*(n.width-n.i))}Z(t){if(!this.L||this.state.j)return
-this.startTime||(this.startTime=Date.now()),this.M=[{time:Date.now(),position:this.it()}],t.preventDefault(),t.stopPropagation(),this.state.j=!0
-const n=this.et(t)
-this.state.D=n-this.state.C,this.st(!1),this.ot("dragging"),document.body.style.userSelect="none",document.body.style.cursor="grabbing"}tt(t){if(!this.state.j)return
-t.preventDefault()
-const n=this.et(t)-this.state.D,i=this.elements.track.offsetWidth-this.elements.k.offsetWidth
-this.state.C=Math.max(0,Math.min(n,i)),this.M.push({time:Date.now(),position:this.it()}),this.ht()}nt(){this.state.j&&(this.M.push({time:Date.now(),position:this.it()}),this.state.j=!1,this.verify())}et(t){return t.type.includes("touch")?t.touches[0].clientX:t.clientX}st(t){const n=t?"all 0.3s ease":"none"
-this.elements.k.style.transition=n,this.elements.F.style.transition=n}ot(t){const{elements:n}=this
-switch(t){case"dragging":n.hint.style.opacity="0",n.X.style.display="none"
-break
-case"success":n.k.style.background="#67c23a",n.icon.innerHTML="✓",n.icon.style.color="white",n.X.style.display="none",this.rt("验证成功","#67c23a")
-break
-case"fail":n.k.style.background="#f56c6c",n.icon.innerHTML="✗",n.icon.style.color="white"
-break
-case"reset":n.k.style.background="white",n.icon.innerHTML="→",n.icon.style.color="#666",n.X.style.display="block",this.rt("向右滑动完成验证","#999")}}rt(t,n){const{elements:i}=this
-if(i.hint.textContent=t,i.hint.style.color=n,i.hint.style.opacity="1","验证成功"===t){const t=parseInt(i.k.style.left)||0,n=i.track.offsetWidth
-let e="50%"
-t>.6*n?e="25%":t>.3*n&&(e="75%"),i.hint.style.left=e}else i.hint.style.left="50%"}ht(){const{elements:t,options:n,state:i}=this,e=t.track.offsetWidth-t.k.offsetWidth,s=i.C/e*(n.width-n.i),o=i.C/e
-t.k.style.left=i.C+"px",t.F.style.left=s+"px",t.X.style.opacity=.8>o?"0.6":"0"}show(){this.state.isVisible=!0,this.elements.u.style.display="flex",this.elements.u.offsetHeight,requestAnimationFrame((()=>{this.elements.u.classList.add("show"),this.elements.m.classList.add("show")})),this.ct()}hide(){this.state.isVisible=!1,this.elements.u.classList.remove("show"),this.elements.m.classList.remove("show"),setTimeout((()=>{this.elements.u.style.display="none",this.reset(),this.options.lt&&this.options.lt()}),300)}async ct(){try{this.dt(),this.startTime=Date.now()
-const t={ut:2,timestamp:Date.now()},n=await this.ft(this.options.h,{method:"POST",body:JSON.stringify(t),headers:{gt:"application/json",bt:"application/json"}})
-if(!n.ok)throw Error(`HTTP ${n.status}: 获取验证码失败`)
-const i=await n.json()
-if(!(i.data&&i.data.xt&&i.data.yt))throw Error(i.message||i.wt||"验证码数据格式错误")
-this.L=i.data,await this.vt()}catch(t){this.kt("加载验证码失败: "+t.message)}}async ft(t,n){const i=new AbortController,e=setTimeout((()=>i.abort()),this.options.timeout)
-try{const s=await fetch(t,{...n,signal:i.signal})
-return clearTimeout(e),s}catch(t){throw clearTimeout(e),t}}async vt(){return new Promise(((t,n)=>{let i=0
-const e=()=>{i++,2===i&&(this.St(),this.Tt(),t())},s=()=>n(Error("图片加载失败"))
-this.zt(this.elements.V,this.L.xt,{width:this.L.$t,height:this.L.Et},e,s),this.zt(this.elements.F,this.L.yt,{width:this.L.jt,height:this.L.Ct,top:this.L.Dt},e,s)}))}zt(t,n,i,e,s){t.onload=e,t.onerror=s,t.src=n,Object.entries(i).forEach((([n,i])=>{t.style[n]="number"==typeof i?i+"px":i}))}dt(){const{elements:t}=this
-t.container.style.display="block",t.H.style.display="flex",t.track.style.display="none",t.error.style.display="none",t.J.style.display="none"}St(){this.elements.H.style.display="none"}Tt(){const{elements:t}=this
-t.container.style.display="block",t.H.style.display="none",t.track.style.display="block",t.error.style.display="none",t.J.style.display="none"}kt(t){this.St(),this.elements.error.textContent=t,this.elements.error.style.display="block",this.elements.J.style.display="inline-block"}async verify(){if(this.L)try{const t={At:{Lt:this.L.Lt,value:this.it()},Mt:[...this.M]},n=await this.ft(this.options.l,{method:"POST",headers:{gt:"application/json",bt:"application/json"},body:JSON.stringify(t)})
-if(!n.ok)throw Error(`HTTP ${n.status}: ${n.statusText}`)
-const i=await n.json()
-"0"===i.code||!0===i.Ot?this.Pt():this.It(i.message||i.wt||"验证失败")}catch(t){this.It("网络错误，请检查连接后重试")}else this.It("验证码数据丢失，请刷新重试")}Pt(){const t=Date.now()-this.startTime,n=(t/1e3).toFixed(2)+"s"
-this.ot("success"),this._t(n),setTimeout((()=>{this.options.Yt({Ut:this.L.Ut,timestamp:Date.now(),duration:t}),this.hide()}),2e3)}_t(t){const{elements:n}=this
-n.N.textContent="验证成功！耗时："+t,n.N.style.display="block",n.N.style.opacity="0",setTimeout((()=>{n.N.style.transition="opacity 0.3s ease",n.N.style.opacity="1"}),100)}It(t){this.state.A++,this.ot("fail"),this.rt(t,"#f56c6c"),setTimeout((()=>{this.reset(),this.state.A<this.options.o?this.refresh():(this.kt("验证失败次数过多，请刷新重试"),this.options.Vt({reason:"max_retries_exceeded",A:this.state.A}))}),1500)}reset(){this.state.C=0,this.st(!0),this.ot("reset"),this.ht(),this.elements.N.style.display="none",this.startTime=null}refresh(){this.reset(),this.L=null,this.state.A=0,this.ct()}destroy(){document.body.style.userSelect="",document.body.style.cursor="",this.B(),this.elements.u?.parentNode&&this.elements.u.parentNode.removeChild(this.elements.u),this.elements=null,this.L=null,this.M=null,this.O=null,this.state=null,this.options=null,this.startTime=null}static create(t){return new PopupSliderCaptcha(t)}static show(t){const n=new PopupSliderCaptcha(t)
-return n.show(),n}}"undefined"!=typeof module&&module.exports?(module.exports=PopupSliderCaptcha,module.exports.default=PopupSliderCaptcha,module.exports.PopupSliderCaptcha=PopupSliderCaptcha):"function"==typeof define&&define.amd?define([],(()=>PopupSliderCaptcha)):"undefined"!=typeof window&&(window.PopupSliderCaptcha=PopupSliderCaptcha,window.SliderCaptcha=PopupSliderCaptcha),"undefined"!=typeof window&&(window.SliderCaptcha=PopupSliderCaptcha,window.PopupSliderCaptcha=PopupSliderCaptcha),t.PopupSliderCaptcha=PopupSliderCaptcha,t.default=PopupSliderCaptcha,Object.defineProperty(t,"Ft",{value:!0})}))