Electron41-ReactAdmin桌面版管理系统|react19+electron+antd后台模板

原创自研electron41+react19.2+zustand5客户端中后台管理系统ElectronAdmin。

react19-electron41-admin基于electron41+react19+ant-design+echarts+mockjs从0-1手搓桌面端通用后台管理Exe系统。内置3种常用布局模板，支持暗黑+亮色主题，多语言/面包屑导航/tab页签，实现图表/表格/表单/列表/编辑器/错误页等常用功能。

未标题-1

image

技术栈

  • 编辑器：Vscode
  • 跨平台框架：Electron^41.1.0
  • 技术框架：react^19.2.8+react-router-dom^7.18.2
  • 前端构建工具：vite^8.2.2
  • 组件库：antd^6.6.3
  • 状态管理：zustand^5.0.15
  • 图表组件：echarts^6.1.0
  • 数据模拟：axios^1.20.0+mockjs^1.1.0
  • 打包工具：electron-builder^26.15.3
  • 样式管理：sass^1.104.0

p2

p5

项目特征

  1. 基于最新跨平台技术栈Electron41、React19、Vite8、Zustand5、AntDesign、Echarts
  2. 支持浅色+深色主题界面
  3. 支持中英文/繁体三种国际化语言
  4. 支持动态路由、面包屑导航、tab标签栏路由
  5. 提供3种通用布局模板、随意变换布局风格
  6. 整合常用的图表、表格、表单、列表、编辑器、错误处理等业务模块
  7. electron41+react封装多开窗口管理

p4

360截图20260909080709301

360截图20260909080709315

360截图20260909080709312

项目框架目录

electron-reactadmin使用最新跨平台框架 Electron41+React19 创建项目框架模板。

360截图20260909073542007

360截图20260909073542010

Electron41-ReactAdmin桌面版后台系统已经更新到我的原创作品铺，欢迎下载使用~

Electron41+React19+AntDesign桌面版后台管理系统

p1-1

image

360截图20260909073742122

360截图20260909074427741

360截图20260909074427743

360截图20260909074705093

360截图20260909074857862

项目入口文件main.jsx

import { createRoot } from 'react-dom/client'
import './style.scss'
import App from './App.jsx'

import { launchApp } from '@/windows/actions'

launchApp().then(config => {
  if(config) {
    // 全局存储窗口配置
    window.config = config
  }

  createRoot(document.getElementById('root')).render(
    <App />
  )
})

App.jsx主模板

import { useMemo } from 'react'
import { HashRouter } from 'react-router-dom'
import { ConfigProvider, theme, App as AntApp } from 'antd'

// 引入组件语言
import enUS from 'antd/locale/en_US'
import zhCN from 'antd/locale/zh_CN'
import zhTW from 'antd/locale/zh_TW'

// antd组件默认文案是英文，修改为中文
import dayjs from 'dayjs'
import 'dayjs/locale/zh-cn'
dayjs.locale('zh-cn')

import { ipcLoaded } from '@/windows/actions'
import { appStore } from '@/store/app'

// 引入路由配置
import Router, { AuthRouter } from './router'

function App() {
  ipcLoaded()
  const { lang, config: { isDark, themeColor } } = appStore()

  const locale = useMemo(() => {
    switch(lang) {
      case 'en':
        return enUS
      case 'zh-CN':
        return zhCN
      case 'zh-TW':
        return zhTW
      default:
        return zhCN
    }
  }, [lang])
  
  return (
    <ConfigProvider
      // 国际化
      locale={locale}
      // 主题
      theme={{
        token: {
          colorPrimary: themeColor || '#1677ff',
          fontFamily: "Inter, system-ui, Avenir, Helvetica, Arial, sans-serif",
        },
        algorithm: isDark ? theme.darkAlgorithm : theme.defaultAlgorithm
      }}
    >
      <AntApp>
        <HashRouter>
          <AuthRouter>
            <Router />
          </AuthRouter>
        </HashRouter>
      </AntApp>
    </ConfigProvider>
  )
}

p6

electron-react-admin通用布局结构

内置3种常用布局模板，可以在这个基础上自己扩展模板。

image

image

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

import { useMemo } from 'react'
import clsx from 'clsx'
import { appStore } from '@/store/app'

// 引入布局模板
import Columns from './template/columns'
import Vertical from './template/vertical'
import Transverse from './template/transverse'

function MainLayout() {
  const { config: { skin, layout, fullContent } } = 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={clsx('radmin__container', { 'is-full': fullContent })}>
      <LayoutComponent />
    </div>
  )
}

export default MainLayout

分栏模板示例

import './index.scss'
import { Layout } from 'antd'

import { appStore } from '@/store/app'
import Rscroll from '@/components/Rscroll'

