From 9c77efaa4bdc9bf42b9f01ac98ed31486ac54869 Mon Sep 17 00:00:00 2001 From: WorkBuddy Date: Tue, 22 Sep 2026 16:55:59 +0800 Subject: [PATCH] =?UTF-8?q?refactor(frontend):=20=E6=8A=A5=E5=A4=B4?= =?UTF-8?q?=E6=8A=BD=E7=BB=84=E4=BB=B6=20Masthead=20+=20=E5=9B=9E=E5=88=B0?= =?UTF-8?q?=E9=A1=B6=E9=83=A8=E6=8A=BD=E7=BB=84=E4=BB=B6=20BackTop?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - Masthead:统一 HomePage/StandingsLayout 双份复制实现,当前版面 印报红高亮 + aria-current;⚙ 字符改线条 SVG;管理类入口加 title 提示需登录,访客不再被无声踢到登录页 - BackTop:两页各一份的浮动按钮收敛为共享组件,去 rounded-full/ shadow-lg,与全站方角无阴影语言对齐 --- frontend/src/App.tsx | 63 ++--------------------- frontend/src/components/BackTop.tsx | 30 +++++++++++ frontend/src/components/Masthead.tsx | 77 ++++++++++++++++++++++++++++ 3 files changed, 112 insertions(+), 58 deletions(-) create mode 100644 frontend/src/components/BackTop.tsx create mode 100644 frontend/src/components/Masthead.tsx diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx index 352d475..bdc9cdd 100644 --- a/frontend/src/App.tsx +++ b/frontend/src/App.tsx @@ -11,48 +11,17 @@ * - 未登录访问管理 → AdminLayout 门禁 → 登录页(不静默失败) */ -import { BrowserRouter, Routes, Route, Navigate, Link } from 'react-router-dom' +import { BrowserRouter, Routes, Route, Navigate } from 'react-router-dom' import { ErrorBoundary } from './components/ErrorBoundary' +import Masthead from './components/Masthead' import Matches from './pages/Matches' import Standings from './pages/Standings' import { adminRoutes } from './admin/routes' -/** 报眉日期行 */ -function dateLine(): string { - return new Date().toLocaleDateString('zh-CN', { - year: 'numeric', - month: 'long', - day: 'numeric', - weekday: 'long', - }) -} - function StandingsLayout({ children }: { children: React.ReactNode }) { return (
-
-
-
-

- 先知 -

-
-
- {dateLine()} - -
-
-
+
{children} @@ -70,30 +39,8 @@ function StandingsLayout({ children }: { children: React.ReactNode }) { function HomePage() { return (
- {/* ── 报头:粗线 + 居中刊名 + 日期与分区链接 ── */} -
-
-
-

- 先知 -

-
-
- {dateLine()} - -
-
-
+ {/* ── 报头:粗线 + 居中刊名 + 日期与分区链接(共用 Masthead) ── */} +
diff --git a/frontend/src/components/BackTop.tsx b/frontend/src/components/BackTop.tsx new file mode 100644 index 0000000..45eb8f4 --- /dev/null +++ b/frontend/src/components/BackTop.tsx @@ -0,0 +1,30 @@ +/** + * 回到顶部浮动按钮(前台两页共用,此前 Matches/Standings 各复制一份)。 + * 方角纸片风:去掉早期版本的 rounded-full + shadow-lg,与全站方角 + * 无阴影语言对齐;出现/隐藏仅动画 transform 与 opacity。 + */ +import { useEffect, useState } from 'react' + +export default function BackTop({ threshold = 300 }: { threshold?: number }) { + const [show, setShow] = useState(false) + + useEffect(() => { + const handleScroll = () => setShow(window.scrollY > threshold) + window.addEventListener('scroll', handleScroll, { passive: true }) + return () => window.removeEventListener('scroll', handleScroll) + }, [threshold]) + + return ( + + ) +} diff --git a/frontend/src/components/Masthead.tsx b/frontend/src/components/Masthead.tsx new file mode 100644 index 0000000..60c15ae --- /dev/null +++ b/frontend/src/components/Masthead.tsx @@ -0,0 +1,77 @@ +/** + * 报头组件(前台共用)。 + * + * 此前 HomePage 与 StandingsLayout 各自复制一份报头,导航项已经漂移 + * (首页有「积分榜」、积分榜页有「比赛/预测」),且无当前页高亮。 + * 现在统一为 Masthead: + * - active 声明当前版面,对应导航项加印报红高亮 + aria-current + * - 「管理」入口改用与全站一致的线条 SVG(替代字符 ⚙) + * - 管理类入口带 title 提示,避免访客被无声踢到登录页 + * 页脚文案各页不同,仍由调用方自行渲染。 + */ +import { Link } from 'react-router-dom' + +export type MastheadActive = 'home' | 'standings' + +function GearIcon() { + return ( + + ) +} + +function MastheadLink({ + to, + active = false, + title, + children, +}: { + to: string + /** 当前版面才高亮;管理类入口无高亮概念 */ + active?: boolean + title?: string + children: React.ReactNode +}) { + return ( + + {children} + + ) +} + +export default function Masthead({ active }: { active: MastheadActive }) { + return ( +
+
+
+

+ 先知 +

+
+
+ {new Date().toLocaleDateString('zh-CN', { year: 'numeric', month: 'long', day: 'numeric', weekday: 'long' })} + +
+
+
+ ) +}