React18 后台管理模板项目:现代、高效与灵活

news2025/1/11 16:56:31

🎉 给大家推荐一款React18+Typescript+Vite+zustand+Antd+unocss且超级好用的中后台管理框架

项目地址

  1. 码云:https://gitee.com/nideweixiaonuannuande/xt-admin-react18
  2. github:https://github.com/1245488569/xt-admin-react18

演示地址

http://nideweixiaonuannuande.gitee.io/xt-admin-react18/#/login

项目特点概览

前沿技术与框架集成
  • React 18:采用最新版本的React,带来更流畅的用户体验和并发渲染功能。
  • Vite 5:基于快速开发工具Vite 5构建,实现闪电般的启动速度和热更新性能。
  • TypeScript 5:利用TypeScript进行类型检查,确保代码健壮性和可维护性。
  • Zustand:利用轻量级状态管理库Zustand简化复杂状态的管理和共享。
强大UI组件及优化工具
  • Ant Design v5:整合丰富的Ant Design UI组件库,提供一致、高效的界面设计体验。
  • UnoCSS:通过零配置原子类CSS方案Unocss,轻松实现样式按需引入和高效构建。
动态权限与个性化体验
  • 权限菜单支持:内置动态权限控制机制,根据角色切换不同菜单项可见性。
  • 布局模式自定义:具备4种预设布局模式切换,并支持页面高度、宽度自由调整。
  • 暗黑模式:一键切换暗黑主题,同时支持国际化(i18n)特性,满足全球用户需求。
  • 图标&组件自动引入:借助Iconify支持超过万种图标自动按需引入,components目录下的组件同样实现自动化导入。
便捷开发与资源优化
  • API自动引入 & Mock数据支持:自动处理API接口引用,内置Mock数据服务以模拟真实后端响应。
  • 全屏显示:提供全屏展示功能,提升专注度与沉浸式操作体验。
  • 页面刷新:支持页面实时刷新,保证数据即时同步。
  • 动态换肤:随心所欲切换皮肤风格,打造个性化后台管理系统。
  • ahooks助力:集成了ahooks工具库,扩展React Hook能力,提高开发效率。
性能与部署优化
  • Gzip/Brotli压缩:内置gzip和brotli资源压缩策略,显著减小文件大小,加速应用加载速度。
  • 环境变量配置:全面支持多环境变量配置,方便在不同环境下运行时调整设置。
  • 统一规范与风格:遵循严格的代码规范与风格指南,保障团队协作质量和代码一致性。
  • 精美错误与登录页:预制美观的登录、404、403错误页面,展现专业品牌形象。
其他实用功能
  • SvgIcon支持:无缝兼容SVG图标格式,让图标管理更加灵活自如。
  • 配置选项丰富:提供多样化的配置选择,以满足不同的项目需求和定制化诉求。
  • 历史菜单与面包屑导航:配备历史菜单记录以及直观的面包屑导航,便于用户操作与浏览路径回溯。
未来展望与附加功能
  • 菜单搜索(待实现) :计划添加菜单搜索功能,使用户能够快速定位目标页面。
  • 多级缓存(待实现) :未来将支持多级缓存策略,进一步提升系统性能。

项目展示

image.png

image.png

image.png

image.png

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1519968.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

AI人工智能培训讲师ChatGPT讲师叶梓培训简历及提纲ChatGPT等AI技术在医疗领域的应用

叶梓,上海交通大学计算机专业博士毕业,高级工程师。主研方向:数据挖掘、机器学习、人工智能。历任国内知名上市IT企业的AI技术总监、资深技术专家,市级行业大数据平台技术负责人。 长期负责城市信息化智能平台的建设工作&#xff…

在react中使用tailwindcss

安装tailwind css npm i -D tailwindcssnpm:tailwindcss/postcss7-compat postcss^7 autoprefixer^9安装 CRACO 由于 Create React App 不能让您覆盖原生的 PostCSS 配置,所以我们还需要安装 CRACO 才能配置 Tailwind。 npm install craco/craco配置CRACO 在项目根…

uni app 打肉肉(打飞机)小游戏

都给老婆和孩子写了 合十 钓鱼了&#xff0c;给自己写个打飞机吧。没找飞机怪兽的图片。就用馒头和肉肉代替了。有问题不要私信我。自己改哈 <template><view class"page_main"><view class"contentone"><canvas class"canvas…

吴恩达机器学习笔记 二十一 迁移学习 预训练

迁移学习&#xff08;transfer learning&#xff09;&#xff1a;直接把神经网络拿来&#xff0c;前面的参数可以直接用&#xff0c;把最后一层改了。 两种训练参数的方式&#xff1a; 1.只训练输出层的参数 2.训练所有参数 当只有一个小数据集的时候&#xff0c;第一种方法…

uniapp小程序:使用uni.getLocation通过腾讯地图获取相关地址信息详情(超详细)

先看运行结果&#xff1a; 流程&#xff1a; 1、在edge网页搜索腾讯位置服务 搜索后点击这里 已经有账号的就进行登录&#xff0c;没有账号的进行注册即可 点击控制台&#xff1a; 进去后点击成员管理---->我的应用---->创建应用 输入相应的参数应用名称&#xff08;随便…

Docker:常用命令

文章目录 docker作用常用指令 docker 作用 Docker 是一种容器化平台&#xff0c;可以让开发者打包应用程序及其依赖项&#xff0c;并以容器的形式进行发布、交付和运行。 Docker 的一些主要作用&#xff1a; 应用程序隔离&#xff1a;Docker 使用容器技术&#xff0c;将应用程…