// 引入公共组件
import Header from '@/layouts/components/Header'
import Main from '@/layouts/components/Main'
import Sidebar from '@/layouts/components/Sidebar'
import RouteMenu from '@/layouts/components/Menu'
import Breadcrumb from '@/layouts/components/Breadcrumb'
import Tabs from '@/layouts/components/Tabs'
import Footer from '@/layouts/components/Footer'

function Columns() {
  const { config: { collapsed, breadcrumb, tabsview } } = appStore()

  return (
    <div className="radmin__layout flexbox flex-col">
      {/* 顶部栏 */}
      <Header />

      <div className="radmin__layout-body flex1 flexbox">
        {/* 侧边栏 */}
        <Sidebar />

        {/* 菜单栏 */}
        <div className="radmin__layout-menus">
          <Layout.Sider
            collapsed={collapsed}
            collapsible
            trigger={null}
            width={230}
            collapsedWidth={0}
            theme='light'
            style={{height: '100%'}}
          >
            <Rscroll className="flex1" autohide size={5} gap={1}>
              <RouteMenu />
            </Rscroll>
          </Layout.Sider>
        </div>

        {/* 右侧主内容区 */}
        <div className="radmin__layout-main flex1 flexbox flex-col">
          {/* 面包屑导航 */}
          {breadcrumb && <Breadcrumb />}

          {/* 标签栏 */}
          {tabsview && <Tabs />}

          {/* 主内容区 */}
          <Main />

          {/* 底部 */}
          <Footer />
        </div>
      </div>
    </div>
  )
}

360截图20260909080709282

360截图20260909080709302

360截图20260909080709312

360截图20260909080709315

360截图20260909081942072

360截图20260909081942073

360截图20260909082007755

360截图20260909082017416

360截图20260909082226821

360截图20260909082226824

360截图20260909082302788

360截图20260909082449875

360截图20260909082533422

360截图20260909082533423

360截图20260909082533425

360截图20260909082634561

360截图20260909082708791

360截图20260909082743064

360截图20260909082817992

360截图20260909082833758

360截图20260909082859078

360截图20260909082914677

360截图20260909083010608

electron41+react自定义无边框拖拽窗口

image

image

image

image

image

image

function Winbtns(props) {
  const {
    color,
    // 窗口是否可以最小化
    minimizable = true,
    // 窗口是否可以最大化
    maximizable = true,
    // 窗口是否可关闭
    closable = true,
    // 设置层叠
    zIndex = 2026,
    style,
    ...rest
  } = props
  
  const { modal } = App.useApp()

  const authState = authStore()

  const [hasMaximized, setHasMaximized] = useState(false)
  const [isResizable, setIsResizable] = useState(true)
  const [isMaximizable, setIsMaximizable] = useState(true)

  useEffect(() => {
    // 用户是否可以手动调整窗口大小
    window.electron.invoke('win-isResizable').then(res => {
      setIsResizable(res)
    })

    // 窗口是否可以最大化
    window.electron.invoke('win-isMaximizable').then(res => {
      setIsMaximizable(res)
    })

    // 初始窗口是否最大化
    window.electron.invoke('win-isMaximized').then(res => {
      setHasMaximized(res)
    })

    // 实时监听窗口是否最大化
    window.electron.on('win-maximized', (e, data) => {
      setHasMaximized(data)
    })
  }, [])

  // 最小化
  const handleWinMin = () => {
    window.electron.invoke('win-min')
  }
  // 最大化/还原
  const handleWinMax2Min = () => {
    window.electron.invoke('win-toggle').then(res => {
      setHasMaximized(res)
    })
  }
  // 关闭
  const handleWinClose = () => {
    if(window.config.isMajor) {
      const m = modal.confirm({
        title: '提示',
        content: '是否最小化到托盘，不退出程序系统?',
        width: 320,
        mask: {closable: true},
        centered: true,
        zIndex: 2026,
        styles: {
          container: {
            // borderRadius: 12,
          },
          body: {
            padding: '5px 0 40px'
          }
        },
        footer: (
          <div style={{textAlign: 'right'}}>
            <Button color='default' variant='filled' shape='round' onClick={() => {
              m.destroy()
              setTimeout(() => {
                winSet('hide', window.config.id)
              }, 300)
            }}>最小化至托盘</Button>
            <Button type='primary' danger shape='round' style={{marginLeft: 10}} onClick={() => {
              authState.logout()
              winSet('close')
            }}>退出</Button>
          </div>
        )
      })
    } else {
      winSet('close', window.config.id)
    }
  }

  return (
    <>
      <div {...rest} className="ra__winbtns flexbox flex-alignc" style={{ zIndex: zIndex, ...style }}>
        <div className="ra__winbtns-actions flexbox flex-alignc ra__nodrag" style={{ color: color }}>
          {isTrue(minimizable) && <a className="wbtn min" title="最小化" onClick={handleWinMin}><i className="wicon iconfont elec-icon-min"></i></a>}
          {(isTrue(maximizable) && isResizable && isMaximizable) &&
            <a className="wbtn max" title={hasMaximized ? '向下还原' : '最大化'} onClick={handleWinMax2Min}>
              {hasMaximized ? <i className="wicon iconfont elec-icon-restore"></i> : <i className="wicon iconfont elec-icon-max"></i>}
            </a>
          }
          {isTrue(closable) && <a className="wbtn close" title="关闭" onClick={handleWinClose}><i className="wicon iconfont elec-icon-quit"></i></a>}
        </div>
      </div>
    </>
  )
}

