Electron-React-MacOs基于electron27+react18客户端os系统

基于electron27.x+vite4+react18+arcoDesign+zustand等技术构建电脑端仿MacOs框架系统解决方案。支持中英文/繁体、dark+light主题、桌面多层级路由、多窗口路由页面、动态换肤、Dock悬浮菜单等功能。

使用技术

  • 开发工具:vscode
  • 框架技术:vite4+react18+zustand+react-router
  • 跨端技术:electron^27.0.1
  • 打包工具:electron-builder^24.6.4
  • UI组件库:arco-design (字节react轻量级UI组件库)
  • 图表组件:bizcharts^4.1.23
  • 拖拽库:sortablejs
  • 模拟请求:axios

项目结构

Electron-React-MacOs基于electron27+react18客户端os系统|electron仿Macos

electron进程通讯

/**
 * Electron预加载脚本
 * @author Andy
 */

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

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

electron桌面布局

整个项目桌面分为顶部导航+桌面菜单+底部Dock菜单。

Electron-React-MacOs基于electron27+react18客户端os系统|electron仿Macos

<div className="radmin__layout flexbox flex-col">
    {/* 导航栏 */}
    <Header />

    {/* 桌面区域 */}
    <div className="ra__layout-desktop flex1 flexbox" onContextMenu={handleDeskCtxMenu} style={{marginBottom: 70}}>
        <DeskMenu />
    </div>

    {/* Dock菜单 */}
    <Dock />
</div>

Electron+react实现桌面Dock菜单

Electron-React-MacOs基于electron27+react18客户端os系统|electron仿Macos

Electron-React-MacOs基于electron27+react18客户端os系统|electron仿Macos

<div className="ra__docktool">
    <div className={clsx('ra__dock-wrap', !dock ? 'compact' : 'split')}>
        {dockMenu.map((res, key) => {
            return (
                <div key={key} className="ra__dock-group">
                    { res?.children?.map((item, index) => {
                        return (
                            <a key={index} className={clsx('ra__dock-item', {'active': item.active, 'filter': item.filter})} onClick={() => handleDockClick(item)}>
                                <span className="tooltips">{item.label}</span>
                                <div className="img">
                                    { item.type != 'icon' ? <img src={item.image} /> : <Icon name={item.image} size={32} style={{color: 'inherit'}} /> }
                                </div>
                            </a>
                        )
                    })}
                </div>
            )
        })}
    </div>
</div>
const dockMenu = [
    {
        // 图片图标
        children: [
            {label: 'Safari', image: '/static/mac/safari.png', active: true},
            {label: 'Launchpad', image: '/static/mac/launchpad.png'},
            {label: 'Contacts', image: '/static/mac/contacts.png'},
            {label: 'Messages', image: '/static/mac/messages.png', active: true}
        ]
    },
    {
        // 自定义iconfont图标
        children: [
            {label: 'Home', image: <IconDesktop />, type: 'icon'},
            {label: 'About', image: 've-icon-about', type: 'icon'}
        ]
    },
    {
        children: [
            {label: 'Appstore', image: '/static/mac/appstore.png'},
            {label: 'Mail', image: '/static/mac/mail.png'},
            {label: 'Maps', image: '/static/mac/maps.png', active: true},
            {label: 'Photos', image: '/static/mac/photos.png'},
            {label: 'Facetime', image: '/static/mac/facetime.png'},
            {label: 'Calendar', image: '/static/mac/calendar.png'},
            {label: 'Notes', image: '/static/mac/notes.png'},
            {label: 'Calculator', image: '/static/mac/calculator.png'},
            {label: 'Music', image: '/static/mac/music.png'}
        ]
    },
    {
        children: [
            {label: 'System', image: '/static/mac/system.png', active: true, filter: true},
            {label: 'Empty', image: '/static/mac/bin.png', filter: true}
        ]
    }
]

// 点击dock菜单
const handleDockClick = (item) => {
    const { label } = item
    if(label == 'Home') {
        createWin({
            title: '首页',
            route: '/home',
            width: 900,
            height: 600
        })
    }else if(label == 'About') {
        setWinData({ type: 'CREATE_WIN_ABOUT' })
    }else if(label == 'System') {
        createWin({
            title: '网站设置',
            route: '/setting/system/website',
            isNewWin: true,
            width: 900,
            height: 600
        })
    }
}

