React-Admin后台管理模板|react18+arco+zustand后台解决方案

掩于岁月的美妞 發表於 2023-10-17 10:04:00

React-Admin后台管理模板|react18+arco+zustand后台解决方案

基于react18.x+vite4+arco-design自研中后台管理系统解决方案ReactAdmin。
react-vite-admin 基于vite4搭建react18.x后台管理项目。使用了react18 hooks+arco.design+zustand+bizcharts等技术实现权限管理模板框架。支持暗黑/亮色主题、i18n国际化、动态权限鉴定、3种布局模板、tab路由标签栏等功能。
<img src="https://img2023.cnblogs.com/blog/1289798/202310/1289798-20231017072301856-745073673.png">
React18Admin管理系统是首创自研的轻量级中后台框架，构建运行速度快，支持dark/light主题模式。
<img src="https://img2023.cnblogs.com/blog/1289798/202310/1289798-20231017072758983-1277186941.png">
<h3>技术栈</h3>
<ul>
<li>编辑器：Vscode</li>
<li>框架技术：react18+vite4+react-router+zustand+axios</li>
<li>组件库：arco-design (字节前端react组件库)</li>
<li>路由管理：react-router-dom^6.16.0</li>
<li>状态管理：zustand^4.4.1</li>
<li>模拟数据：mockjs^1.1.0</li>
<li>模拟请求：axios^1.5.1</li>
<li>图表库：bizcharts^4.1.22</li>
<li>编辑器组件：@wangeditor/editor-for-react^1.0.6</li>
<li>markdown编辑器：@uiw/react-md-editor^3.23.6</li>
<li>请求进度插件：nprogress^0.2.0</li>
</ul>
<img src="https://img2023.cnblogs.com/blog/1289798/202310/1289798-20231017074532601-470803765.gif">
react-admin采用字节出品的react桌面端组件库arco.design。
<img src="https://img2023.cnblogs.com/blog/1289798/202310/1289798-20231017074924970-272121440.png">
<h3>特性</h3>
<ol>
<li>基于vite4.x构建react18后台，轻/快/小</li>
<li>使用最新前端技术栈react18、zustand、bizcharts、react-router、axios</li>
<li>搭配清新react组件库arco.design</li>
<li>支持中英文/繁体国际化语言</li>
<li>支持动态路由权限验证</li>
<li>支持动态tabs标签栏控制</li>
<li>内置多种模板布局样式</li>
</ol>
<img src="https://img2023.cnblogs.com/blog/1289798/202310/1289798-20231017075854606-1002673853.gif">
<blockquote>
<h3>目前该react-admin后台管理模板，已经更新到我的原创作品集。</h3>
自研React18+ArcoDesign网页版后台管理admin系统
</blockquote>
<h3>项目结构目录</h3>
采用标准化的react目录结构，整个项目使用react18 function语法编码开发。
<img src="https://img2023.cnblogs.com/blog/1289798/202310/1289798-20231017081241955-2073966326.png">
<img src="https://img2023.cnblogs.com/blog/1289798/202310/1289798-20231017081356819-1165799555.gif">
<h3>构建预览图</h3>
<img src="https://img2023.cnblogs.com/blog/1289798/202310/1289798-20231017081454676-1367984894.gif">
<img src="https://img2023.cnblogs.com/blog/1289798/202310/1289798-20231017081821809-520372854.png">
<img src="https://img2023.cnblogs.com/blog/1289798/202310/1289798-20231017081553638-310822205.png">
<img src="https://img2023.cnblogs.com/blog/1289798/202310/1289798-20231017081609079-240870084.png">
<img src="https://img2023.cnblogs.com/blog/1289798/202310/1289798-20231017081844916-1369157975.png">
<img src="https://img2023.cnblogs.com/blog/1289798/202310/1289798-20231017081920444-1493595489.png">
<img src="https://img2023.cnblogs.com/blog/1289798/202310/1289798-20231017081951565-362686758.png">
<img src="https://img2023.cnblogs.com/blog/1289798/202310/1289798-20231017082014973-299907662.png">
<img src="https://img2023.cnblogs.com/blog/1289798/202310/1289798-20231017082033627-1125072999.png">
<img src="https://img2023.cnblogs.com/blog/1289798/202310/1289798-20231017082122223-113626874.png">
<img src="https://img2023.cnblogs.com/blog/1289798/202310/1289798-20231017082151929-429513539.png">
<img src="https://img2023.cnblogs.com/blog/1289798/202310/1289798-20231017082212471-1387548700.png">
<img src="https://img2023.cnblogs.com/blog/1289798/202310/1289798-20231017082233874-1211621189.png">
<img src="https://img2023.cnblogs.com/blog/1289798/202310/1289798-20231017082325791-480967834.png">
wangeditor-react图文编辑器使用的是wangeditor的react版本，支持dark/light主题。
<img src="https://img2023.cnblogs.com/blog/1289798/202310/1289798-20231017082347086-1540104961.png">
<img src="https://img2023.cnblogs.com/blog/1289798/202310/1289798-20231017082443063-546347954.png">
react-md-editor基于react的markdown编辑器，支持dark/light主题。
<img src="https://img2023.cnblogs.com/blog/1289798/202310/1289798-20231017082719297-602930521.png">
<img src="https://img2023.cnblogs.com/blog/1289798/202310/1289798-20231017082733597-1173436593.png">
<img src="https://img2023.cnblogs.com/blog/1289798/202310/1289798-20231017083051336-1415793202.png">
<img src="https://img2023.cnblogs.com/blog/1289798/202310/1289798-20231017083137096-1269808678.png">
<img src="https://img2023.cnblogs.com/blog/1289798/202310/1289798-20231017083206744-605408524.png">
<img src="https://img2023.cnblogs.com/blog/1289798/202310/1289798-20231017083224231-2133513997.png">
<img src="https://img2023.cnblogs.com/blog/1289798/202310/1289798-20231017083248150-1965682863.png">
<img src="https://img2023.cnblogs.com/blog/1289798/202310/1289798-20231017083311275-2012365437.png">
<img src="https://img2023.cnblogs.com/blog/1289798/202310/1289798-20231017083332417-2144562792.png">
react18-scrollbar项目中使用的虚拟滚动条基于react18自定义组件实现功能。
<img src="https://img2023.cnblogs.com/blog/1289798/202310/1289798-20231017084324952-159579079.png">
<div class="cnblogs_code">
<pre>// 引入滚动条组件
import RScroll from '@/components/rscroll'

