Loading [MathJax]/jax/output/CommonHTML/config.js
首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >专栏 >Electron27ReactAdmin自研electron+react18电脑端后台管理解决方案

Electron27ReactAdmin自研electron+react18电脑端后台管理解决方案

原创
作者头像
andy2018
发布于 2023-10-30 09:15:42
发布于 2023-10-30 09:15:42
84322
代码可运行
举报
文章被收录于专栏:h5h5
运行总次数:2
代码可运行

基于跨平台技术Electron集成Vite.js构建桌面端React18后台管理系统应用ElectronRAdmin。支持dark/light主题、中英文/繁体国际化、动态组件权限验证、内置三种布局模板、tabs路由菜单标签栏等功能。

使用技术

  • 编程工具:vscode
  • 框架技术:electron27+vite^4.4.5+react18+zustand+react-router
  • UI组件库:arco-design (字节react轻量级UI组件库)
  • 样式处理:sass^1.69.5
  • 图表组件:bizcharts^4.1.23
  • MD编辑器组件:@uiw/react-md-editor
  • 本地存储管理:zustand^4.4.4
  • 打包管理:electron-builder

之前有分享一篇electron27+react18搭建多开窗口管理程序,感兴趣可以去看看。

electron27-vite4-react18 基于electron+react18创建多个窗口管理程序

项目结构图

electron-react-admin使用electron跨端技术整合vite.js构建工具搭建react18电脑端后台管理。

主进程配置

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
/**
 * Electron主进程入口
 * @author Hs
 */

const { app, BrowserWindow } = require('electron')

const Windows = require('./src/windows')

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

const createWindow = () => {
    let win = new Windows()
    win.createWin({ isMainWin: true })
}

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

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

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
/**
 * Electron预加载脚本
 * @author Hs
 */

const { contextBridge, ipcRenderer } = require('electron')

contextBridge.exposeInMainWorld('electronAPI', {
    // 通过 channel 向主进程发送异步消息。主进程使用 ipcMain.on() 监听 channel
    send: (channel, data) => {
        ipcRenderer.send(channel, data)
    },

    // 通过 channel 向主进程发送消息,并异步等待结果。主进程应该使用 ipcMain.handle() 监听 channel
    invoke: (channel, data) => {
        return new Promise(resolve => ipcRenderer.invoke(channel, data).then(res => resolve(res)).catch(e => console.log(e)))
    },

    // 监听 channel 事件
    receive: (channel, func) => {
        console.log("preload-receive called. args: ")
        ipcRenderer.on(channel, (event, ...args) => func(event, ...args))
    },

    // 一次性监听事件
    once: (channel, func) => {
        ipcRenderer.once(channel, (event, ...args) => func(event, ...args))
    }
})

渲染进程main.js

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
/**
 * 入口文件
 * @author Hs
*/

import ReactDOM from 'react-dom/client'
import App from './App.jsx'
import '@arco-design/web-react/dist/css/arco.css'
import './styles/common.scss'

import { launchWin } from '@/windows/action'

launchWin().then(config => {
    console.log('——+——+——窗口参数:', config)
    console.log('——+——+——窗口id:', config.id)

    // 设置全局存储窗口配置
    window.config = config

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

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
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 './router'

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

Lang.jsx模板配置

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
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>
    )
}

