react-antd-console 是一个后台管理系统的前端解决方案,封装了后台管理系统必要功能(如登录、鉴权、菜单、面包屑、标签页等),帮助开发人员专注于业务快速开发。项目基于 React 18
、Ant design 5
、Vite
和 TypeScript
等新版本。对于使用到的各项技术,会被持续更新至最新版本
如果你喜欢这个项目或认为对你有用,欢迎使用体验和 Star
在本项目发布之初,我们额外提供了一个主题版的预览。在主题版中,额外多了主题、多标签、示例等功能。如今,这些功能中的核心部分,经过了优化,已经都被本项目所支持,并保持了整体代码的精简。之前的文章多从技术层面介绍,以下主要从产品层面做一些介绍
Light | Dark |
Yolk | Cosmic |
Ocean | Monokai |
后台管理系统一般有很多可搜索的表格页,我们提供了一款强大的组件 admin-search-list,方便快速开发,适用于各种场景。
如果你喜欢这个项目或认为对你有用,欢迎使用体验和 Star
1
Moyyyyyyyyyyye 9 天前
有设计感,不错
|
2
blankmiss 9 天前
能不能出一个 精简版 这样用户可以直接 clone 就可以修改
|
3
sealinfree 9 天前
挺好看的,现在用着 layui ,一直想换一下,关注了
|
4
ixixi 8 天前
这类 xxx admin 我感觉最大的痛点是无法真正做到轻量 和 按需引用
如果可以 npm install xxx 替代 git clone xxx 这样就好了 |
5
zhangfg OP @blankmiss 把示例代码删掉就是精简版。示例代码都在/pages 文件夹里面,相关的多语言、接口 api 、mock 等文件也都在一个文件夹里面内聚。删掉文件夹就可以了。
|
6
zhangfg OP @ixixi 其实我个人观点认为这是一个误解。把代码放到本地,比放到 node_modules 更加可控。如果在 node_modules 里,有 bug 或者有 diy 需求就会比较麻烦。参考下 shadcn/ui 的火热。
为了让用户容易 diy 自己的需求,本项目中的模块设计为高内聚和松散耦合,即各功能模块基本上都是通过<Component />这种使用的,不需要的直接注释掉即可。例如不需要多标签功能,那么直接注释 <Tabs> 就可以了。尽可能做到方便按需使用的效果。 另一方面,本项目虽然是一个模板,但其中的内容也是可以替换 diy 的。除了替换布局和各功能模块,在结构层面,也可以替换 antd ,替换样式框架,替换数据管理方案,甚至替换 react 为 vue 或 angular 。 |
7
zhangfg OP @Moyyyyyyyyyyye 非常感谢支持😊
|
8
zhangfg OP @sealinfree 可以的,如果遇到问题可以联系我
|
9
ixixi 8 天前
@zhangfg #6
antd mui 这类也都是把代码放到 node_modules 遇到不可控的不用即可 , 自己再写一个就是了 shadcn/ui 是通过 npx shadcn add xxxx 安装的 和项目中一堆注释实际体验是不一样的 |
11
sepit 8 天前
不知道你们谁拉过代码看过,github 上的版本和演示的页面可以说是毫不相关,挂羊头卖狗肉了
|
15
byronzhu 8 天前
支持缓存页面嘛?
|
17
xshwy 8 天前
蛮好的,怎么实现的多标签呀,之前用 Arco React 版,他们说没有 Vue keepalive 缓存所以无法实现…
|
18
zcybupt2016 8 天前 1
|
19
zhangfg OP @xshwy 他们说的多标签功能是包含了缓存页面的功能的,所以说没有 keepalive 就没法实现。本项目虽然有多标签,但目前没有实现缓存页面的功能。但是没关系,react 的下一个大的新版本会支持类似于 keepalive 的功能。而目前使用 react@experience 体验版也是可以实现缓存页面功能。
至于界面层面的多标签的实现:是利用了 antd 的 Tabs 组件。传 items 就会展示多标签,传 activeKey 会高亮指定的 tab 。所以只需要管理好 items 数据即可。items 相关数据存到 localstorage,刷新页面就还会继续展示。另外封装好拖拽和右键逻辑以复用,我们就可以只写样式,便可产出多个不同样式的标签页。 再补充一些,如何管理 items 数据:当点击标签,需要跳转路由;当路由切换,需要新增 item ;当点击关闭标签,需要删除当前 item 并需要跳转到下一个 item ;右键菜单还有一些关闭其他,关闭右侧,关闭左侧的逻辑,和上述关闭逻辑是类似的。把这些逻辑封装封装。 |
20
zhangfg OP @zcybupt2016 我怀着感激的心情,非常感谢您的澄清👍
|