useEffect(() => {
    const dockGroup = document.getElementsByClassName('ra__dock-group')
    // 组拖拽
    for(let i = 0, len = dockGroup.length; i < len; i++) {
        Sortable.create(dockGroup[i], {
            group: 'share',
            handle: '.ra__dock-item',
            filter: '.filter',
            animation: 200,
            delay: 0,
            onEnd({ newIndex, oldIndex }) {
                console.log('新索引:', newIndex)
                console.log('旧索引:', oldIndex)
            }
        })
    }
}, [])

electron实现桌面多级菜单

Electron-React-MacOs基于electron27+react18客户端os系统|electron仿Macos

import { lazy } from 'react'
import {
    IconDesktop, IconDashboard, IconLink, IconCommand, IconUserGroup, IconLock,
    IconSafe, IconBug, IconUnorderedList, IconStop
} from '@arco-design/web-react/icon'
import Layout from '@/layouts'
import Desk from '@/layouts/desk'
import Blank from '@/layouts/blank'
import lazyload from '../lazyload'

export default [
    /* 桌面模块 */
    {
        path: '/desk',
        key: '/desk',
        element: <Desk />,
        meta: {
            icon: <IconDesktop />,
            name: 'layout__main-menu__desk',
            title: 'Appstore',
            isWhite: true, // 路由白名单
            isAuth: true, // 需要鉴权
            isHidden: false, // 是否隐藏菜单
        }
    },

    {
        path: '/home',
        key: '/home',
        element: <Layout>{lazyload(lazy(() => import('@views/home')))}</Layout>,
        meta: {
            icon: '/static/mac/appstore.png',
            name: 'layout__main-menu__home-index',
            title: '首页',
            isAuth: true,
            isNewWin: true
        }
    },
    {
        path: '/dashboard',
        key: '/dashboard',
        element: <Layout>{lazyload(lazy(() => import('@views/home/dashboard')))}</Layout>,
        meta: {
            icon: <IconDashboard />,
            name: 'layout__main-menu__home-workplace',
            title: '工作台',
            isAuth: true
        }
    },
    {
        path: 'https://react.dev/',
        key: 'https://react.dev/',
        meta: {
            icon: <IconLink />,
            name: 'layout__main-menu__home-apidocs',
            title: 'react.js官方文档',
            rootRoute: '/home'
        }
    },

    /* 组件模块 */
    {
        path: '/components',
        key: '/components',
        redirect: '/components/table/allTable', // 一级路由重定向
        element: <Blank />,
        meta: {
            icon: <IconCommand />,
            name: 'layout__main-menu__component',
            title: '组件示例',
            isAuth: true,
            isHidden: false
        },
        children: [
            {
                path: 'table',
                key: '/components/table',
                element: <Blank />,
                meta: {
                    icon: 've-icon-table',
                    name: 'layout__main-menu__component-table',
                    title: '表格',
                    isAuth: true
                },
                children: [
                    {
                        path: 'allTable',
                        key: '/components/table/allTable',
                        element: <Layout>{lazyload(lazy(() => import('@views/components/table/all')))}</Layout>,
                        meta: {
                            name: 'layout__main-menu__component-table_all',
                            title: '所有表格'
                        }
                    },
                    {
                        path: 'customTable',
                        key: '/components/table/customTable',
                        element: <Layout>{lazyload(lazy(() => import('@views/components/table/custom')))}</Layout>,
                        meta: {
                            name: 'layout__main-menu__component-table_custom',
                            title: '自定义表格'
                        }
                    },
                    {
                        path: 'search',
                        key: '/components/table/search',
                        element: <Blank />,
                        meta: {
                            name: 'layout__main-menu__component-table_search',
                            title: '搜索'
                        },
                        children: [
                            {
                                path: 'searchList',
                                key: '/components/table/search/searchList',
                                element: <Layout>{lazyload(lazy(() => import('@views/components/table/search')))}</Layout>,
                                meta: {
                                    name: 'layout__main-menu__component-table_search_list',
                                    title: '搜索列表'
                                }
                            }
                        ]
                    }
                ]
            },
            {
                path: 'list',
                key: '/components/list',
                element: <Layout>{lazyload(lazy(() => import('@views/components/list')))}</Layout>,
                meta: {
                    icon: 've-icon-order-o',
                    name: 'layout__main-menu__component-list',
                    title: '列表'
                }
            },
            {
                path: 'form',
                key: '/components/form',
                element: <Blank />,
                meta: {
                    icon: 've-icon-exception',
                    name: 'layout__main-menu__component-form',
                    title: '表单',
                    isAuth: true
                },
                children: [
                    {
                        path: 'allForm',
                        key: '/components/form/allForm',
                        element: <Layout>{lazyload(lazy(() => import('@views/components/form/all')))}</Layout>,
                        meta: {
                            name: 'layout__main-menu__component-form_all',
                            title: '所有表单'
                        }
                    },
                    {
                        path: 'customForm',
                        key: '/components/form/customForm',
                        element: <Layout>{lazyload(lazy(() => import('@views/components/form/custom')))}</Layout>,
                        meta: {
                            name: 'layout__main-menu__component-form_custom',
                            title: '自定义表单'
                        }
                    }
                ]
            },
            {
                path: 'markdown',
                key: '/components/markdown',
                element: <Layout>{lazyload(lazy(() => import('@views/components/markdown')))}</Layout>,
                meta: {
                    icon: <IconUnorderedList />,
                    name: 'layout__main-menu__component-markdown',
                    title: 'markdown编辑器'
                }
            },
            {
                path: 'qrcode',
                key: '/components/qrcode',
                meta: {
                    icon: 've-icon-qrcode',
                    name: 'layout__main-menu__component-qrcode',
                    title: '二维码'
                }
            },
            {
                path: 'print',
                key: '/components/print',
                meta: {
                    icon: 've-icon-printer',
                    name: 'layout__main-menu__component-print',
                    title: '打印'
                }
            },
            {
                path: 'pdf',
                key: '/components/pdf',
                meta: {
                    icon: 've-icon-pdffile',
                    name: 'layout__main-menu__component-pdf',
                    title: 'pdf'
                }
            }
        ]
    },

    /* 用户管理模块 */
    {
        path: '/user',
        key: '/user',
        redirect: '/user/userManage',
        element: <Blank />,
        meta: {
            // icon: 've-icon-team',
            icon: <IconUserGroup />,
            name: 'layout__main-menu__user',
            title: '用户管理',
            isAuth: true,
            isHidden: false
        },
        children: [
            ...
        ]
    },

    /* 配置模块 */
    {
        path: '/setting',
        key: '/setting',
        redirect: '/setting/system/website',
        element: <Blank />,
        meta: {
            icon: 've-icon-settings-o',
            name: 'layout__main-menu__setting',
            title: '设置',
            isHidden: false
        },
        children: [
            ...
        ]
    },

    /* 权限模块 */
    {
        path: '/permission',
        key: '/permission',
        redirect: '/permission/admin',
        element: <Blank />,
        meta: {
            // icon: 've-icon-unlock',
            icon: <IconLock />,
            name: 'layout__main-menu__permission',
            title: '权限管理',
            isAuth: true,
            isHidden: false
        },
        children: [
            ...
        ]
    }
]
/**
 * Desk桌面多层级路由菜单
 * Create by andy  Q:282310962
*/

