ITStudio_OUC/ITStudioMainSite
0
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

style: 优化表单样式并提升表单性能

Browse Source
This commit is contained in:
古宇恒
2026-09-01 01:14:32 +08:00
parent 0901c9c99f
commit 8ceebab216
7 changed files with 737 additions and 349 deletions
Download Patch File Download Diff File Expand all files Collapse all files
plugins/itstudio-recruitment/assets/otp.css
+8 -43
View File
@@ -5,9 +5,7 @@
.itstudio-otp-wrap {
display: flex;
flex-direction: column;
gap: 8px;
width: 100%;
margin-top: 4px;
}
.itstudio-otp-group {
@@ -69,9 +67,9 @@
}
.itstudio-otp-send.is-countdown {
background: rgba(56, 139, 253, 0.12) !important;
border: 1px solid rgba(56, 139, 253, 0.3) !important;
color: #58a6ff !important;
background: #6b7280 !important;
border: 1px solid #7c8490 !important;
color: #e5e7eb !important;
font-variant-numeric: tabular-nums;
font-weight: 600;
}
@@ -82,28 +80,7 @@
}
.itstudio-otp-status {
display: flex;
align-items: center;
gap: 6px;
font-size: 0.84rem;
line-height: 1.45;
padding: 2px 4px;
color: var(--text-secondary);
transition: all 0.2s ease;
}
.itstudio-otp-status.is-success {
color: #3fb950;
font-weight: 500;
}
.itstudio-otp-status.is-error {
color: #f85149;
font-weight: 500;
}
.itstudio-otp-status.is-info {
color: #58a6ff;
width: 100%;
}
/* 浅色模式适配 */
@@ -118,21 +95,9 @@
}
[data-theme="light"] .itstudio-otp-send.is-countdown {
background: rgba(9, 105, 218, 0.08) !important;
border: 1px solid rgba(9, 105, 218, 0.25) !important;
color: #0969da !important;
}
[data-theme="light"] .itstudio-otp-status.is-success {
color: #1a7f37;
}
[data-theme="light"] .itstudio-otp-status.is-error {
color: #cf222e;
}
[data-theme="light"] .itstudio-otp-status.is-info {
color: #0969da;
background: #9ca3af !important;
border: 1px solid #9ca3af !important;
color: #ffffff !important;
}
@media (max-width: 480px) {
@@ -142,4 +107,4 @@
.itstudio-otp-send {
width: 100%;
}
}
}
plugins/itstudio-recruitment/assets/otp.js
+85 -14
View File
@@ -6,6 +6,8 @@
return;
}
const OTP_COOLDOWN_SECONDS = 60;
function getLanguage() {
return document.documentElement.lang === 'en' ? 'en' : 'cn';
}
@@ -41,12 +43,18 @@
}
status.style.display = 'flex';
status.textContent = message;
status.className = 'itstudio-otp-status' + (tone ? ' is-' + tone : '');
status.className = 'itstudio-otp-status ' + (tone === 'error' ? 'frm_error_style' : 'frm_message');
}
function startCooldown(button, seconds) {
let remaining = Math.max(1, Number(seconds) || Number(config.cooldown) || 60);
let remaining = Math.max(1, Number(seconds) || OTP_COOLDOWN_SECONDS);
if (button.itstudioOtpTimer) {
window.clearInterval(button.itstudioOtpTimer);
}
button.disabled = true;
button.dataset.otpLocked = '1';
button.setAttribute('aria-disabled', 'true');
button.classList.add('is-countdown');
const update = function () {
@@ -55,6 +63,8 @@
if (remaining < 0) {
window.clearInterval(button.itstudioOtpTimer);
button.itstudioOtpTimer = null;
button.dataset.otpLocked = '0';
button.setAttribute('aria-disabled', 'false');
button.classList.remove('is-countdown');
button.textContent = config.labels.send || '发送验证码';
button.disabled = false;
@@ -65,7 +75,36 @@
button.itstudioOtpTimer = window.setInterval(update, 1000);
}
async function readAjaxResult(response) {
const raw = await response.text();
const normalized = raw.replace(/^\uFEFF/, '').trim();
if (!normalized) {
throw new Error('Empty AJAX response');
}
const result = JSON.parse(normalized);
if (result && typeof result === 'object' && typeof result.success !== 'undefined') {
return {
success: result.success === true || result.success === 1 || result.success === '1',
payload: result.data && typeof result.data === 'object' ? result.data : {}
};
}
if (result && typeof result === 'object' && (result.message_cn || result.message_en)) {
return {
success: true,
payload: result
};
}
throw new Error('Unexpected AJAX response');
}
async function sendCode(form, button, status) {
if (button.dataset.otpLocked === '1' || button.disabled) {
return;
}
const emailInput = findField(form, config.emailFieldId);
const email = emailInput ? emailInput.value.trim() : '';
if (!email) {
@@ -79,7 +118,10 @@
return;
}
// Block rapid duplicate clicks while the request is in flight.
button.disabled = true;
button.dataset.otpLocked = '1';
button.setAttribute('aria-disabled', 'true');
button.classList.add('is-loading');
button.textContent = config.labels.sending || '发送中…';
setStatus(status, config.labels.sending || '正在发送验证码…', 'info');
@@ -95,26 +137,26 @@
nonce: config.nonce
}).toString()
});
const result = await response.json();
const payload = result && result.data ? result.data : {};
const result = await readAjaxResult(response);
const payload = result.payload || {};
button.classList.remove('is-loading');
if (!result.success) {
setStatus(status, getMessage(payload, config.labels.networkError || '发送失败，请稍后重试。'), 'error');
if (payload.wait) {
startCooldown(button, payload.wait);
} else {
button.textContent = config.labels.send || '发送验证码';
button.disabled = false;
}
button.dataset.otpLocked = '0';
button.setAttribute('aria-disabled', 'false');
button.textContent = config.labels.send || '发送验证码';
button.disabled = false;
return;
}
setStatus(status, getMessage(payload, '验证码已发送，请检查邮箱及垃圾箱。'), 'success');
startCooldown(button, payload.cooldown || config.cooldown);
startCooldown(button, payload.cooldown || OTP_COOLDOWN_SECONDS);
} catch (error) {
button.classList.remove('is-loading');
setStatus(status, config.labels.networkError || '网络错误，请稍后重试。', 'error');
button.dataset.otpLocked = '0';
button.setAttribute('aria-disabled', 'false');
button.textContent = config.labels.send || '发送验证码';
button.disabled = false;
}
@@ -150,6 +192,8 @@
button.type = 'button';
button.className = 'itstudio-otp-send';
button.textContent = config.labels.send || '发送验证码';
button.dataset.otpLocked = '0';
button.setAttribute('aria-disabled', 'false');
const status = document.createElement('div');
status.className = 'itstudio-otp-status';
@@ -171,7 +215,34 @@
});
}
let mountQueued = false;
const scheduleMount = function () {
if (mountQueued) {
return;
}
mountQueued = true;
window.requestAnimationFrame(function () {
mountQueued = false;
mount();
});
};
mount();
const observer = new MutationObserver(mount);
observer.observe(document.body, {childList: true, subtree: true});
})();
const observerRoot = document.querySelector('.join-form-content') || document.body;
const observer = new MutationObserver(function (mutations) {
const formStructureChanged = mutations.some(function (mutation) {
return Array.from(mutation.addedNodes).concat(Array.from(mutation.removedNodes)).some(function (node) {
return node.nodeType === 1 && (
node.matches('.frm_forms, form') ||
Boolean(node.querySelector && node.querySelector('.frm_forms, form'))
);
});
});
if (formStructureChanged) {
scheduleMount();
}
});
observer.observe(observerRoot, {childList: true, subtree: true});
})();