代码架构

入口与渲染

• src/main.jsx 使用 React 18 createRoot，并 import './i18n'。
• App.jsx 使用 BrowserRouter，定义 / → /zh、/:locale 嵌套路由，以及旧路径 LegacyRedirect。

路由定义方式

• 声明式 <Route>，页面挂在 /:locale 父路由下，不要再写 /zh 前缀。
• 布局不再在每个 Route 里手写 <Header /><Navbar />，而由 MainLayout + <Outlet /> 统一包裹。
• 内部跳转使用 <LocalizedLink to="Activity">，由当前 locale 补全路径。

示例（已简化）：

<Route path="/:locale" element={<LocaleLayout />}>
  <Route index element={<Home />} />
  <Route path="Activity" element={<Activity />} />
  <Route path="Partnership" element={<Partnership />} />
  <Route path="*" element={<Activity_BufferPage />} />
</Route>

组件层次

• Footer 在 MainLayout 内，所有 locale 页面共用。
• 首页额外渲染 Header；Navbar 通过 useHomeNavbarReveal 控制封面滚动显现。
• 列表页可自行引入 CompactPageHeader；活动详情可用 ActivityDetailLayout，部门页可用 DivisionPageLayout。

i18n 流程

1. src/i18n/index.js 注册 zh / en 各命名空间。
2. URL 中的 :locale 变化时，MainLayout 调用 i18n.changeLanguage(locale)，并设置 document.documentElement.lang 与 document.title。
3. 组件内 useTranslation('activity') 读取对应 JSON。
4. useLocale().switchLocale('en') 只改路径前缀，不单独存语言偏好。

状态管理

• 无 Redux；无业务级全局 Context。
• 组件内 Hooks：useState、useEffect、useRef。
• 典型用法：
  • Navbar：下拉菜单、移动端菜单、点击外部关闭
  • Home：滚动动画 / Intersection Observer
  • useLocale：当前语言、本地化路径、切换语言

样式组织

• 主样式：Tailwind 工具类
• 全局：src/index.css（含 @tailwind 指令）
• 组件级：如部门页 Divisions.css
• 工具：lib/utils.js 的 cn() 合并 clsx 与 tailwind-merge

数据组织

类型	位置	示例
翻译	src/locales/{zh,en}/*.json	导航、首页、页脚
JSON	页面旁	Honor_Wall.json、Partnership.json
硬编码	组件内	部分活动列表常量、外链 URL
静态资源	public/	/images/...

对照表见 内容位置。