blackteay/ThinkAdmin
1
0
Fork 0
mirror of https://gitee.com/zoujingli/ThinkAdmin.git synced 2026-06-06 20:18:10 +08:00
Code Issues Projects Releases Wiki Activity

fix(login): 优化滑块验证码尺寸计算

Browse Source 
根据服务端返回的验证码原始宽高动态计算展示舞台高度，避免固定高度导致不同尺寸背景图被裁切或拉伸。

按背景图实际渲染宽度换算拼图片宽度，并在窗口尺寸变化后重新计算拖动边界，保证滑块位置与缺口比例一致。

取消滑动轨迹填充宽度，减少拖动过程中的视觉干扰，使验证条表现更稳定。
This commit is contained in:
邹景立 2026-05-20 22:08:20 +08:00
parent bdef82dc93
commit de64a2f4a7
2 changed files with 30 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
plugin/think-plugs-static/stc/public/static/login.js
View File

@ -138,6 +138,7 @@ $(function () {
let request = form.dataset.loginSlider || ''; let request = form.dataset.loginSlider || '';
let check = form.dataset.loginCheck || ''; let check = form.dataset.loginCheck || '';
let state = { let state = {
bgHeight: 0,
bgWidth: 0, bgWidth: 0,
currentLeft: 0, currentLeft: 0,
dragging: false, dragging: false,
@ -146,6 +147,7 @@ $(function () {
originX: 0, originX: 0,
pieceWidth: 100, pieceWidth: 100,
required: false, required: false,
sourceHeight: 300,
sourceWidth: 600, sourceWidth: 600,
startLeft: 0, startLeft: 0,
verified: false, verified: false,
@ -162,14 +164,22 @@ $(function () {
function setPosition(left) { function setPosition(left) {
state.currentLeft = Math.max(0, Math.min(left, state.maxLeft)); state.currentLeft = Math.max(0, Math.min(left, state.maxLeft));
$handle.css('left', state.currentLeft + 'px'); $handle.css('left', state.currentLeft + 'px');
$track.css('width', (state.currentLeft + $handle.outerWidth()) + 'px'); $track.css('width', '0px');
$piece.css('left', state.currentLeft + 'px'); $piece.css('left', state.currentLeft + 'px');
} }
function recalculate() { function recalculate() {
let sourceWidth = Math.max(parseInt(state.sourceWidth, 10) || 600, 1);
let sourceHeight = Math.max(parseInt(state.sourceHeight, 10) || 300, 1);
let pieceWidth = Math.max(parseInt(state.pieceWidth, 10) || 100, 1);
state.bgWidth = $stage.innerWidth(); state.bgWidth = $stage.innerWidth();
if (state.bgWidth > 0) {
$stage.css('height', Math.round(state.bgWidth * sourceHeight / sourceWidth) + 'px');
}
state.bgWidth = $stage.innerWidth();
state.bgHeight = $stage.innerHeight();
state.maxLeft = Math.max(state.bgWidth - $handle.outerWidth(), 0); state.maxLeft = Math.max(state.bgWidth - $handle.outerWidth(), 0);
$piece.css('width', (state.pieceWidth / state.sourceWidth * 100) + '%'); $piece.css('width', (pieceWidth / sourceWidth * state.bgWidth) + 'px');
setPosition(state.currentLeft); setPosition(state.currentLeft);
} }
@ -201,8 +211,9 @@ $(function () {
ret.data && ret.data.reload && reloadLoginPage(); ret.data && ret.data.reload && reloadLoginPage();
return false; return false;
} }
state.sourceWidth = parseInt(ret.data.width || 600); state.sourceWidth = parseInt(ret.data.width || 600) || 600;
state.pieceWidth = parseInt(ret.data.piece_width || 100); state.sourceHeight = parseInt(ret.data.height || 300) || 300;
state.pieceWidth = parseInt(ret.data.piece_width || 100) || 100;
state.loaded = true; state.loaded = true;
$uniqid.val(ret.data.uniqid || ''); $uniqid.val(ret.data.uniqid || '');
$bg.attr('src', ret.data.bgimg || ''); $bg.attr('src', ret.data.bgimg || '');

19
public/static/login.js
View File

@ -138,6 +138,7 @@ $(function () {
let request = form.dataset.loginSlider || ''; let request = form.dataset.loginSlider || '';
let check = form.dataset.loginCheck || ''; let check = form.dataset.loginCheck || '';
let state = { let state = {
bgHeight: 0,
bgWidth: 0, bgWidth: 0,
currentLeft: 0, currentLeft: 0,
dragging: false, dragging: false,
@ -146,6 +147,7 @@ $(function () {
originX: 0, originX: 0,
pieceWidth: 100, pieceWidth: 100,
required: false, required: false,
sourceHeight: 300,
sourceWidth: 600, sourceWidth: 600,
startLeft: 0, startLeft: 0,
verified: false, verified: false,
@ -162,14 +164,22 @@ $(function () {
function setPosition(left) { function setPosition(left) {
state.currentLeft = Math.max(0, Math.min(left, state.maxLeft)); state.currentLeft = Math.max(0, Math.min(left, state.maxLeft));
$handle.css('left', state.currentLeft + 'px'); $handle.css('left', state.currentLeft + 'px');
$track.css('width', (state.currentLeft + $handle.outerWidth()) + 'px'); $track.css('width', '0px');
$piece.css('left', state.currentLeft + 'px'); $piece.css('left', state.currentLeft + 'px');
} }
function recalculate() { function recalculate() {
let sourceWidth = Math.max(parseInt(state.sourceWidth, 10) || 600, 1);
let sourceHeight = Math.max(parseInt(state.sourceHeight, 10) || 300, 1);
let pieceWidth = Math.max(parseInt(state.pieceWidth, 10) || 100, 1);
state.bgWidth = $stage.innerWidth(); state.bgWidth = $stage.innerWidth();
if (state.bgWidth > 0) {
$stage.css('height', Math.round(state.bgWidth * sourceHeight / sourceWidth) + 'px');
}
state.bgWidth = $stage.innerWidth();
state.bgHeight = $stage.innerHeight();
state.maxLeft = Math.max(state.bgWidth - $handle.outerWidth(), 0); state.maxLeft = Math.max(state.bgWidth - $handle.outerWidth(), 0);
$piece.css('width', (state.pieceWidth / state.sourceWidth * 100) + '%'); $piece.css('width', (pieceWidth / sourceWidth * state.bgWidth) + 'px');
setPosition(state.currentLeft); setPosition(state.currentLeft);
} }
@ -201,8 +211,9 @@ $(function () {
ret.data && ret.data.reload && reloadLoginPage(); ret.data && ret.data.reload && reloadLoginPage();
return false; return false;
} }
state.sourceWidth = parseInt(ret.data.width || 600); state.sourceWidth = parseInt(ret.data.width || 600) || 600;
state.pieceWidth = parseInt(ret.data.piece_width || 100); state.sourceHeight = parseInt(ret.data.height || 300) || 300;
state.pieceWidth = parseInt(ret.data.piece_width || 100) || 100;
state.loaded = true; state.loaded = true;
$uniqid.val(ret.data.uniqid || ''); $uniqid.val(ret.data.uniqid || '');
$bg.attr('src', ret.data.bgimg || ''); $bg.attr('src', ret.data.bgimg || '');