项目结构

project-root/
├── src/
│   ├── components/
│   ├── services/            # 服务层
│   ├── models/              # Mobx状态管理
│   ├── layouts/             # 布局组件
│   ├── pages/               # 页面路由
│   ├── locales/             # 国际化配置
│   │   ├── zh-CN/
│   │   └── en-US/
│   ├── assets/              # 静态资源
│   │   ├── colors.css
│   │   ├── medias.css
│   │   └── variables.css
│   ├── App.tsx              # 主应用组件
│   ├── main.tsx             # 入口文件
│   └──typings.d.ts          # 类型定义
├── public/                  # 公共静态文件
│   └── index.html
├── package.json             # 项目配置
├── tsconfig.json            # TypeScript配置
└── vite.config.ts           # 构建配置

技术栈

• 前端框架：React
• 前端语言：TypeScript
• UI 库：Ant Design
• 状态管理：Mobx
• 网络请求：Axios
• 样式管理：CSS-in-JS
• 路由管理：React Router
• 国际化：React intl
• 代码规范：ESLint
• 代码格式化：Prettier
• 构建工具：Vite
• 其他：
  • 图表库：Recharts
  • 富文本编辑器：React Quill
  • 图片上传：React Dropzone
  • MD5 加密：spark-md5
  • 文件上传：react-dropzone

约定路由

约定式路由也叫文件路由，就是不需要手写配置，文件系统即路由，通过目录和文件及其命名分析出路由配置。

1. 分析 src/pages 目录拿到路由配置。
2. 约定 [ $] 包裹的文件或文件夹为动态可选路由。
3. 约定目录下有 _layout.tsx 时会生成嵌套路由，以 _layout.tsx 为该目录的 layout。
4. 约定 src/layouts/index.tsx 为全局路由。
5. 约定 src/pages/404.tsx 为 404 页面。

布局

文件 src/layouts/index.tsx 为全局路由。

1. 布局使用 Ant Design 的 Layout 组件，包含头部、侧边栏、底部。
2. 布局中包含基本的鉴权功能，用户登录后，判定权限是否可以访问当前页面；未登录用户，只能访问登录页面
3. 布局中包含国际化功能，用户可以选择语言，切换语言后，页面会自动刷新。
4. 布局中包含主题功能，用户可以选择主题，切换主题后，页面会自动刷新。
5. 布局中包含暗黑模式功能，用户可以选择暗黑模式，切换暗黑模式后，页面会自动刷新。