feat(P4): precompute移植+app.js sources双向回填+回归1003/1003+验收体积/文件/data.json

2026-09-12 14:18:41 +08:00
parent 16f365a045
commit c65a69c34e
401 changed files with 22932 additions and 140 deletions
@@ -0,0 +1,51 @@
+import React, { useEffect, useState } from 'react';
+import './BackToTop.css';
+
+export default function BackToTop({ threshold = 400, showRing = true }) {
+  const [visible, setVisible] = useState(false);
+  const [progress, setProgress] = useState(0);
+  const r = 20;
+  const circumference = 2 * Math.PI * r;
+  const offset = circumference * (1 - progress);
+
+  useEffect(() => {
+    function onScroll() {
+      const st = window.pageYOffset || document.documentElement.scrollTop;
+      const max = document.documentElement.scrollHeight - window.innerHeight;
+      setProgress(max > 0 ? st / max : 0);
+      setVisible(st > threshold);
+    }
+    window.addEventListener('scroll', onScroll, { passive: true });
+    onScroll();
+    return () => window.removeEventListener('scroll', onScroll);
+  }, [threshold]);
+
+  function toTop() {
+    window.scrollTo({ top: 0, behavior: 'smooth' });
+  }
+
+  return (
+    <div
+      className={'aa-backtop' + (visible ? ' is-visible' : '') + (showRing ? '' : ' aa-no-ring')}
+      role="button"
+      aria-label="返回顶部"
+      onClick={toTop}
+    >
+      {showRing ? (
+        <svg viewBox="0 0 44 44">
+          <circle className="aa-backtop-ring-bg" cx="22" cy="22" r="20" fill="none" strokeWidth="2" />
+          <circle
+            className="aa-backtop-ring-fg"
+            cx="22"
+            cy="22"
+            r="20"
+            fill="none"
+            strokeWidth="2"
+            style={{ strokeDasharray: circumference, strokeDashoffset: offset }}
+          />
+        </svg>
+      ) : null}
+      <span className="aa-backtop-arrow">↑</span>
+    </div>
+  );
+}