验证码调试页面
This commit is contained in:
parent
a22f9e5ff4
commit
3e331f58ce
GPG Key ID:
67E8D0AE905C79B0
3
components.d.ts
vendored
3
components.d.ts
vendored
@ -9,6 +9,7 @@ declare module '@vue/runtime-core' {
|
||||
export interface GlobalComponents {
|
||||
ElAside: typeof import('element-plus/es')['ElAside']
|
||||
ElButton: typeof import('element-plus/es')['ElButton']
|
||||
ElCard: typeof import('element-plus/es')['ElCard']
|
||||
ElCol: typeof import('element-plus/es')['ElCol']
|
||||
ElConfigProvider: typeof import('element-plus/es')['ElConfigProvider']
|
||||
ElContainer: typeof import('element-plus/es')['ElContainer']
|
||||
@ -32,6 +33,8 @@ declare module '@vue/runtime-core' {
|
||||
ElMenuItem: typeof import('element-plus/es')['ElMenuItem']
|
||||
ElOption: typeof import('element-plus/es')['ElOption']
|
||||
ElPagination: typeof import('element-plus/es')['ElPagination']
|
||||
ElRadioButton: typeof import('element-plus/es')['ElRadioButton']
|
||||
ElRadioGroup: typeof import('element-plus/es')['ElRadioGroup']
|
||||
ElRow: typeof import('element-plus/es')['ElRow']
|
||||
ElSelect: typeof import('element-plus/es')['ElSelect']
|
||||
ElSubMenu: typeof import('element-plus/es')['ElSubMenu']
|
||||
|
||||
@ -33,6 +33,14 @@ const menus: MenuGroup[] = [
|
||||
{ title: '图片资源库', path: '/api/sourceImage', permission: 'sourceImage:list' },
|
||||
{ title: '歌曲库', path: '/api/music', permission: 'music:list' }
|
||||
]
|
||||
},
|
||||
{
|
||||
name: 'debug',
|
||||
title: '调试工具',
|
||||
icon: 'Tools',
|
||||
child: [
|
||||
{ title: '图形验证码', path: '/debug/captcha', permission: 'captcha:list' }
|
||||
]
|
||||
}
|
||||
]
|
||||
|
||||
|
||||
@ -18,6 +18,8 @@ const routes: Array<RouteRecordRaw> = [
|
||||
{ path: '/api/hitokoto', name: 'Hitokoto', component: () => import('@/views/api/Hitokoto.vue'), meta: { title: '一言' } },
|
||||
{ path: '/api/photoWall', name: 'PhotoWall', component: () => import('@/views/api/PhotoWall.vue'), meta: { title: '照片墙' } },
|
||||
{ path: '/api/sourceImage', name: 'SourceImage', component: () => import('@/views/api/SourceImage.vue'), meta: { title: '图片资源库' } },
|
||||
|
||||
{ path: '/debug/captcha', name: 'CaptchaSandbox', component: () => import('@/views/debug/CaptchaSandbox.vue'), meta: { title: '图形验证码' } },
|
||||
]}
|
||||
]
|
||||
|
||||
|
||||
193
src/vendor/tianai-captcha/captcha/captcha.js
vendored
Normal file
193
src/vendor/tianai-captcha/captcha/captcha.js
vendored
Normal file
@ -0,0 +1,193 @@
|
||||
import "./captcha.less";
|
||||
import Slider from "./slider/slider";
|
||||
import Rotate from "./rotate/rotate";
|
||||
import Concat from "./concat/concat";
|
||||
import Disable from "./disable/disable";
|
||||
import ImageClick from "./image_click/image_click";
|
||||
import WordImageClick from "./word_image_click/word_image_click";
|
||||
import { CaptchaConfig, wrapConfig, wrapStyle } from "./config/config";
|
||||
import { clearAllPreventDefault } from "./common/common";
|
||||
const template = `
|
||||
<div id="tianai-captcha-parent">
|
||||
<div id="tianai-captcha-bg-img"></div>
|
||||
<div id="tianai-captcha-box">
|
||||
<div id="tianai-captcha-loading" class="loading"></div>
|
||||
</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>
|
||||
</div>
|
||||
`;
|
||||
function createCaptchaByType(type, tac) {
|
||||
const box = tac.config.domBindEl.find("#tianai-captcha-box");
|
||||
const styleConfig = tac.style;
|
||||
switch (type) {
|
||||
case "SLIDER":
|
||||
return new Slider(box, styleConfig);
|
||||
case "ROTATE":
|
||||
case "ROTATE_DEGREE":
|
||||
return new Rotate(box, styleConfig);
|
||||
case "CONCAT":
|
||||
return new Concat(box, styleConfig);
|
||||
case "IMAGE_CLICK":
|
||||
return new ImageClick(box, styleConfig);
|
||||
case "WORD_IMAGE_CLICK":
|
||||
return new WordImageClick(box, styleConfig);
|
||||
case "DISABLED":
|
||||
return new Disable(box, styleConfig);
|
||||
default:
|
||||
return null;
|
||||
}
|
||||
}
|
||||
class TianAiCaptcha {
|
||||
constructor(config, style) {
|
||||
this.config = wrapConfig(config);
|
||||
if (this.config.btnRefreshFun) {
|
||||
this.btnRefreshFun = this.config.btnRefreshFun;
|
||||
}
|
||||
if (this.config.btnCloseFun) {
|
||||
this.btnCloseFun = this.config.btnCloseFun;
|
||||
}
|
||||
this.style = wrapStyle(style);
|
||||
}
|
||||
|
||||
init() {
|
||||
this.destroyWindow();
|
||||
this.config.domBindEl.append(template);
|
||||
this.domTemplate = this.config.domBindEl.find("#tianai-captcha-parent");
|
||||
clearAllPreventDefault(this.domTemplate);
|
||||
this.loadStyle();
|
||||
// 绑定按钮事件
|
||||
this.config.domBindEl
|
||||
.find("#tianai-captcha-slider-refresh-btn")
|
||||
.click((el) => {
|
||||
this.btnRefreshFun(el, this);
|
||||
});
|
||||
this.config.domBindEl
|
||||
.find("#tianai-captcha-slider-close-btn")
|
||||
.click((el) => {
|
||||
this.btnCloseFun(el, this);
|
||||
});
|
||||
// 加载验证码
|
||||
this.reloadCaptcha();
|
||||
return this;
|
||||
}
|
||||
|
||||
btnRefreshFun(el, tac) {
|
||||
tac.reloadCaptcha();
|
||||
}
|
||||
btnCloseFun(el, tac) {
|
||||
tac.destroyWindow();
|
||||
}
|
||||
reloadCaptcha() {
|
||||
this.showLoading();
|
||||
this.destroyCaptcha(() => {
|
||||
this.createCaptcha();
|
||||
});
|
||||
}
|
||||
showLoading() {
|
||||
this.config.domBindEl
|
||||
.find("#tianai-captcha-loading")
|
||||
.css("display", "block");
|
||||
}
|
||||
|
||||
closeLoading() {
|
||||
this.config.domBindEl
|
||||
.find("#tianai-captcha-loading")
|
||||
.css("display", "none");
|
||||
}
|
||||
|
||||
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() {
|
||||
if (this.C) {
|
||||
this.C.destroy();
|
||||
this.C = undefined;
|
||||
}
|
||||
if (this.domTemplate) {
|
||||
this.domTemplate.remove();
|
||||
}
|
||||
}
|
||||
|
||||
openCaptcha() {
|
||||
setTimeout(() => {
|
||||
this.C.el.css("transform", "translateX(0)");
|
||||
}, 10);
|
||||
}
|
||||
|
||||
createCaptcha() {
|
||||
this.config.requestCaptchaData().then((data) => {
|
||||
this.closeLoading();
|
||||
if (!data.code) {
|
||||
throw new Error("[TAC] 后台验证码接口数据错误!!!");
|
||||
}
|
||||
let captchaType = data.code === 200 ? data.data?.type : "DISABLED";
|
||||
const captcha = createCaptchaByType(captchaType, this);
|
||||
if (captcha == null) {
|
||||
throw new Error("[TAC] 未知的验证码类型[" + captchaType + "]");
|
||||
}
|
||||
captcha.init(data, (d, c) => {
|
||||
// 验证
|
||||
const currentCaptchaData = c.currentCaptchaData;
|
||||
const data = {
|
||||
bgImageWidth: currentCaptchaData.bgImageWidth,
|
||||
bgImageHeight: currentCaptchaData.bgImageHeight,
|
||||
templateImageWidth: currentCaptchaData.templateImageWidth,
|
||||
templateImageHeight: currentCaptchaData.templateImageHeight,
|
||||
startTime: currentCaptchaData.startTime.getTime(),
|
||||
stopTime: currentCaptchaData.stopTime.getTime(),
|
||||
trackList: currentCaptchaData.trackList,
|
||||
};
|
||||
if (c.type === "ROTATE_DEGREE" || c.type === "ROTATE") {
|
||||
data.bgImageWidth = c.currentCaptchaData.end;
|
||||
}
|
||||
if (currentCaptchaData.data) {
|
||||
data.data = currentCaptchaData.data;
|
||||
}
|
||||
// 清空
|
||||
const id = c.currentCaptchaData.currentCaptchaId;
|
||||
c.currentCaptchaData = undefined;
|
||||
// 调用验证接口
|
||||
this.config.validCaptcha(id, data, c, this);
|
||||
});
|
||||
this.C = captcha;
|
||||
this.openCaptcha();
|
||||
});
|
||||
}
|
||||
|
||||
destroyCaptcha(callback) {
|
||||
if (this.C) {
|
||||
this.C.el.css("transform", "translateX(300px)");
|
||||
setTimeout(() => {
|
||||
this.C.destroy();
|
||||
if (callback) {
|
||||
callback();
|
||||
}
|
||||
}, 500);
|
||||
} else {
|
||||
callback();
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
export { TianAiCaptcha, CaptchaConfig };
|
||||
104
src/vendor/tianai-captcha/captcha/captcha.less
vendored
Normal file
104
src/vendor/tianai-captcha/captcha/captcha.less
vendored
Normal file
@ -0,0 +1,104 @@
|
||||
#tianai-captcha-parent {
|
||||
box-shadow: 0 0 11px 0 #999999;
|
||||
width: 318px;
|
||||
height: 318px;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
z-index: 997;
|
||||
box-sizing: border-box;
|
||||
border-radius: 5px;
|
||||
padding: 8px;
|
||||
#tianai-captcha-box {
|
||||
height: 260px;
|
||||
width: 100%;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
.loading {
|
||||
width: 120px;
|
||||
height: 20px;
|
||||
mask: linear-gradient(90deg, #000 70%, #0000 0) 0/20%;
|
||||
background: linear-gradient(#f7b645 0 0) 0 / 0% no-repeat #dddddd6b;
|
||||
animation: cartoon 1s infinite steps(6);
|
||||
margin: 120px auto;
|
||||
@keyframes cartoon {
|
||||
100% {
|
||||
background-size: 120%;
|
||||
}
|
||||
}
|
||||
}
|
||||
#tianai-captcha {
|
||||
transform-style: preserve-3d;
|
||||
will-change: transform;
|
||||
transition-duration: 0.45s;
|
||||
transform: translateX(-300px);
|
||||
}
|
||||
}
|
||||
#tianai-captcha-bg-img {
|
||||
background-color: #fff;
|
||||
background-position: top;
|
||||
background-size: cover;
|
||||
z-index: -1;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
top: 0;
|
||||
left: 0;
|
||||
position: absolute;
|
||||
border-radius: 6px;
|
||||
//background-image: url("");
|
||||
}
|
||||
|
||||
.slider-bottom {
|
||||
.close-btn {
|
||||
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;
|
||||
}
|
||||
.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%;
|
||||
}
|
||||
.slider-move-shadow {
|
||||
animation: myanimation 2s infinite;
|
||||
height: 100%;
|
||||
width: 5px;
|
||||
background-color: #fff;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
filter: opacity(0.5);
|
||||
box-shadow: 1px 1px 1px #fff;
|
||||
border-radius: 50%;
|
||||
}
|
||||
#tianai-captcha-slider-move-track-mask {
|
||||
border-width: 1px;
|
||||
border-style: solid;
|
||||
border-color: #00f4ab;
|
||||
|
||||
width: 0;
|
||||
height: 32px;
|
||||
background-color: #a9ffe5;
|
||||
opacity: 0.5;
|
||||
position: absolute;
|
||||
top: -1px;
|
||||
left: -1px;
|
||||
border-radius: 5px;
|
||||
}
|
||||
}
|
||||
462
src/vendor/tianai-captcha/captcha/common/common.js
vendored
Normal file
462
src/vendor/tianai-captcha/captcha/common/common.js
vendored
Normal file
@ -0,0 +1,462 @@
|
||||
/** 是否打印日志 */
|
||||
var isPrintLog = false;
|
||||
|
||||
function printLog(params) {
|
||||
if (isPrintLog) {
|
||||
console.log(JSON.stringify(params));
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 清除默认事件
|
||||
* @param event event
|
||||
*/
|
||||
function clearPreventDefault(event) {
|
||||
if (event.preventDefault) {
|
||||
event.preventDefault();
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 阻止某div默认事件
|
||||
* @param dom
|
||||
*/
|
||||
function clearAllPreventDefault(dom) {
|
||||
Dom(dom).each((el) => {
|
||||
// 手机端
|
||||
el.addEventListener("touchmove", clearPreventDefault, { passive: false });
|
||||
// pc端
|
||||
el.addEventListener("mousemove", clearPreventDefault, { passive: false });
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* 获取当前坐标
|
||||
* @param event 事件
|
||||
* @returns {{x: number, y: number}}
|
||||
*/
|
||||
function getCurrentCoordinate(event) {
|
||||
if (event.pageX !== null && event.pageX !== undefined) {
|
||||
return {
|
||||
x: Math.round(event.pageX),
|
||||
y: Math.round(event.pageY),
|
||||
};
|
||||
}
|
||||
let targetTouches;
|
||||
if (event.changedTouches) {
|
||||
// 抬起事件
|
||||
targetTouches = event.changedTouches;
|
||||
} else if (event.targetTouches) {
|
||||
// pc 按下事件
|
||||
targetTouches = event.targetTouches;
|
||||
} else if (event.originalEvent && event.originalEvent.targetTouches) {
|
||||
// 鼠标触摸事件
|
||||
targetTouches = event.originalEvent.targetTouches;
|
||||
}
|
||||
if (targetTouches[0].pageX !== null && targetTouches[0].pageX !== undefined) {
|
||||
return {
|
||||
x: Math.round(targetTouches[0].pageX),
|
||||
y: Math.round(targetTouches[0].pageY),
|
||||
};
|
||||
}
|
||||
return {
|
||||
x: Math.round(targetTouches[0].clientX),
|
||||
y: Math.round(targetTouches[0].clientY),
|
||||
};
|
||||
}
|
||||
|
||||
function down(currentCaptcha, event) {
|
||||
// debugger
|
||||
const coordinate = getCurrentCoordinate(event);
|
||||
let startX = coordinate.x;
|
||||
let startY = coordinate.y;
|
||||
currentCaptcha.currentCaptchaData.startX = startX;
|
||||
currentCaptcha.currentCaptchaData.startY = startY;
|
||||
const trackList = currentCaptcha.currentCaptchaData.trackList;
|
||||
currentCaptcha.currentCaptchaData.startTime = new Date();
|
||||
const startTime = currentCaptcha.currentCaptchaData.startTime;
|
||||
|
||||
trackList.push({
|
||||
x: coordinate.x,
|
||||
y: coordinate.y,
|
||||
type: "down",
|
||||
t: new Date().getTime() - startTime.getTime(),
|
||||
});
|
||||
printLog(["start", startX, startY]);
|
||||
currentCaptcha.__m__ = move.bind(null, currentCaptcha);
|
||||
currentCaptcha.__u__ = up.bind(null, currentCaptcha);
|
||||
// pc
|
||||
window.addEventListener("mousemove", currentCaptcha.__m__);
|
||||
window.addEventListener("mouseup", currentCaptcha.__u__);
|
||||
// 手机端
|
||||
window.addEventListener("touchmove", currentCaptcha.__m__, false);
|
||||
window.addEventListener("touchend", currentCaptcha.__u__, false);
|
||||
if (currentCaptcha && currentCaptcha.doDown) {
|
||||
currentCaptcha.doDown(event, currentCaptcha);
|
||||
}
|
||||
}
|
||||
|
||||
function move(currentCaptcha, event) {
|
||||
if (event.touches && event.touches.length > 0) {
|
||||
event = event.touches[0];
|
||||
}
|
||||
// debugger
|
||||
const coordinate = getCurrentCoordinate(event);
|
||||
let pageX = coordinate.x;
|
||||
let pageY = coordinate.y;
|
||||
const startX = currentCaptcha.currentCaptchaData.startX;
|
||||
const startY = currentCaptcha.currentCaptchaData.startY;
|
||||
const startTime = currentCaptcha.currentCaptchaData.startTime;
|
||||
const end = currentCaptcha.currentCaptchaData.end;
|
||||
const bgImageWidth = currentCaptcha.currentCaptchaData.bgImageWidth;
|
||||
const trackList = currentCaptcha.currentCaptchaData.trackList;
|
||||
let moveX = pageX - startX;
|
||||
let moveY = pageY - startY;
|
||||
const track = {
|
||||
x: coordinate.x,
|
||||
y: coordinate.y,
|
||||
type: "move",
|
||||
t: new Date().getTime() - startTime.getTime(),
|
||||
};
|
||||
trackList.push(track);
|
||||
if (moveX < 0) {
|
||||
moveX = 0;
|
||||
} else if (moveX > end) {
|
||||
moveX = end;
|
||||
}
|
||||
currentCaptcha.currentCaptchaData.moveX = moveX;
|
||||
currentCaptcha.currentCaptchaData.moveY = moveY;
|
||||
if (currentCaptcha.doMove) {
|
||||
currentCaptcha.doMove(event, currentCaptcha);
|
||||
}
|
||||
printLog(["move", track]);
|
||||
}
|
||||
function destroyEvent(currentCaptcha) {
|
||||
if (currentCaptcha) {
|
||||
if (currentCaptcha.__m__) {
|
||||
window.removeEventListener("mousemove", currentCaptcha.__m__);
|
||||
window.removeEventListener("touchmove", currentCaptcha.__m__);
|
||||
}
|
||||
if (currentCaptcha.__u__) {
|
||||
window.removeEventListener("mouseup", currentCaptcha.__u__);
|
||||
window.removeEventListener("touchend", currentCaptcha.__u__);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function up(currentCaptcha, event) {
|
||||
destroyEvent(currentCaptcha);
|
||||
const coordinate = getCurrentCoordinate(event);
|
||||
currentCaptcha.currentCaptchaData.stopTime = new Date();
|
||||
const startTime = currentCaptcha.currentCaptchaData.startTime;
|
||||
const trackList = currentCaptcha.currentCaptchaData.trackList;
|
||||
|
||||
const track = {
|
||||
x: coordinate.x,
|
||||
y: coordinate.y,
|
||||
type: "up",
|
||||
t: new Date().getTime() - startTime.getTime(),
|
||||
};
|
||||
|
||||
trackList.push(track);
|
||||
printLog(["up", track]);
|
||||
printLog(["tracks", trackList]);
|
||||
if (currentCaptcha.doUp) {
|
||||
currentCaptcha.doUp(event, currentCaptcha);
|
||||
}
|
||||
currentCaptcha.endCallback(currentCaptcha.currentCaptchaData, currentCaptcha);
|
||||
}
|
||||
|
||||
function initConfig(
|
||||
bgImageWidth,
|
||||
bgImageHeight,
|
||||
templateImageWidth,
|
||||
templateImageHeight,
|
||||
end,
|
||||
) {
|
||||
// bugfix 图片宽高可能会有小数情况，强转一下整数
|
||||
const currentCaptchaConfig = {
|
||||
startTime: new Date(),
|
||||
trackList: [],
|
||||
movePercent: 0,
|
||||
clickCount: 0,
|
||||
bgImageWidth: Math.round(bgImageWidth),
|
||||
bgImageHeight: Math.round(bgImageHeight),
|
||||
templateImageWidth: Math.round(templateImageWidth),
|
||||
templateImageHeight: Math.round(templateImageHeight),
|
||||
end: end,
|
||||
};
|
||||
printLog(["init", currentCaptchaConfig]);
|
||||
return currentCaptchaConfig;
|
||||
}
|
||||
|
||||
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")
|
||||
// 延时
|
||||
if (callback) {
|
||||
setTimeout(callback, 0.35);
|
||||
}
|
||||
}
|
||||
|
||||
function showTips(el, msg, type, callback) {
|
||||
const tipEl = Dom(el).find("#tianai-captcha-tips");
|
||||
tipEl.text(msg);
|
||||
if (type === 1) {
|
||||
// 成功
|
||||
tipEl.removeClass("tianai-captcha-tips-error");
|
||||
tipEl.addClass("tianai-captcha-tips-success");
|
||||
} else {
|
||||
// 失败
|
||||
tipEl.removeClass("tianai-captcha-tips-success");
|
||||
tipEl.addClass("tianai-captcha-tips-error");
|
||||
}
|
||||
tipEl.addClass("tianai-captcha-tips-on");
|
||||
// 延时
|
||||
setTimeout(callback, 1000);
|
||||
}
|
||||
|
||||
class CommonCaptcha {
|
||||
showTips(msg, type, callback) {
|
||||
showTips(this.el, msg, type, callback);
|
||||
}
|
||||
|
||||
closeTips(msg, callback) {
|
||||
closeTips(this.el, msg, callback);
|
||||
}
|
||||
}
|
||||
|
||||
function Dom(domStr, dom) {
|
||||
return new DomEl(domStr, dom);
|
||||
}
|
||||
|
||||
class DomEl {
|
||||
constructor(domStr, dom) {
|
||||
if (dom instanceof HTMLElement) {
|
||||
this.dom = dom;
|
||||
this.domStr = domStr;
|
||||
return;
|
||||
}
|
||||
if (domStr instanceof DomEl) {
|
||||
this.dom = domStr.dom;
|
||||
this.domStr = domStr.domStr;
|
||||
} else if (typeof domStr === "string") {
|
||||
this.dom = document.querySelector(domStr);
|
||||
this.domStr = domStr;
|
||||
} else if (domStr instanceof HTMLElement) {
|
||||
this.dom = domStr;
|
||||
this.domStr = domStr.nodeName;
|
||||
} else {
|
||||
throw new Error("不支持的类型");
|
||||
}
|
||||
}
|
||||
|
||||
each(callback) {
|
||||
this.getTarget().querySelectorAll("*").forEach(callback);
|
||||
}
|
||||
|
||||
removeClass(className) {
|
||||
let element = this.getTarget();
|
||||
if (element.classList) {
|
||||
// 使用 classList API 移除类
|
||||
element.classList.remove(className);
|
||||
} else {
|
||||
// 兼容旧版本浏览器
|
||||
const currentClass = element.className;
|
||||
const regex = new RegExp("(?:^|\\s)" + className + "(?!\\S)", "g");
|
||||
element.className = currentClass.replace(regex, "");
|
||||
}
|
||||
return this;
|
||||
}
|
||||
|
||||
addClass(className) {
|
||||
const element = this.getTarget();
|
||||
if (element.classList) {
|
||||
// 使用 classList API 添加类
|
||||
element.classList.add(className);
|
||||
} else {
|
||||
// 兼容旧版本浏览器
|
||||
let currentClass = element.className;
|
||||
if (currentClass.indexOf(className) === -1) {
|
||||
element.className = currentClass + " " + className;
|
||||
}
|
||||
}
|
||||
return this;
|
||||
}
|
||||
|
||||
find(str) {
|
||||
const el = this.getTarget().querySelector(str);
|
||||
if (el) {
|
||||
return new DomEl(str, el);
|
||||
}
|
||||
return null;
|
||||
}
|
||||
|
||||
children(selector) {
|
||||
const childNodes = this.getTarget().childNodes;
|
||||
for (let i = 0; i < childNodes.length; i++) {
|
||||
if (childNodes[i].nodeType === 1 && childNodes[i].matches(selector)) {
|
||||
return new DomEl(selector, childNodes[i]);
|
||||
}
|
||||
}
|
||||
return null;
|
||||
}
|
||||
|
||||
remove() {
|
||||
this.getTarget().remove();
|
||||
return null;
|
||||
}
|
||||
|
||||
css(property, value) {
|
||||
if (typeof property === "string" && typeof value === "string") {
|
||||
// 设置单个属性
|
||||
this.getTarget().style[property] = value;
|
||||
} else if (typeof property === "object") {
|
||||
// 设置多个属性
|
||||
for (var prop in property) {
|
||||
if (property.hasOwnProperty(prop)) {
|
||||
this.getTarget().style[prop] = property[prop];
|
||||
}
|
||||
}
|
||||
} else if (typeof property === "string" && typeof value === "undefined") {
|
||||
// 获取单个属性
|
||||
return window.getComputedStyle(element)[property];
|
||||
}
|
||||
}
|
||||
|
||||
attr(attributeName, value) {
|
||||
if (value === undefined) {
|
||||
// 如果未提供值，则返回属性的当前值
|
||||
return this.getTarget().getAttribute(attributeName);
|
||||
} else {
|
||||
// 如果提供了值，则设置属性的值
|
||||
this.getTarget().setAttribute(attributeName, value);
|
||||
}
|
||||
return this;
|
||||
}
|
||||
|
||||
text(str) {
|
||||
this.getTarget().innerText = str;
|
||||
return this;
|
||||
}
|
||||
|
||||
html(str) {
|
||||
this.getTarget().innerHtml = str;
|
||||
return this;
|
||||
}
|
||||
|
||||
is(dom) {
|
||||
if (dom && typeof dom === "object" && typeof dom.nodeType !== "undefined") {
|
||||
return this.dom === dom;
|
||||
}
|
||||
if (dom instanceof DomEl) {
|
||||
return this.dom === dom.dom;
|
||||
}
|
||||
}
|
||||
|
||||
append(content) {
|
||||
if (typeof content === "string") {
|
||||
this.getTarget().insertAdjacentHTML("beforeend", content);
|
||||
} else if (content instanceof HTMLElement) {
|
||||
this.getTarget().appendChild(content);
|
||||
} else {
|
||||
throw new Error("Invalid content type");
|
||||
}
|
||||
return this;
|
||||
}
|
||||
|
||||
click(fun) {
|
||||
this.on("click", fun);
|
||||
return this;
|
||||
}
|
||||
|
||||
mousedown(fun) {
|
||||
this.on("mousedown", fun);
|
||||
return this;
|
||||
}
|
||||
|
||||
touchstart(fun) {
|
||||
this.on("touchstart", fun);
|
||||
return this;
|
||||
}
|
||||
|
||||
on(eventType, fun) {
|
||||
this.getTarget().addEventListener(eventType, fun, { passive: true });
|
||||
return this;
|
||||
}
|
||||
|
||||
width() {
|
||||
return this.getTarget().offsetWidth;
|
||||
}
|
||||
|
||||
height() {
|
||||
return this.getTarget().offsetHeight;
|
||||
}
|
||||
|
||||
getTarget() {
|
||||
if (this.dom) {
|
||||
return this.dom;
|
||||
}
|
||||
throw new Error("dom不存在: [" + this.domStr + "]");
|
||||
}
|
||||
}
|
||||
|
||||
function http(options) {
|
||||
return new Promise(function (resolve, reject) {
|
||||
var xhr = new XMLHttpRequest();
|
||||
xhr.open(options.method || "GET", options.url);
|
||||
// 设置请求头
|
||||
if (options.headers) {
|
||||
for (const header in options.headers) {
|
||||
if (options.headers.hasOwnProperty(header)) {
|
||||
xhr.setRequestHeader(header, options.headers[header]);
|
||||
}
|
||||
}
|
||||
}
|
||||
xhr.onreadystatechange = function () {
|
||||
if (xhr.readyState === XMLHttpRequest.DONE) {
|
||||
if (xhr.status >= 200 && xhr.status <= 500) {
|
||||
const contentType = xhr.getResponseHeader("Content-Type");
|
||||
if (contentType && contentType.indexOf("application/json") !== -1) {
|
||||
resolve(JSON.parse(xhr.responseText));
|
||||
} else {
|
||||
resolve(xhr.responseText);
|
||||
}
|
||||
} else {
|
||||
reject(new Error("Request failed with status: " + xhr.status));
|
||||
}
|
||||
}
|
||||
};
|
||||
xhr.onerror = function () {
|
||||
reject(new Error("Network Error"));
|
||||
};
|
||||
xhr.send(options.data);
|
||||
});
|
||||
}
|
||||
|
||||
function isEmptyObject(obj) {
|
||||
for (var key in obj) {
|
||||
if (obj.hasOwnProperty(key)) {
|
||||
return false; // 对象不为空
|
||||
}
|
||||
}
|
||||
return true; // 对象为空
|
||||
}
|
||||
|
||||
export {
|
||||
isEmptyObject,
|
||||
http,
|
||||
Dom,
|
||||
DomEl,
|
||||
CommonCaptcha,
|
||||
clearAllPreventDefault,
|
||||
down,
|
||||
move,
|
||||
up,
|
||||
initConfig,
|
||||
showTips,
|
||||
closeTips,
|
||||
destroyEvent,
|
||||
};
|
||||
86
src/vendor/tianai-captcha/captcha/common/common.less
vendored
Normal file
86
src/vendor/tianai-captcha/captcha/common/common.less
vendored
Normal file
@ -0,0 +1,86 @@
|
||||
#tianai-captcha {
|
||||
text-align: left;
|
||||
box-sizing: content-box;
|
||||
width: 300px;
|
||||
height: 260px;
|
||||
z-index: 999;
|
||||
.slider-bottom .logo {
|
||||
height: 30px;
|
||||
}
|
||||
.slider-bottom {
|
||||
height: 19px;
|
||||
width: 100%;
|
||||
}
|
||||
.content {
|
||||
.tianai-captcha-tips {
|
||||
height: 25px;
|
||||
width: 100%;
|
||||
position: absolute;
|
||||
bottom: -25px;
|
||||
left: 0;
|
||||
z-index: 999;
|
||||
font-size: 15px;
|
||||
line-height: 25px;
|
||||
/*background-color: #FF5D39;*/
|
||||
color: #fff;
|
||||
text-align: center;
|
||||
/* transform: translateY(0px); */
|
||||
/* display: none; */
|
||||
/* transition: max-height 0.5s; */
|
||||
transition: bottom 0.3s ease-in-out;
|
||||
}
|
||||
.tianai-captcha-tips.tianai-captcha-tips-error {
|
||||
background-color: #ff5d39;
|
||||
}
|
||||
.tianai-captcha-tips.tianai-captcha-tips-success {
|
||||
background-color: #39c522;
|
||||
}
|
||||
.tianai-captcha-tips.tianai-captcha-tips-on {
|
||||
bottom: 0;
|
||||
}
|
||||
|
||||
#tianai-captcha-loading {
|
||||
z-index: 9999;
|
||||
background-color: #f5f5f5;
|
||||
text-align: center;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
img {
|
||||
display: block;
|
||||
width: 45px;
|
||||
height: 45px;
|
||||
}
|
||||
}
|
||||
}
|
||||
#tianai-captcha-slider-bg-canvas {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border-radius: 5px;
|
||||
}
|
||||
#tianai-captcha-slider-bg-div {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border-radius: 5px;
|
||||
.tianai-captcha-slider-bg-div-slice {
|
||||
position: absolute;
|
||||
}
|
||||
}
|
||||
}
|
||||
@keyframes myanimation {
|
||||
from {
|
||||
left: 0;
|
||||
}
|
||||
to {
|
||||
left: 289px;
|
||||
}
|
||||
}
|
||||
142
src/vendor/tianai-captcha/captcha/concat/concat.js
vendored
Normal file
142
src/vendor/tianai-captcha/captcha/concat/concat.js
vendored
Normal file
@ -0,0 +1,142 @@
|
||||
import "../common/common.less";
|
||||
import "../slider/slider.less";
|
||||
import "./concat.less";
|
||||
import {
|
||||
Dom,
|
||||
CommonCaptcha,
|
||||
clearAllPreventDefault,
|
||||
down,
|
||||
initConfig,
|
||||
destroyEvent,
|
||||
} from "../common/common.js";
|
||||
|
||||
const TYPE = "CONCAT";
|
||||
|
||||
function getTemplate(styleConfig) {
|
||||
return `
|
||||
<div id="tianai-captcha" class="tianai-captcha-slider tianai-captcha-concat">
|
||||
<div class="slider-tip">
|
||||
<span id="tianai-captcha-slider-move-track-font" >拖动滑块完成拼图</span>
|
||||
</div>
|
||||
<div class="content">
|
||||
<div class="tianai-captcha-slider-concat-img-div" id="tianai-captcha-slider-concat-img-div">
|
||||
<img id="tianai-captcha-slider-concat-slider-img" src="" alt/>
|
||||
</div>
|
||||
<div class="tianai-captcha-slider-concat-bg-img"></div>
|
||||
<div class="tianai-captcha-tips" id="tianai-captcha-tips"></div>
|
||||
</div>
|
||||
<div class="slider-move">
|
||||
<div class="slider-move-track">
|
||||
<div id="tianai-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>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
|
||||
class Concat extends CommonCaptcha {
|
||||
constructor(divId, styleConfig) {
|
||||
super();
|
||||
this.boxEl = Dom(divId);
|
||||
this.styleConfig = styleConfig;
|
||||
this.type = TYPE;
|
||||
this.currentCaptchaData = {};
|
||||
}
|
||||
|
||||
init(captchaData, endCallback, loadSuccessCallback) {
|
||||
// 重载样式
|
||||
this.destroy();
|
||||
this.boxEl.append(getTemplate(this.styleConfig));
|
||||
this.el = this.boxEl.find("#tianai-captcha");
|
||||
this.loadStyle();
|
||||
// 按钮绑定事件
|
||||
this.el
|
||||
.find("#tianai-captcha-slider-move-btn")
|
||||
.mousedown(down.bind(null, this));
|
||||
this.el
|
||||
.find("#tianai-captcha-slider-move-btn")
|
||||
.touchstart(down.bind(null, this));
|
||||
clearAllPreventDefault(this.el);
|
||||
// 绑定全局
|
||||
window.currentCaptcha = this;
|
||||
// 载入验证码
|
||||
this.loadCaptchaForData(this, captchaData);
|
||||
this.endCallback = endCallback;
|
||||
if (loadSuccessCallback) {
|
||||
// 加载成功
|
||||
loadSuccessCallback(this);
|
||||
}
|
||||
return this;
|
||||
}
|
||||
|
||||
destroy() {
|
||||
destroyEvent();
|
||||
const existsCaptchaEl = this.boxEl.children("#tianai-captcha");
|
||||
if (existsCaptchaEl) {
|
||||
existsCaptchaEl.remove();
|
||||
}
|
||||
}
|
||||
|
||||
doMove() {
|
||||
const moveX = this.currentCaptchaData.moveX;
|
||||
this.el
|
||||
.find("#tianai-captcha-slider-move-btn")
|
||||
.css("transform", "translate(" + moveX + "px, 0px)");
|
||||
this.el
|
||||
.find("#tianai-captcha-slider-concat-img-div")
|
||||
.css("background-position-x", moveX + "px");
|
||||
this.el
|
||||
.find("#tianai-captcha-slider-move-track-mask")
|
||||
.css("width", moveX + "px");
|
||||
}
|
||||
|
||||
loadStyle() {
|
||||
let sliderImg = "";
|
||||
let moveTrackMaskBorderColor = "#00f4ab";
|
||||
let moveTrackMaskBgColor = "#a9ffe5";
|
||||
const styleConfig = this.styleConfig;
|
||||
if (styleConfig) {
|
||||
sliderImg = styleConfig.btnUrl;
|
||||
moveTrackMaskBgColor = styleConfig.moveTrackMaskBgColor;
|
||||
moveTrackMaskBorderColor = styleConfig.moveTrackMaskBorderColor;
|
||||
}
|
||||
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("#tianai-captcha-slider-move-track-mask")
|
||||
.css("border-color", moveTrackMaskBorderColor);
|
||||
this.el
|
||||
.find("#tianai-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");
|
||||
bgImg.css("background-image", "url(" + data.data.backgroundImage + ")");
|
||||
sliderImg.css("background-image", "url(" + data.data.backgroundImage + ")");
|
||||
sliderImg.css("background-position", "0px 0px");
|
||||
var backgroundImageHeight = data.data.backgroundImageHeight;
|
||||
var height =
|
||||
((backgroundImageHeight - data.data.data.randomY) /
|
||||
backgroundImageHeight) *
|
||||
180;
|
||||
sliderImg.css("height", height + "px");
|
||||
|
||||
that.currentCaptchaData = initConfig(
|
||||
bgImg.width(),
|
||||
bgImg.height(),
|
||||
sliderImg.width(),
|
||||
sliderImg.height(),
|
||||
300 - 63 + 5,
|
||||
);
|
||||
that.currentCaptchaData.currentCaptchaId = data.data.id;
|
||||
}
|
||||
}
|
||||
|
||||
export default Concat;
|
||||
17
src/vendor/tianai-captcha/captcha/concat/concat.less
vendored
Normal file
17
src/vendor/tianai-captcha/captcha/concat/concat.less
vendored
Normal file
@ -0,0 +1,17 @@
|
||||
#tianai-captcha.tianai-captcha-concat {
|
||||
.tianai-captcha-slider-concat-img-div {
|
||||
background-size: 100% 180px;
|
||||
position: absolute;
|
||||
transform: translate(0px, 0px);
|
||||
/* border-bottom: 1px solid blue; */
|
||||
z-index: 1;
|
||||
width: 100%;
|
||||
}
|
||||
.tianai-captcha-slider-concat-bg-img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
transform: translate(0px, 0px);
|
||||
background-size: 100% 180px;
|
||||
}
|
||||
}
|
||||
217
src/vendor/tianai-captcha/captcha/config/config.js
vendored
Normal file
217
src/vendor/tianai-captcha/captcha/config/config.js
vendored
Normal file
@ -0,0 +1,217 @@
|
||||
import StyleConfig from "./styleConfig";
|
||||
import { Dom, http } from "../common/common";
|
||||
class CaptchaConfig {
|
||||
constructor(args) {
|
||||
if (!args.bindEl) {
|
||||
throw new Error("[TAC] 必须配置 [bindEl]用于将验证码绑定到该元素上");
|
||||
}
|
||||
if (!args.requestCaptchaDataUrl) {
|
||||
throw new Error("[TAC] 必须配置 [requestCaptchaDataUrl]请求验证码接口");
|
||||
}
|
||||
if (!args.validCaptchaUrl) {
|
||||
throw new Error("[TAC] 必须配置 [validCaptchaUrl]验证验证码接口");
|
||||
}
|
||||
this.bindEl = args.bindEl;
|
||||
this.domBindEl = Dom(args.bindEl);
|
||||
this.requestCaptchaDataUrl = args.requestCaptchaDataUrl;
|
||||
this.validCaptchaUrl = args.validCaptchaUrl;
|
||||
if (args.validSuccess) {
|
||||
this.validSuccess = args.validSuccess;
|
||||
}
|
||||
if (args.validFail) {
|
||||
this.validFail = args.validFail;
|
||||
}
|
||||
if (args.requestHeaders) {
|
||||
this.requestHeaders = args.requestHeaders;
|
||||
} else {
|
||||
this.requestHeaders = {};
|
||||
}
|
||||
if (args.btnCloseFun) {
|
||||
this.btnCloseFun = args.btnCloseFun;
|
||||
}
|
||||
if (args.btnRefreshFun) {
|
||||
this.btnRefreshFun = args.btnRefreshFun;
|
||||
}
|
||||
this.requestChain = [];
|
||||
// 时间戳转换
|
||||
this.timeToTimestamp = args.timeToTimestamp || true;
|
||||
this.insertRequestChain(0, {
|
||||
preRequest(type, param, c, tac) {
|
||||
if (this.timeToTimestamp && param.data) {
|
||||
for (let key in param.data) {
|
||||
// 将date全部转换为时间戳
|
||||
if (param.data[key] instanceof Date) {
|
||||
param.data[key] = param.data[key].getTime();
|
||||
}
|
||||
}
|
||||
}
|
||||
return true;
|
||||
},
|
||||
});
|
||||
}
|
||||
addRequestChain(fun) {
|
||||
this.requestChain.push(fun);
|
||||
}
|
||||
insertRequestChain(index, chain) {
|
||||
this.requestChain.splice(index, 0, chain);
|
||||
}
|
||||
removeRequestChain(index) {
|
||||
this.requestChain.splice(index, 1);
|
||||
}
|
||||
requestCaptchaData() {
|
||||
const requestParam = {};
|
||||
requestParam.headers = this.requestHeaders || {};
|
||||
requestParam.data = {};
|
||||
// 设置默认值
|
||||
requestParam.headers["Content-Type"] = "application/json;charset=UTF-8";
|
||||
requestParam.method = "POST";
|
||||
requestParam.url = this.requestCaptchaDataUrl;
|
||||
// 请求前装载参数
|
||||
this._preRequest("requestCaptchaData", requestParam);
|
||||
// 发送请求
|
||||
const request = this.doSendRequest(requestParam);
|
||||
// 返回结果
|
||||
return request.then((res) => {
|
||||
// 装返回结果
|
||||
this._postRequest("requestCaptchaData", requestParam, res);
|
||||
// 返回结果
|
||||
return res;
|
||||
});
|
||||
}
|
||||
|
||||
doSendRequest(requestParam) {
|
||||
// 如果content-type是json，那么data就是json字符串, 这里直接匹配所有header是否包含application/json
|
||||
if (requestParam.headers) {
|
||||
for (const key in requestParam.headers) {
|
||||
if (requestParam.headers[key].indexOf("application/json") > -1) {
|
||||
if (typeof requestParam.data !== "string") {
|
||||
requestParam.data = JSON.stringify(requestParam.data);
|
||||
}
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
return http(requestParam).then((res) => {
|
||||
try {
|
||||
return JSON.parse(res);
|
||||
} catch (e) {
|
||||
return res;
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
_preRequest(type, requestParam, c, tac) {
|
||||
for (let i = 0; i < this.requestChain.length; i++) {
|
||||
const r = this.requestChain[i];
|
||||
if (r.preRequest) {
|
||||
if (!r.preRequest(type, requestParam, this, c, tac)) {
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
_postRequest(type, requestParam, res, c, tac) {
|
||||
for (let i = 0; i < this.requestChain.length; i++) {
|
||||
const r = this.requestChain[i];
|
||||
// 判断r是否存圩postRequest方法
|
||||
if (r.postRequest) {
|
||||
if (!r.postRequest(type, requestParam, res, this, c, tac)) {
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
validCaptcha(currentCaptchaId, data, c, tac) {
|
||||
const sendParam = {
|
||||
id: currentCaptchaId,
|
||||
data: data,
|
||||
};
|
||||
let requestParam = {};
|
||||
requestParam.headers = this.requestHeaders || {};
|
||||
requestParam.data = sendParam;
|
||||
requestParam.headers["Content-Type"] = "application/json;charset=UTF-8";
|
||||
requestParam.method = "POST";
|
||||
requestParam.url = this.validCaptchaUrl;
|
||||
|
||||
this._preRequest("validCaptcha", requestParam, c, tac);
|
||||
const request = this.doSendRequest(requestParam);
|
||||
return request
|
||||
.then((res) => {
|
||||
this._postRequest("validCaptcha", requestParam, res, c, tac);
|
||||
return res;
|
||||
})
|
||||
.then((res) => {
|
||||
if (res.code == 200) {
|
||||
const useTimes = (data.stopTime - data.startTime) / 1000;
|
||||
c.showTips(`验证成功,耗时${useTimes}秒`, 1, () =>
|
||||
this.validSuccess(res, c, tac),
|
||||
);
|
||||
} else {
|
||||
let tipMsg = "验证失败，请重新尝试!";
|
||||
if (res.code) {
|
||||
if (res.code != 4001) {
|
||||
tipMsg = "验证码被黑洞吸走了！";
|
||||
}
|
||||
}
|
||||
c.showTips(tipMsg, 0, () => this.validFail(res, c, tac));
|
||||
}
|
||||
})
|
||||
.catch((e) => {
|
||||
let tipMsg = c.styleConfig.i18n.tips_error;
|
||||
if (e.code && e.code != 200) {
|
||||
if (e.code != 4001) {
|
||||
tipMsg = c.styleConfig.i18n.tips_4001;
|
||||
}
|
||||
c.showTips(tipMsg, 0, () => this.validFail(e, c, tac));
|
||||
return;
|
||||
}
|
||||
c.showTips(tipMsg, 0, () => this.validFail(e, c, tac));
|
||||
});
|
||||
}
|
||||
|
||||
validSuccess(res, c, tac) {
|
||||
console.log(
|
||||
"验证码校验成功， 请重写 [config.validSuccess] 方法， 用于自定义逻辑处理",
|
||||
);
|
||||
window.currentCaptchaRes = res;
|
||||
tac.destroyWindow();
|
||||
}
|
||||
|
||||
validFail(res, c, tac) {
|
||||
tac.reloadCaptcha();
|
||||
}
|
||||
}
|
||||
|
||||
function wrapConfig(config) {
|
||||
if (config instanceof CaptchaConfig) {
|
||||
return config;
|
||||
}
|
||||
return new CaptchaConfig(config);
|
||||
}
|
||||
|
||||
function wrapStyle(style) {
|
||||
// if (!style) {
|
||||
// style = {}
|
||||
// }
|
||||
//
|
||||
// if (!style.btnUrl) {
|
||||
// // 设置默认图片
|
||||
// style.btnUrl = "data:image/png;base64,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";
|
||||
// }
|
||||
// if (!style.moveTrackMaskBgColor && !style.moveTrackMaskBorderColor) {
|
||||
// style.moveTrackMaskBgColor = "#89d2ff";
|
||||
// style.moveTrackMaskBorderColor = "#0298f8";
|
||||
//
|
||||
// }
|
||||
// return style;
|
||||
|
||||
let margeStyle = { ...StyleConfig, ...style };
|
||||
margeStyle.i18n = { ...StyleConfig.i18n, ...style?.i18n };
|
||||
return margeStyle;
|
||||
}
|
||||
|
||||
const captchaRequestChains = {};
|
||||
|
||||
export { CaptchaConfig, wrapConfig, wrapStyle };
|
||||
23
src/vendor/tianai-captcha/captcha/config/styleConfig.js
vendored
Normal file
23
src/vendor/tianai-captcha/captcha/config/styleConfig.js
vendored
Normal file
@ -0,0 +1,23 @@
|
||||
export default {
|
||||
// 按钮图片
|
||||
btnUrl:
|
||||
"data:image/png;base64,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",
|
||||
// 移动边框背景颜色
|
||||
moveTrackMaskBgColor: "#89d2ff",
|
||||
// 移动边框颜色
|
||||
moveTrackMaskBorderColor: "#0298f8",
|
||||
// 文字提示
|
||||
i18n: {
|
||||
tips_success: "验证成功,耗时%s秒",
|
||||
tips_error: "验证失败，请重新尝试!",
|
||||
slider_title: "拖动滑块完成拼图",
|
||||
concat_title: "拖动滑块完成拼图",
|
||||
image_click_title: "请依次点击:",
|
||||
rotate_title: "拖动滑块完成拼图",
|
||||
// TITLE 大小
|
||||
slider_title_size: "15px",
|
||||
concat_title_size: "15px",
|
||||
image_click_title_size: "20px",
|
||||
rotate_title_size: "15px",
|
||||
},
|
||||
};
|
||||
58
src/vendor/tianai-captcha/captcha/disable/disable.js
vendored
Normal file
58
src/vendor/tianai-captcha/captcha/disable/disable.js
vendored
Normal file
@ -0,0 +1,58 @@
|
||||
const TYPE = "DISABLE";
|
||||
import "./disable.less";
|
||||
|
||||
function getTemplate(styleConfig) {
|
||||
return `
|
||||
<div id="tianai-captcha" class="tianai-captcha-disable">
|
||||
<div class="slider-tip">
|
||||
<span id="tianai-captcha-slider-move-track-font" style="font-size: ${styleConfig.i18n.disable_title_size}">${styleConfig.i18n.disable_title}</span>
|
||||
</div>
|
||||
<div class="content">
|
||||
<div class="bg-img-div">
|
||||
<!-- <svg width="100" height="100" viewBox="0 0 100 100">-->
|
||||
<!-- <polygon points="50,10 90,90 10,90" fill="none" stroke="#FF9900" stroke-width="4"/>-->
|
||||
<!-- <path d="M50 35V65 M50 75V75" stroke="#FF9900" stroke-width="4" stroke-linecap="round"/>-->
|
||||
<!-- </svg>-->
|
||||
<span id="content-span"></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
class Disable {
|
||||
constructor(boxEl, styleConfig) {
|
||||
this.boxEl = boxEl;
|
||||
this.styleConfig = styleConfig;
|
||||
this.type = TYPE;
|
||||
this.currentCaptchaData = {};
|
||||
}
|
||||
init(captchaData, endCallback, loadSuccessCallback) {
|
||||
// 重载样式
|
||||
this.destroy();
|
||||
this.boxEl.append(getTemplate(this.styleConfig));
|
||||
this.el = this.boxEl.find("#tianai-captcha");
|
||||
// 绑定全局
|
||||
// window.currentCaptcha = this;
|
||||
// 载入验证码
|
||||
this.loadCaptchaForData(this, captchaData);
|
||||
this.endCallback = endCallback;
|
||||
if (loadSuccessCallback) {
|
||||
// 加载成功
|
||||
loadSuccessCallback(this);
|
||||
}
|
||||
return this;
|
||||
}
|
||||
|
||||
destroy() {
|
||||
const existsCaptchaEl = this.boxEl.find("#tianai-captcha");
|
||||
if (existsCaptchaEl) {
|
||||
existsCaptchaEl.remove();
|
||||
}
|
||||
}
|
||||
loadCaptchaForData(that, data) {
|
||||
const msg = data.msg || data.message || "接口异常";
|
||||
that.el.find("#content-span").text(msg);
|
||||
}
|
||||
}
|
||||
|
||||
export default Disable;
|
||||
25
src/vendor/tianai-captcha/captcha/disable/disable.less
vendored
Normal file
25
src/vendor/tianai-captcha/captcha/disable/disable.less
vendored
Normal file
@ -0,0 +1,25 @@
|
||||
#tianai-captcha.tianai-captcha-disable {
|
||||
z-index: 999;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
.content {
|
||||
width: 100%;
|
||||
height: 180px;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
.bg-img-div {
|
||||
background-image: url("../../images/dun.jpeg");
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
#content-span {
|
||||
color: #fff;
|
||||
overflow: hidden;
|
||||
margin-top: 132px;
|
||||
display: block;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
132
src/vendor/tianai-captcha/captcha/image_click/image_click.js
vendored
Normal file
132
src/vendor/tianai-captcha/captcha/image_click/image_click.js
vendored
Normal file
@ -0,0 +1,132 @@
|
||||
import "./image_click.less";
|
||||
import {
|
||||
CommonCaptcha,
|
||||
move,
|
||||
initConfig,
|
||||
destroyEvent,
|
||||
} from "../common/common.js";
|
||||
|
||||
/**
|
||||
* 滑动验证码
|
||||
*/
|
||||
|
||||
const TYPE = "IMAGE_CLICK";
|
||||
function getTemplate(styleConfig) {
|
||||
return `
|
||||
<div id="tianai-captcha" class="tianai-captcha-slider tianai-captcha-word-click">
|
||||
<div class="click-tip">
|
||||
<span id="tianai-captcha-click-track-font" style="font-size: ${styleConfig.i18n.image_click_title_size}">${styleConfig.i18n.image_click_title}</span>
|
||||
<img src="" id="tianai-captcha-tip-img" class="tip-img">
|
||||
</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>
|
||||
<div id="bg-img-click-mask"></div>
|
||||
</div>
|
||||
<div class="tianai-captcha-tips" id="tianai-captcha-tips"></div>
|
||||
</div>
|
||||
<div class="click-confirm-btn">确定</div>
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
class ImageClick extends CommonCaptcha {
|
||||
constructor(boxEl, styleConfig) {
|
||||
super();
|
||||
this.boxEl = boxEl;
|
||||
this.styleConfig = styleConfig;
|
||||
this.type = TYPE;
|
||||
this.currentCaptchaData = {};
|
||||
}
|
||||
init(captchaData, endCallback, loadSuccessCallback) {
|
||||
// 重载样式
|
||||
this.destroy();
|
||||
this.boxEl.append(getTemplate(this.styleConfig));
|
||||
this.el = this.boxEl.find("#tianai-captcha");
|
||||
// 绑定全局
|
||||
// window.currentCaptcha = this;
|
||||
// 载入验证码
|
||||
this.loadCaptchaForData(this, captchaData);
|
||||
this.endCallback = endCallback;
|
||||
const moveFun = move.bind(null, this);
|
||||
// 绑定事件
|
||||
this.el.find("#bg-img-click-mask").click((event) => {
|
||||
if (event.target.className === "click-span") {
|
||||
return;
|
||||
}
|
||||
this.currentCaptchaData.clickCount++;
|
||||
const trackList = this.currentCaptchaData.trackList;
|
||||
if (this.currentCaptchaData.clickCount === 1) {
|
||||
this.currentCaptchaData.startTime = new Date();
|
||||
// move 轨迹
|
||||
window.addEventListener("mousemove", moveFun);
|
||||
this.currentCaptchaData.startX = event.offsetX;
|
||||
this.currentCaptchaData.startY = event.offsetY;
|
||||
}
|
||||
const startTime = this.currentCaptchaData.startTime;
|
||||
trackList.push({
|
||||
x: Math.round(event.offsetX),
|
||||
y: Math.round(event.offsetY),
|
||||
type: "click",
|
||||
t: new Date().getTime() - startTime.getTime(),
|
||||
});
|
||||
const left = event.offsetX - 10;
|
||||
const top = event.offsetY - 10;
|
||||
this.el
|
||||
.find("#bg-img-click-mask")
|
||||
.append(
|
||||
"<span class='click-span' style='left:" +
|
||||
left +
|
||||
"px;top: " +
|
||||
top +
|
||||
"px'>" +
|
||||
this.currentCaptchaData.clickCount +
|
||||
"</span>",
|
||||
);
|
||||
// if (this.currentCaptchaData.clickCount === 4) {
|
||||
// // 校验
|
||||
// this.currentCaptchaData.stopTime = new Date();
|
||||
// window.removeEventListener("mousemove", move);
|
||||
// this.endCallback(this.currentCaptchaData,this);
|
||||
// }
|
||||
});
|
||||
this.el.find(".click-confirm-btn").click(() => {
|
||||
if (this.currentCaptchaData.clickCount > 0) {
|
||||
// 校验
|
||||
this.currentCaptchaData.stopTime = new Date();
|
||||
window.removeEventListener("mousemove", moveFun);
|
||||
this.endCallback(this.currentCaptchaData, this);
|
||||
}
|
||||
});
|
||||
|
||||
if (loadSuccessCallback) {
|
||||
// 加载成功
|
||||
loadSuccessCallback(this);
|
||||
}
|
||||
return this;
|
||||
}
|
||||
destroy() {
|
||||
const existsCaptchaEl = this.boxEl.children("#tianai-captcha");
|
||||
if (existsCaptchaEl) {
|
||||
existsCaptchaEl.remove();
|
||||
}
|
||||
destroyEvent();
|
||||
}
|
||||
loadCaptchaForData(that, data) {
|
||||
const bgImg = that.el.find("#tianai-captcha-slider-bg-img");
|
||||
const tipImg = that.el.find("#tianai-captcha-tip-img");
|
||||
bgImg.on("load", () => {
|
||||
that.currentCaptchaData = initConfig(
|
||||
bgImg.width(),
|
||||
bgImg.height(),
|
||||
tipImg.width(),
|
||||
tipImg.height(),
|
||||
);
|
||||
that.currentCaptchaData.currentCaptchaId = data.data.id;
|
||||
});
|
||||
bgImg.attr("src", data.data.backgroundImage);
|
||||
tipImg.attr("src", data.data.templateImage);
|
||||
}
|
||||
}
|
||||
|
||||
export default ImageClick;
|
||||
66
src/vendor/tianai-captcha/captcha/image_click/image_click.less
vendored
Normal file
66
src/vendor/tianai-captcha/captcha/image_click/image_click.less
vendored
Normal file
@ -0,0 +1,66 @@
|
||||
#tianai-captcha.tianai-captcha-word-click {
|
||||
box-sizing: border-box;
|
||||
.click-tip {
|
||||
position: relative;
|
||||
height: 40px;
|
||||
width: 100%;
|
||||
.tip-img {
|
||||
height: 35px;
|
||||
position: absolute;
|
||||
right: 15px;
|
||||
}
|
||||
#tianai-captcha-click-track-font {
|
||||
font-size: 18px;
|
||||
display: inline-block;
|
||||
height: 40px;
|
||||
line-height: 40px;
|
||||
position: absolute;
|
||||
}
|
||||
}
|
||||
.slider-bottom {
|
||||
position: relative;
|
||||
top: 6px;
|
||||
}
|
||||
.content {
|
||||
#bg-img-click-mask {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
.click-span {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
border-radius: 50px;
|
||||
background-color: #409eff;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
text-align: center;
|
||||
line-height: 20px;
|
||||
color: #fff;
|
||||
border: 2px solid #fff;
|
||||
box-sizing: content-box;
|
||||
}
|
||||
}
|
||||
}
|
||||
.click-confirm-btn {
|
||||
width: 100%;
|
||||
height: 35px;
|
||||
border-radius: 4px;
|
||||
background-image: linear-gradient(
|
||||
173deg,
|
||||
hsl(38.09deg 91% 57.89%) 0%,
|
||||
hsl(38.09deg 89.38% 71.74%) 100%
|
||||
);
|
||||
font-size: 15px;
|
||||
text-align: center;
|
||||
box-sizing: border-box;
|
||||
line-height: 35px;
|
||||
color: #fff;
|
||||
margin-top: 3px;
|
||||
}
|
||||
.click-confirm-btn:hover {
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
136
src/vendor/tianai-captcha/captcha/rotate/rotate.js
vendored
Normal file
136
src/vendor/tianai-captcha/captcha/rotate/rotate.js
vendored
Normal file
@ -0,0 +1,136 @@
|
||||
import "../slider/slider.less";
|
||||
import "./rotate.less";
|
||||
import {
|
||||
CommonCaptcha,
|
||||
down,
|
||||
initConfig,
|
||||
destroyEvent,
|
||||
} from "../common/common.js";
|
||||
|
||||
/**
|
||||
* 滑动验证码
|
||||
*/
|
||||
|
||||
const TYPE = "ROTATE";
|
||||
function getTemplate(styleConfig) {
|
||||
return `
|
||||
<div id="tianai-captcha" class="tianai-captcha-slider tianai-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>
|
||||
</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>
|
||||
</div>
|
||||
<div class="rotate-img-div" id="tianai-captcha-slider-img-div">
|
||||
<img id="tianai-captcha-slider-move-img" src="" alt/>
|
||||
</div>
|
||||
<div class="tianai-captcha-tips" id="tianai-captcha-tips"></div>
|
||||
</div>
|
||||
<div class="slider-move">
|
||||
<div class="slider-move-track">
|
||||
<div id="tianai-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>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
class Rotate extends CommonCaptcha {
|
||||
constructor(boxEl, styleConfig) {
|
||||
super();
|
||||
this.boxEl = boxEl;
|
||||
this.styleConfig = styleConfig;
|
||||
this.type = TYPE;
|
||||
this.currentCaptchaData = {};
|
||||
}
|
||||
init(captchaData, endCallback, loadSuccessCallback) {
|
||||
// 重载样式
|
||||
this.destroy();
|
||||
this.boxEl.append(getTemplate(this.styleConfig));
|
||||
this.el = this.boxEl.find("#tianai-captcha");
|
||||
this.loadStyle();
|
||||
// 按钮绑定事件
|
||||
this.el
|
||||
.find("#tianai-captcha-slider-move-btn")
|
||||
.mousedown(down.bind(null, this));
|
||||
this.el
|
||||
.find("#tianai-captcha-slider-move-btn")
|
||||
.touchstart(down.bind(null, this));
|
||||
// 绑定全局
|
||||
// window.currentCaptcha = this;
|
||||
// 载入验证码
|
||||
this.loadCaptchaForData(this, captchaData);
|
||||
this.endCallback = endCallback;
|
||||
if (loadSuccessCallback) {
|
||||
// 加载成功
|
||||
loadSuccessCallback(this);
|
||||
}
|
||||
return this;
|
||||
}
|
||||
|
||||
destroy() {
|
||||
const existsCaptchaEl = this.boxEl.children("#tianai-captcha");
|
||||
if (existsCaptchaEl) {
|
||||
existsCaptchaEl.remove();
|
||||
}
|
||||
destroyEvent();
|
||||
}
|
||||
doMove() {
|
||||
const moveX = this.currentCaptchaData.moveX;
|
||||
this.el
|
||||
.find("#tianai-captcha-slider-move-btn")
|
||||
.css("transform", "translate(" + moveX + "px, 0px)");
|
||||
this.el
|
||||
.find("#tianai-captcha-slider-move-img")
|
||||
.css(
|
||||
"transform",
|
||||
"rotate(" + moveX / (this.currentCaptchaData.end / 360) + "deg)",
|
||||
);
|
||||
this.el
|
||||
.find("#tianai-captcha-slider-move-track-mask")
|
||||
.css("width", moveX + "px");
|
||||
}
|
||||
loadStyle() {
|
||||
let sliderImg = "";
|
||||
let moveTrackMaskBorderColor = "#00f4ab";
|
||||
let moveTrackMaskBgColor = "#a9ffe5";
|
||||
const styleConfig = this.styleConfig;
|
||||
if (styleConfig) {
|
||||
sliderImg = styleConfig.btnUrl;
|
||||
moveTrackMaskBgColor = styleConfig.moveTrackMaskBgColor;
|
||||
moveTrackMaskBorderColor = styleConfig.moveTrackMaskBorderColor;
|
||||
}
|
||||
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("#tianai-captcha-slider-move-track-mask")
|
||||
.css("border-color", moveTrackMaskBorderColor);
|
||||
this.el
|
||||
.find("#tianai-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");
|
||||
bgImg.attr("src", data.data.backgroundImage);
|
||||
sliderImg.attr("src", data.data.templateImage);
|
||||
bgImg.on("load", () => {
|
||||
that.currentCaptchaData = initConfig(
|
||||
bgImg.width(),
|
||||
bgImg.height(),
|
||||
sliderImg.width(),
|
||||
sliderImg.height(),
|
||||
300 - 63 + 5,
|
||||
);
|
||||
that.currentCaptchaData.currentCaptchaId = data.data.id;
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
export default Rotate;
|
||||
12
src/vendor/tianai-captcha/captcha/rotate/rotate.less
vendored
Normal file
12
src/vendor/tianai-captcha/captcha/rotate/rotate.less
vendored
Normal file
@ -0,0 +1,12 @@
|
||||
#tianai-captcha.tianai-captcha-rotate {
|
||||
.rotate-img-div {
|
||||
height: 100%;
|
||||
/*position: absolute;*/
|
||||
text-align: center;
|
||||
img {
|
||||
height: 100%;
|
||||
transform: rotate(0deg);
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
}
|
||||
144
src/vendor/tianai-captcha/captcha/slider/slider.js
vendored
Normal file
144
src/vendor/tianai-captcha/captcha/slider/slider.js
vendored
Normal file
@ -0,0 +1,144 @@
|
||||
import "../common/common.less";
|
||||
import "./slider.less";
|
||||
import {
|
||||
CommonCaptcha,
|
||||
closeTips,
|
||||
down,
|
||||
initConfig,
|
||||
showTips,
|
||||
destroyEvent,
|
||||
} from "../common/common.js";
|
||||
|
||||
/**
|
||||
* 滑动验证码
|
||||
*/
|
||||
|
||||
const TYPE = "SLIDER";
|
||||
function getTemplate(styleConfig) {
|
||||
return `
|
||||
<div id="tianai-captcha" class="tianai-captcha-slider">
|
||||
<div class="slider-tip">
|
||||
<span id="tianai-captcha-slider-move-track-font" style="font-size: ${styleConfig.i18n.slider_title_size}">${styleConfig.i18n.slider_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>
|
||||
<div id="tianai-captcha-slider-bg-div"></div>
|
||||
</div>
|
||||
<div class="slider-img-div" id="tianai-captcha-slider-img-div">
|
||||
<img id="tianai-captcha-slider-move-img" src="" alt/>
|
||||
</div>
|
||||
<div class="tianai-captcha-tips" id="tianai-captcha-tips"></div>
|
||||
</div>
|
||||
<div class="slider-move">
|
||||
<div class="slider-move-track">
|
||||
<div id="tianai-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>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
|
||||
class Slider extends CommonCaptcha {
|
||||
constructor(boxEl, styleConfig) {
|
||||
super();
|
||||
this.boxEl = boxEl;
|
||||
this.styleConfig = styleConfig;
|
||||
this.type = TYPE;
|
||||
this.currentCaptchaData = {};
|
||||
}
|
||||
init(captchaData, endCallback, loadSuccessCallback) {
|
||||
// 重载样式
|
||||
this.destroy();
|
||||
this.boxEl.append(getTemplate(this.styleConfig));
|
||||
this.el = this.boxEl.find("#tianai-captcha");
|
||||
this.loadStyle();
|
||||
// 按钮绑定事件
|
||||
this.el
|
||||
.find("#tianai-captcha-slider-move-btn")
|
||||
.mousedown(down.bind(null, this));
|
||||
this.el
|
||||
.find("#tianai-captcha-slider-move-btn")
|
||||
.touchstart(down.bind(null, this));
|
||||
// 绑定全局
|
||||
// window.currentCaptcha = this;
|
||||
// 载入验证码
|
||||
this.loadCaptchaForData(this, captchaData);
|
||||
this.endCallback = endCallback;
|
||||
if (loadSuccessCallback) {
|
||||
// 加载成功
|
||||
loadSuccessCallback(this);
|
||||
}
|
||||
return this;
|
||||
}
|
||||
showTips(msg, type, callback) {
|
||||
showTips(this.el, msg, type, callback);
|
||||
}
|
||||
closeTips(callback) {
|
||||
closeTips(this.el, callback);
|
||||
}
|
||||
|
||||
destroy() {
|
||||
const existsCaptchaEl = this.boxEl.children("#tianai-captcha");
|
||||
if (existsCaptchaEl) {
|
||||
existsCaptchaEl.remove();
|
||||
}
|
||||
destroyEvent();
|
||||
}
|
||||
doMove() {
|
||||
const moveX = this.currentCaptchaData.moveX;
|
||||
this.el
|
||||
.find("#tianai-captcha-slider-move-btn")
|
||||
.css("transform", "translate(" + moveX + "px, 0px)");
|
||||
this.el
|
||||
.find("#tianai-captcha-slider-img-div")
|
||||
.css("transform", "translate(" + moveX + "px, 0px)");
|
||||
this.el
|
||||
.find("#tianai-captcha-slider-move-track-mask")
|
||||
.css("width", moveX + "px");
|
||||
}
|
||||
loadStyle() {
|
||||
let sliderImg = "";
|
||||
let moveTrackMaskBorderColor = "#00f4ab";
|
||||
let moveTrackMaskBgColor = "#a9ffe5";
|
||||
const styleConfig = this.styleConfig;
|
||||
if (styleConfig) {
|
||||
sliderImg = styleConfig.btnUrl;
|
||||
moveTrackMaskBgColor = styleConfig.moveTrackMaskBgColor;
|
||||
moveTrackMaskBorderColor = styleConfig.moveTrackMaskBorderColor;
|
||||
}
|
||||
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("#tianai-captcha-slider-move-track-mask")
|
||||
.css("border-color", moveTrackMaskBorderColor);
|
||||
this.el
|
||||
.find("#tianai-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");
|
||||
bgImg.attr("src", data.data.backgroundImage);
|
||||
sliderImg.attr("src", data.data.templateImage);
|
||||
bgImg.on("load", () => {
|
||||
that.currentCaptchaData = initConfig(
|
||||
bgImg.width(),
|
||||
bgImg.height(),
|
||||
sliderImg.width(),
|
||||
sliderImg.height(),
|
||||
300 - 63 + 5,
|
||||
);
|
||||
that.currentCaptchaData.currentCaptchaId = data.data.id;
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
export default Slider;
|
||||
89
src/vendor/tianai-captcha/captcha/slider/slider.less
vendored
Normal file
89
src/vendor/tianai-captcha/captcha/slider/slider.less
vendored
Normal file
@ -0,0 +1,89 @@
|
||||
#tianai-captcha.tianai-captcha-slider {
|
||||
z-index: 999;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
.content {
|
||||
width: 100%;
|
||||
height: 180px;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
.bg-img-div {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
transform: translate(0px, 0px);
|
||||
img {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
border-radius: 5px;
|
||||
}
|
||||
}
|
||||
.slider-img-div {
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
transform: translate(0px, 0px);
|
||||
#tianai-captcha-slider-move-img {
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
.slider-move {
|
||||
height: 34px;
|
||||
width: 100%;
|
||||
margin: 11px 0;
|
||||
position: relative;
|
||||
}
|
||||
.slider-move-track {
|
||||
position: relative;
|
||||
height: 32px;
|
||||
line-height: 32px;
|
||||
text-align: center;
|
||||
background: #f5f5f5;
|
||||
color: #999;
|
||||
transition: 0s;
|
||||
font-size: 14px;
|
||||
box-sizing: content-box;
|
||||
border: 1px solid #f5f5f5;
|
||||
border-radius: 4px;
|
||||
}
|
||||
.refresh-btn,
|
||||
.close-btn {
|
||||
display: inline-block;
|
||||
}
|
||||
.slider-move {
|
||||
line-height: 38px;
|
||||
font-size: 14px;
|
||||
text-align: center;
|
||||
white-space: nowrap;
|
||||
color: #88949d;
|
||||
-moz-user-select: none;
|
||||
-webkit-user-select: none;
|
||||
user-select: none;
|
||||
filter: opacity(0.8);
|
||||
}
|
||||
.slider-move .slider-move-btn {
|
||||
transform: translate(0px, 0px);
|
||||
position: absolute;
|
||||
top: -6px;
|
||||
left: 0;
|
||||
width: 63px;
|
||||
height: 45px;
|
||||
background-color: #fff;
|
||||
background-repeat: no-repeat;
|
||||
background-size: contain;
|
||||
border-radius: 5px;
|
||||
}
|
||||
.slider-tip {
|
||||
margin-bottom: 5px;
|
||||
font-weight: bold;
|
||||
font-size: 15px;
|
||||
line-height: normal;
|
||||
color: black;
|
||||
}
|
||||
.slider-move-btn:hover {
|
||||
cursor: pointer;
|
||||
}
|
||||
user-select: none;
|
||||
}
|
||||
13
src/vendor/tianai-captcha/captcha/word_image_click/word_image_click.js
vendored
Normal file
13
src/vendor/tianai-captcha/captcha/word_image_click/word_image_click.js
vendored
Normal file
@ -0,0 +1,13 @@
|
||||
import ImageClick from "../image_click/image_click";
|
||||
/**
|
||||
* 滑动验证码
|
||||
*/
|
||||
const TYPE = "WORD_IMAGE_CLICK";
|
||||
class WordImageClick extends ImageClick {
|
||||
constructor(divId, styleConfig) {
|
||||
super(divId, styleConfig);
|
||||
this.type = TYPE;
|
||||
}
|
||||
}
|
||||
|
||||
export default WordImageClick;
|
||||
BIN
src/vendor/tianai-captcha/images/dun.jpeg
vendored
Normal file
BIN
src/vendor/tianai-captcha/images/dun.jpeg
vendored
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 8.1 KiB |
BIN
src/vendor/tianai-captcha/images/icon.png
vendored
Normal file
BIN
src/vendor/tianai-captcha/images/icon.png
vendored
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3.0 KiB |
BIN
src/vendor/tianai-captcha/images/loading.gif
vendored
Normal file
BIN
src/vendor/tianai-captcha/images/loading.gif
vendored
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 6.6 KiB |
39
src/vendor/tianai-captcha/index.ts
vendored
Normal file
39
src/vendor/tianai-captcha/index.ts
vendored
Normal file
@ -0,0 +1,39 @@
|
||||
import { CaptchaConfig, TianAiCaptcha } from "./captcha/captcha.js"
|
||||
|
||||
export type TianAiCaptchaBindTarget = string | HTMLElement
|
||||
|
||||
export interface TianAiCaptchaStyle {
|
||||
btnUrl?: string
|
||||
logoUrl?: string | null
|
||||
bgUrl?: string
|
||||
moveTrackMaskBgColor?: string
|
||||
moveTrackMaskBorderColor?: string
|
||||
i18n?: Record<string, string>
|
||||
}
|
||||
|
||||
export interface TianAiCaptchaConfig {
|
||||
bindEl: TianAiCaptchaBindTarget
|
||||
requestCaptchaDataUrl: 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
|
||||
btnRefreshFun?: (el: Event, tac: TianAiCaptchaInstance) => void
|
||||
btnCloseFun?: (el: Event, tac: TianAiCaptchaInstance) => void
|
||||
}
|
||||
|
||||
export interface TianAiCaptchaInstance {
|
||||
init: () => TianAiCaptchaInstance
|
||||
reloadCaptcha: () => void
|
||||
destroyWindow: () => void
|
||||
}
|
||||
|
||||
export function createTianAiCaptcha(
|
||||
config: TianAiCaptchaConfig,
|
||||
style?: TianAiCaptchaStyle,
|
||||
): TianAiCaptchaInstance {
|
||||
return new TianAiCaptcha(config, style) as TianAiCaptchaInstance
|
||||
}
|
||||
|
||||
export { CaptchaConfig, TianAiCaptcha }
|
||||
209
src/views/debug/CaptchaSandbox.vue
Normal file
209
src/views/debug/CaptchaSandbox.vue
Normal file
@ -0,0 +1,209 @@
|
||||
<template>
|
||||
<div>
|
||||
<div class="hero-actions">
|
||||
<el-button type="primary" @click="startCaptcha">开始验证</el-button>
|
||||
<el-button @click="reloadCaptcha" :disabled="!captchaInstance">刷新</el-button>
|
||||
<el-button @click="destroyCaptcha" :disabled="!captchaInstance" plain>销毁</el-button>
|
||||
</div>
|
||||
|
||||
<div class="sandbox-grid">
|
||||
<el-card class="panel-card" shadow="never">
|
||||
<template #header>
|
||||
<div class="panel-title">验证码类型</div>
|
||||
</template>
|
||||
|
||||
<el-radio-group v-model="selectedType" class="type-group">
|
||||
<el-radio-button v-for="item in captchaTypeOptions" :key="item.value" :label="item.value">
|
||||
{{ item.label }}
|
||||
</el-radio-button>
|
||||
</el-radio-group>
|
||||
|
||||
<div class="current-selection">
|
||||
<span class="selection-label">当前选择</span>
|
||||
<strong>{{ currentTypeLabel }}</strong>
|
||||
</div>
|
||||
</el-card>
|
||||
|
||||
<el-card class="panel-card preview-card" shadow="never">
|
||||
<template #header>
|
||||
<div class="panel-title">验证码预览</div>
|
||||
</template>
|
||||
<div ref="captchaBoxRef" id="captcha-sandbox-box" class="captcha-box"></div>
|
||||
</el-card>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { computed, onBeforeUnmount, ref } from 'vue'
|
||||
import {
|
||||
createTianAiCaptcha,
|
||||
type TianAiCaptchaConfig,
|
||||
type TianAiCaptchaInstance
|
||||
} from '@/vendor/tianai-captcha'
|
||||
|
||||
type CaptchaType = 'RANDOM' | 'SLIDER' | 'ROTATE' | 'ROTATE_DEGREE' | 'CONCAT' | 'IMAGE_CLICK' | 'WORD_IMAGE_CLICK'
|
||||
|
||||
const baseApiUrl = import.meta.env.VITE_APP_API_BASE
|
||||
const requestCaptchaBaseUrl = buildApiUrl(baseApiUrl, '/captcha/gen')
|
||||
const validCaptchaUrl = buildApiUrl(baseApiUrl, '/captcha/check')
|
||||
const captchaTypeOptions: Array<{ label: string, value: CaptchaType }> = [
|
||||
{ label: '随机', value: 'RANDOM' },
|
||||
{ label: '滑块拼图', value: 'SLIDER' },
|
||||
{ label: '旋转', value: 'ROTATE' },
|
||||
{ label: '旋转(角度)', value: 'ROTATE_DEGREE' },
|
||||
{ label: '拼接', value: 'CONCAT' },
|
||||
{ label: '点选', value: 'IMAGE_CLICK' },
|
||||
{ label: '汉字点选', value: 'WORD_IMAGE_CLICK' },
|
||||
]
|
||||
|
||||
const captchaInstance = ref<TianAiCaptchaInstance | null>(null)
|
||||
const captchaBoxRef = ref<HTMLElement | null>(null)
|
||||
const selectedType = ref<CaptchaType>('RANDOM')
|
||||
|
||||
const currentTypeLabel = computed(() => {
|
||||
return captchaTypeOptions.find(item => item.value === selectedType.value)?.label || '随机'
|
||||
})
|
||||
|
||||
const requestCaptchaDataUrl = computed(() => {
|
||||
if (selectedType.value === 'RANDOM') {
|
||||
return requestCaptchaBaseUrl
|
||||
}
|
||||
|
||||
return `${requestCaptchaBaseUrl}?type=${encodeURIComponent(selectedType.value)}`
|
||||
})
|
||||
|
||||
function startCaptcha() {
|
||||
if (!captchaBoxRef.value) {
|
||||
console.warn('[captcha sandbox] captcha container is not ready')
|
||||
return
|
||||
}
|
||||
|
||||
destroyCaptcha(false)
|
||||
|
||||
const config: TianAiCaptchaConfig = {
|
||||
bindEl: captchaBoxRef.value,
|
||||
requestCaptchaDataUrl: requestCaptchaDataUrl.value,
|
||||
validCaptchaUrl,
|
||||
validSuccess: (res, _captcha, tac) => {
|
||||
console.log('[captcha sandbox] valid success', res)
|
||||
tac.destroyWindow()
|
||||
},
|
||||
validFail: (res, _captcha, tac) => {
|
||||
console.warn('[captcha sandbox] valid fail', res)
|
||||
tac.reloadCaptcha()
|
||||
},
|
||||
btnRefreshFun: (_el, tac) => {
|
||||
console.info('[captcha sandbox] refresh captcha')
|
||||
tac.reloadCaptcha()
|
||||
},
|
||||
btnCloseFun: (_el, tac) => {
|
||||
console.info('[captcha sandbox] close captcha window')
|
||||
tac.destroyWindow()
|
||||
}
|
||||
}
|
||||
|
||||
console.info('[captcha sandbox] init captcha', {
|
||||
type: selectedType.value,
|
||||
requestCaptchaDataUrl: requestCaptchaDataUrl.value,
|
||||
validCaptchaUrl
|
||||
})
|
||||
|
||||
captchaInstance.value = createTianAiCaptcha(config)
|
||||
captchaInstance.value.init()
|
||||
}
|
||||
|
||||
function reloadCaptcha() {
|
||||
if (!captchaInstance.value) return
|
||||
console.info('[captcha sandbox] manual reload')
|
||||
captchaInstance.value.reloadCaptcha()
|
||||
}
|
||||
|
||||
function destroyCaptcha(showMessage = true) {
|
||||
if (!captchaInstance.value) return
|
||||
captchaInstance.value.destroyWindow()
|
||||
captchaInstance.value = null
|
||||
if (showMessage) {
|
||||
console.info('[captcha sandbox] destroy captcha instance')
|
||||
}
|
||||
}
|
||||
|
||||
function buildApiUrl(base: string | undefined, path: string) {
|
||||
const normalizedBase = (base || '').replace(/\/+$/, '')
|
||||
const normalizedPath = path.startsWith('/') ? path : `/${path}`
|
||||
|
||||
if (!normalizedBase) {
|
||||
return `/api/v2${normalizedPath}`
|
||||
}
|
||||
|
||||
return `${normalizedBase}${normalizedPath}`
|
||||
}
|
||||
|
||||
onBeforeUnmount(() => destroyCaptcha(false))
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.hero-actions {
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
.sandbox-grid {
|
||||
display: grid;
|
||||
grid-template-columns: minmax(320px, 420px) minmax(420px, 1fr);
|
||||
gap: 20px;
|
||||
}
|
||||
|
||||
.panel-card {
|
||||
border-radius: 18px;
|
||||
border: 1px solid var(--el-border-color-lighter);
|
||||
}
|
||||
|
||||
.panel-title {
|
||||
font-size: 15px;
|
||||
font-weight: 700;
|
||||
color: var(--el-text-color-primary);
|
||||
}
|
||||
|
||||
.type-group {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 12px;
|
||||
|
||||
:deep(.el-radio-button__inner) {
|
||||
min-width: 112px;
|
||||
border-radius: 999px;
|
||||
}
|
||||
}
|
||||
|
||||
.current-selection {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
margin-top: 18px;
|
||||
padding: 14px 16px;
|
||||
border-radius: 12px;
|
||||
background: var(--el-fill-color-light);
|
||||
color: var(--el-text-color-regular);
|
||||
|
||||
strong {
|
||||
color: var(--el-color-primary);
|
||||
font-size: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
.selection-label {
|
||||
color: var(--el-text-color-secondary);
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.captcha-box {
|
||||
min-height: 350px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-radius: 16px;
|
||||
background:
|
||||
linear-gradient(135deg, rgba(64, 158, 255, 0.07), rgba(103, 194, 58, 0.05)),
|
||||
#fff;
|
||||
border: 1px dashed rgba(64, 158, 255, 0.3);
|
||||
}
|
||||
</style>
|
||||
Loading…
x
Reference in New Issue
Block a user