|
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 地址 | 在线预览 | 文档
| 
