init

README.md

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