export default function DeskMenu() {
    const t = Locales()
    const filterRoutes = routes.filter(item => !item?.meta?.isWhite)

    // 桌面二级菜单弹框
    const DeskPopup = (item) => {
        const { key, meta, children } = item

        return (
            !meta?.isHidden &&
            <RScroll maxHeight={220}>
                <div className="ra__deskmenu-popup__body">
                    { children.map(item => {
                        if(item?.children) {
                            return DeskSubMenu(item)
                        }
                        return DeskMenu(item)
                    })}
                </div>
            </RScroll>
        )
    }

    // 桌面菜单项
    const DeskMenu = (item) => {
        const { key, meta, children } = item

        return (
            !meta?.isHidden &&
            <div key={key} className="ra__deskmenu-block">
                <a className="ra__deskmenu-item" onClick={()=>handleDeskClick(item)} onContextMenu={handleDeskCtxMenu}>
                    <div className="img">
                        {meta?.icon ?
                            isImg(meta?.icon) ? <img src={meta.icon} /> : <Icon name={meta.icon} size={40} />
                            :
                            <Icon name="ve-icon-file" size={40} />
                        }
                    </div>
                    { meta?.name && <span className="title clamp2">{t[meta.name]}</span> }
                </a>
            </div>
        )
    }
    // 桌面二级菜单项
    const DeskSubMenu = (item) => {
        const { key, meta, children } = item

        return (
            !meta?.isHidden &&
            <div key={key} className="ra__deskmenu-block">
                <a className="ra__deskmenu-item group" onContextMenu={e=>e.stopPropagation()}>
                    <Popover
                        title={<div className="ra__deskmenu-popup__title">{meta?.name && t[meta.name]}</div>}
                        content={() => DeskPopup(item)}
                        trigger="hover"
                        position="right"
                        triggerProps={{
                            popupStyle: {padding: 5},
                            popupAlign: {
                                right: [10, 45]
                            },
                            mouseEnterDelay: 300,
                            // showArrow: false
                        }}
                        style={{zIndex: 100}}
                    >
                        <div className="img">
                            {children.map((child, index) => {
                                if(child?.meta?.isHidden) return
                                return child?.meta?.icon ?
                                    isImg(child?.meta?.icon) ? <img key={index} src={child.meta.icon} /> : <Icon key={index} name={child.meta.icon} size={10} />
                                    :
                                    <Icon key={index} name="ve-icon-file" size={10} />
                            })}
                        </div>
                    </Popover>
                    { meta?.name && <span className="title clamp2">{t[meta.name]}</span> }
                </a>
            </div>
        )
    }

    // 点击dock菜单
    const handleDeskClick = (item) => {
        const { key, meta, element } = item

        const reg = /[a-zA-Z0-9][-a-zA-Z0-9]{0,62}(\.[a-zA-Z0-9][-a-zA-Z0-9]{0,62})+\.?/
        if(reg.test(key)) {
            window.open(key)
        }else {
            if(meta?.isNewWin) {
                // 新窗口打开
                createWin({
                    title: t[meta?.name] || meta?.title,
                    route: key,
                    width: 900,
                    height: 600
                })
            }else {
                // 弹窗打开
                rdialog({
                    title: t[meta?.name] || meta?.title,
                    content: <BrowserRouter>{element}</BrowserRouter>,
                    maxmin: true,
                    showConfirm: false,
                    area: ['900px', '550px'],
                    className: 'rc__dialogOS',
                    customStyle: {padding: 0},
                    zIndex: 100
                })
            }
        }
    }

    // 右键菜单
    const handleDeskCtxMenu = (e) => {
        e.stopPropagation()
        let pos = [e.clientX, e.clientY]
        rdialog({
            type: 'contextmenu',
            follow: pos,
            opacity: .1,
            dialogStyle: {borderRadius: 3, overflow: 'hidden'},
            btns: [
                {text: '打开'},
                {text: '重命名/配置'},
                {
                    text: '删除',
                    click: () => {
                        rdialog.close()
                    }
                }
            ]
        })
    }

    useEffect(() => {
        const deskEl = document.getElementById('deskSortable')
        Sortable.create(deskEl, {
            handle: '.ra__deskmenu-block',
            animation: 200,
            delay: 0,
            onEnd({ newIndex, oldIndex }) {
                console.log('新索引:', newIndex)
                console.log('旧索引:', oldIndex)
            }
        })
    }, [])

    return (
        <div className="ra__deskmenu" id="deskSortable">
            { filterRoutes.map(item => {
                if(item?.children) {
                    return DeskSubMenu(item)
                }
                return DeskMenu(item)
            })}
        </div>
    )
}

