基于react18+arco+zustand通用后台管理系统React18Admin

2023-10-17 13:36

本文主要是介绍基于react18+arco+zustand通用后台管理系统React18Admin,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

React-Arco-Admin轻量级后台管理系统解决方案

基于vite4构建react18后台项目ReactAdmin。使用了react+arco-design+zustand+bizcharts等技术架构非凡后台管理框架。支持 dark/light主题、i18n国际化、动态路由鉴权、3种经典布局、tabs路由标签 等功能。

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

技术框架

  • 编辑器:Vscode
  • 使用技术:react18+vite4+react-router+zustand+axios
  • 组件库:arco-design (字节前端react组件库)
  • 路由管理:react-router-dom^6.16.0
  • 状态管理:zustand^4.4.1
  • 模拟数据:mockjs^1.1.0 + axios^1.5.1
  • 图表库:bizcharts^4.1.22
  • 编辑器组件:@wangeditor/editor-for-react^1.0.6
  • markdown组件:@uiw/react-md-editor^3.23.6
  • 请求进度插件:nprogress^0.2.0

在这里插入图片描述
在这里插入图片描述

特点

  • 基于vite4.x搭建react18后台系统
  • 使用最新前端技术栈react18、zustand、bizcharts、react-router
  • 搭配字节react组件库arco.design
  • 支持中英文/繁体国际化
  • 支持动态路由权限验证
  • 支持动态tabs标签栏菜单
  • 内置多种通用模板布局

在这里插入图片描述
在这里插入图片描述

项目结构

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

App.jsx模板

引入语言包,配置权限路由。

/*** 入口模板* @author Hs
*/import { useEffect, useMemo } from 'react'
import { HashRouter } from 'react-router-dom'
// 通过 ConfigProvider 组件实现国际化
import { ConfigProvider } from '@arco-design/web-react'
// 引入语言包
import enUS from '@arco-design/web-react/es/locale/en-US'
import zhCN from '@arco-design/web-react/es/locale/zh-CN'
import zhTW from '@arco-design/web-react/es/locale/zh-TW'import { AuthRouter } from '@/hooks/useRoutes'
import { appStore } from '@/store/app'// 引入路由配置
import Router from './routers'function App() {const { lang, config: { mode, theme }, setMode, setTheme } = appStore()const locale = useMemo(() => {switch(lang) {case 'en':return enUScase 'zh-CN':return zhCNcase 'zh-TW':return zhTWdefault:return zhCN}}, [lang])useEffect(() => {setMode(mode)setTheme(theme)}, [])return (<ConfigProvider locale={locale}><HashRouter><AuthRouter><Router /></AuthRouter></HashRouter></ConfigProvider>)
}export default App

react-admin通用布局模板

在这里插入图片描述

支持分栏+垂直+水平布局样式。

在这里插入图片描述

/*** 主布局模板* @author Hs Q:282310962
*/import { useMemo } from 'react'
import { appStore } from '@/store/app'import Columns from './template/columns'
import Vertical from './template/vertical'
import Transverse from './template/transverse'function Layout() {const { config: { skin, layout } } = appStore()// 布局模板const LayoutComponent = useMemo(() => {switch(layout) {case 'columns':return Columnscase 'vertical':return Verticalcase 'transverse':return Transversedefault:return Columns}}, [layout])return (<div className="radmin__container"><LayoutComponent /></div>)
}export default Layout

react-router-dom路由管理

在这里插入图片描述

