From 4ae61a568312c8154274f7067a0fb271a3130c41 Mon Sep 17 00:00:00 2001
From: shangfangjian <shangfangjian@bilidili.cn>
Date: Mon, 21 Sep 2026 00:23:56 +0800
Subject: [PATCH] =?UTF-8?q?=E5=9B=9E=E5=88=B0=E9=A1=B6=E9=83=A8=E6=8C=89?=
 =?UTF-8?q?=E9=92=AE:=E6=BB=9A=E5=8A=A8=E6=B7=A1=E5=85=A5=20+=20=E5=B9=B3?=
 =?UTF-8?q?=E6=BB=91=E6=BB=9A=E5=8A=A8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 滚动超过 300px 后按钮优雅淡入(translate-y + opacity 过渡)
- 点击后平滑滚动到顶部(behavior: smooth)
- 首页和积分榜页均添加
- 按钮隐藏时 pointer-events-none 防止误触

Co-Authored-By: new-provider/LongCat-2.0 <<EMAIL>>
)
---
 frontend/src/pages/Matches.tsx   | 22 ++++++++++++++++++++++
 frontend/src/pages/Standings.tsx | 23 +++++++++++++++++++++++
 2 files changed, 45 insertions(+)

diff --git a/frontend/src/pages/Matches.tsx b/frontend/src/pages/Matches.tsx
index 07ebf99..98e0ffa 100644
--- a/frontend/src/pages/Matches.tsx
+++ b/frontend/src/pages/Matches.tsx
@@ -195,6 +195,16 @@ export default function Matches() {
   const [loading, setLoading] = useState(false)
   const [showAllUpcoming, setShowAllUpcoming] = useState(false)  // 默认仅展示未来 3 天;true 展开全部
   const [liveMatches, setLiveMatches] = useState<Match[]>([])  // 进行中比赛(顶部独立区块)
+  const [showBackTop, setShowBackTop] = useState(false)  // 回到顶部按钮显示态
+
+  // 监听滚动,超过 300px 显示回到顶部按钮
+  useEffect(() => {
+    const handleScroll = () => setShowBackTop(window.scrollY > 300)
+    window.addEventListener('scroll', handleScroll, { passive: true })
+    return () => window.removeEventListener('scroll', handleScroll)
+  }, [])
+
+  const scrollToTop = () => window.scrollTo({ top: 0, behavior: 'smooth' })
   const [predictingId, setPredictingId] = useState<number | null>(null)
   const [prediction, setPrediction] = useState<Prediction | null>(null)
   const [predictionFor, setPredictionFor] = useState<Match | null>(null)
@@ -682,6 +692,18 @@ export default function Matches() {
         )}
       </section>
 
+      {/* 回到顶部按钮 */}
+      <button
+        onClick={scrollToTop}
+        className={`fixed bottom-6 right-6 z-40 flex h-10 w-10 items-center justify-center rounded-full border border-ink-200 bg-paper-50 text-ink-600 shadow-lg transition-all duration-300 hover:border-ink-400 hover:text-ink-900 ${
+          showBackTop ? 'translate-y-0 opacity-100' : 'translate-y-4 opacity-0 pointer-events-none'
+        }`}
+        aria-label="回到顶部"
+      >
+        <svg className="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
+          <path strokeLinecap="round" strokeLinejoin="round" d="M5 15l7-7 7 7" />
+        </svg>
+      </button>
     </div>
   )
 }
diff --git a/frontend/src/pages/Standings.tsx b/frontend/src/pages/Standings.tsx
index c864e2d..7438ffc 100644
--- a/frontend/src/pages/Standings.tsx
+++ b/frontend/src/pages/Standings.tsx
@@ -69,6 +69,16 @@ export default function StandingsPage() {
   const [loading, setLoading] = useState(true)
   const [switching, setSwitching] = useState(false)  // 切换联赛中
   const [error, setError] = useState<string | null>(null)
+  const [showBackTop, setShowBackTop] = useState(false)  // 回到顶部按钮显示态
+
+  // 监听滚动,超过 300px 显示回到顶部按钮
+  useEffect(() => {
+    const handleScroll = () => setShowBackTop(window.scrollY > 300)
+    window.addEventListener('scroll', handleScroll, { passive: true })
+    return () => window.removeEventListener('scroll', handleScroll)
+  }, [])
+
+  const scrollToTop = () => window.scrollTo({ top: 0, behavior: 'smooth' })
 
   const load = useCallback(async (code?: string) => {
     setLoading(true)
@@ -211,6 +221,19 @@ export default function StandingsPage() {
           </div>
         </div>
       )}
+
+      {/* 回到顶部按钮 */}
+      <button
+        onClick={scrollToTop}
+        className={`fixed bottom-6 right-6 z-40 flex h-10 w-10 items-center justify-center rounded-full border border-ink-200 bg-paper-50 text-ink-600 shadow-lg transition-all duration-300 hover:border-ink-400 hover:text-ink-900 ${
+          showBackTop ? 'translate-y-0 opacity-100' : 'translate-y-4 opacity-0 pointer-events-none'
+        }`}
+        aria-label="回到顶部"
+      >
+        <svg className="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
+          <path strokeLinecap="round" strokeLinejoin="round" d="M5 15l7-7 7 7" />
+        </svg>
+      </button>
     </div>
   )
 }