ElectronReactAdmin跨平臺管理系統|electron27+react18後臺模板EXE

来源:https://www.cnblogs.com/xiaoyan2017/archive/2023/10/30/17797476.html
-Advertisement-
Play Games

基於electron27+react18+arco電腦端後臺管理程式EXE實例ElectronRAdmin。 electron27-react18-admin 基於跨平臺技術Electron集成Vite.js構建桌面端React18後臺管理系統應用解決方案。支持dark/light主題、中英文/繁體 ...


基於electron27+react18+arco電腦端後臺管理程式EXE實例ElectronRAdmin。

electron27-react18-admin 基於跨平臺技術Electron集成Vite.js構建桌面端React18後臺管理系統應用解決方案。支持dark/light主題、中英文/繁體國際化、動態組件許可權驗證、內置三種佈局模板、tabs路由菜單標簽欄等功能。

electron-react-admin支持暗黑/亮色兩種主題切換模式。

使用技術

  • 開發工具：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

大家如果對electron+vite+react18搭建跨電腦端多視窗項目應用感興趣，可以去看看下麵這篇分享文章。

https://www.cnblogs.com/xiaoyan2017/p/17788495.html

項目結構

整個項目採用electron27整合vite.js搭建開發，遵循react18 hooks編碼語法。

主進程入口electron-main.js

/**
 * 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()
})

electron預載入配置

/**
 * Electron預載入腳本
 * @author Hs  Q：282310962
 */

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.jsx入口文件

