sookie/blog-admin-web
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

refactor: simplify captcha selector naming

Browse Source 
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.
This commit is contained in:
sookie
2026-05-16 12:25:52 +08:00
parent e0f6175fed
commit 662b22576d
14 changed files with 136 additions and 139 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/vendor/tianai-captcha/captcha/rotate/rotate.js
Vendored
+21 -23
View File
@@ -1,5 +1,3 @@
import "../slider/slider.less";
import "./rotate.less";
import {
CommonCaptcha,
down,
@@ -14,26 +12,26 @@ import {
const TYPE = "ROTATE";
function getTemplate(styleConfig) {
return `
<div id="tianai-captcha" class="tianai-captcha-slider tianai-captcha-rotate">
<div class="captcha captcha-slider captcha-rotate">
<div class="slider-tip">
<span id="tianai-captcha-slider-move-track-font" style="font-size: ${styleConfig.i18n.rotate_title_size}">${styleConfig.i18n.rotate_title}</span>
<span class="captcha-slider-move-track-font" style="font-size: ${styleConfig.i18n.rotate_title_size}">${styleConfig.i18n.rotate_title}</span>
</div>
<div class="content">
<div class="bg-img-div">
<img id="tianai-captcha-slider-bg-img" src="" alt/>
<canvas id="tianai-captcha-slider-bg-canvas"></canvas>
<img class="captcha-slider-bg-img" src="" alt/>
<canvas class="captcha-slider-bg-canvas"></canvas>
</div>
<div class="rotate-img-div" id="tianai-captcha-slider-img-div">
<img id="tianai-captcha-slider-move-img" src="" alt/>
<div class="rotate-img-div captcha-slider-img-div">
<img class="captcha-slider-move-img" src="" alt/>
</div>
<div class="tianai-captcha-tips" id="tianai-captcha-tips"></div>
<div class="captcha-tips"></div>
</div>
<div class="slider-move">
<div class="slider-move-track">
<div id="tianai-captcha-slider-move-track-mask"></div>
<div class="captcha-slider-move-track-mask"></div>
<div class="slider-move-shadow"></div>
</div>
<div class="slider-move-btn" id="tianai-captcha-slider-move-btn">
<div class="slider-move-btn captcha-slider-move-btn">
</div>
</div>
</div>
@@ -51,14 +49,14 @@ class Rotate 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));
// 绑定全局
// window.currentCaptcha = this;
@@ -73,7 +71,7 @@ class Rotate extends CommonCaptcha {
}
destroy() {
const existsCaptchaEl = this.boxEl.children("#tianai-captcha");
const existsCaptchaEl = this.boxEl.children(".captcha");
if (existsCaptchaEl) {
existsCaptchaEl.remove();
}
@@ -82,16 +80,16 @@ class Rotate 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-move-img")
.find(".captcha-slider-move-img")
.css(
"transform",
"rotate(" + moveX / (this.currentCaptchaData.end / 360) + "deg)",
);
this.el
.find("#tianai-captcha-slider-move-track-mask")
.find(".captcha-slider-move-track-mask")
.css("width", moveX + "px");
}
loadStyle() {
@@ -107,17 +105,17 @@ class Rotate 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-bg-img");
const sliderImg = that.el.find("#tianai-captcha-slider-move-img");
const bgImg = that.el.find(".captcha-slider-bg-img");
const sliderImg = that.el.find(".captcha-slider-move-img");
bgImg.attr("src", data.data.backgroundImage);
sliderImg.attr("src", data.data.templateImage);
bgImg.on("load", () => {