electron27-react-mateos：基于electron+react18仿matePad桌面系统

news2024/11/18 13:36:09

基于Electron27+React18+ArcoDesign搭建桌面版OS管理系统。

electron-react-mateos 基于最新前端跨端技术栈electron27.x+react18+arco-design+zustand4+sortablejs构建的一款仿制matePad界面多层级路由管理OS系统。

在这里插入图片描述
在这里插入图片描述
ElectronReactOS支持桌面多路由配置，新开窗口+弹窗开启路由页面。

在这里插入图片描述

在这里插入图片描述

使用技术

  • 编码开发：vscode
  • 框架技术：electron27+vite4+react18+zustand+react-router
  • 打包工具：electron-builder^24.6.4
  • 组件库：arco-design (字节react轻量级UI组件库)
  • 拖拽组件：sortablejs
  • 模拟请求：axios
  • 弹窗组件：rdialog (基于react多功能layer弹窗)
  • 美化滚动条：rscroll (基于react虚拟滚动条组件)

在这里插入图片描述
如何使用electron27创建多窗口，可以去看看这篇分享文章。

https://blog.csdn.net/yanxinyun1990/article/details/134047329

在这里插入图片描述

项目结构目录

使用vite4构建工具创建react18项目，遵循react hooks语法编码开发。
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

electron+react桌面布局

在这里插入图片描述
桌面分为顶部栏+桌面端路由菜单+底部Dock菜单三大模块。

<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实现dock菜单

在这里插入图片描述
在这里插入图片描述
dock菜单采用背景滤镜模糊效果、支持自适应伸缩、拖拽排序等功能。

<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+react18实现桌面级路由

在这里插入图片描述

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

好了，以上就是electron+react18开发桌面os的一些知识分享。

https://blog.csdn.net/yanxinyun1990/article/details/132825719

https://blog.csdn.net/yanxinyun1990/article/details/131408928

在这里插入图片描述

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/1241949.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

单片机调试技巧--修改bin文件实现断点

单片机调试技巧--修改bin文件实现断点

fromelf --text -a -c --outputall.dis F103_Moduel\F103_Moduel.axffromelf --bin --outputtest.bin F103_Moduel\F103_Moduel.axf 在启动文件中&#xff0c;修改UsageFault_Handler UsageFault_Handler\PROC; get current contextTST lr, #0x04 ; if(!EXC_RETURN[2])ITE…
阅读更多...
学习量化交易如何入门？

学习量化交易如何入门？

Python 量化入门很简单&#xff0c;只需 3 步就能快速上手! 题主在程序方向没有相关经验&#xff0c;今天就从量化行业的通用语言-Python 着手&#xff0c;教大家如何快速入门。 一、准备工作 在开始 Python 编程之前&#xff0c;首先需要确保你的计算机上安装了合适的 Pytho…
阅读更多...
【每日一题】1410. HTML实体解析器-2023.11.23

【每日一题】1410. HTML实体解析器-2023.11.23

题目&#xff1a; 1410. HTML 实体解析器 「HTML 实体解析器」 是一种特殊的解析器&#xff0c;它将 HTML 代码作为输入&#xff0c;并用字符本身替换掉所有这些特殊的字符实体。 HTML 里这些特殊字符和它们对应的字符实体包括&#xff1a; 双引号&#xff1a;字符实体为 &…
阅读更多...
【Docker】从零开始：8.Docker命令:Commit提交命令

【Docker】从零开始：8.Docker命令:Commit提交命令

【Docker】从零开始&#xff1a;8.Docker命令:Commit命令 基本概念镜像镜像分层什么是镜像分层为什么 Docker 镜像要采用这种分层结构 本章要点commit 命令命令格式docker commit 操作参数实例演示1.下载一个新的ubuntu镜像2.运行容器3.查看并安装vim4.退出容器5提交自己的镜像…
阅读更多...
23. 深度学习 - 多维向量自动求导

23. 深度学习 - 多维向量自动求导

Hi, 你好。我是茶桁。 前面几节课中&#xff0c;我们从最初的理解神经网络&#xff0c;到讲解函数&#xff0c;多层神经网络&#xff0c;拓朴排序以及自动求导。 可以说&#xff0c;最难的部分已经过去了&#xff0c;这节课到了我们来收尾的阶段&#xff0c;没错&#xff0c;生…
阅读更多...
搜维尔科技：Faceware面部捕捉最佳实践！

搜维尔科技：Faceware面部捕捉最佳实践！

视频源和分辨率&#xff1a; 我们的软件针对 RGB 彩色素材进行了优化&#xff0c;不支持使用红外摄像机。 我们建议视频分辨率为 720p 和 1080p。低于 720p 的分辨率可能会对跟踪质量产生负面影响&#xff0c;而高于 1080p 的分辨率会导致存储要求和传输时间增加&#xff0c;而…
阅读更多...
【数字化转型方法论读书笔记】-数据中台角色解读

【数字化转型方法论读书笔记】-数据中台角色解读

一千个读者&#xff0c;就有一千个哈姆雷特。同样&#xff0c;数据中台对于企业内部不同角色的价值也不同&#xff0c;下面分别从董事长、CEO、 CTO/CIO、IT 架构师、数据分析师这 5 个角色的视角详细解读数据中台。 1、董事长视角下的数据中台 在数字经济时代&#xff0c;企业…
阅读更多...
机器学习【00】pycharm使用远程服务器

机器学习【00】pycharm使用远程服务器

我们使用conda在服务器上创建虚拟环境&#xff0c;远程使用pycharm进行编程 pycharm版本2023.1.3 一.首先在服务器上创建虚拟环境 注&#xff1a;anaconda的安装可以参考ubuntu系统miniconda的安装 conda create --name tac python3.7二.pycharm 连接 点击add interpreter …
阅读更多...
Android系统调试工具大全：解密adb、dumpsys、procrank等神器

