前端设计
布局模式
| 页面类型 | 布局 |
|---|---|
首页 /zh、/en | 全屏 Header + 滚动显现的 Navbar + 主内容 + Footer |
| 活动 / 资源 / 关于 / 荣誉墙 / 合作列表 | Navbar + CompactPageHeader + 主内容 + Footer |
| 活动详情 | Navbar + ActivityDetailLayout（或等价结构）+ Footer |
| 部门页 | Navbar + DivisionPageLayout + Footer |
| 未匹配路径 | Navbar + Activity_BufferPage + Footer |
Header、Navbar、Footer 由 MainLayout.jsx 统一渲染，页面组件只负责 Outlet 内的主体。
响应式策略
- 以 Tailwind 断点为主：
sm:、md:、lg: - Navbar 提供移动端汉堡菜单；点击菜单外关闭
- CompactPageHeader 固定约 200px 高，背景图加
bu-overlay
动画与交互
| 实现方式 | 用途 |
|---|---|
useHomeNavbarReveal | 首页 Navbar 在滚动越过约 72% 视口高度后显现 |
usePageMotion | 页面进入动效 |
| Framer Motion | 下拉菜单、AnimatePresence |
| 自定义 keyframes | fadeInUp、fadeInLeft、fadeIn |
| Intersection Observer | 首页滚动进入视口时的动画 |
| ParallaxBackground / ImageGallery | 视差背景与画廊（components/ui/） |
导航结构
文案在 src/locales/*/nav.json，链接在 Navbar.jsx。内部链接用 LocalizedLink，不要写死 /zh/...。
- 活动：新春嘉年华、非诚勿扰、国庆晚会、毕业舞会、新生见面会、往期精彩
- 资源：加入我们（外链门户）、新生手册（外链 PDF）、职发百宝箱、关于网站
- 关于：技术部、主席团、文娱部、职发部、宣传部、影视部、市场部、事务部
- 荣誉墙：年份锚点
- 合作：
Partnership顶级入口
Activity/Featured_Activity 在路由表中存在，但 Navbar 未挂入口，视为隐藏/遗留页。
扩展新页面
完整步骤（组件、路由、导航、翻译、图片）见 Adding New Pages。