React-admin
react后台管理系统 : 预览地址
扫码预览:
介绍
本项目基于React
16.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提供的漫威头像图标