Android系统调试工具大全：解密adb、dumpsys、procrank等神器

Android系统调试工具大全&#xff1a;解密adb、dumpsys、procrank等神器 引言 Android开发中&#xff0c;调试是一个非常重要的环节&#xff0c;本文将介绍一些常用的Android系统调试工具&#xff0c;包括adb、logcat、procrank、dumpsys、dmesg、top、free、df、trace、pm、…
阅读更多...
利用GenericMenu创建上下文菜单或下拉菜单

利用GenericMenu创建上下文菜单或下拉菜单

使用GenericMenu 创建自定义上下文菜单和下拉菜单丰富自己的编辑器功能。 GenericMenu 介绍 变量 allowDuplicateNames 允许菜单具有多个同名的菜单项。 公共函数 AddDisabledItem 向菜单添加已禁用的项。 AddItem 向菜单添加一个项。 AddSeparator 向菜单添加一个分隔符项…
阅读更多...
缓存雪崩、击穿、穿透及解决方案_保证缓存和数据库一致性

缓存雪崩、击穿、穿透及解决方案_保证缓存和数据库一致性

文章目录 缓存雪崩、击穿、穿透1.缓存雪崩造成缓存雪崩解决缓存雪崩 2. 缓存击穿造成缓存击穿解决缓存击穿 3.缓存穿透造成缓存穿透解决缓存穿透 更新数据时&#xff0c;如何保证数据库和缓存的一致性&#xff1f;1. 先更新数据库&#xff1f;先更新缓存&#xff1f;解决方案 2…
阅读更多...
PTA 六度空间

PTA 六度空间

“六度空间”理论又称作“六度分隔&#xff08;Six Degrees of Separation&#xff09;”理论。这个理论可以通俗地阐述为&#xff1a;“你和任何一个陌生人之间所间隔的人不会超过六个&#xff0c;也就是说&#xff0c;最多通过五个人你就能够认识任何一个陌生人。”如图1所示…
阅读更多...
Jmeter 压测保姆级入门教程

Jmeter 压测保姆级入门教程

1、Jmeter本地安装 1.1、下载安装 软件下载地址&#xff1a; https://mirrors.tuna.tsinghua.edu.cn/apache/jmeter/binaries/ 选择一个压缩包下载即可 然后解压缩后进入bin目录直接执行命令jmeter即可启动 1.2 修改语言 默认是英文的&#xff0c;修改中文&#xff0c;点击…
阅读更多...
使用原生js通过ajax实现服务器渲染的简单代码和个人改进

使用原生js通过ajax实现服务器渲染的简单代码和个人改进

文章目录 前文提要代码实现主要参考服务器渲染实现逻辑网页呈现效果 代码分段讲解提要html的body部分css部分js部分xhr.open函数AJAX-onreadystatechange事件function函数简写方法附件功能&#xff1a;选中行 高亮 代码全文 前文提要 本文仅做个人学习记录&#xff0c;如有错误…
阅读更多...
Apache服务Rwrite功能使用

Apache服务Rwrite功能使用

Rewrite也称为规则重写&#xff0c;主要功能是实现浏览器访问时&#xff0c;URL的跳转。其正则表达式是基于Perl语言。要使用rewrite功能&#xff0c;Apache服务器需要添加rewrite模块。如果使用源码编译安装&#xff0c;–enable-rewrite。有了rewrite模块后&#xff0c;需要在…
阅读更多...
怎么快速卸载office365

怎么快速卸载office365

怎么快速卸载office365 根据官网提供的两种解决方案即点即用或MSIMicrosoft Store 根据官网提供的两种解决方案 官网地址&#xff1a;https://support.microsoft.com/zh-cn/office/%E4%BB%8E-pc-%E5%8D%B8%E8%BD%BD-office-9dd49b83-264a-477a-8fcc-2fdf5dbf61d8#OfficeVersio…
阅读更多...
visionOS空间计算实战开发教程Day 6 拖拽和点击

visionOS空间计算实战开发教程Day 6 拖拽和点击

在之前的学习中我们在空间中添加了3D模型&#xff0c;但在初始摆放后就无法再对其进行移动或做出修改。本节我们在​​Day 5​​显示和隐藏的基础上让我们模型可以实现拖拽效果&#xff0c;同时对纯色的立方体实现点击随机换色的功能。 首先是入口文件&#xff0c;无需做出改变…
阅读更多...
单元测试-java.lang.NullPointerException

单元测试-java.lang.NullPointerException

报错信息 java.lang.NullPointerException 空指针异常 空对象引用 来源 对Controller层进行单元测试&#xff0c;解决完Spring上下文报错后继续报错。 解决 在测试方法执行前要为字段完成对象的注入&#xff0c;否则就报空指针异常。 测试例子 public class SysUserContr…
阅读更多...
若依框架参数验证

若依框架参数验证

文章目录 一、前端触发参数校验异常1.前端页面2.前端代码 二、后端触发参数校验异常1.前端页面2.后端报错 三、后端自定义参数验证1.添加注解2.触发后端校验 一、前端触发参数校验异常 1.前端页面 输入不符合校验规则的值来触发 2.前端代码 校验规则数组 表单的元素 修…
阅读更多...
RTT打印在分区跳转后无法打印问题

RTT打印在分区跳转后无法打印问题

场景&#xff1a; RTT打印仅占用JLINK的带宽&#xff0c;比串口传输更快更简洁&#xff0c;同时RTT可以使用jscope对代码里面的变量实时绘图显示波形&#xff0c;而采用串口打印波形无法实时打印。同时可以保存原始数据到本地进行分析&#xff0c;RTT在各方面完胜串口。 问题描…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023