Okay,以上就是react18整合electron开发跨端桌面os系统的一些分享。
博客:vite-react18-webchat 基于react18.x+arco+zustand仿微信界面网页聊...

博客:uniapp+vite+pinia跨端模仿chatGPT会话模板uniChatgpt

本作品采用《CC 协议》,转载必须注明作者和本文链接
本文为原创文章,未经作者允许不得转载,欢迎大家一起交流 QQ(282310962) wx(xy190310)
讨论数量: 0
(= ̄ω ̄=)··· 暂无内容!

讨论应以学习和精进为目的。请勿发布不友善或者负能量的内容,与人为善,比聪明更重要!
文章
44
粉丝
44
喜欢
97
收藏
53
排名:371
访问:2.6 万
私信
所有博文
博客标签
react
1
angular
1
react仿微信
2
react实战开发
2
react+redux
1
react网页聊天
2
angular仿微信
1
angular聊天室
1
angular+node聊天
1
h5仿微信
1
仿微信语音
1
仿微信界面
1
RN弹窗
1
react-native自定义弹窗
1
react-native弹窗
1
React Native
1
reactNative仿微信
1
RN仿微信聊天
1
ReactNative朋友圈
1
uniapp仿微信
1
uniapp聊天室
2
uniapp聊天App
1
uni-app+vue实例
1
uni-app即时通讯
1
uniapp直播
1
uni-app仿抖音
1
uniapp仿陌陌
1
uni-app小视频
1
taro仿微信
1
taro聊天室
1
taro仿微信界面
1
taro+react聊天APP
1
taro即时通讯
1
electron+vue
1
electron-vue仿微信
1
electron聊天
1
electron实例
1
flutter实例
1
flutter仿微信
1
flutter+dart聊天
1
flutter聊天室
1
flutter聊天界面
1
vue自定义弹窗
1
vue全局对话框
1
vue长按弹出框
1
vue右键弹层
1
nuxt对话框
1
vue仿微信弹窗
1
vue仿探探
1
vue仿Tinder
1
vue卡片堆叠
1
vue翻牌滑动
1
nuxt仿探探
1
nuxt聊天室
1
nuxt仿微信
1
nuxt即时聊天
1
vue+nuxt聊天实例
1
nuxt.js朋友圈
1
vue.js自定义对话框
1
vue pc端弹窗
1
vue.js桌面端模态框
1
vue弹窗组件
1
vue仿layer
1
vue.js自定义滚动条
1
vue虚拟滚动条
1
vue美化滚动条
1
vue仿饿了么滚动条
1
Vue-Scrollbar
1
react.js弹窗示例
1
react桌面端弹框
1
react.js自定义对话框
1
react pc自定义弹窗
1
react全局弹框
1
vue3.0自定义组件
1
vue3弹框
1
vue3.x对话框
1
vue3.0弹窗
1
vue3.0实例
1
vue3.0聊天室
1
vue3.0仿微信
2
vue3聊天模板
1
vue3+vant3实战开发
1
vue3.x案例
1
vue3聊天实例
1
vue3.0仿QQ
1
vue3.x实战聊天
1
vue3网页聊天
1
vue3.0仿抖音app
1
vue3短视频
1
vue3.x小视频
1
vue3.0直播实例
1
vue3+vite2+vant3实战
1
vue3跨端开发
1
electron仿QQ
1
electron打包
1
electron聊天室
1
electron仿微信
1
electron仿抖音
1
electron短视频
1
electron直播
1
vite2+electron12
1
vite2+vue3.x+swiper
1
vue3+vite.js+vant3
1
vue3后台系统
1
Electron管理系统
1
vite2+electron后台
1
electron12权限管理
1
electron桌面端后台
1
vue3桌面管理
1
vite2+electron13
1
electron仿mac桌面
1
electron桌面管理
1
vite2桌面应用
1
uniapp短视频
1
uniapp仿抖音
1
uni-app直播
1
uniapp后台
1
uni-app+uview后台系统
1
svelte.js实战开发
1
svelte3仿微信
1
svelte+svelteKit聊天室
1
svelte聊天实例
2
svelte朋友圈
1
svelte.js仿微信
1
svelte.js网页聊天
1
svelte-ui-admin
1
svelte-admin后台管理
1
svelte管理系统
1
tauri桌面应用
1
tauri+vue3
1
vite3+tauri
1
tauri聊天程序
1
tauri仿微信
1
vue3后台管理
1
vite.js管理系统
1
vue3+vite4
1
vite4+pinia
1
vue3+pinia2
1
vue3-chatgpt
2
vite-chatgpt
1
chatgpt-mobile
1
electron-chatgpt
1
electron+vite4+vue3
1
electron25-vue3
1
chatgpt-vite
1
uni-chatgpt
1
uniapp+vue3+pinia
2
vite+uniapp
1
chatgpt-uniapp
1
tauri-admin
1
tauri+rust+vue3
1
tauri后台管理
1
tauri-vite
1
tauri+vue3桌面端后台
1
react18 hooks
2
react18+arco
2
react18+zustand
1
react18-webchat
1
react18-admin
1
react-arco-admin
1
react-vite-admin
1
react18后台管理
1
electron-mateos
1
electron27+react18
1
electron-react-macos
1
electron桌面os
1
react-macos
1
uniapp+vue3直播
1
flutter3-chat
1
flutter3仿微信
1
flutter3聊天
1
社区赞助商