67 lines
2.5 KiB
Markdown
67 lines
2.5 KiB
Markdown
# 项目结构
|
||
|
||
```
|
||
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. 布局中包含暗黑模式功能，用户可以选择暗黑模式，切换暗黑模式后，页面会自动刷新。
|