基于react18.x+vite4+arco-design自研中后台管理系统解决方案ReactAdmin。
react-vite-admin 基于vite4搭建react18.x后台管理项目。使用了react18 hooks+arco.design+zustand+bizcharts等技术实现权限管理模板框架。支持暗黑/亮色主题、i18n国际化、动态权限鉴定、3种布局模板、tab路由标签栏等功能。
React18Admin管理系统是首创自研的轻量级中后台框架，构建运行速度快，支持dark/light主题模式。
技术栈
编辑器：Vscode
组件库：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
react-admin采用字节出品的react桌面端组件库arco.design。
特性
项目结构目录
采用标准化的react目录结构，整个项目使用react18 function语法编码开发。
构建预览图
wangeditor-react图文编辑器使用的是wangeditor的react版本，支持dark/light主题。
react-md-editor基于react的markdown编辑器，支持dark/light主题。
react18-scrollbar项目中使用的虚拟滚动条基于react18自定义组件实现功能。
// 引入滚动条组件
import RScroll from '@/components/rscroll'<RScroll autohide maxHeight={100}>包裹需要滚动的内容块。。。</RScroll>React18-Admin布局模板
如上图：支持分栏+垂直+水平3种通用布局模板。也可以定制化模板样式。
/**
* 主布局模板
* @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' Verticalcase 'transverse' Transversedefault Columns
}
},[layout]) (<div classname="radmin__container">
<LayoutComponent />
</div> )
}
export default Layout主模板Main.jsx动态Permission鉴权验证。
import './index.scss'import { Outlet } from 'react-router-dom'import RScroll from '@/components/rscroll'import Permission from '@/components/Permission'import Forbidden from '@/views/error/forbidden'import { useRoute } from '@/hooks/useRoutes'export default Main() {
const route = useRoute() (<>
<RScroll>
<div classname="ra__layout-main__wrapper">{ 鉴权组件 }<Permission
roles={route?.meta?.roles}
content={<Forbidden />}
>
<Outlet />
</Permission>
</div>
</RScroll>
</> )
}react-router路由配置
* * @title react-router-dom v6路由配置管理 * @author andyimport { 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].).flat() useRoutes集中式路由配置export const routes = [ { path: '/',element: <Navigate to="/home" replace={true} />, meta: { isWhite: true 路由白名单 } },...patchRoutes, 404模块 path="*"不能省略 { path: '*'} } ] 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 = () => { (<Spin
tip='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 lazyloadNProgress.jsx配置
*
* 加载进度条NProgressimport { Component } from 'react'import NProgress from 'nprogress'import 'nprogress/nprogress.css' class NprogressLoading extends Component {
constructor(props) {
super(props)
NProgress.set(.4)
NProgress.start()
}
componentDidmount() {
NProgress.done()
}
render() {return <div /> }
}主路由main.jsx配置
*
* 主路由配置
* @author Hsimport { 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' [首页模块{
path: '/home' 用于Menu组件跳转路由地址element: <Layout />,1)"> meta: { icon: 've-icon-home',// 菜单图标icon: <IconHome />,name: 'layout__main-menu__home',1)"> i18n国际化标题title: '主页' 需要鉴权isHidden: false,1)"> 是否隐藏菜单isAffix: 固定tabview标签栏(不可关闭) },children: [
{
key: '/home'<span style="color: rgba(0,index: <span style="color: rgba(0,element: lazyload(lazy(() => import('@views/home'))),meta: {<span style="color: rgba(0,icon: <IconHome />,name: 'layout__main-menu__home-index' 工作台 {
path: 'dashboard'<span style="color: rgba(0,key: '/home/dashboard'<span style="color: rgba(0,element: lazyload(lazy(() => import('@views/home/dashboard' icon: 've-icon-computer',icon: <IconDashboard />,name: 'layout__main-menu__home-workplace'<span style="color: rgba(0,title: '工作台' 外部链接 {
path: 'https://react.dev/'<span style="color: rgba(0,key: 'https://react.dev/' icon: 've-icon-clip',icon: <IconLink />,name: 'layout__main-menu__home-apidocs'<span style="color: rgba(0,title: 'react.js官方文档'组件模块{
...
},1)">用户管理模块权限模块错误模块{
...
}
]备注：路由菜单参数配置说明。
* * @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标签栏不能关闭) * */
react自定义路由菜单Menu
基于arco.design组件库提供的Menu组件封装三种不同的路由菜单。
RouteMenu />RouteMenu rootRouteEnable rootRouteEnable mode="horizontal" />
RouteMenu路由菜单模板
/**
* 路由菜单模板
*/
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 = {}
} = props
const 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} ={{marginRight: 10}} /> }
{ item?.meta?.name && span>{t[item.meta.name]} }Menu.Item)
})}Menu)
}react18状态管理zustand
Zustand新一代react状态管理工具，内置多种插件，支持persist本地存储服务。
* * 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"],1)"> 配置信息 config: { 布局(分栏columns 纵向vertical 横向transverse)layout: 'columns' 模式(亮色light - 暗黑dark)mode: 'light' 主题色theme: '#3491FA' 是否折叠菜单collapsed: false 开启面包屑导航breadcrumb: 开启标签栏tabsview: 显示搜索showSearch: 显示全屏showFullscreen: 显示语言showLang: 显示公告showNotice: 显示底部showFooter: },1)"> 更新配置updateConfig: (key,value) => set({ config: { ...get().config,[key]: value } }),1)"> 设置角色setRoles: (roles) => set({roles}),1)"> 设置多语言setLang: (lang) => set({lang}),1)"> 设置主题模式setMode: (mode) => {if(mode == 'dark') { 设置为暗黑主题document.body.setattribute('arco-theme','dark') }else { 恢复亮色主题document.body.removeAttribute('arco-theme') } get().updateConfig('mode' 设置主题样式setTheme: (theme) => { const colors = generate(theme,{ list: }) colors.map((item,index) => { const rgbStr = getRgbStr(item) document.body.style.setProperty(`--arcoblue-${index + 1}`,rgbStr) }) get().updateConfig('theme'e) handleclickMenuItem(key,e,item)}>="close" disabled={item?.meta?.isAffix}><="ve-icon-close" />{t['tabview__contextmenu-close']}>="closeLeft"={isFirstTab()}="ve-icon-prev" />{t['tabview__contextmenu-closeleft']}="closeRight"={isLastTab()}="ve-icon-next" />{t['tabview__contextmenu-closeright']}="closeOther"="ve-icon-reset" />{t['tabview__contextmenu-closeother']}="closeAll"="ve-icon-close-circle-o" />{t['tabview__contextmenu-closeall']}>} onVisibleChange={visible=>handleOpenContextMenu(visible,item)} >span ="ra__tabsview-title" onClick={() = navigate(item?.redirect || item?.key)}>TabIcon path={item?.key} { t[item?.meta?.name] }} /> ))}Tabs>
export TabsView() {
const { pathname } = useLocation()
const navigate = useNavigate()
const [selectedTab,setSelectedTab] = useState()
const { config: { tabRoutes },updateConfig } = appStore()
const route = useRoute()
const t = Locales()
useEffect(() => {
addTabs()
},[pathname]) 添加const addTabs = () => {
const tabIndex = tabRoutes.findIndex(item => item?.key === pathname)
let newTabs = tabRoutesif(tabIndex == -1) {
newTabs.push(route)
}
newTabs.map(item => {
item.isactive = falseif(item?.key === pathname) {
item.isactive = }
})
updateConfig('tabRoutes'<span style="color: rgba(0,newTabs)
} 删除const delTabs = (path) => path)
let newTabs =if(tabIndex > -1) {
newTabs.splice(tabIndex,1)
updateConfig('tabRoutes'<span style="color: rgba(0,newTabs)
updatetabs(newTabs)
}
} 删除左侧标签const delLeftTabs = (path) =>) {
newTabs = newTabs.filter((item,i) => item?.meta?.isAffix || i >= tabIndex)
updateConfig('tabRoutes' 删除右侧标签const delRightTabs = (path) =><span style="color: rgba(0,i) => item?.meta?.isAffix || i <= 删除其它const delOtherTabs = (path) => {
let newTabs = tabRoutes.filter(item => item?.meta?.isAffix || item?.key === path)
updateConfig('tabRoutes' {
e.stopPropagation()
const path = item?.key(key) {case 'close':
delTabs(path)breakcase 'closeLeft':
delLeftTabs(path)case 'closeRight':
delRightTabs(path)case 'closeOther':
delOtherTabs(path)case 'closeAll':
delAllTabs()break}
} (
...
)
}OK，以上就是react18+arco开发后台系统的一些分享，希望对大家有所帮助~ 💖
最后附上两个最新项目实例
https://www.cnblogs.com/xiaoyan2017/p/17630296.html
https://www.cnblogs.com/xiaoyan2017/p/17468074.html
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件举报，一经查实，本站将立刻删除。