<RScroll autohide maxHeight={100}>
包裹需要滚动的内容块。。。
</RScroll></pre>
</div>
<h3>React18-Admin布局模板</h3>
<img src="https://img2023.cnblogs.com/blog/1289798/202310/1289798-20231017084519942-581809280.png">
如上图：支持分栏+垂直+水平3种通用布局模板。也可以定制化模板样式。
<img src="https://img2023.cnblogs.com/blog/1289798/202310/1289798-20231017084804366-1526972436.png">
<div class="cnblogs_code">
<pre>/**
* 主布局模板
* @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 Columns
 case 'vertical':
 return Vertical
 case 'transverse':
 return Transverse
 default:
 return Columns
 }
}, )

return (
 <div className="radmin__container">
 <LayoutComponent />
 </div>
 )
}

export default Layout</pre>
</div>
主模板Main.jsx动态Permission鉴权验证。
<div class="cnblogs_code">
<pre>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 function Main() {
const route = useRoute()

return (
 <>
 <RScroll>
 <div className="ra__layout-main__wrapper">
 {/* 鉴权组件 */}
 <Permission
 roles={route?.meta?.roles}
 content={<Forbidden />}
 >
 <Outlet />
 </Permission>
 </div>
 </RScroll>
 </>
 )
}</pre>
</div>
<h3>react-router路由配置</h3>
<img src="https://img2023.cnblogs.com/blog/1289798/202310/1289798-20231017090936959-1596601401.png">
<div class="cnblogs_code">
<pre>/**
* @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.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</pre>
</div>
lazyload.jsx配置
<div class="cnblogs_code">
<pre>/**
* 延迟加载提示
*/

import { Suspense } from 'react'
import { Spin } from '@arco-design/web-react'
import NprogressLoading from './nprogress'

// 加载提示
const SpinLoading = () => {
return (
 <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 lazyload</pre>
</div>
NProgress.jsx配置
<div class="cnblogs_code">
<pre>/**
* 加载进度条NProgress
*/

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 />
 }
}</pre>
</div>
主路由main.jsx配置
<div class="cnblogs_code">
<pre>/**
* 主路由配置
* @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'
 }
 }
 ]
},

/*组件模块*/
{
 ...
},

