跳到主要内容
版本：Current

代码架构

入口与渲染​

  • index.js 使用 React 18 的 createRoot 挂载应用
  • App.js 使用 BrowserRouter 包裹，内部定义 Routes

路由定义方式​

  • 使用声明式 Route，每个路由显式指定 element
  • 布局在路由级组合：<><Header /><Navbar /><Home /></>
  • 子页面通常不渲染 Header，仅保留 Navbar

组件层次​

  • Footer 在 Router 内、Routes 外，所有页面共用
  • Header、Navbar 按需在每个 Route 的 element 中引入

状态管理​

  • 无 Redux、Context 等全局状态
  • 组件内使用 React Hooks：useState、useEffect、useRef
  • 典型用法：
    • Navbar：下拉菜单、移动端菜单、点击外部关闭
    • Home：Intersection Observer 滚动动画

样式组织​

  • 主样式：Tailwind 工具类
  • 全局：App.css、index.css
  • 组件级：部分组件引入 index.css 或自定义 CSS
  • 工具：lib/utils.js 中的 cn() 合并 clsx 与 tailwind-merge

数据组织​

类型位置示例
硬编码组件内Navbar 菜单项、活动列表
JSONHonor_Wall.json荣誉墙数据
静态资源public/图片、PDF 链接