diff --git a/src/pages/go.astro b/src/pages/go.astro index 97346af..39b2a8c 100644 --- a/src/pages/go.astro +++ b/src/pages/go.astro @@ -27,6 +27,7 @@ const whitelist = externalLinkWhitelist.map((domain) => domain.toLowerCase());
@@ -53,7 +54,10 @@ const whitelist = externalLinkWhitelist.map((domain) => domain.toLowerCase()); const ring = document.querySelector('[data-countdown-ring]'); const continueLink = document.querySelector('[data-continue]'); const backLink = document.querySelector('[data-back]'); + const cancelButton = document.querySelector('[data-cancel]'); const circumference = 2 * Math.PI * 52; + let timer = 0; + let hasCanceled = false; function setText(node, text) { if (node) node.textContent = text; @@ -124,6 +128,7 @@ const whitelist = externalLinkWhitelist.map((domain) => domain.toLowerCase()); setText(title, '即将离开本站'); setText(message, `目标域名不在白名单中,${remaining} 秒后将自动跳转。`); countdownWrap.hidden = false; + cancelButton.hidden = false; countdown.textContent = remaining; if (ring) { @@ -131,7 +136,18 @@ const whitelist = externalLinkWhitelist.map((domain) => domain.toLowerCase()); ring.style.strokeDashoffset = '0'; } - const timer = window.setInterval(() => { + cancelButton?.addEventListener('click', () => { + hasCanceled = true; + window.clearInterval(timer); + cancelButton.hidden = true; + countdownWrap.hidden = true; + setText(statusLabel, '已取消'); + setText(title, '已取消自动跳转'); + setText(message, '自动跳转已停止,你可以继续访问目标地址,或返回上一页。'); + }); + + timer = window.setInterval(() => { + if (hasCanceled) return; remaining -= 1; countdown.textContent = remaining; setText(message, `目标域名不在白名单中,${remaining} 秒后将自动跳转。`); diff --git a/src/styles/site.css b/src/styles/site.css index cbf4566..52d26e2 100644 --- a/src/styles/site.css +++ b/src/styles/site.css @@ -3156,6 +3156,7 @@ meting-js { .external-redirect-actions { display: flex; flex-wrap: wrap; + justify-content: center; gap: 12px; margin-top: 28px; } @@ -3169,8 +3170,10 @@ meting-js { border-radius: 8px; padding: 9px 16px; color: var(--accent); + font: inherit; font-weight: 800; background: rgba(236, 253, 245, 0.68); + cursor: pointer; transition: color 0.2s ease, background-color 0.2s ease,