From de64a2f4a76ea1095170ac796b4031e6a5ca7d72 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E9=82=B9=E6=99=AF=E7=AB=8B?= Date: Wed, 20 May 2026 22:08:20 +0800 Subject: [PATCH] =?UTF-8?q?fix(login):=20=E4=BC=98=E5=8C=96=E6=BB=91?= =?UTF-8?q?=E5=9D=97=E9=AA=8C=E8=AF=81=E7=A0=81=E5=B0=BA=E5=AF=B8=E8=AE=A1?= =?UTF-8?q?=E7=AE=97?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 根据服务端返回的验证码原始宽高动态计算展示舞台高度，避免固定高度导致不同尺寸背景图被裁切或拉伸。 按背景图实际渲染宽度换算拼图片宽度，并在窗口尺寸变化后重新计算拖动边界，保证滑块位置与缺口比例一致。 取消滑动轨迹填充宽度，减少拖动过程中的视觉干扰，使验证条表现更稳定。 --- .../stc/public/static/login.js | 19 +++++++++++++++---- public/static/login.js | 19 +++++++++++++++---- 2 files changed, 30 insertions(+), 8 deletions(-) diff --git a/plugin/think-plugs-static/stc/public/static/login.js b/plugin/think-plugs-static/stc/public/static/login.js index 4fdad59a4..523d9a33b 100644 --- a/plugin/think-plugs-static/stc/public/static/login.js +++ b/plugin/think-plugs-static/stc/public/static/login.js @@ -138,6 +138,7 @@ $(function () { let request = form.dataset.loginSlider || ''; let check = form.dataset.loginCheck || ''; let state = { + bgHeight: 0, bgWidth: 0, currentLeft: 0, dragging: false, @@ -146,6 +147,7 @@ $(function () { originX: 0, pieceWidth: 100, required: false, + sourceHeight: 300, sourceWidth: 600, startLeft: 0, verified: false, @@ -162,14 +164,22 @@ $(function () { function setPosition(left) { state.currentLeft = Math.max(0, Math.min(left, state.maxLeft)); $handle.css('left', state.currentLeft + 'px'); - $track.css('width', (state.currentLeft + $handle.outerWidth()) + 'px'); + $track.css('width', '0px'); $piece.css('left', state.currentLeft + 'px'); } 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(); + 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); - $piece.css('width', (state.pieceWidth / state.sourceWidth * 100) + '%'); + $piece.css('width', (pieceWidth / sourceWidth * state.bgWidth) + 'px'); setPosition(state.currentLeft); } @@ -201,8 +211,9 @@ $(function () { ret.data && ret.data.reload && reloadLoginPage(); return false; } - state.sourceWidth = parseInt(ret.data.width || 600); - state.pieceWidth = parseInt(ret.data.piece_width || 100); + state.sourceWidth = parseInt(ret.data.width || 600) || 600; + state.sourceHeight = parseInt(ret.data.height || 300) || 300; + state.pieceWidth = parseInt(ret.data.piece_width || 100) || 100; state.loaded = true; $uniqid.val(ret.data.uniqid || ''); $bg.attr('src', ret.data.bgimg || ''); diff --git a/public/static/login.js b/public/static/login.js index 4fdad59a4..523d9a33b 100644 --- a/public/static/login.js +++ b/public/static/login.js @@ -138,6 +138,7 @@ $(function () { let request = form.dataset.loginSlider || ''; let check = form.dataset.loginCheck || ''; let state = { + bgHeight: 0, bgWidth: 0, currentLeft: 0, dragging: false, @@ -146,6 +147,7 @@ $(function () { originX: 0, pieceWidth: 100, required: false, + sourceHeight: 300, sourceWidth: 600, startLeft: 0, verified: false, @@ -162,14 +164,22 @@ $(function () { function setPosition(left) { state.currentLeft = Math.max(0, Math.min(left, state.maxLeft)); $handle.css('left', state.currentLeft + 'px'); - $track.css('width', (state.currentLeft + $handle.outerWidth()) + 'px'); + $track.css('width', '0px'); $piece.css('left', state.currentLeft + 'px'); } 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(); + 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); - $piece.css('width', (state.pieceWidth / state.sourceWidth * 100) + '%'); + $piece.css('width', (pieceWidth / sourceWidth * state.bgWidth) + 'px'); setPosition(state.currentLeft); } @@ -201,8 +211,9 @@ $(function () { ret.data && ret.data.reload && reloadLoginPage(); return false; } - state.sourceWidth = parseInt(ret.data.width || 600); - state.pieceWidth = parseInt(ret.data.piece_width || 100); + state.sourceWidth = parseInt(ret.data.width || 600) || 600; + state.sourceHeight = parseInt(ret.data.height || 300) || 300; + state.pieceWidth = parseInt(ret.data.piece_width || 100) || 100; state.loaded = true; $uniqid.val(ret.data.uniqid || ''); $bg.attr('src', ret.data.bgimg || '');