跳转页面

src/pages/go.astro

@@ -27,6 +27,7 @@ const whitelist = externalLinkWhitelist.map((domain) => domain.toLowerCase());
 
       <div class="external-redirect-actions">
         <a class="external-redirect-button is-primary" href="/" data-continue hidden>立即访问</a>
+        <button class="external-redirect-button" type="button" data-cancel hidden>取消跳转</button>
         <a class="external-redirect-button" href="/" data-back>返回上一页</a>
       </div>
     </div>
@@ -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} 秒后将自动跳转。`);

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,