/**
 * 入口文件
 * @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 />)
})

國際化 + 主題dark/light配置

在App.jsx中配置全局多語言/主題。

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多語言模板

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全局持久化存儲。

/**
 * 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'
        }
    )
)

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

// 引入語言配置
import enUS from './en-US'
import zhCN from './zh-CN'
import zhTW from './zh-TW'

export const locales = {
    'en': enUS,
    'zh-CN': zhCN,
    'zh-TW': zhTW
}

export default (locale) => {
    const appState = appStore()
    const lang = appState.lang || 'zh-CN'

    return (locale || locales)[lang] || {}
}

Okay，以上就是electron+react18+zustand開發電腦端後臺管理EXE程式的一些分享。

附上最近開發的兩個實例項目

https://www.cnblogs.com/xiaoyan2017/p/17468074.html

https://www.cnblogs.com/xiaoyan2017/p/17695193.html

 

本文為博主原創文章，未經博主允許不得轉載，歡迎大家一起交流 QQ（282310962） wx（xy190310）
您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 查看調整cpu頻率及模式
    Tabby是一個開源免費軟體，支持Windows、macOS和Linux系統。它提供了一個高度可定製的終端界面，可以通過多種方式添加、切換和關閉終端標簽頁。能與 Linux 伺服器輕鬆傳輸文件，支持多種主題，界面炫酷，插件豐富。它還支持通過插件擴展其功能，例如增強的滾動條、批量複製和粘貼等功能。 ...
  • 讀圖資料庫實戰筆記04_路徑與圖變異
    1. Groovy 1.1. Java編程語言的一個超集 1.2. Gremlin Console的一個特性是能和Groovy配合使用 1.2.1. Gremlin Console會自動地迭代結果 1.3. 從技術上說，Gremlin Console就是Groovy互動式解釋器（read-eval- ...
  • [20231026]bbed查看索引kd_off結構的問題.txt
    抄襲轉載的太多，請認準原文鏈接：xtrabackup 的介紹與使用 前言 在網上找到教程都是複製粘貼抄襲的，而且還是陳舊資料，不得不說，當前中文互聯網環境真是每況愈下。 如果你在網上找 xtrabackup 的教程，大概率會為你介紹 innobackupex。但在最新的 2.4 版本中，innoba ...
  • 京東科技埋點數據治理和平臺建設實踐
    本文核心內容聚焦為什麼要埋點治理、埋點治理的方法論和實踐、奇點一站式埋點管理平臺的建設和創新功能。讀者可以從全局角度深入瞭解埋點、埋點治理的整體思路和實踐方法，落地的埋點工具和創新功能都有較高的實用參考價值。 ...
  • 火山引擎 ByteHouse：只需 2 個方法，增強 ClickHouse 數據導入能力
    本篇文章來源於 ByteHouse 產品專家在火山引擎數智平臺（VeDI）主辦的“數智化轉型背景下的火山引擎大數據技術揭秘”線下 Meeup 的演講，將從 ByteHouse 資料庫架構演進、增強 HaKafka 引擎實現方案、增強 Materialzed MySQL 實現方案、案例實踐和未來展望四... ...
  • HTML5前端標簽練習
    前端標簽 標簽的分類 1. 單標簽 img br hr <img /> 2. 雙標簽 a h p div <a></a> 3. 按照標簽屬性分類 1. 塊兒標簽 # 自己獨自占一行 h1-h6 p div 2. 行內(內聯)標簽 # 自身文本有多大就占多大 a span u i b s div標簽和 ...
  • 記錄--這個前端Api管理方案會更好？
    這裡給大家分享我在網上總結出來的一些知識，希望對大家有所幫助 簡介 大家好，前端小白一枚，目前接觸後臺管理系統比較多，經常遇到不同對象的增刪改查的介面，如何對Api進行一個有比較好的管理是個問題。在學習偏函數的時候有了靈感，想到一個不錯的API管理方案，並應用在項目一個模塊當中，並且開發效率和維護性 ...
  • JavaScript數據類型的轉換
    一、字元串類型的轉換 1、自動轉換 <script> var str = 'hello'; var num = 100; console.log(str+num); console.log(typeof (str+num)); </script> 2、強制轉換 String（），object.toS ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發（一）：使用.NET MAUI開發第一個安卓APP
    移動開發（一）：使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說，近來想嘗試開發一款安卓APP，考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP，畢竟是使用Visual Studio開發工具，使用起來也比較的順手，結合微軟官方的教程進行了安卓 ...
  • wpf ToggleButton選中效果和一個登錄界面
    前言 QuestPDF 是一個開源 .NET 庫，用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫，它徹底改變了我們生成 PDF 文檔的方 ...
  • 彈幕樹洞項目功能新增篇
    項目地址 項目後端地址： https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址： ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址： http://tree ...
  • 第27篇 sqlserver2022詳細安裝步驟
    話不多說，直接開乾 一.下載 1.官方鏈接下載： https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe，運行開始下載SQL server； 二. ...
  • .NET 開源高性能 MQTT 類庫
    前言 隨著物聯網（IoT）技術的迅猛發展，MQTT（消息隊列遙測傳輸）協議憑藉其輕量級和高效性，已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫，為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog文檔翻譯系列（六） - 可用的接收器、增強器、格式化輸出
    Serilog支持多種接收器用於日誌存儲，增強器用於添加屬性，LogContext管理動態屬性，支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項，適用於不同需求。 ...
  • 警惕 Visual Studio 屬性求值副作用導致邏輯不符合預期
    目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據，爬取信息時需要模擬瀏覽器行為，否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下： 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • [使用目前最新版]HybridCLR6.9.0+YooAsset2.2.4實現純C# Unity熱更新方案 (一)
    1.前言 什麼是熱更新 游戲或者軟體更新時，無需重新下載客戶端進行安裝，而是在應用程式啟動的情況下，在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR，Xlua，ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles，Addressable， ...
  • 在 ASP.NET Core Web API 中使用操作篩選器統一處理通用操作
    本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺，其實像阿裡雲，騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後，它會送 ...
  • 第28篇 如何.net中實現高效可靠數據同步api
    通過以下方式可以高效，並保證數據同步的可靠性 1.API設計 使用RESTful設計，確保API端點明確，並使用適當的HTTP方法（如POST用於創建，PUT用於更新）。 設計清晰的請求和響應模型，以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類