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

// 引入滚动条组件 import RScroll from '@/components/rscroll'  <RScroll autohide maxHeight={100}>     包裹需要滚动的内容块。。。 </RScroll>

/**  * 主布局模板  * @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         }     }, [layout])          return (         <div className="radmin__container">             <LayoutComponent />         </div>     ) }  export default Layout

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>         </>     ) }

/**  * @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

/**  * 延迟加载提示 */  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

/**  * 加载进度条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 />     } }

/**  * 主路由配置  * @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标签栏不能关闭)  * */

<RouteMenu />  <RouteMenu rootRouteEnable />  <RouteMenu rootRouteEnable mode="horizontal" />

/**  * 路由菜单模板 */  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 (         <Menu             className="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>     ) }

/**  * 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'         }     ) )

/**  * 国际化配置  * @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] || {} }

/**  * 入口模板  * @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         }     }, [lang])      useEffect(() => {         setMode(mode)         setTheme(theme)     }, [])      return (         <ConfigProvider locale={locale}>             <HashRouter>                 <AuthRouter>                     <Router />                 </AuthRouter>             </HashRouter>         </ConfigProvider>     ) }  export default App

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={[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>             }         >             <Button                 shape="circle"                 size="small"                 icon={<Icon name="ve-icon-lang" />}             />         </Dropdown>     ) }

<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[item?.meta?.name] }                     </span>                 </Dropdown>             }         />     ))} </Tabs>

export default function 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 = 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.length + 1] || tabs[tabs.length - 1]         if(!nextTab) return         navigate(nextTab?.redirect || nextTab?.key)     }      // 是否第一个标签     const isFirstTab = () => {         return selectedTab?.key === tabRoutes[0]?.key || selectedTab?.key === '/home'     }     // 是否最后一个标签     const isLastTab = () => {         return selectedTab?.key === tabRoutes[tabRoutes.length - 1]?.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 (         ...     ) }