登录功能接入验证码

src/vendor/tianai-captcha/captcha/captcha.js

@@ -15,9 +15,8 @@ const template = `
   </div>
   <!-- 底部 -->
   <div class="slider-bottom">
-  <img class="logo" id="tianai-captcha-logo" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAeCAMAAAAM7l6QAAAAMFBMVEVHcEz3tkX3tkX3tkX3tkX3tkX3tkX3tkX3tkX3tkX3tkX3tkX3tkX3tkX3tkX3tkVmTmjZAAAAD3RSTlMASbTm8wh12hOGoCNiyTV98jvOAAABB0lEQVR42nVT0aIFEQiMorD0/397Lc5a7J0n1UylgIniLRKyDcbBDudZH2DYCAabn3PmTrjeUX+7rJGWx0SqVpzReAfTtKU5fgVCNfxWjB69USUDGwoOiauHpZEpSr0tCx8ILb3Dm3WgBbAlifAJk6+Ww6wqEUmpmIorQVZ1JtqKnDMjkb7AgIpO/wMCaQbuBuEtsBUxhuD9daUaZnApiQB8NAKotMwirGGr6mbXpPnHLHDmy6oy3FgP+1j8IBdVklFc01xUJwv3NR0rIeXV5zpzdlruiijzNq/ufOeKWzZLP3160u5P8RjT1M+HHFtx+PwGyOZqT/D8ROOfjOInTLBIHjy/hvwHxkwPu5cCE1QAAAAASUVORK5CYII=" id="tianai-captcha-logo"></img>
-  <div class="close-btn" id="tianai-captcha-slider-close-btn"></div>
-  <div class="refresh-btn" id="tianai-captcha-slider-refresh-btn"></div>
+    <div class="refresh-btn" id="tianai-captcha-slider-refresh-btn"></div>
+    <div class="close-btn" id="tianai-captcha-slider-close-btn"></div>
   </div>
   </div>
   `;