/*用户管理模块*/
{
 ...
},

/*权限模块*/
{
 ...
},

/*错误模块*/
{
 ...
}
]</pre>
</div>
备注：路由菜单参数配置说明。
<div class="cnblogs_code">
<pre>/**
* @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标签栏不能关闭)
* */</pre>
</div>
<h3>react自定义路由菜单Menu</h3>
基于arco.design组件库提供的Menu组件封装三种不同的路由菜单。
<img src="https://img2023.cnblogs.com/blog/1289798/202310/1289798-20231017085724006-761176492.png">  <img src="https://img2023.cnblogs.com/blog/1289798/202310/1289798-20231017085837809-142280797.png">
<img src="https://img2023.cnblogs.com/blog/1289798/202310/1289798-20231017090103836-614971786.png">
<div class="cnblogs_code">
<pre><RouteMenu />

<RouteMenu rootRouteEnable />

<RouteMenu rootRouteEnable mode="horizontal" /></pre>
</div>
RouteMenu路由菜单模板
<div class="cnblogs_code">
<pre>/**
* 路由菜单模板
*/

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 = 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
}, )

useEffect(() => {
 setOpenKeys(getKeys(pathname))
}, )

// 获取选中菜单路由keys数组
const getKeys = (key) => {
 return findParentRoute(menuRoutes, key)?.map(item => item?.key)
}

const handleNavigate = (key) => {
 const reg = /[-a-zA-Z0-9]{0,62}(\.[-a-zA-Z0-9]{0,62})+\.?/
 if(reg.test(key)) {
 window.open(key)
 }else {
 navigate(key)
 }
}

