From 662b22576db7c9c703fa8b52b472df875f74058d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E7=81=8C=E7=B3=96=E5=8C=85=E5=AD=90?= Date: Sat, 16 May 2026 12:24:35 +0800 Subject: [PATCH] refactor: simplify captcha selector naming Convert captcha vendor templates and DOM selectors from id-based tianai naming to class-based captcha naming. Update the shared captcha container, common tips/loading helpers, and slider/rotate/concat/disable/image-click implementations so template markup, DOM queries, and less selectors stay aligned. Keep captcha.js as the single style entry for the captcha module and remove per-component less imports from the submodule JavaScript files. --- src/vendor/tianai-captcha/captcha/captcha.js | 26 +++++------ .../tianai-captcha/captcha/captcha.less | 16 +++++-- .../tianai-captcha/captcha/common/common.js | 20 ++++---- .../tianai-captcha/captcha/common/common.less | 18 ++++---- .../tianai-captcha/captcha/concat/concat.js | 43 ++++++++--------- .../tianai-captcha/captcha/concat/concat.less | 6 +-- .../tianai-captcha/captcha/disable/disable.js | 13 +++--- .../captcha/disable/disable.less | 4 +- .../captcha/image_click/image_click.js | 27 ++++++----- .../captcha/image_click/image_click.less | 6 +-- .../tianai-captcha/captcha/rotate/rotate.js | 44 +++++++++--------- .../tianai-captcha/captcha/rotate/rotate.less | 2 +- .../tianai-captcha/captcha/slider/slider.js | 46 +++++++++---------- .../tianai-captcha/captcha/slider/slider.less | 4 +- 14 files changed, 136 insertions(+), 139 deletions(-) diff --git a/src/vendor/tianai-captcha/captcha/captcha.js b/src/vendor/tianai-captcha/captcha/captcha.js index 259c50b..acbf28a 100644 --- a/src/vendor/tianai-captcha/captcha/captcha.js +++ b/src/vendor/tianai-captcha/captcha/captcha.js @@ -8,20 +8,20 @@ import WordImageClick from "./word_image_click/word_image_click"; import { CaptchaConfig, wrapConfig, wrapStyle } from "./config/config"; import { clearAllPreventDefault } from "./common/common"; const template = ` -
-
-
-
+
+
+
+
-
-
+
+
`; function createCaptchaByType(type, tac) { - const box = tac.config.domBindEl.find("#tianai-captcha-box"); + const box = tac.config.domBindEl.find(".captcha-box"); const styleConfig = tac.style; switch (type) { case "SLIDER": @@ -55,17 +55,17 @@ class TianAiCaptcha { init() { this.destroyWindow(); this.config.domBindEl.append(template); - this.domTemplate = this.config.domBindEl.find("#tianai-captcha-parent"); + this.domTemplate = this.config.domBindEl.find(".captcha-parent"); clearAllPreventDefault(this.domTemplate); this.loadStyle(); // 绑定按钮事件 this.config.domBindEl - .find("#tianai-captcha-slider-refresh-btn") + .find(".refresh-btn") .click((el) => { this.btnRefreshFun(el, this); }); this.config.domBindEl - .find("#tianai-captcha-slider-close-btn") + .find(".close-btn") .click((el) => { this.btnCloseFun(el, this); }); @@ -88,13 +88,13 @@ class TianAiCaptcha { } showLoading() { this.config.domBindEl - .find("#tianai-captcha-loading") + .find(".captcha-loading") .css("display", "block"); } closeLoading() { this.config.domBindEl - .find("#tianai-captcha-loading") + .find(".captcha-loading") .css("display", "none"); } @@ -104,7 +104,7 @@ class TianAiCaptcha { if (bgUrl) { // 背景图片 this.config.domBindEl - .find("#tianai-captcha-bg-img") + .find(".captcha-bg-img") .css("background-image", "url(" + bgUrl + ")"); } } diff --git a/src/vendor/tianai-captcha/captcha/captcha.less b/src/vendor/tianai-captcha/captcha/captcha.less index c0770cc..f54cd5b 100644 --- a/src/vendor/tianai-captcha/captcha/captcha.less +++ b/src/vendor/tianai-captcha/captcha/captcha.less @@ -1,4 +1,4 @@ -#tianai-captcha-parent { +.captcha-parent { box-shadow: 0 0 11px 0 #999999; width: 318px; overflow: hidden; @@ -7,7 +7,7 @@ box-sizing: border-box; border-radius: 5px; padding: 8px; - #tianai-captcha-box { + .captcha-box { height: 260px; width: 100%; position: relative; @@ -25,14 +25,14 @@ } } } - #tianai-captcha { + .captcha { transform-style: preserve-3d; will-change: transform; transition-duration: 0.45s; transform: translateX(-300px); } } - #tianai-captcha-bg-img { + .captcha-bg-img { background-color: #fff; background-position: top; background-size: cover; @@ -78,7 +78,7 @@ box-shadow: 1px 1px 1px #fff; border-radius: 50%; } - #tianai-captcha-slider-move-track-mask { + .captcha-slider-move-track-mask { border-width: 1px; border-style: solid; border-color: #00f4ab; @@ -92,4 +92,10 @@ left: -1px; border-radius: 5px; } + @import "./common/common.less"; + @import "./slider/slider.less"; + @import "./rotate/rotate.less"; + @import "./concat/concat.less"; + @import "./disable/disable.less"; + @import "./image_click/image_click.less"; } diff --git a/src/vendor/tianai-captcha/captcha/common/common.js b/src/vendor/tianai-captcha/captcha/common/common.js index ee90b17..64da487 100644 --- a/src/vendor/tianai-captcha/captcha/common/common.js +++ b/src/vendor/tianai-captcha/captcha/common/common.js @@ -191,10 +191,10 @@ function initConfig( } function closeTips(el, callback) { - const tipEl = Dom(el).find("#tianai-captcha-tips"); - tipEl.removeClass("tianai-captcha-tips-on"); - // tipEl.removeClass("tianai-captcha-tips-success") - // tipEl.removeClass("tianai-captcha-tips-error") + const tipEl = Dom(el).find(".captcha-tips"); + tipEl.removeClass("captcha-tips-on"); + // tipEl.removeClass("captcha-tips-success") + // tipEl.removeClass("captcha-tips-error") // 延时 if (callback) { setTimeout(callback, 0.35); @@ -202,18 +202,18 @@ function closeTips(el, callback) { } function showTips(el, msg, type, callback) { - const tipEl = Dom(el).find("#tianai-captcha-tips"); + const tipEl = Dom(el).find(".captcha-tips"); tipEl.text(msg); if (type === 1) { // 成功 - tipEl.removeClass("tianai-captcha-tips-error"); - tipEl.addClass("tianai-captcha-tips-success"); + tipEl.removeClass("captcha-tips-error"); + tipEl.addClass("captcha-tips-success"); } else { // 失败 - tipEl.removeClass("tianai-captcha-tips-success"); - tipEl.addClass("tianai-captcha-tips-error"); + tipEl.removeClass("captcha-tips-success"); + tipEl.addClass("captcha-tips-error"); } - tipEl.addClass("tianai-captcha-tips-on"); + tipEl.addClass("captcha-tips-on"); // 延时 setTimeout(callback, 1000); } diff --git a/src/vendor/tianai-captcha/captcha/common/common.less b/src/vendor/tianai-captcha/captcha/common/common.less index 0157de2..81d1095 100644 --- a/src/vendor/tianai-captcha/captcha/common/common.less +++ b/src/vendor/tianai-captcha/captcha/common/common.less @@ -1,4 +1,4 @@ -#tianai-captcha { +.captcha { text-align: left; box-sizing: content-box; width: 300px; @@ -12,7 +12,7 @@ width: 100%; } .content { - .tianai-captcha-tips { + .captcha-tips { height: 25px; width: 100%; position: absolute; @@ -29,17 +29,17 @@ /* transition: max-height 0.5s; */ transition: bottom 0.3s ease-in-out; } - .tianai-captcha-tips.tianai-captcha-tips-error { + .captcha-tips.captcha-tips-error { background-color: #ff5d39; } - .tianai-captcha-tips.tianai-captcha-tips-success { + .captcha-tips.captcha-tips-success { background-color: #39c522; } - .tianai-captcha-tips.tianai-captcha-tips-on { + .captcha-tips.captcha-tips-on { bottom: 0; } - #tianai-captcha-loading { + .captcha-loading { z-index: 9999; background-color: #f5f5f5; text-align: center; @@ -56,7 +56,7 @@ } } } - #tianai-captcha-slider-bg-canvas { + .captcha-slider-bg-canvas { position: absolute; left: 0; top: 0; @@ -64,13 +64,13 @@ height: 100%; border-radius: 5px; } - #tianai-captcha-slider-bg-div { + .captcha-slider-bg-div { position: absolute; left: 0; top: 0; width: 100%; height: 100%; - .tianai-captcha-slider-bg-div-slice { + .captcha-slider-bg-div-slice { position: absolute; } } diff --git a/src/vendor/tianai-captcha/captcha/concat/concat.js b/src/vendor/tianai-captcha/captcha/concat/concat.js index 9e2ec1a..f825980 100644 --- a/src/vendor/tianai-captcha/captcha/concat/concat.js +++ b/src/vendor/tianai-captcha/captcha/concat/concat.js @@ -1,6 +1,3 @@ -import "../common/common.less"; -import "../slider/slider.less"; -import "./concat.less"; import { Dom, CommonCaptcha, @@ -14,23 +11,23 @@ const TYPE = "CONCAT"; function getTemplate(styleConfig) { return ` -
+
- 拖动滑块完成拼图 + 拖动滑块完成拼图
-
- +
+
-
-
+
+
-
+
-
+
@@ -50,14 +47,14 @@ class Concat extends CommonCaptcha { // 重载样式 this.destroy(); this.boxEl.append(getTemplate(this.styleConfig)); - this.el = this.boxEl.find("#tianai-captcha"); + this.el = this.boxEl.find(".captcha"); this.loadStyle(); // 按钮绑定事件 this.el - .find("#tianai-captcha-slider-move-btn") + .find(".captcha-slider-move-btn") .mousedown(down.bind(null, this)); this.el - .find("#tianai-captcha-slider-move-btn") + .find(".captcha-slider-move-btn") .touchstart(down.bind(null, this)); clearAllPreventDefault(this.el); // 绑定全局 @@ -74,7 +71,7 @@ class Concat extends CommonCaptcha { destroy() { destroyEvent(); - const existsCaptchaEl = this.boxEl.children("#tianai-captcha"); + const existsCaptchaEl = this.boxEl.children(".captcha"); if (existsCaptchaEl) { existsCaptchaEl.remove(); } @@ -83,13 +80,13 @@ class Concat extends CommonCaptcha { doMove() { const moveX = this.currentCaptchaData.moveX; this.el - .find("#tianai-captcha-slider-move-btn") + .find(".captcha-slider-move-btn") .css("transform", "translate(" + moveX + "px, 0px)"); this.el - .find("#tianai-captcha-slider-concat-img-div") + .find(".captcha-slider-concat-img-div") .css("background-position-x", moveX + "px"); this.el - .find("#tianai-captcha-slider-move-track-mask") + .find(".captcha-slider-move-track-mask") .css("width", moveX + "px"); } @@ -106,18 +103,18 @@ class Concat extends CommonCaptcha { this.el .find(".slider-move .slider-move-btn") .css("background-image", "url(" + sliderImg + ")"); - // this.el.find("#tianai-captcha-slider-move-track-font").text(title); + // this.el.find(".captcha-slider-move-track-font").text(title); this.el - .find("#tianai-captcha-slider-move-track-mask") + .find(".captcha-slider-move-track-mask") .css("border-color", moveTrackMaskBorderColor); this.el - .find("#tianai-captcha-slider-move-track-mask") + .find(".captcha-slider-move-track-mask") .css("background-color", moveTrackMaskBgColor); } loadCaptchaForData(that, data) { - const bgImg = that.el.find(".tianai-captcha-slider-concat-bg-img"); - const sliderImg = that.el.find("#tianai-captcha-slider-concat-img-div"); + const bgImg = that.el.find(".captcha-slider-concat-bg-img"); + const sliderImg = that.el.find(".captcha-slider-concat-img-div"); bgImg.css("background-image", "url(" + data.data.backgroundImage + ")"); sliderImg.css("background-image", "url(" + data.data.backgroundImage + ")"); sliderImg.css("background-position", "0px 0px"); diff --git a/src/vendor/tianai-captcha/captcha/concat/concat.less b/src/vendor/tianai-captcha/captcha/concat/concat.less index ef645bc..6013fe6 100644 --- a/src/vendor/tianai-captcha/captcha/concat/concat.less +++ b/src/vendor/tianai-captcha/captcha/concat/concat.less @@ -1,5 +1,5 @@ -#tianai-captcha.tianai-captcha-concat { - .tianai-captcha-slider-concat-img-div { +.captcha.captcha-concat { + .captcha-slider-concat-img-div { background-size: 100% 180px; position: absolute; transform: translate(0px, 0px); @@ -7,7 +7,7 @@ z-index: 1; width: 100%; } - .tianai-captcha-slider-concat-bg-img { + .captcha-slider-concat-bg-img { width: 100%; height: 100%; position: absolute; diff --git a/src/vendor/tianai-captcha/captcha/disable/disable.js b/src/vendor/tianai-captcha/captcha/disable/disable.js index 0ee18ef..8cb167c 100644 --- a/src/vendor/tianai-captcha/captcha/disable/disable.js +++ b/src/vendor/tianai-captcha/captcha/disable/disable.js @@ -1,11 +1,10 @@ const TYPE = "DISABLE"; -import "./disable.less"; function getTemplate(styleConfig) { return ` -
+
- ${styleConfig.i18n.disable_title} + ${styleConfig.i18n.disable_title}
@@ -13,7 +12,7 @@ function getTemplate(styleConfig) { - +
@@ -30,7 +29,7 @@ class Disable { // 重载样式 this.destroy(); this.boxEl.append(getTemplate(this.styleConfig)); - this.el = this.boxEl.find("#tianai-captcha"); + this.el = this.boxEl.find(".captcha"); // 绑定全局 // window.currentCaptcha = this; // 载入验证码 @@ -44,14 +43,14 @@ class Disable { } destroy() { - const existsCaptchaEl = this.boxEl.find("#tianai-captcha"); + const existsCaptchaEl = this.boxEl.find(".captcha"); if (existsCaptchaEl) { existsCaptchaEl.remove(); } } loadCaptchaForData(that, data) { const msg = data.msg || data.message || "接口异常"; - that.el.find("#content-span").text(msg); + that.el.find(".content-span").text(msg); } } diff --git a/src/vendor/tianai-captcha/captcha/disable/disable.less b/src/vendor/tianai-captcha/captcha/disable/disable.less index a8e932f..34fbc48 100644 --- a/src/vendor/tianai-captcha/captcha/disable/disable.less +++ b/src/vendor/tianai-captcha/captcha/disable/disable.less @@ -1,4 +1,4 @@ -#tianai-captcha.tianai-captcha-disable { +.captcha.captcha-disable { z-index: 999; position: absolute; left: 0; @@ -13,7 +13,7 @@ width: 100%; height: 100%; overflow: hidden; - #content-span { + .content-span { color: #fff; overflow: hidden; margin-top: 132px; diff --git a/src/vendor/tianai-captcha/captcha/image_click/image_click.js b/src/vendor/tianai-captcha/captcha/image_click/image_click.js index b1e2b53..bdba58b 100644 --- a/src/vendor/tianai-captcha/captcha/image_click/image_click.js +++ b/src/vendor/tianai-captcha/captcha/image_click/image_click.js @@ -1,4 +1,3 @@ -import "./image_click.less"; import { CommonCaptcha, move, @@ -13,18 +12,18 @@ import { const TYPE = "IMAGE_CLICK"; function getTemplate(styleConfig) { return ` -
+
- ${styleConfig.i18n.image_click_title} - + ${styleConfig.i18n.image_click_title} +
- - -
+ + +
-
+
确定
@@ -42,7 +41,7 @@ class ImageClick extends CommonCaptcha { // 重载样式 this.destroy(); this.boxEl.append(getTemplate(this.styleConfig)); - this.el = this.boxEl.find("#tianai-captcha"); + this.el = this.boxEl.find(".captcha"); // 绑定全局 // window.currentCaptcha = this; // 载入验证码 @@ -50,7 +49,7 @@ class ImageClick extends CommonCaptcha { this.endCallback = endCallback; const moveFun = move.bind(null, this); // 绑定事件 - this.el.find("#bg-img-click-mask").click((event) => { + this.el.find(".bg-img-click-mask").click((event) => { if (event.target.className === "click-span") { return; } @@ -73,7 +72,7 @@ class ImageClick extends CommonCaptcha { const left = event.offsetX - 10; const top = event.offsetY - 10; this.el - .find("#bg-img-click-mask") + .find(".bg-img-click-mask") .append( "