electron41+react19.3+arcoDesign仿macOS/windows桌面OS管理系统

原创跨平台Electron41+React19.3+Arco客户端os桌面系统ElectronReactOS。

react-electron-os基于最新跨平台框架electron41.1+vite8+react19.3+zustand5+arco-design手搓桌面端os管理系统解决方案。支持macOS+windows两种桌面风格，可拖拽栅格桌面菜单，自定义json配置桌面/dock菜单。

实现技术

• 编码工具：Vscode
• 跨平台框架：Electron41.1.0
• 前端技术框架：react^19.3.0+vite^8.3.0+react-router^7.18.4
• 组件库：@arco-design/web-react^2.66.16 (字节前端vue3组件库)
• 状态管理：zustand^5.0.15
• 拖拽插件：sortablejs^1.15.7
• 图表组件：echarts^6.1.0
• 模拟数据：axios^1.20.0+mockjs^1.1.0
• 打包构建：electron-builder^26.15.3
• electron+react插件：vite-plugin-electron^1.1.2

功能特性

1. 基于最新技术栈Electron41.1、Vite8.3、React19.3、Zustand5、ArcoDesign、Echarts
2. electron+react封装多窗口管理
3. 提供macOS+windows两种桌面风格
4. 支持json格式配置桌面菜单+Dock菜单
5. 自研可拖拽桌面栅格卡片布局
6. 支持自定义桌面背景皮肤、采用高斯模糊毛玻璃效果
7. 提供图表、表格、列表、表单、编辑器等常用页面模板
8. 支持主窗口或独立新窗口打开路由页面

项目目录结构

electron-react-os使用最新跨平台框架 Electron41.1+React19.3 搭建项目框架模板。

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

electron41+react19.3+arcoDesign桌面版OS管理系统

electron主线程配置

/**
 * electron主进程
 * @author andy
 */

import { app, BrowserWindow } from 'electron'

import { WindowManager } from '../src/windows/index.js'

// 忽略安全警告提示 Electron Security Warning (Insecure Content-Security-Policy)
process.env['ELECTRON_DISABLE_SECURITY_WARNINGS'] = true

const createWindow = () => {
  let win = new WindowManager()
  win.create({isMajor: true})
  // 系统托盘管理
  win.trayManager()
  // 监听ipcMain事件
  win.ipcManager()
}

app.whenReady().then(() => {
  createWindow()

  app.on('activate', () => {
    if(BrowserWindow.getAllWindows().length === 0) createWindow()
  })
})

app.on('window-all-closed', () => {
  if(process.platform !== 'darwin') app.quit()
})

项目入口配置main.jsx

import '@arco-design/web-react/es/_util/react-19-adapter'
import { createRoot } from 'react-dom/client'
import './style.scss'
import App from './App.jsx'
import '@arco-design/web-react/dist/css/arco.css'

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

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

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

项目主模板App.jsx

import { HashRouter } from 'react-router-dom'

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

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

function App() {
  ipcLoaded()
  
  return (
    <>
      <HashRouter>
        <AuthRouter>
          <Router />
        </AuthRouter>
      </HashRouter>
    </>
  )
}

electron-react-os桌面布局模板

提供macos和windows两种桌面风格。

/**
 * 桌面布局模板
 * @author andy
*/

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

// 引入布局模板
import Macos from './template/macos'
import Windows from './template/windows'

function Desktop() {
  const { config: { layout, skin } } = appStore()

  // 布局模板
  const DeskLayout = useMemo(() => {
    switch (layout) {
      case 'macos':
        return Macos
      case 'windows':
        return Windows
      default:
        return Macos
    }
  }, [layout])

  return (
    <div className='ra__container desktop flex-c' style={{'--themeSkin': skin}} onContextMenu={(e) => e.preventDefault()}>
      <DeskLayout />
    </div>
  )
}

/**
 * 桌面布局模板(macos风格)
*/

import './index.scss'

// 引入公共组件
import Toolbar from '@/layouts/components/Toolbar'
import Desk from './components/desk'
import Dock from './components/dock'

function Macos() {
  return (
    <div className="ra__layout flexbox flex-col">
      <div className='ra__layout-header'>
        <Toolbar />
      </div>

      <div className="ra__layout-body flex1 flexbox">
        <Desk />
      </div>
      
      <div className='ra__layout-footer'>
        <Dock />
      </div>
    </div>
  )
}

ok，以上就是electron41+react19.3实战桌面端os管理系统的一些项目分享，希望对大家有所帮助！

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

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后台模板