return (
 <Menu
 className="ra__menus"
 mode={mode}
 theme={theme}
 selectedKeys={}
 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}</span> }
 </Menu.Item>
 )
 })}
 </Menu>
)
}</pre>
</div>
<h3>react18状态管理zustand</h3>
<img src="https://img2023.cnblogs.com/blog/1289798/202310/1289798-20231017093057983-1460989159.png">
Zustand新一代react状态管理工具，内置多种插件，支持persist本地存储服务。
<div class="cnblogs_code">
<pre>/**
* 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, : 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'
 }
)
)</pre>
</div>
<h3>react18国际化配置i18n</h3>
<img src="https://img2023.cnblogs.com/blog/1289798/202310/1289798-20231017093750196-2139331344.png">
<img src="https://img2023.cnblogs.com/blog/1289798/202310/1289798-20231017093850844-390073734.png">
<div class="cnblogs_code">
<pre>/**
* 国际化配置
* @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) || {}
}</pre>
</div>
App.jsx引入arco.design组件库语言包。
<div class="cnblogs_code">
<pre>/**
* 入口模板
* @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 enUS
 case 'zh-CN':
 return zhCN
 case 'zh-TW':
 return zhTW
 default:
 return zhCN
 }
}, )

useEffect(() => {
 setMode(mode)
 setTheme(theme)
}, [])

return (
 <ConfigProvider locale={locale}>
 <HashRouter>
 <AuthRouter>
 <Router />
 </AuthRouter>
 </HashRouter>
 </ConfigProvider>
 )
}

export default App</pre>
</div>
Lang.jsx配置
<div class="cnblogs_code">
<pre>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 (
 <Dropdown
 position="bottom"
 droplist={
 <Menu className="radmin__dropdownLang" defaultSelectedKeys={} 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>
 }
 >
 <Button
 shape="circle"
 size="small"
 icon={<Icon name="ve-icon-lang" />}
 />
 </Dropdown>
)
}</pre>
</div>
<h3>Tabs.jsx动态路由栏</h3>
<img src="https://img2023.cnblogs.com/blog/1289798/202310/1289798-20231017094809954-295333064.png">
项目中动态路由栏tabs采用arco.design组件库Tabs组件自定义实现功能。
<div class="cnblogs_code">
<pre><Tabs
activeTab={pathname}
editable
showAddButton={false}
onDeleteTab={key => delTabs(key)}
>
{ tabRoutes.map(item => (
 <Tabs.TabPane
 closable={!item?.meta?.isAffix}
 key={item?.redirect || item?.key}
 title={
 <Dropdown
 trigger='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 }
 </span>
 </Dropdown>
 }
 />
))}
</Tabs></pre>
</div>
<div class="cnblogs_code">
<pre>export default function TabsView() {
const { pathname } = useLocation()
const navigate = useNavigate()
const = useState()
const { config: { tabRoutes }, updateConfig } = appStore()
const route = useRoute()
const t = Locales()

useEffect(() => {
 addTabs()
}, )

// 添加
const addTabs = () => {
 const tabIndex = tabRoutes.findIndex(item => item?.key === pathname)
 let newTabs = tabRoutes
 if(tabIndex == -1) {
 newTabs.push(route)
 }
 newTabs.map(item => {
 item.isActive = false
 if(item?.key === pathname) {
 item.isActive = true
 }
 })
 updateConfig('tabRoutes', newTabs)
}

// 删除
const delTabs = (path) => {
 const tabIndex = tabRoutes.findIndex(item => item?.key === path)
 let newTabs = tabRoutes
 if(tabIndex > -1) {
 newTabs.splice(tabIndex, 1)
 updateConfig('tabRoutes', newTabs)
 updateTabs(newTabs)
 }
}

// 删除左侧标签
const delLeftTabs = (path) => {
 const tabIndex = tabRoutes.findIndex(item => item?.key === path)
 let newTabs = tabRoutes
 if(tabIndex > -1) {
 newTabs = newTabs.filter((item, i) => item?.meta?.isAffix || i >= tabIndex)
 updateConfig('tabRoutes', newTabs)
 updateTabs(newTabs)
 }
}

// 删除右侧标签
const delRightTabs = (path) => {
 const tabIndex = tabRoutes.findIndex(item => item?.key === path)
 let newTabs = tabRoutes
 if(tabIndex > -1) {
 newTabs = newTabs.filter((item, i) => item?.meta?.isAffix || i <= tabIndex)
 updateConfig('tabRoutes', newTabs)
 updateTabs(newTabs)
 }
}

// 删除其它
const delOtherTabs = (path) => {
 let newTabs = tabRoutes.filter(item => item?.meta?.isAffix || item?.key === path)
 updateConfig('tabRoutes', newTabs)
 updateTabs(newTabs)
}

// 删除所有
const delAllTabs = () => {
 let newTabs = tabRoutes.filter(item => item?.meta?.isAffix)
 updateConfig('tabRoutes', newTabs)
 updateTabs(newTabs)
}

// 更新跳转选项卡
const updateTabs = (tabs) => {
 const nextTab = tabs || tabs
 if(!nextTab) return
 navigate(nextTab?.redirect || nextTab?.key)
}

// 是否第一个标签
const isFirstTab = () => {
 return selectedTab?.key === tabRoutes?.key || selectedTab?.key === '/home'
}
// 是否最后一个标签
const isLastTab = () => {
 return selectedTab?.key === tabRoutes?.key
}

// 打开右键菜单
const handleOpenContextMenu = (visible, item) => {
 if(visible) {
 setSelectedTab(item)
 }
}

// 点击右键菜单项
const handleClickMenuItem = (key, e, item) => {
 e.stopPropagation()
 const path = item?.key
 switch(key) {
 case 'close':
 delTabs(path)
 break
 case 'closeLeft':
 delLeftTabs(path)
 break
 case 'closeRight':
 delRightTabs(path)
 break
 case 'closeOther':
 delOtherTabs(path)
 break
 case 'closeAll':
 delAllTabs()
 break
 }
}

return (
 ...
)
}</pre>
</div>
OK，以上就是react18+arco开发后台系统的一些分享，希望对大家有所帮助~ 💖
最后附上两个最新项目实例
https://www.cnblogs.com/xiaoyan2017/p/17630296.html
https://www.cnblogs.com/xiaoyan2017/p/17468074.html
<img src="https://img2023.cnblogs.com/blog/1289798/202310/1289798-20231017100003691-537573191.gif">
 

</div>
<div id="MySignature" role="contentinfo">
本文为博主原创文章，未经博主允许不得转载，欢迎大家一起交流 QQ（282310962） wx（xy190310） 
来源：https://www.cnblogs.com/xiaoyan2017/p/17769058.html

頁: [1]

琼殿技术论坛's Archiver

React-Admin后台管理模板|react18+arco+zustand后台解决方案