React-admin

react后台管理系统 : 预览地址
扫码预览:

介绍

    本项目基于React16.x开发，使用了大量Antd组件，可用做一般的后台管理系统，支持移动端，兼容所有主流浏览器。

总体技术栈为: React16.x + React-Router4.x + Redux + ES6 + Less + mockjs + axios。

实现功能

• 用户/游客/超级管理员登录
• 统计面板
• 全屏展示
• 表格数据展示
• 拖拽，抽屉，弹窗，步骤条，标签页等组件库功能
• 富文本编辑及实时转换HTML/JSON
• 主题切换
• 基本动画和Lottie动画展示
• 数据的图表展示
• 多种表单的模板
• 画廊功能
• Antd图标及第三方图表库展示
• 常规地图及卫星地图
• 路由拦截，权限识别
• 个人信息修改昵称功能
• 懒加载
• 开屏动画

功能展示

相关依赖

• animate.css :  css动画库
• antd :  蚂蚁金服ui组件库
• axios :  http请求模块
• babel-plugin-import :  按需引入组件，优化前端性能
• classnames :  简化React类名写法
• d3-scale :  recharts的插件
• d3-scale-chromatic :  recharts的插件
• draft-js :  富文本编辑器
• draftjs-to-html :  富文本转Html
• draftjs-to-markdown :  富文本转MarkDown
• echarts :  React的图表插件
• echarts-for-react :  React封装的echart插件
• less :  css预处理器
• mockjs :  模拟生成数据，拦截登录等
• photoswipe :  图片弹层查看插件
• prop-types :  props属性类型检查
• react-color :  调色板组件
• react-draft-wysiwyg :  富文本组件
• react-draggable :  React拖拽插件
• react-highlight-words :  table表格字体高亮
• react-lottie :  React版Lottie动画
• react-qmap :  React版地图组件
• recharts :  另一个React的图表插件
• screenfull :  全屏插件

技术障碍

主观障碍

图表功能中部分文字超出隐藏（echart本身生成canvas时的bug）
日历坐标系在移动端显示太过密集（echart部分组件没有实现响应式）
旭日图偶尔会出现宽度为100px不变的情况（疑似echart的bug）

客观障碍

富文本功能无法上传预览图片（imgur接口不可用）
旭日图图表子节点太复杂无法模拟生成数据
全屏图标无法随屏幕变换而变换

项目使用

# 安装依赖
yarn  

# 运行
yarn start

# 打包（本地会跨域建议使用nginx代理）
yarn build

感谢

蚂蚁金服的组件库Ant Design
yezihaohao开源的react-admin项目
Ciwing·Jon提供的漫威头像图标