管理系统系列--基于Elux+React+Antd的通用后台管理系统.zip

<div align="center"> <img src="public/client/imgs/logo-icon-rotate.svg" alt="elux" width="200"> <h2><a href="https://eluxjs.com">eluxjs.com</a></h2> <h3>基于“微模块”和“模型驱动”的跨平台、跨框架『同构方案』</h3> <small>支持React/Vue/Web(浏览器)/Micro(微前端)/SSR(服务器渲染)/MP(小程序)/APP(手机应用)</small> </div> ## 项目介绍 本项目主要基于`Elux+Antd`构建，包含`React`版本和`Vue`版本，旨在提供给大家一个**简单基础**、**开箱即用**的后台管理系统通用模版，主要包含运行环境、脚手架、代码风格、基本Layout、状态管理、路由管理、增删改查逻辑、列表、表单等。 > 为保持工程简单清爽，方便二次开发，只提供基本版式和通用组件，不集成各种眼花缭乱的组件，需要的时候自己加进去就行了，Antd本身也自带很多组件。 ## 在线预览 <http://admin-react-antd.eluxjs.com/> ## Git仓库 - React版本 - github: <https://github.com/hiisea/elux-react-antd-admin> - gitee: <https://gitee.com/hiisea/elux-react-antd-admin-fork> - Vue版本 - github: <https://github.com/hiisea/elux-vue-antd-admin> - gitee: <https://gitee.com/hiisea/elux-vue-antd-admin-fork> ## 安装方法 - 使用Git命令clone相应的库：`git clone xxx` - 也可以使用Elux提供的命令：`npm create elux@latest 或 yarn create elux` ## ⚠️注意事项 安装请注意！安装请注意！安装请注意！重要的事情说三遍，因为使用了`workspace`，所以请保证你的安装环境： - Node版本 >= 14.0.0 - 推荐使用 `yarn` 安装依赖 - 如果使用 `npm` 安装依赖，npm版本 >= 7.0 - 本项目代码风格检查以 LF 作为换行符，如果你在windows中使用`git clone`，最好关闭`autocrlf` > git config --global core.autocrlf false ## 你看得见的UI - 🚀 提供通用的Admin系统Layout（包括注册、登录、忘记密码等）。 - 🚀 动态获取Menu菜单、轮询最新消息等。 - 🚀 支持第一次后退溢出，自动回到首页，再次后退则弹出提示：`您确定要离开本站？`防止用户误操作。  - 提供&lt;DocumentHead&gt;组件，方便在SinglePage中维护document title、keyword、description等，该组件也可用于SSR，例如： ```ts <DocumentHead title={(id?'修改':'新增')+'用户'} /> ``` - 🚀 提供配置式查询表单, 还带TS类型验证哦，再也不担心写错字段名： ```ts const formItems: SearchFromItems<ListSearchFormData> = [ {name: 'name', label: '用户名', formItem: <Input placeholder="请输入关键字" />}, {name: 'nickname', label: '呢称', formItem: <Input placeholder="请输入呢称" />}, {name: 'status', label: '状态', formItem: <Select placeholder="请选择用户状态" />}, {name: 'role', label: '角色', formItem: <Select placeholder="请选择用户状态" />}, {name: 'email', label: 'Email', formItem: <Input placeholder="请输入Email" />}, ]; ``` - 🚀 提供展开与隐藏高级搜索：[展开高级](http://admin-react-antd.eluxjs.com/admin/member/list/maintain?email=u.mese%40jww.gh) / [隐藏高级](http://admin-react-antd.eluxjs.com/admin/member/list/maintain) - 🚀 提供跨页选取、重新搜索后选取、review已选取：[跨页选取](http://admin-react-antd.eluxjs.com/admin/member/list/maintain) - 🚀 提供配置式批量操作等功能，如：[批量操作](http://admin-react-antd.eluxjs.com/admin/member/list/maintain) ```ts const batchActions = { actions: [ {key: 'delete', label: '批量删除', confirm: true}, {key: 'resolved', label: '批量通过', confirm: true}, {key: 'rejected', label: '批量拒绝', confirm: true}, ], handler: (item: {key: string}, ids: (string | number)[]) => { if (item.key === 'delete') { deleteItems(ids as string[]); } else if (item.key === 'resolved') { alterItems(ids as string[], {status: Status.审核通过}); } else if (item.key === 'rejected') { alterItems(ids as string[], {status: Status.审核拒绝}); } }, }; ``` - 🚀 提供资源选择器，并封装成select，可单选、多选、选满自动提交，如：[创建文章时，查询并选择责任编辑](http://admin-react-antd.eluxjs.com/admin/article/item/edit?__c=_dialog) ```jsx <FormItem {...fromDecorators.editors}> <MSelect<MemberListSearch> placeholder="请选择责任编辑" selectorPathname="/admin/member/list/selector" fixedSearch={{role: Role.责任编辑, status: Status.启用}} limit={[1, 2]} returnArray showSearch ></MSelect> </FormItem> ``` - 🚀 提供收藏夹书签功能，用其代替Page选项卡，操作更灵活。点击左上角[【+收藏】](http://admin-react-antd.eluxjs.com/admin/member/list/maintain)试试...  - 🚀 提供页内刷新功能。点击右上角[【刷新按钮】](http://admin-react-antd.eluxjs.com/admin/member/list/maintain)试试... - 🚀 虚拟Window - 路由跳转时可以在新的虚拟窗口中打开，类似于target='_blank'，但是虚拟Window哦，如：[新窗口打开](http://admin-react-antd.eluxjs.com/admin/article/list/index?author=48&__c=_dialog) / [本窗口打开](http://admin-react-antd.eluxjs.com/admin/article/list/index?author=48) - 窗口中可以再开新窗口，最多可达10级 - 弹窗再弹弹窗体验不好？多层弹窗时自动隐藏下层弹窗，关闭上层弹窗自动恢复下层弹窗，保证每一时刻始终之会出现一层弹窗 - 实现真正意义上的Window（非简单的Dialog），每个窗口不仅拥有独立的Dom、状态管理Store、还自动维护独立的`历史记录栈` - 提供窗口工具条：后退、刷新、关闭，如：[文章列表](http://admin-react-antd.eluxjs.com/admin/article/list/index?author=48&__c=_dialog) => 点击标题 => 点击作者 => 点击文章数。然后你可以依次回退每一步操作，也可一次性全部关闭。 - 提供窗口最大化、最小化按钮，如：[文章详情，窗口左上角按钮](http://admin-react-antd.eluxjs.com/admin/article/item/detail/50?__c=_dialog)；并支持默认最大化，如：[创建文章](http://admin-react-antd.eluxjs.com/admin/article/item/edit?__c=_dialog)  - 窗口可以通过Url发送，如将`http://admin-react-antd.eluxjs.com/admin/member/item/edit/50?__c=_dialog`发送给好友后，其可以通过Url还原窗口。 - 实现`keep-alive`。keep-alive优点是用户体验好，缺点是太占资源（需要缓存所有Dom元素还有相关内存变量），现在使用虚拟Windw，你想keep-alive就在新窗口中打开，不想keep-alive就在原窗口中打开，关闭窗口就自动销毁keep-alive - 🚀 基于抽象的增删改查逻辑： - 业务逻辑通过类的继承复用，如果是标准的增删改查基本上`不用写代码`，否则可以自己覆盖父类中的某些方法： ```ts export class Model extends BaseResource<MemberResource> { protected api = api; protected defaultListSearch = defaultListSearch; } ``` - UI逻辑通过`Hooks`复用。 - 将视图抽象成为2大类：*列表*(List)和*单条*(Item)，抽取其共性。 - 在此基础上引入视图`渲染器(Render)`概念，类别名+渲染器=具体某个业务视图，如： - type=list,render=maintain(列表+维护)，如：[/admin/member/list/maintain](http://admin-react-antd.eluxjs.com/admin/member/list/maintain) - type=list,render=index(列表+展示)，如：[/admin/article/list/index](http://admin-react-antd.eluxjs.com/admin/article/list/index?author=49&__c=_dialog) - type=list,render=selector(列表+选择)，如：[/admin/member/list/selector](http://