@@ -28,7 +27,6 @@ function createCaptchaByType(type, tac) {
     case "SLIDER":
       return new Slider(box, styleConfig);
     case "ROTATE":
-    case "ROTATE_DEGREE":
       return new Rotate(box, styleConfig);
     case "CONCAT":
       return new Concat(box, styleConfig);
@@ -103,20 +101,12 @@ class TianAiCaptcha {
   loadStyle() {
     // 设置样式
     const bgUrl = this.style.bgUrl;
-    const logoUrl = this.style.logoUrl;
     if (bgUrl) {
       // 背景图片
       this.config.domBindEl
         .find("#tianai-captcha-bg-img")
         .css("background-image", "url(" + bgUrl + ")");
     }
-    if (logoUrl && logoUrl !== "") {
-      // logo
-      this.config.domBindEl.find("#tianai-captcha-logo").attr("src", logoUrl);
-    } else if (logoUrl === null) {
-      // 删除logo
-      this.config.domBindEl.find("#tianai-captcha-logo").css("display", "none");
-    }
   }
 
   destroyWindow() {
@@ -167,6 +157,12 @@ class TianAiCaptcha {
         // 清空
         const id = c.currentCaptchaData.currentCaptchaId;
         c.currentCaptchaData = undefined;
+        if (this.config.onDataReady) {
+          Promise.resolve(this.config.onDataReady({ id, data }, c, this)).catch((error) => {
+            console.error("[TAC] onDataReady callback failed", error);
+          });
+          return;
+        }
         // 调用验证接口
         this.config.validCaptcha(id, data, c, this);
       });
@@ -180,9 +176,7 @@ class TianAiCaptcha {
       this.C.el.css("transform", "translateX(300px)");
       setTimeout(() => {
         this.C.destroy();
-        if (callback) {
-          callback();
-        }
+        callback && callback();
       }, 500);
     } else {
       callback();

src/vendor/tianai-captcha/captcha/captcha.less

@@ -1,7 +1,6 @@
 #tianai-captcha-parent {
   box-shadow: 0 0 11px 0 #999999;
   width: 318px;
-  height: 318px;
   overflow: hidden;
   position: relative;
   z-index: 997;
@@ -47,32 +46,25 @@
   }
 
   .slider-bottom {
-    .close-btn {
+    .close-btn, .refresh-btn {
+      display: inline-block;
       width: 20px;
       height: 20px;
-      background-image: url("../images/icon.png");
       background-repeat: no-repeat;
-      background-position: 0 -14px;
-      float: right;
-      margin-right: 2px;
       cursor: pointer;
     }
+    .close-btn {
+      background-image: url("../images/icon.png");
+      background-position: 0 -14px;
+      margin-right: 2px;
+    }
     .refresh-btn {
-      width: 20px;
-      height: 20px;
       background-image: url("../images/icon.png");
       background-position: 0 -167px;
-      background-repeat: no-repeat;
-      float: right;
       margin-right: 10px;
-      cursor: pointer;
     }
-    .logo {
-      height: 30px;
-      float: left;
-    }
-    height: 19px;
-    width: 100%;
+    text-align: right;
+    margin-top: 8px;
   }
   .slider-move-shadow {
     animation: myanimation 2s infinite;

src/vendor/tianai-captcha/captcha/common/common.less

@@ -70,7 +70,6 @@
     top: 0;
     width: 100%;
     height: 100%;
-    border-radius: 5px;
     .tianai-captcha-slider-bg-div-slice {
       position: absolute;
     }

src/vendor/tianai-captcha/captcha/config/config.js

@@ -8,7 +8,7 @@ class CaptchaConfig {
     if (!args.requestCaptchaDataUrl) {
       throw new Error("[TAC] 必须配置 [requestCaptchaDataUrl]请求验证码接口");
     }
-    if (!args.validCaptchaUrl) {
+    if (!args.validCaptchaUrl && !args.onDataReady) {
       throw new Error("[TAC] 必须配置 [validCaptchaUrl]验证验证码接口");
     }
     this.bindEl = args.bindEl;
@@ -21,6 +21,9 @@ class CaptchaConfig {
     if (args.validFail) {
       this.validFail = args.validFail;
     }
+    if (args.onDataReady) {
+      this.onDataReady = args.onDataReady;
+    }
     if (args.requestHeaders) {
       this.requestHeaders = args.requestHeaders;
     } else {

src/vendor/tianai-captcha/captcha/slider/slider.less

@@ -17,7 +17,6 @@
     img {
       height: 100%;
       width: 100%;
-      border-radius: 5px;
     }
   }
   .slider-img-div {

src/vendor/tianai-captcha/index.ts

@@ -2,9 +2,13 @@ import { CaptchaConfig, TianAiCaptcha } from "./captcha/captcha.js"
 
 export type TianAiCaptchaBindTarget = string | HTMLElement
 
+export interface TianAiCaptchaResult {
+  id: string
+  data: Record<string, any>
+}
+
 export interface TianAiCaptchaStyle {
   btnUrl?: string
-  logoUrl?: string | null
   bgUrl?: string
   moveTrackMaskBgColor?: string
   moveTrackMaskBorderColor?: string
@@ -14,11 +18,12 @@ export interface TianAiCaptchaStyle {
 export interface TianAiCaptchaConfig {
   bindEl: TianAiCaptchaBindTarget
   requestCaptchaDataUrl: string
-  validCaptchaUrl: string
+  validCaptchaUrl?: string
   requestHeaders?: Record<string, string>
   timeToTimestamp?: boolean
   validSuccess?: (res: any, captcha: any, tac: TianAiCaptchaInstance) => void
   validFail?: (res: any, captcha: any, tac: TianAiCaptchaInstance) => void
+  onDataReady?: (result: TianAiCaptchaResult, captcha: any, tac: TianAiCaptchaInstance) => void | Promise<void>
   btnRefreshFun?: (el: Event, tac: TianAiCaptchaInstance) => void
   btnCloseFun?: (el: Event, tac: TianAiCaptchaInstance) => void
 }