【源码】基于React和Ant Design的加油站管理前端系统

项目简介

这是一个基于React和Ant Design构建的web前端管理系统，为加油站管理提供了完整的前端解决方案，涵盖基础组件、表单、页面布局、路由配置以及状态管理等功能，致力于打造一个易用、高效且灵活的管理系统。

项目的主要特性和功能

1. 以React为核心前端开发框架，结合Ant Design组件库，提升开发效率与可维护性。
2. 借助create-react-app创建项目，项目结构清晰易懂。
3. 运用React Router进行路由管理，实现多页面应用结构。
4. 采用Redux进行状态管理，便于控制和理解应用状态。
5. 利用Ant Design的图表库进行可视化展示，包含echarts和recharts等。
6. 提供丰富组件库，有公共组件、操作性组件等，满足各类业务需求。
7. 采用响应式布局设计，适配不同屏幕尺寸和设备。

安装使用步骤

假设用户已经下载了本项目的源码文件。 1. 安装依赖：运行npm install --registry=https://registry.npm.taobao.org或者先执行npm config set --registry=https://registry.npm.taobao.org再运行npm install。 2. 启动项目：运行npm run dev启动开发服务器。 3. 打包项目：运行npm run build进行项目打包。

相关约定说明

响应式栅格

使用AntD下的Grid方式进行响应式布局，建议在Col组件中使用xs、md、lg属性以适配手机、平板、PC，使用时根据不同页面调整相应值。

主题颜色

项目主题颜色在base/style/variables.less修改，antd-mobile主题颜色在base/style/index.less修改，修改后运行npm run theme，会自动生成public/theme.less文件。

目录结构创建

包含多页面和单页面的模块目录结构创建规范，遵循规范可使代码结构清晰。

eslint代码规范

遵循相关规范编写代码，提高代码质量。

参数接收方式

支持?id=形式传参，通过this.props.query.id接收；支持/:id形式传参，通过this.props.params.id接收。

页面间距

使用<WingBlank size="l-3xl"></WingBlank>实现页面初始化内部左右留白；使用<WhiteSpace size="v-xl" />实现页面初始化内部上下留白；使用<WhiteSpace size="v-lg" />实现页面元素上下留白；页面元素间距采用栅格响应式Row Col。

特别提醒和注意事项

1. 使用antd修改主题颜色需按约定操作并运行npm run theme生成主题样式文件。
2. 使用表单组件点击提交按钮后，需调用resetFields清空表单状态，否则数据无法动态更新。
3. 响应式布局采用Ant Design的Grid方式，使用xs、md、lg等断点进行设计。
4. 按实际需求选择合适的参数接收方式。
5. 开发过程中遵循eslint代码规范和项目目录结构创建约定。

下载地址

点击下载 【提取码: 4003】【解压密码: www.makuang.net】