NCP1271D65R2G中文资料规格书PDF数据手册引脚图参数图片价格功能特性描述

产品描述&#xff1a; NCP1271 是成功的 7 引脚电流模式 NCP12XX 系列的新一代引脚-引脚兼容新产品。该控制器通过使用可调节 Soft Skip 模式和集成的高电压启动 FET&#xff0c;实现了卓越的待机功耗。此专属 Soft Skip 还大大降低了噪音的风险。 因此可以在箝位网络中使用不…

音频提取:分享几个常用方法,简单好用

有时候我们会在视频中发现一首非常好听的歌曲&#xff0c;但是我们并不需要视频本身。 这时&#xff0c;我们可以提取视频中的音频&#xff0c;将其转化为音频文件&#xff0c;然后在任何时间、任何地点进行欣赏。 下面给大家分享几个提取视频中音频的几个方法&#xff0c;供…

vue/uniapp路由history模式下宝塔空间链接打开新窗口显示404解决方法

vue/uniapp路由history模式下宝塔空间链接打开新窗口显示404&#xff0c;或者域名后带路径参数刷新就报404 解决方法&#xff1a; 宝塔中站点配置修改&#xff1a;【配置文件】中添加下面代码&#xff0c;具体如图&#xff1a; location / {try_files $uri $uri/ /index.html…

【Go语言】Go语言中的函数

Go语言中的函数 Go语言中&#xff0c;函数主要有三种类型&#xff1a; 普通函数 匿名函数&#xff08;闭包&#xff09; 类方法 1 函数定义 Go语言函数的基本组成包括&#xff1a;关键字func、函数名、参数列表、返回值、函数体和返回语句。Go语言是强类型语言&#xff0…

【C#】数组string类型输出

示例 代码 internal class Program{static void Main(string[] args){List<int> list new List<int>() { 1,2,3,4,5,6,7,8,9,10};string output1 string.Join(",", list);Console.WriteLine(output1);string output2 string.Join("\n", lis…

深度学习指标| 置信区间、Dice、IOU、MIOU、Kappa

深度学习部分指标介绍 置信区间混淆矩阵DiceIOU和MIOUKappa 置信区间 95%CI指标 读论文的时候&#xff0c;常会看到一个“95%CI”的评价指标。 其中CI指的是统计学中的置信区间&#xff08;Confidence interval&#xff0c;CI&#xff09;。在统计学中&#xff0c;一个概率样…

【Streamlit学习笔记】实现包含多个sheet的excel文件下载

1、什么是Streamlit Streamlit是一个免费的开源框架&#xff0c;用于快速构建和共享漂亮的机器学习和数据科学Web应用程序&#xff0c;官网链接 Streamlit Streamlit API链接 API reference 实际项目中遇到的问题&#xff1a;包含多个sheet的excel文件下载&#xff0c;下面将给…

小程序路由跳转---事件通信通道EventChannel(二)

事件通信通道EventChannel实现两个页面之间的数据传输已在上篇小程序路由跳转—事件通信通道EventChannel&#xff08;一&#xff09;展开叙述&#xff0c;接下来讨论下多个页面&#xff08;三个及以上&#xff09;数据的通道如何构建。 本文重点&#xff1a;三个以上页面需将…

使用 Boot Camp 助理查明您的 Mac 需不需要 Windows 安装介质

使用 Boot Camp 助理查明您的 Mac 需不需要 Windows 安装介质 当前的 Mac 机型无需介质即可安装 Windows&#xff0c;也就是说&#xff0c;您不需要用到外置驱动器。较早的 Mac 机型需要用到 USB 驱动器或光盘驱动器。使用 Boot Camp 助理可查明您需要用到什么。 Boot Camp 助…

openGauss使用BenchmarkSQL进行性能测试(下)

上一篇我们分享了测试方法&#xff0c;本篇我们将发起测试及测试结果。 背景 本文提供openGauss使用BenchmarkSQL进行性能测试的方法和测试数据报告。 BenchmarkSQL&#xff0c;一个JDBC基准测试工具&#xff0c;内嵌了TPC-C测试脚本&#xff0c;支持很多数据库&#xff0c;…

百度paddleocr GPU版部署

显卡&#xff1a;NVIDIA GeForce RTX 4070&#xff0c;Nvidia驱动程序版本&#xff1a;537.13 Nvidia驱动程序能支持的最高cuda版本&#xff1a;12.2.138 Python&#xff1a;python3.10.11。试过python3.12&#xff0c;安装paddleocr失败&#xff0c;找不到相关模块。 飞桨版本…

使用C#的winform控制数据库实例服务的运行状态

一、得到sqlserver的实例名 二、引用对应的程序集和命名空间 using System.ServiceProcess; C#操作服务要用的类 ServiceController 声明类 private ServiceController serviceController new ServiceController("MSSQLSERVER"); 三、判断服务状态 serviceCon…

centos云服务器安装cs(cobaltstrike4.0)教程

1、先安装JAVA环境 mkdir download #创建download目录 cd download #进入download目录 mkdir java1.8 #在download目录下再创建java1.8目录 cd java1.8 #进入java1.8目录 wget https://repo.huaweicloud.com/java/jdk/8u201-b09/jdk-8u201-linux-x64.tar.gz #下载jdk压缩包 tar…

HarmonyOS NEXT应用开发—验证码布局

介绍 本示例介绍如何使用Text组件实现验证码场景&#xff0c;并禁用对内容的选中、复制、光标。 效果图预览 使用说明 单击组件可弹出输入法在进行验证码输入时&#xff0c;无法对中间单个数字进行更改&#xff0c;无法选中输入内容&#xff0c;无光标 实现思路 因为要禁用…