react-antd-console 支持主题和多标签了

[zhangfg]

Github 地址 | 在线预览 | 文档

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

Github 地址 | 在线预览 | 文档

[Moyyyyyyyyyyye]

有设计感，不错

[blankmiss]

能不能出一个 精简版 这样用户可以直接 clone 就可以修改

[sealinfree]

挺好看的，现在用着 layui ，一直想换一下，关注了

[ixixi]

这类 xxx admin 我感觉最大的痛点是无法真正做到轻量 和 按需引用
如果可以 npm install xxx 替代 git clone xxx 这样就好了

[zhangfg]

@blankmiss 把示例代码删掉就是精简版。示例代码都在/pages 文件夹里面，相关的多语言、接口 api 、mock 等文件也都在一个文件夹里面内聚。删掉文件夹就可以了。

[zhangfg]

@ixixi 其实我个人观点认为这是一个误解。把代码放到本地，比放到 node_modules 更加可控。如果在 node_modules 里，有 bug 或者有 diy 需求就会比较麻烦。参考下 shadcn/ui 的火热。
为了让用户容易 diy 自己的需求，本项目中的模块设计为高内聚和松散耦合，即各功能模块基本上都是通过<Component />这种使用的，不需要的直接注释掉即可。例如不需要多标签功能，那么直接注释 <Tabs> 就可以了。尽可能做到方便按需使用的效果。
另一方面，本项目虽然是一个模板，但其中的内容也是可以替换 diy 的。除了替换布局和各功能模块，在结构层面，也可以替换 antd ，替换样式框架，替换数据管理方案，甚至替换 react 为 vue 或 angular 。

[zhangfg]

@Moyyyyyyyyyyye 非常感谢支持😊

[zhangfg]

@sealinfree 可以的，如果遇到问题可以联系我

[ixixi]

@zhangfg #6

antd mui 这类也都是把代码放到 node_modules 遇到不可控的不用即可 , 自己再写一个就是了

shadcn/ui 是通过 npx shadcn add xxxx 安装的 和项目中一堆注释实际体验是不一样的

[zhangfg]

@ixixi 体验的不同具体体现在：shadcn/ui 可以一键新增，而本项目可以一键删除😊

[sepit]

不知道你们谁拉过代码看过，github 上的版本和演示的页面可以说是毫不相关，挂羊头卖狗肉了

[zhangfg]

@sepit 你在这瞎扯什么呢，你拉过代码吗？在这里诋毁。你自己 clone 下看看再说。真是造谣 0 成本

[zhangfg]

@sepit 你拉下代码看看是不是和演示一样，然后过来道歉

[zhangfg]

@sepit 请你核实后，务必回来回复，否则误导众人，毕竟本项目是作者辛辛苦苦做出来的，不能被流言蜚语搅臭。我在这里等你

[byronzhu]

支持缓存页面嘛？

[zhangfg]

@byronzhu 目前不支持。但也有办法。可以使用 react@experience 版本，可以支持的了

[xshwy]

蛮好的，怎么实现的多标签呀，之前用 Arco React 版，他们说没有 Vue keepalive 缓存所以无法实现…

[zcybupt2016]

@sepit 真是张嘴就来啊

[zhangfg]

@xshwy 他们说的多标签功能是包含了缓存页面的功能的，所以说没有 keepalive 就没法实现。本项目虽然有多标签，但目前没有实现缓存页面的功能。但是没关系，react 的下一个大的新版本会支持类似于 keepalive 的功能。而目前使用 react@experience 体验版也是可以实现缓存页面功能。
至于界面层面的多标签的实现：是利用了 antd 的 Tabs 组件。传 items 就会展示多标签，传 activeKey 会高亮指定的 tab 。所以只需要管理好 items 数据即可。items 相关数据存到 localstorage,刷新页面就还会继续展示。另外封装好拖拽和右键逻辑以复用，我们就可以只写样式，便可产出多个不同样式的标签页。
再补充一些，如何管理 items 数据：当点击标签，需要跳转路由；当路由切换，需要新增 item ；当点击关闭标签，需要删除当前 item 并需要跳转到下一个 item ；右键菜单还有一些关闭其他，关闭右侧，关闭左侧的逻辑，和上述关闭逻辑是类似的。把这些逻辑封装封装。

[zhangfg]

@zcybupt2016 我怀着感激的心情，非常感谢您的澄清👍