ElectronVue3MacOS 一款精致仿mac桌面后台框架|electron-vite2管理桌面

上次有给大家分享一个vite2+electron12中后台管理系统，这次分享的是最新开发的仿MacOS桌面管理平台ElectronVue3MacOS。
https://www.imooc.com/article/317624

electron-vue3-macOS 一款基于最新前端技术栈electron13+vite2.3.4+vue3开发构建的一个跨端仿mac桌面管理系统。拥有经典的图标及dock菜单，支持拖拽操作及自定义壁纸主题等功能。

运用技术

• 编辑器：Vscode
• vue全家桶：Vite2.3.4+Vue3.0.11+Vuex4+VueRouter@4
• 跨端框架：Electron13.0.1
• 打包工具：vue-cli-plugin-electron-builder
• UI组件库：Element-Plus^1.0.2 (饿了么vue3组件库)
• 弹窗组件：MacLayer (vue3弹窗v3layer改进版)
• 图表组件：Echarts^5.1.1
• 模拟请求：Mockjs1.1.0

功能特征

✅经典的图标+dock菜单模式
✅流畅的操作体验
✅可拖拽桌面+dock菜单
✅符合macOS big sur操作窗口管理
✅丰富的视觉效果，自定义桌面壁纸
✅可视化创建多窗口，支持拖拽/缩放/最大化，可传入自定义组件页面。

开始准备

该项目基于 vite2、electron13、vue3、vuex、vue-router 、element-plus、echarts 等技术开发，所有的请求数据都使用Mock.js进行模拟，提前了解和学习这些知识会对使用本项目有很大的帮助。

项目目录

桌面布局模板

如下图：桌面分为顶部导航菜单+桌面菜单+底部dock菜单三个模块。

<template>
    <div class="macui__wrapper" :style="{'--themeSkin': store.state.skin}">
        <div v-if="!route.meta.isNewin" class="macui__layouts-main flexbox flex-col">
            <!-- //顶部导航 -->
            <div class="layout__topbar">
                <TopNav />
            </div>
            
            <div class="layout__workpanel flex1 flexbox" @contextmenu="handleCtxMenu">
                <div class="panel__mainlayer flex1 flexbox" style="margin-bottom: 70px;">
                    <DeskMenu />
                </div>
            </div>

            <!-- //底部Dock菜单 -->
            <Dock />
        </div>
        <router-view v-else class="macui__layouts-main flexbox flex-col macui__filter"></router-view>
    </div>
</template>

仿mac底部dock菜单效果

如下图：仿制dock菜单动效，使用backdrop-filter实现毛玻璃模糊背景效果。

<template>
    <div class="macui__dock">
        <div class="macui__dock-wrap macui__filter" ref="dockRef">
            <a class="macui__dock-item"><span class="tooltips">appstore</span><img class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="/static/mac/appstore.png" /></a>
            <a class="macui__dock-item active"><span class="tooltips">launchpad</span><img class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="/static/mac/launchpad.png" /></a>
            ...
        </div>
    </div>
</template>

.macui__deskmenu {display: flex; flex-direction: column; flex-wrap: wrap;}
.macui__deskmenu-box {height: 90px;}
.macui__deskmenu-item {border: 1px solid transparent; border-radius: 15px; color: #fff; cursor: pointer; display: flex; align-items: center; flex-direction: column; margin: 10px 0 0 10px; padding: 4px 0; width: 70px; transition: background-color .3s, border-color .3s;}
.macui__deskmenu-item:hover {background: rgba(255,255,255,.15); border-color: rgba(255, 255, 255, .2);}
.macui__deskmenu-item img {height: 40px; width: 40px; object-fit: cover;}
.macui__deskmenu-item .title {display: block; margin-top: 4px; padding: 0 8px; word-break: break-all; text-align: center;}

自定义动态组件弹窗

如下图：点击桌面菜单会打开弹窗，支持动态引入vue组件页面。

// 引入动态组件页面
import Index from '@/views/index.vue'

v3layer({
    type: 'component',
    content: Index,
    ...
})

// 引入frame页面
v3layer({
    type: 'iframe',
    content: 'https://cn.vitejs.dev/',
    ...
})

这个是v3layer弹窗的改进版本，支持macOS皮肤风格，支持动态载入组件页面。
www.cnblogs.com/xiaoyan2017/p/14221729.html

electron打包配置

{
    "productName": "electron-macui",
    "appId": "cc.xiaoyan.electron-macui",
    "copyright": "Copyright © 2021-present",
    "author": "Power By XiaoYan | Q：282310962  WX：xy190310"
    "compression": "maximum",
    "asar": false,
    "extraResources": [
        {
            "from": "./resource",
            "to": "resource"
        }
    ],
    "nsis": {
        "oneClick": false,
        "allowToChangeInstallationDirectory": true,
        "perMachine": true,
        "deleteAppDataOnUninstall": true,
        "createDesktopShortcut": true,
        "createStartMenuShortcut": true,
        "shortcutName": "ElectronMacUI"
    },
    "win": {
        "icon": "./resource/shortcut.ico",
        "artifactName": "${productName}-v${version}-${platform}-${arch}-setup.${ext}",
        "target": [
            {
                "target": "nsis",
                "arch": ["ia32"]
            }
        ]
    },
    "mac": {
        "icon": "./resource/shortcut.icns",
        "artifactName": "${productName}-v${version}-${platform}-${arch}-setup.${ext}"
    },
    "linux": {
        "icon": "./resource",
        "artifactName": "${productName}-v${version}-${platform}-${arch}-setup.${ext}"
    }
}

OK，基于vite2.x+electron13开发macOS桌面管理系统就分享到这里。