系统架构
架构概览
CSSA-Website 采用 纯前端 SPA 架构，运行于浏览器，不依赖后端服务。
分层设计
| 层级 | 职责 | 对应代码 |
|---|---|---|
| 入口层 | 挂载 React 根、加载 i18n | index.html、src/main.jsx |
| 路由层 | locale 前缀、页面映射、旧路径重定向 | src/App.jsx |
| 布局层 | 首页 Header、Navbar、Footer、Outlet | src/components/layout/MainLayout.jsx |
| 页面层 | 各业务页面 | src/components/Pages/ |
| UI 层 | Hero、内容块、语言切换等 | src/components/ui/、LanguageSwitcher.jsx |
| i18n 层 | 初始化与翻译资源 | src/i18n/index.js、src/locales/ |
| 工具层 | locale 路径、LocalizedLink、cn | src/lib/、src/hooks/ |
路由架构
- 所有正式页面挂在
/:locale下，由LocaleLayout校验语言后渲染MainLayout。 MainLayout根据是否首页决定是否渲染Header，再用<Outlet />渲染子路由。- 无 locale 的旧路径（
/Activity/*、/Resources/*等）由LegacyRedirect加上/zh前缀。 - 未知 locale 或根路径
*最终回到/zh。
路径对照表见 Route Map。
数据流
- 无全局业务状态：不使用 Redux。i18n 语言由 URL locale 驱动（
MainLayout调用i18n.changeLanguage）。 - 本地状态：组件内
useState/useEffect/useRef；导航高亮用useLocation。 - 数据来源：翻译 JSON、页面旁 JSON、组件内常量、
public/图片、外部 URL。
部署形态
npm run build生成静态文件到dist/- 可部署至 Cloudflare Pages 等静态托管
- 必须配置 SPA 回退：未匹配路径返回
index.html，否则刷新/zh/Activity会 404