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

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