electron41+react多页签tab路由菜单

image

image

return (
  <div className="ra__tabsview">
    <Tabs
      activeKey={activeTab}
      items={tabsItems}
      size='small'
      classNames={{popup: 'ra__tabsview-popup'}}
      styles={{
        header: { margin: '0 15px' },
        content: { padding: 0 }
      }}
      // 右侧额外元素
      tabBarExtraContent={
        <div className='flexbox' style={{gap: 5}}>
          <Button color='default' variant='filled' shape='circle' size='small' onClick={() => updateConfig('fullContent', !fullContent)} />
        </div>
      }
    />
  </div>
)

面包屑导航菜单

image

import './index.scss'
import { useLocation, NavLink, matchRoutes } from 'react-router-dom'
import { Button, Breadcrumb } from 'antd'
import { MenuFoldOutlined, MenuUnfoldOutlined } from '@ant-design/icons'

import { appStore } from '@/store/app'
import { routes } from '@/router'
import Locales from '@/locales'

export default function Breadcrumbs(props) {
  const {
    // 是否显示展开/收缩
    collapseEnable = true,
  } = props

  const { pathname } = useLocation()
  const { config: { collapsed }, updateConfig } = appStore()
  const t = Locales()
  const filterRoutes = routes.filter(item => !item?.meta?.isWhite)

  // 获取匹配路由
  const matched = matchRoutes(filterRoutes, pathname)

  const breadcrumbItems = matched.map((item) => {
    return {
      title: item?.route?.key ? <NavLink to={item?.route?.redirect}>{t[item?.route?.meta?.name]}</NavLink> : t[item?.route?.meta?.name]
    }
  })

  const handleCollapse = () => {
    updateConfig('collapsed', !collapsed)
  }

  return (
    <div className="ra__breadcrumb">
      {
        collapseEnable &&
        <Button color='default' variant='text' shape='circle' size='small' onClick={handleCollapse}>
          {collapsed ? <MenuUnfoldOutlined /> : <MenuFoldOutlined />}
        </Button>
      }
      <Breadcrumb items={breadcrumbItems} />
    </div>
  )
}

以上就是electron+react跨平台桌面端中后台admin管理系统的一些项目分享，感谢大家的阅读与支持！

更多精选原创实战项目模板👇

a88e58ebeaaf5f5a09a52686a388ed71_1289798-20251223105825806-389288273

React-WebOS网页版os系统|react19+zustand5+arco搭建web版os管理系统

React19+Electron聊天室|electron41跨平台仿QQ/微信客户端聊天软件

react19-webai网页版AI模板|DeepSeek-V4+React19+Arco智能ai系统

React19-Admin后台管理系统|vite8+react19+arco+zustand通用后台模板

最新版Flutter3.41+Dart3.11仿写抖音APP直播+短视频+聊天应用程序

Vite8-Vue3-Admin网页版后台模板|vue3.5+pinia3+echarts后台管理系统

uniapp+deepseek-v4-flash+vue3跨端流式ai应用模板【h5+小程序+app端】

Vite8+DeepSeek-V4网页版AI助手|vue3+arco本地web版ai流式问答系统

electron38-admin桌面端后台|Electron38+Vue3+ElementPlus管理系统

Electron38-Wechat电脑端聊天|vite7+electron38仿微信桌面端聊天系统

Electron38-Vue3OS客户端OS系统|vite7+electron38+arco桌面os后台管理

Tauri2-Vite7Admin客户端管理后台|tauri2.9+vue3+element-plus后台系统

Tauri2.9+Vue3桌面版OS系统|vite7+tauri2+arcoDesign电脑端os后台模板

6660eab74451d8f40642c32baeee7a85_1289798-20250823231653477-721094528

 

posted @ 2026-09-09 23:53  xiaoyan2017  阅读(13)  评论(0)    收藏  举报
友情链接： UP主小店B站