/*** @title    react-router-dom v6路由配置管理* @author    andy
*/import { useRoutes, Navigate } from 'react-router-dom'import Error from '@views/error/404'// 批量导入modules路由
const modules = import.meta.glob('./modules/*.jsx', { eager: true })
const patchRoutes = Object.keys(modules).map(key => modules[key].default).flat()// useRoutes集中式路由配置
export const routes = [{path: '/',element: <Navigate to="/home" replace={true} />,meta: {isWhite: true // 路由白名单}},...patchRoutes,// 404模块 path="*"不能省略{path: '*',element: <Error />,meta: {isWhite: true}}
]const Router = () => useRoutes(routes)export default Router

lazyload.jsx懒加载

import { Suspense } from 'react'
import { Spin } from '@arco-design/web-react'
import NprogressLoading from './nprogress'// 加载提示
const SpinLoading = () => {return (<Spintip='loading...'style={{width: '100%'}}/>)
}// 延迟加载
const lazyload = LazyComponent => {// React 16.6 新增了<Suspense>组件,懒加载的模式需要我们给他加上一层 Loading的提示加载组件// return <Suspense fallback={<SpinLoading />}><LazyComponent /></Suspense>return <Suspense fallback={<NprogressLoading />}><LazyComponent /></Suspense>
}export default lazyload

nprogress.jsx加载进度条

import { Component } from 'react'
import NProgress from 'nprogress'
import 'nprogress/nprogress.css'export default class NprogressLoading extends Component {constructor(props) {super(props)NProgress.set(.4)NProgress.start()}componentDidMount() {NProgress.done()}render() {return <div />}
}
/*** 主路由配置* @author Hs
*/import { lazy } from 'react'
import {IconHome, IconDashboard, IconLink, IconCommand, IconUserGroup, IconLock,IconMenu, IconSafe, IconBug, IconHighlight, IconUnorderedList, IconStop
} from '@arco-design/web-react/icon'
import Layout from '@/layouts'
import Blank from '@/layouts/blank'
import lazyload from '../lazyload'export default [/*首页模块*/{path: '/home',key: '/home', // 用于Menu组件跳转路由地址element: <Layout />,meta: {// icon: 've-icon-home', // 菜单图标icon: <IconHome />,name: 'layout__main-menu__home', // i18n国际化标题title: '主页',isAuth: true, // 需要鉴权isHidden: false, // 是否隐藏菜单isAffix: true // 固定tabview标签栏(不可关闭)},children: [{key: '/home',index: true,element: lazyload(lazy(() => import('@views/home'))),meta: {// icon: 've-icon-home',icon: <IconHome />,name: 'layout__main-menu__home-index',title: '首页',isAuth: true}},// 工作台{path: 'dashboard',key: '/home/dashboard',element: lazyload(lazy(() => import('@views/home/dashboard'))),meta: {// icon: 've-icon-computer',icon: <IconDashboard />,name: 'layout__main-menu__home-workplace',title: '工作台',isAuth: true}},// 外部链接{path: 'https://react.dev/',key: 'https://react.dev/',meta: {// icon: 've-icon-clip',icon: <IconLink />,name: 'layout__main-menu__home-apidocs',title: 'react.js官方文档',rootRoute: '/home'}}]},/*组件模块*/{...},/*用户管理模块*/{...},/*权限模块*/{...},/*错误模块*/{...}
]

路由配置参数:

/*** @description 路由参数说明* @param path ==> 路由地址标识* @param key ==> 用于Menu组件跳转路由地址* @param redirect ==> 重定向地址* @param element ==> 视图页面路径* 菜单信息(meta)*         @param meta.icon ==> 菜单图标*         @param meta.title ==> 菜单标题*         @param meta.name ==> i18n国际化标题*         @param meta.roles ==> 页面权限 ['admin', 'dev', 'test']*         @param meta.isAuth ==> 是否需要验证*         @param meta.isHidden ==> 是否隐藏页面*         @param meta.isAffix ==> 是否固定标签(tabs标签栏不能关闭)* */

react18路由菜单RouterMenu

在这里插入图片描述
如上图:react-admin提供了三种不同menu风格样式。

<RouteMenu rootRouteEnable={false} /><RouteMenu rootRouteEnable /><RouteMenu rootRouteEnable mode="horizontal" />

Menu.jsx路由模板

/*** 路由菜单模板
*/import './index.scss'
import { useState, useMemo, useEffect } from 'react'
import { useNavigate, useLocation } from 'react-router-dom'
import { Menu } from '@arco-design/web-react'
import Icon from '@components/Icon'
import RouteSubMenu from './submenu'
import { routes } from '@/routers'
import { getCurrentRootRoute, findParentRoute } from '@/hooks/useRoutes'
import Locales from '@/locales'export default function RouteMenu(props) {const {// 菜单类型(垂直vertical 水平菜单horizontal 弹出pop)mode = 'vertical',// 菜单风格('light' | 'dark')theme = 'light',// 是否开启一级路由菜单rootRouteEnable = false,style = {}} = propsconst navigate = useNavigate()const { pathname } = useLocation()const t = Locales()const [openKeys, setOpenKeys] = useState([])const rootRoute = getCurrentRootRoute()const filterRoutes = routes.filter(item => !item?.meta?.isWhite)const menuRoutes = useMemo(() => {if(rootRouteEnable) {return filterRoutes}// 过滤一级菜单return filterRoutes.find(item => item.path == rootRoute && item.children)?.children}, [pathname])useEffect(() => {setOpenKeys(getKeys(pathname))}, [pathname])// 获取选中菜单路由keys数组const getKeys = (key) => {return findParentRoute(menuRoutes, key)?.map(item => item?.key)}const handleNavigate = (key) => {const reg = /[a-zA-Z0-9][-a-zA-Z0-9]{0,62}(\.[a-zA-Z0-9][-a-zA-Z0-9]{0,62})+\.?/if(reg.test(key)) {window.open(key)}else {navigate(key)}}return (<MenuclassName="ra__menus"mode={mode}theme={theme}selectedKeys={[pathname]}openKeys={openKeys}levelIndent={28}style={{ ...style }}onClickMenuItem={handleNavigate}onClickSubMenu={(_, openKeys) => {setOpenKeys(openKeys)}}>{ menuRoutes.map(item => {if(item?.children) {return RouteSubMenu(item, t)}return (!item?.meta?.isHidden &&<Menu.Item className="ra__menuItem" key={item.redirect || item.key}>{ item?.meta?.icon && <Icon name={item.meta.icon} size={18} style={{marginRight: 10}} /> }{ item?.meta?.name && <span>{t[item.meta.name]}</span> }</Menu.Item>)})}</Menu>)
}

Zustand:基于react新状态管理库

在这里插入图片描述

/*** react18状态管理库Zustand4,中间件persist本地持久化存储
*/
import { create } from 'zustand'
import { persist, createJSONStorage } from 'zustand/middleware'
import { generate, getRgbStr } from '@arco-design/color'export const appStore = create(persist((set, get) => ({// 语言(中文zh-CN 英文en 繁体字zh-TW)lang: 'zh-CN',// 角色类型 roles: ['admin'] / roles: ['admin', 'dev'] / roles: ['dev', test']roles: ["dev"],// 配置信息config: {// 布局(分栏columns 纵向vertical 横向transverse)layout: 'columns',// 模式(亮色light - 暗黑dark)mode: 'light',// 主题色theme: '#3491FA',// 是否折叠菜单collapsed: false,// 开启面包屑导航breadcrumb: true,// 开启标签栏tabsview: true,tabRoutes: [],// 显示搜索showSearch: true,// 显示全屏showFullscreen: true,// 显示语言showLang: true,// 显示公告showNotice: true,// 显示底部showFooter: false},// 更新配置updateConfig: (key, value) => set({config: { ...get().config, [key]: value }}),// 设置角色setRoles: (roles) => set({roles}),// 设置多语言setLang: (lang) => set({lang}),// 设置主题模式setMode: (mode) => {if(mode == 'dark') {// 设置为暗黑主题document.body.setAttribute('arco-theme', 'dark')}else {// 恢复亮色主题document.body.removeAttribute('arco-theme')}get().updateConfig('mode', mode)},// 设置主题样式setTheme: (theme) => {const colors = generate(theme, { list: true })colors.map((item, index) => {const rgbStr = getRgbStr(item)document.body.style.setProperty(`--arcoblue-${index + 1}`, rgbStr)})get().updateConfig('theme', theme)}}),{name: 'appState',// name: 'app-store', // name of the item in the storage (must be unique)// storage: createJSONStorage(() => sessionStorage), // by default, 'localStorage'})
)

react多语言配置i18n

在这里插入图片描述

在这里插入图片描述

/*** 国际化配置* @author YXY*/import { appStore } from '@/store/app'// 引入语言配置
import enUS from './en-US'
import zhCN from './zh-CN'
import zhTW from './zh-TW'export const locales = {'en': enUS,'zh-CN': zhCN,'zh-TW': zhTW
}export default (locale) => {const appState = appStore()const lang = appState.lang || 'zh-CN'return (locale || locales)[lang] || {}
}

lang.jsx语言配置

import { Dropdown, Menu, Button } from '@arco-design/web-react'
import Icon from '@components/Icon'
import { appStore } from '@/store/app'export default function Lang() {const { lang, setLang } = appStore()const handleLang = val => {setLang(val)}return (<Dropdownposition="bottom"droplist={<Menu className="radmin__dropdownLang" defaultSelectedKeys={[lang]} onClickMenuItem={handleLang}><Menu.Item key='zh-CN'>简体中文 <span>zh-CN</span></Menu.Item><Menu.Item key="zh-TW">繁体字 <span>zh-TW</span></Menu.Item><Menu.Item key="en">英文 <span>en</span></Menu.Item></Menu>}><Buttonshape="circle"size="small"icon={<Icon name="ve-icon-lang" />}/></Dropdown>)
}

Tabs路由菜单栏

在这里插入图片描述

<TabsactiveTab={pathname}editableshowAddButton={false}onDeleteTab={key => delTabs(key)}
>{ tabRoutes.map(item => (<Tabs.TabPaneclosable={!item?.meta?.isAffix}key={item?.redirect || item?.key}title={<Dropdowntrigger='contextMenu'position='bl'droplist={<Menu className="ra__dropdownContext" onClickMenuItem={(key, e) => handleClickMenuItem(key, e, item)}><Menu.Item key="close" disabled={item?.meta?.isAffix}><Icon name="ve-icon-close" />{t['tabview__contextmenu-close']}</Menu.Item><Menu.Item key="closeLeft" disabled={isFirstTab()}><Icon name="ve-icon-prev" />{t['tabview__contextmenu-closeleft']}</Menu.Item><Menu.Item key="closeRight" disabled={isLastTab()}><Icon name="ve-icon-next" />{t['tabview__contextmenu-closeright']}</Menu.Item><Menu.Item key="closeOther"><Icon name="ve-icon-reset" />{t['tabview__contextmenu-closeother']}</Menu.Item><Menu.Item key="closeAll"><Icon name="ve-icon-close-circle-o" />{t['tabview__contextmenu-closeall']}</Menu.Item></Menu>}onVisibleChange={visible=>handleOpenContextMenu(visible, item)}><span className="ra__tabsview-title" onClick={() => navigate(item?.redirect || item?.key)}><TabIcon path={item?.key} />{ t[item?.meta?.name] }</span></Dropdown>}/>))}
</Tabs>

好了,以上就是react18+vite4+arco构建后台系统模板的一些分享了。

webchat-react基于react18+arco网页版聊天实例

electron-chatgpt基于electron25+vite4仿制ChatGPT模板

在这里插入图片描述

这篇关于基于react18+arco+zustand通用后台管理系统React18Admin的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/225750

相关文章

Vue3项目开发——新闻发布管理系统(六)

文章目录 八、首页设计开发1、页面设计2、登录访问拦截实现3、用户基本信息显示①封装用户基本信息获取接口②用户基本信息存储③用户基本信息调用④用户基本信息动态渲染 4、退出功能实现①注册点击事件②添加退出功能③数据清理 5、代码下载 八、首页设计开发 登录成功后,系统就进入了首页。接下来,也就进行首页的开发了。 1、页面设计 系统页面主要分为三部分,左侧为系统的菜单栏,右侧

工厂ERP管理系统实现源码(JAVA)

工厂进销存管理系统是一个集采购管理、仓库管理、生产管理和销售管理于一体的综合解决方案。该系统旨在帮助企业优化流程、提高效率、降低成本,并实时掌握各环节的运营状况。 在采购管理方面,系统能够处理采购订单、供应商管理和采购入库等流程,确保采购过程的透明和高效。仓库管理方面,实现库存的精准管理,包括入库、出库、盘点等操作,确保库存数据的准确性和实时性。 生产管理模块则涵盖了生产计划制定、物料需求计划、

STL经典案例(四)——实验室预约综合管理系统(项目涉及知识点很全面,内容有点多,耐心看完会有收获的!)

项目干货满满,内容有点过多,看起来可能会有点卡。系统提示读完超过俩小时,建议分多篇发布,我觉得分篇就不完整了,失去了这个项目的灵魂 一、需求分析 高校实验室预约管理系统包括三种不同身份:管理员、实验室教师、学生 管理员:给学生和实验室教师创建账号并分发 实验室教师:审核学生的预约申请 学生:申请使用实验室 高校实验室包括:超景深实验室(可容纳10人)、大数据实验室(可容纳20人)、物联网实验

使用Spring Boot集成Spring Data JPA和单例模式构建库存管理系统

引言 在企业级应用开发中,数据库操作是非常重要的一环。Spring Data JPA提供了一种简化的方式来进行数据库交互,它使得开发者无需编写复杂的JPA代码就可以完成常见的CRUD操作。此外,设计模式如单例模式可以帮助我们更好地管理和控制对象的创建过程,从而提高系统的性能和可维护性。本文将展示如何结合Spring Boot、Spring Data JPA以及单例模式来构建一个基本的库存管理系统

【干货分享】基于SSM的体育场管理系统的开题报告(附源码下载地址)

中秋送好礼 中秋佳节将至,祝福大家中秋快乐,阖家幸福。本期免费分享毕业设计作品:《基于SSM的体育场管理系统》。 基于SSM的体育场管理系统的开题报告 一、课题背景与意义 随着全民健身理念的深入人心,体育场已成为广大师生和社区居民进行体育锻炼的重要场所。然而,传统的体育场管理方式存在诸多问题,如资源分配不均、预约流程繁琐、数据统计不准确等,严重影响了体育场的使用效率和用户体验。

j2EE通用jar包的作用

原文:http://blog.sina.com.cn/s/blog_610901710101kx37.html IKIKAnalyzer3.2.8.jar // 分词器 ant-junit4.jar // ant junit antlr-2.7.6.jar // 没有此包,hibernate不会执行hql语句。并且会报NoClassDefFoundError: antlr

基于SSM+Vue+MySQL的可视化高校公寓管理系统

系统展示 管理员界面 宿管界面 学生界面 系统背景   当前社会各行业领域竞争压力非常大,随着当前时代的信息化,科学化发展,让社会各行业领域都争相使用新的信息技术,对行业内的各种相关数据进行科学化,规范化管理。这样的大环境让那些止步不前,不接受信息改革带来的信息技术的企业随时面临被淘汰,被取代的风险。所以当今,各个行业领域,不管是传统的教育行业

图书管理系统系统分享

分享一个图书管理系统,Java、SpringBoot、Vue和MySQL开发的图书馆管理系统 gitee项目地址:https://gitee.com/yuanmomoya/open-source-project/tree/master/books-management-system GitHub项目地址:https://github.com/yuanmomoya/open-source-pro

基于springboot+vue+uniapp的“共享书角”图书借还管理系统小程序

开发语言:Java框架:springboot+uniappJDK版本:JDK1.8服务器:tomcat7数据库:mysql 5.7(一定要5.7版本)数据库工具:Navicat11开发软件:eclipse/myeclipse/ideaMaven包:Maven3.3.9 系统展示 后台登录界面 管理员功能界面 出借者管理 图书信息管理 图书归还管理 出租收入管理

通用内存快照裁剪压缩库Tailor介绍及源码分析(一)

背景 我们知道内存快照是治理 OOM 问题及其他类型的内存问题的重要数据源,内存快照中保存了进程虚拟机的完整的堆内存数据,很多时候也是调查其他类型异常的重要参考。但是dump出来的堆转储文件.hprof往往很大,以 LargeHeap 应用为例,其 OOM 时的内存快照大小通常在512M左右,要有效的存储和获取都是一个问题。 线下拿到hprof文件相对容易,也可以预防OOM,但覆盖的场景十分有