这是一个创建于 324 天前的主题，其中的信息可能已经有所发展或是发生改变。
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
 | 1 Moyyyyyyyyyyye PRO 有设计感，不错 |
 | 2 blankmiss 324 天前 能不能出一个 精简版 这样用户可以直接 clone 就可以修改 |
 | 3 sealinfree 324 天前 挺好看的，现在用着 layui ，一直想换一下，关注了 |
 | 4 ixixi 323 天前 这类 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 323 天前 @zhangfg #6 antd mui 这类也都是把代码放到 node_modules 遇到不可控的不用即可 , 自己再写一个就是了 shadcn/ui 是通过 npx shadcn add xxxx 安装的 和项目中一堆注释实际体验是不一样的 |
 | 11 sepit 323 天前 不知道你们谁拉过代码看过，github 上的版本和演示的页面可以说是毫不相关，挂羊头卖狗肉了 |
 | 15 byronzhu 323 天前 支持缓存页面嘛？ |
 | 17 xshwy 323 天前 蛮好的，怎么实现的多标签呀，之前用 Arco React 版，他们说没有 Vue keepalive 缓存所以无法实现… |
 | 18 zcybupt2016 323 天前  1 |
| 19 zhangfg OP 1 @xshwy 他们说的多标签功能是包含了缓存页面的功能的，所以说没有 keepalive 就没法实现。本项目虽然有多标签，但目前没有实现缓存页面的功能。但是没关系，react 的下一个大的新版本会支持类似于 keepalive 的功能。而目前使用 react@experience 体验版也是可以实现缓存页面功能。 至于界面层面的多标签的实现：是利用了 antd 的 Tabs 组件。传 items 就会展示多标签，传 activeKey 会高亮指定的 tab 。所以只需要管理好 items 数据即可。items 相关数据存到 localstorage,刷新页面就还会继续展示。另外封装好拖拽和右键逻辑以复用，我们就可以只写样式，便可产出多个不同样式的标签页。 再补充一些，如何管理 items 数据：当点击标签，需要跳转路由；当路由切换，需要新增 item ；当点击关闭标签，需要删除当前 item 并需要跳转到下一个 item ；右键菜单还有一些关闭其他，关闭右侧，关闭左侧的逻辑，和上述关闭逻辑是类似的。把这些逻辑封装封装。 |
| 20 zhangfg OP @zcybupt2016 我怀着感激的心情，非常感谢您的澄清 |
| 21 sepit 323 天前 1 @zhangfg #20 这是我回复的看的页面，想必是之前版本的页面  这是在重新全新拉取的时候的页面  ，我的确张嘴就来非常抱歉了，维护一个开源项目是非常无私的行为，非常对不起你和上面那位澄清的同学，非常抱歉。 |
| 22 zhangfg OP @sepit 这是一个误会。我也为前面言辞有些激烈向您道歉，我们都不要有心理负担。您的表达让我更有动力维护好这个项目，也欢迎一起参与共建 |
 | 23 yuanzigsa 300 天前 非常感谢作者的奉献，已经 star ，最近也在打算重构一个之前的项目，很受启发 |
Select Language