项目技术方案与框架说明
本项目基于官方 React 脚手架进行二次开发，最基础的架构搭建。
- 模块化与组件化
- 使用 React 组件化思想，将 UI 分解为可复用的独立模块。
- 提供清晰的目录结构，便于维护和扩展。
- 状态管理
- 集成状态管理工具，如 Redux 用于管理全局应用状态。
- 使用 Context API 管理跨组件通信的轻量级状态。
- 路由管理
- 集成 React Router 实现单页应用的路由控制。
- 支持动态路由、嵌套路由和权限路由。
- 接口管理
- 提供统一的 API 请求管理工具（如 Axios）。
- 支持请求拦截、错误处理和全局加载状态。
- 环境变量支持
- 通过
.env 文件配置不同环境的变量，统一管理 API 地址、调试模式等。
- 前端资源管理
- 支持静态资源（图片、CSS、字体等）的高效加载和按需引入。
- 集成 CSS Modules 或 Tailwind CSS，增强样式管理。
- 构建优化
- 使用 Webpack ，支持代码分割、Tree Shaking 和按需加载。
- 单元测试与端到端测试
- 集成 Jest 和 Testing Library 进行组件和逻辑的单元测试。
- 使用 Cypress 或 Playwright 进行端到端测试。
- 开发效率
- 配置 ESLint 和 Prettier 保证代码风格一致性。
- 使用 Husky 和 lint-staged 集成 Git 提交规范。
- 国际化支持
- 提供 i18n 国际化支持，轻松切换语言。
- 动态表单与表格
- 提供常用表单和数据表格的封装组件，支持验证和动态字段。
技术选型
- 核心框架
-
- React 18+（使用函数组件和 React Hooks）。
- 路由
-
- React Router 6+。
- 状态管理
-
- Redux Toolkit 或 Zustand（根据项目需求选择）。
- 请求管理
-
- Axios 或 Fetch 封装。
- 样式
-
- Tailwind CSS yu CSS Modules。
- 构建工具
-
- Webpack 5。
- 测试
-
- Jest + Testing Library（单元测试）。
- Cypress 或 Playwright（端到端测试）。
- 环境管理
-
- Dotenv (.env 文件配置多环境变量)。
其他要求：
1、 设计思路、原则、实现过程完整地写入到readme.md文件中
2、写框架使用说明文档放在根目录
3、文件结构参考以下：
my-react-app/
├── public/ # 静态资源目录
│ ├── index.html # HTML 入口文件
│ └── assets/ # 公共资源（图片等）
├── src/ # 源代码目录
│ ├── api/ # 接口请求封装
│ │ ├── axiosInstance.js # Axios 实例配置
│ │ └── userApi.js # 示例 API 模块
│ ├── assets/ # 前端静态资源（字体、图片等）
│ ├── components/ # 公共组件
│ │ └── Button/ # 示例组件目录
│ ├── features/ # 业务模块
│ │ └── Auth/ # 示例业务模块
│ ├── hooks/ # 自定义 Hook
│ │ └── useAuth.js # 示例 Hook
│ ├── views/ # 页面级组件
│ │ └── Home/ # 示例页面目录
│ │ ├── Home.jsx
│ │ └── Home.module.css
│ ├── router/ # 路由管理
│ │ └── AppRouter.jsx # 路由入口文件
│ ├── store/ # 全局状态管理
│ │ ├── index.js # Redux Store 配置
│ │ └── authSlice.js # 示例 Slice
│ ├── styles/ # 全局样式
│ │ ├── index.css
│ │ └── tailwind.css # Tailwind 配置
│ ├── utils/ # 工具函数
│ │ └── formatDate.js # 示例工具函数
│ ├── App.jsx # 应用根组件
│ ├── main.jsx # ReactDOM 渲染入口
├── .env # 环境变量文件
├── .eslintrc.json # ESLint 配置
├── .prettierrc # Prettier 配置
├── package.json # 项目依赖和脚本配置
└── vite.config.js # Vite 配置