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' })} + +
+
+
+ ) +}