优化自动跳转组件

Author: neveler

src/components/react/AutoRedirect.tsx

@@ -0,0 +1,75 @@
+import React from "react";
+
+export type Props = {
+  delay: number;
+  text: string;
+  href: string;
+};
+
+const AutoRedirect: React.FC<Props> = ({ delay, text, href }) => {
+  const [visible, setVisible] = React.useState(true);
+  const [countdown, setCountdown] = React.useState<number>(delay);
+
+  const timerRef = React.useRef<number | null>(null);
+
+  React.useEffect(() => {
+    if (delay > 0) {
+      timerRef.current = window.setInterval(() => {
+        setCountdown((prev) => {
+          if (prev <= 1) {
+            clear();
+            location.href = href;
+            return 0;
+          }
+          return prev - 1;
+        });
+      }, 1000);
+      return clear;
+    }
+  }, []);
+
+  const clear = () => {
+    if (timerRef.current !== null) {
+      clearInterval(timerRef.current);
+      timerRef.current = null;
+    }
+  };
+
+  const cancel = () => {
+    clear();
+    setVisible(false);
+  };
+
+  if (!visible || delay <= 0) {
+    return null;
+  }
+
+  return (
+    <div
+      style={{
+        padding: "0.75em 1em",
+        border: "1px solid var(--sl-color-orange)",
+        backgroundColor: "var(--sl-color-orange-low)",
+      }}
+    >
+      {"页面将在 "}
+      <span id="auto-redirect-countdown">{countdown}</span>
+      {" 秒后自动跳转到"}
+      <a href={href}>{text}</a>
+      {"，您也可以手动"}
+      <a
+        style={{
+          cursor: "pointer",
+          color: "-webkit-link",
+          textDecoration: "underline",
+        }}
+        onClick={cancel}
+      >
+        {"取消跳转"}
+      </a>
+      。
+    </div>
+  );
+};
+
+export default AutoRedirect;

src/components/starlight/PageTitle.astro

@@ -1,6 +1,6 @@
 ---
 import HitsInfo from "@components/react/HitsInfo";
-import { Aside } from "@astrojs/starlight/components";
+import AutoRedirect from "@components/react/AutoRedirect";
 import DefaultPageTitle from "@astrojs/starlight/components/PageTitle.astro";
 
 let tag = Astro.url.href;
@@ -10,25 +10,16 @@ if (!tag.endsWith("/") && !tag.endsWith(".html")) {
 
 const { autoRedirect, contributors } = Astro.locals.starlightRoute.entry.data;
 const showContributors = Array.isArray(contributors) && contributors.length > 0;
-
-const clientVars = autoRedirect ?? { delay: 0, href: "" };
 ---
 
 {
   autoRedirect && (
-    <div id="auto-redirect">
-      <Aside type="tip">
-        {"页面将在 "}
-        <span id="auto-redirect-countdown">{autoRedirect.delay}</span>
-        {" 秒后自动跳转到"}
-        <a href={autoRedirect.href}>{autoRedirect.text}</a>
-        {"，您也可以手动"}
-        <a href="javascript:;" id="auto-redirect-cancel">
-          {"取消跳转"}
-        </a>
-        。
-      </Aside>
-    </div>
+    <AutoRedirect
+      client:only="react"
+      delay={autoRedirect.delay}
+      text={autoRedirect.text}
+      href={autoRedirect.href}
+    />
   )
 }
 
@@ -55,25 +46,3 @@ const clientVars = autoRedirect ?? { delay: 0, href: "" };
     )
   }
 </div>
-
-<script is:inline define:vars={clientVars}>
-  const autoRedirect = document.getElementById("auto-redirect");
-  if (!autoRedirect) return;
-  const autoRedirectCountdown = document.getElementById("auto-redirect-countdown");
-  if (autoRedirectCountdown && delay > 0) {
-    let countdown = delay;
-    const autoRedirectCancel = document.getElementById("auto-redirect-cancel");
-    const interval = setInterval(() => {
-      if (countdown > 0) {
-        autoRedirectCountdown.textContent = String(--countdown);
-      } else {
-        clearInterval(interval);
-        location.href = href;
-      }
-    }, 1000);
-    autoRedirectCancel.addEventListener("click", () => {
-      clearInterval(interval);
-      autoRedirect.style.display = "none";
-    });
-  }
-</script>