深圳做网站最好,买手表去哪个网站买是正品的,做外贸没有网站需要什么条件,网站链接怎么做React-Arco-Admin轻量级后台管理系统解决方案 基于vite4构建react18后台项目ReactAdmin。使用了reactarco-designzustandbizcharts等技术架构非凡后台管理框架。支持 dark/light主题、i18n国际化、动态路由鉴权、3种经典布局、tabs路由标签 等功能。 技术框架
编辑器#xff…React-Arco-Admin轻量级后台管理系统解决方案 基于vite4构建react18后台项目ReactAdmin。使用了reactarco-designzustandbizcharts等技术架构非凡后台管理框架。支持 dark/light主题、i18n国际化、动态路由鉴权、3种经典布局、tabs路由标签 等功能。 技术框架
编辑器Vscode使用技术react18vite4react-routerzustandaxios组件库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.6markdown组件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-TWimport { AuthRouter } from /hooks/useRoutes
import { appStore } from /store/app// 引入路由配置
import Router from ./routersfunction 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}HashRouterAuthRouterRouter //AuthRouter/HashRouter/ConfigProvider)
}export default Appreact-admin通用布局模板 支持分栏垂直水平布局样式。 /*** 主布局模板* author Hs Q282310962
*/import { useMemo } from react
import { appStore } from /store/appimport Columns from ./template/columns
import Vertical from ./template/vertical
import Transverse from ./template/transversefunction 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 classNameradmin__containerLayoutComponent //div)
}export default Layoutreact-router-dom路由管理 /*** title react-router-dom v6路由配置管理* author andy
*/import { useRoutes, Navigate } from react-router-domimport 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 Routerlazyload.jsx懒加载
import { Suspense } from react
import { Spin } from arco-design/web-react
import NprogressLoading from ./nprogress// 加载提示
const SpinLoading () {return (Spintiploading...style{{width: 100%}}/)
}// 延迟加载
const lazyload LazyComponent {// React 16.6 新增了Suspense组件懒加载的模式需要我们给他加上一层 Loading的提示加载组件// return Suspense fallback{SpinLoading /}LazyComponent //Suspensereturn Suspense fallback{NprogressLoading /}LazyComponent //Suspense
}export default lazyloadnprogress.jsx加载进度条
import { Component } from react
import NProgress from nprogress
import nprogress/nprogress.cssexport 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 ../lazyloadexport 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 modehorizontal /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 /localesexport 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 (MenuclassNamera__menusmode{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 classNamera__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/colorexport 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-TWexport const locales {en: enUS,zh-CN: zhCN,zh-TW: zhTW
}export default (locale) {const appState appStore()const lang appState.lang || zh-CNreturn (locale || locales)[lang] || {}
}lang.jsx语言配置
import { Dropdown, Menu, Button } from arco-design/web-react
import Icon from components/Icon
import { appStore } from /store/appexport default function Lang() {const { lang, setLang } appStore()const handleLang val {setLang(val)}return (Dropdownpositionbottomdroplist{Menu classNameradmin__dropdownLang defaultSelectedKeys{[lang]} onClickMenuItem{handleLang}Menu.Item keyzh-CN简体中文 spanzh-CN/span/Menu.ItemMenu.Item keyzh-TW繁体字 spanzh-TW/span/Menu.ItemMenu.Item keyen英文 spanen/span/Menu.Item/Menu}Buttonshapecirclesizesmallicon{Icon nameve-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{DropdowntriggercontextMenupositionbldroplist{Menu classNamera__dropdownContext onClickMenuItem{(key, e) handleClickMenuItem(key, e, item)}Menu.Item keyclose disabled{item?.meta?.isAffix}Icon nameve-icon-close /{t[tabview__contextmenu-close]}/Menu.ItemMenu.Item keycloseLeft disabled{isFirstTab()}Icon nameve-icon-prev /{t[tabview__contextmenu-closeleft]}/Menu.ItemMenu.Item keycloseRight disabled{isLastTab()}Icon nameve-icon-next /{t[tabview__contextmenu-closeright]}/Menu.ItemMenu.Item keycloseOtherIcon nameve-icon-reset /{t[tabview__contextmenu-closeother]}/Menu.ItemMenu.Item keycloseAllIcon nameve-icon-close-circle-o /{t[tabview__contextmenu-closeall]}/Menu.Item/Menu}onVisibleChange{visiblehandleOpenContextMenu(visible, item)}span classNamera__tabsview-title onClick{() navigate(item?.redirect || item?.key)}TabIcon path{item?.key} /{ t[item?.meta?.name] }/span/Dropdown}/))}
/Tabs好了以上就是react18vite4arco构建后台系统模板的一些分享了。
webchat-react基于react18arco网页版聊天实例
electron-chatgpt基于electron25vite4仿制ChatGPT模板
