react-antd-console 是一个后台管理系统的前端解决方案，封装了后台管理系统必要功能（如登录、鉴权、菜单、面包屑、标签页等），帮助开发人员专注于业务快速开发。项目基于 React 18、Ant design 5、Vite 和 TypeScript 等新版本。对于使用到的各项技术，会被持续更新至最新版本
如果你喜欢这个项目或认为对你有用，欢迎使用体验和 Star
概述
在本项目发布之初，我们额外提供了一个主题版的预览。在主题版中，额外多了主题、多标签、示例等功能。如今，这些功能中的核心部分，经过了优化，已经都被本项目所支持，并保持了整体代码的精简。之前的文章多从技术层面介绍，以下主要从产品层面做一些介绍
布局
- 布局设计为多个圆角、阴影的模块的组合，有一些立体感。菜单、页头、页脚空间紧凑，把大空间留给了页面内容
- 提供了全局全屏（按钮在页头）和页面全屏（按钮在多标签的右键菜单）功能，进一步放大页面主体内容
- 页头提供了刷新页面按钮，点击有动画效果
- 页面切换/刷新时有进度条，颜色随主色
- 页头提供了切换语言按钮
主题
 |
 |
|---|---|
| Light | Dark |
 |
 |
|---|---|
| Yolk | Cosmic |
 |
 |
|---|---|
| Ocean | Monokai |
- 页头提供主色选择器，主色可动态切换为任意颜色
- Layout 背景色和 Container 背景色也可任意配置。可与主色搭配配置不同主题风格。代码亦支持动态切换，但没有开放到界面上
- 页头提供亮色/暗色动态切换按钮
多标签
- 打开路由页面自动新增/切换 tab
- 刷新页面保留 tab 记录
- 支持右键菜单，包括关闭当前、关闭其他、关闭左右、刷新页面、当前页全屏等功能
- 可拖拽
- 动画效果，交互体验更佳
- 支持同时展示不同 id 的相同路由页面。例如详情页 a 和详情页 b 可以同时显示在多标签中
其他动画效果
- 页面切换时，有动画效果，代码可配置
- 页头功能按钮 hover 时放大图标
- 导航菜单项 hover 时放大图标
- 展开/收起菜单按钮，点击时缩放，展开/收起后，图标有动画效果
搜索表格
后台管理系统一般有很多可搜索的表格页，我们提供了一款强大的组件 admin-search-list，方便快速开发，适用于各种场景。
-
封装了大部分逻辑，最少只需要提供 url ，搜索区域、列表区域。基本上只需要写样式即可
- 封装了收集搜索数据、搜索、重置、分页、滚动加载、请求等逻辑
- 搜索区域是响应式的，适配各种不同宽度的设备，只需要无脑排放样式组件即可
- 列表区域可渲染任意元素，可以是表格、列表、卡片等任意元素
- 支持滚动加载和分页条两种分页模式
- 支持分页数据自动同步至 url ，刷新页面可保留分页状态
- 支持搜索区域吸顶和表头吸顶
- 支持额外参数变化时执行搜索，适用于组件外的数据作为搜索条件
- 支持格式化搜索参数
- 支持自定义搜索按钮和重置按钮样式
- 支持延迟请求，适用于进页面时不加载数据
- 支持回到顶部
- 支持在组件加载前预制一些搜索数据
- 支持自定义多语言
- 完整的ts 类型提示
结尾
如果你喜欢这个项目或认为对你有用，欢迎使用体验和 Star
22 条回复 • 2024-11-29 18:23:59 +08:00
 |
1
Moyyyyyyyyyyye 13 天前
有设计感，不错
|
 |
2
blankmiss 13 天前
能不能出一个 精简版 这样用户可以直接 clone 就可以修改
|
 |
3
sealinfree 13 天前
挺好看的，现在用着 layui ，一直想换一下，关注了
|
 |
4
ixixi 12 天前
这类 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 12 天前
@zhangfg #6
antd mui 这类也都是把代码放到 node_modules 遇到不可控的不用即可 , 自己再写一个就是了 shadcn/ui 是通过 npx shadcn add xxxx 安装的 和项目中一堆注释实际体验是不一样的 |
 |
11
sepit 12 天前
不知道你们谁拉过代码看过，github 上的版本和演示的页面可以说是毫不相关，挂羊头卖狗肉了
|
 |
15
byronzhu 12 天前
支持缓存页面嘛？
|
 |
17
xshwy 12 天前
蛮好的，怎么实现的多标签呀，之前用 Arco React 版，他们说没有 Vue keepalive 缓存所以无法实现…
|
 |
18
zcybupt2016 12 天前  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 我怀着感激的心情，非常感谢您的澄清👍
|
Select Language