# 项目结构

```
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. 布局中包含暗黑模式功能，用户可以选择暗黑模式，切换暗黑模式后，页面会自动刷新。