Минималистичные необычные крючки реагирования +arcoDesign+шаблон управления серверной частью vite

Недавно я сделал vite4 для создания серверного шаблона реакции18, который оснащен Arco Design, библиотекой компонентов реагирования команды byte, и в целом компиляция и работа плавно связаны между собой. Поддерживает несколько макетов шаблонов, темный/светлый режим, интернационализацию, проверку разрешений, многоуровневое меню маршрутизации, контекстное меню панели меток просмотра вкладок, полноэкранное управление и другие функции .

Используйте технологии

"@arco-design/web-react": "^2.53.1",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-router-dom": "^6.16.0",
"sass": "^1.67.0",
"zustand": "^4.4.1"
"vite": "^4.4.5"

Arco.Design, превосходная библиотека компонентов корпоративного уровня для ПК, запущенная фронтенд-командой ByteDance .

характеристика

1. Новейший стек интерфейсных технологий
2. Поддержка китайских/английских/традиционных многоязычных решений
3. Поддержка аутентификации и проверки динамической маршрутизации
4. Поддержка вкладок маршрутизации. Просмотр управления переключением страницы маршрутизации.
5. Встроенные несколько стилей макета шаблона.
6. В сочетании с библиотекой компонентов Light React arco-design.

Структура каталогов проекта

Используйте инструмент сборки vite4 для создания проектов реакции18, следуя модели разработки перехватчиков реакции18.

/**
 * 入口模板
 * @author Hs  Q: 282310962
*/

import {
    
     useEffect } 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 }, setTheme } = appStore()

    const getLocale = () => {
    
    
        switch(lang) {
    
    
            case 'en':
                return enUS
            case 'zh-CN':
                return zhCN
            case 'zh-TW':
                return zhTW
            default:
                return zhCN
        }
    }

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

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

export default App

Предусмотрено три шаблона макета: столбец + вертикаль + горизонталь.

/**
 * 主布局模板
 * @author Hs
*/

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

Вкратце, это некоторые из ультра-упрощенных версий бэкэнда, разработанных act18 vite4 arco. Надеюсь, вам понравится.