搭配zustand状态管理内置中间件persist本地存储。

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
/**
 * react状态管理库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'
        }
    )
)

OK,以上就是electron27+react18创建桌面端后台系统EXE实例的一些知识分享。

原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

如有侵权,请联系 cloudcommunity@tencent.com 删除。

原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

如有侵权,请联系 cloudcommunity@tencent.com 删除。

评论
登录后参与评论
2 条评论
热度
最新
大哥 你的这个项目git地址呢
大哥 你的这个项目git地址呢
回复回复点赞举报
Hi,您好呀,您近期内容创作表现突出,已入选腾讯云开发者社区内容共创官计划。内容共创官计划是腾讯云开发者社区面向社区重点潜力创作者打造的内容创作扶持机制,提供一系列技术创作教程、独家有奖创作激励、活动优先参会、社区流量曝光等资源。请您添加社区助理微信(微信号: yun _assistant)沟通加入计划。
Hi,您好呀,您近期内容创作表现突出,已入选腾讯云开发者社区内容共创官计划。内容共创官计划是腾讯云开发者社区面向社区重点潜力创作者打造的内容创作扶持机制,提供一系列技术创作教程、独家有奖创作激励、活动优先参会、社区流量曝光等资源。请您添加社区助理微信(微信号: yun _assistant)沟通加入计划。
回复回复点赞举报
推荐阅读
编辑精选文章
换一批
ReactAdminArco自创react18+arco后台前端项目框架管理系统
整个项目采用vite4构建工具创建,遵循标准的react18 hooks编码方式开发页面。
andy2018
2023/10/18
1.2K3
electron27+react18仿制桌面MacOS系统
react-electron-macos 一款基于Electron27+react18开发构建的桌面版os管理系统。
andy2018
2023/11/25
4082
基于tauri+vue3后台管理软件TauriAdmin
https://cloud.tencent.com/developer/article/2144479
andy2018
2023/07/16
1.2K0
React实战:使用Vite+TS+Antd构建React项目
由于我之前学过React框架,但是由于工作中没有使用它,所以我最近开始使用了Vite、TypeScript、React Router,Redux,Axios,Ant Design和SpringBoot等流行技术来搭建了一个博客项目来巩固我的学习成果。这个项目包括了博客文章列表、文章详情、标签分类、搜索功能等常用功能。通过这个项目,我将分享如何使用Vite、TypeScript、React Router和Ant Design来搭建一个博客项目,并不断分享我所遇到的问题,以及如何解决它。希望我的实战可以帮助您更好地了解React生态系统,并且能够帮助您更加高效地开发React应用程序。
Front_Yue
2024/01/03
3.7K0
React实战:使用Vite+TS+Antd构建React项目
electron31+vite5+elementPlus桌面端管理系统ElectronViteAdmin
经过半个月爆肝实战开发,原创新作electron31+vue3跨平台桌面权限管理系统正式完结啦~
andy2018
2024/08/19
4350
electron31+vite5+elementPlus桌面端管理系统ElectronViteAdmin
Vite4+Pinia2通用后台管理平台实战ViteAdmin
https://cloud.tencent.com/developer/article/2144479
andy2018
2023/04/15
2.2K2
整合vite2+electron12撸后台管理系统
前一段时间有给大家分享一个Electron+Vue3.x短视频,今天再分享最新开发的Electron桌面端后台系统。
andy2018
2021/05/18
2.1K0
整合vite2+electron12撸后台管理系统
基于react18+arco+vite4桌面版聊天react-webchat
react18-webchat 基于vite4.x+react18创建网页版聊天实战项目。
andy2018
2023/09/12
8432
tauri2.x-admin基于vue3+tauri2+pinia2客户端后台系统
最近比较热门的跨端框架当属于tauri2.0了。tauri v2有了很多新的功能升级,而且还支持创建android/ios应用。
andy2018
2024/10/15
5540
tauri2.x-admin基于vue3+tauri2+pinia2客户端后台系统
前端实战:electron+vue3+ts开发桌面端便签应用
具体实现过程, 内容很长, 建议先点赞收藏, 再一步步学习, 接下来会就该项目的每一个重点细节做详细的分析.
徐小夕
2021/09/03
3.7K0
前端实战:electron+vue3+ts开发桌面端便签应用
deepseek-electron基于Electron35+Vue3.5仿deepseek/豆包ai客户端助手
2025跨平台ai实战-Electron35+Vite6对接DeepSeek-V3聊天模型搭建客户端AI聊天助手。
andy2018
2025/04/19
2430
deepseek-electron基于Electron35+Vue3.5仿deepseek/豆包ai客户端助手
原创electron32+vue3+arco-design桌面端winOS系统Vue3ElectronOS
经过半个月高效输出,原创新作electron32.x+vite5仿ipad/wins桌面os管理系统项目完结了。
andy2018
2024/09/05
3100
原创electron32+vue3+arco-design桌面端winOS系统Vue3ElectronOS
electron+vue全家桶开发包含(心得,遇见的坑,解决办法等)
目前网上有好多关于electron相关的文章,但是本人在开发的时候发现,网上大部分文章可以说是千篇一律,没有真正的痛点解析啥的很无语 ,好多的问题都需要自己去找、去试,这无异于加大了开发成本与学习成本,所以本篇博客会从electron 的api 到 electron +vue 组合式开发到 打包 及开发过程中遇见的问题分门别类的进行说明, 当然在最后的文末我会将我写的 electron + vue全家桶的git开源项目附上,需要的话就去git 吧
全栈若城
2024/02/29
2.7K0
electron+vue全家桶开发包含(心得,遇见的坑,解决办法等)
Layout布局实现一个简单的react管理后台
今天下班之后把antd大致过了一遍,不得不说,还是挺好用的,前面对于react的知识点,该学习的也在慢慢的学习了,学完之后,打算做一个博客管理系统的后台。这里记录的就是大致的步骤。
王小婷
2019/11/27
2.9K1
快速学习Ant Design-布局
antd布局:https://ant.design/components/layout-cn/ 在后台系统页面布局中,往往是经典的三部分布局,像这样:
cwl_java
2020/02/14
3.4K0
当企微侧边栏遇上微前端
同样地,为了不浪费大家的时候,如果你不知道 企微侧边栏 是什么,这篇文章可以关掉了。
写代码的海怪
2022/03/30
1.4K0
当企微侧边栏遇上微前端
spring boot + Vue + iView前后端分离架构(Mac版) — (二)登录页面与国际化
打开项目hep-admin-web工程,在src目录下创建一个local的目录,再在local目录下创建lang的文件夹,此文件夹用于存放国际化文件,国际化文件包括三个en-US.js、zh-CN.js、zh-TW.js,文件内容分别如下:
全栈程序员站长
2022/07/01
6440
spring boot + Vue + iView前后端分离架构(Mac版) — (二)登录页面与国际化
基于React的SSG静态站点渲染方案
静态站点生成SSG - Static Site Generation是一种在构建时生成静态HTML等文件资源的方法,其可以完全不需要服务端的运行,通过预先生成静态文件,实现快速的内容加载和高度的安全性。由于其生成的是纯静态资源,便可以利用CDN等方案以更低的成本和更高的效率来构建和发布网站,在博客、知识库、API文档等场景有着广泛应用。
WindRunnerMax
2024/06/05
3250
Svelte3-Admin基于svelte-ui管理后台系统
前几天有给大家分享一个 svelte-ui 桌面pc组件库。今天再来分享一个基于svelte ui 开发的中后台管理前端解决方案。
andy2018
2022/09/18
2.6K1
nuxt + element-ui +vue+ nuxt-i18n国际化
4.添加中间件:lang.js,切换语言时,更改路由,同时更新store中语言类型
用户2323866
2021/06/24
1.9K0
推荐阅读
相关推荐
ReactAdminArco自创react18+arco后台前端项目框架管理系统
更多 >
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档
本文部分代码块支持一键运行,欢迎体验
本文部分代码块支持一键运行,欢迎体验