ElectronVite2MacUI 超精美仿macOS桌面UI管理框架|vue3+electron桌面后台

Electron-Vite2-MacUI 基于vite2.x整合electron仿制mac桌面UI框架。

基于最新前端技术栈 vite2.3+electron13+vue3+element-plus+echarts 搭建开发。支持流畅的可拖拽桌面+dock菜单、丰富的视觉效果，可自定义桌面壁纸主题。

使用技术

• 前端框架：vite2.3.4+vue3.0.11+vuex@4+vue-router4.x
• 跨端框架：electron13.0.1
• 组件库：element-plus1.0.2
• 图表组件：echarts5.1.1
• 拖拽排序：sortablejs1.13
• 预处理器：sass1.34
• 弹窗组件：v3layer(改进版)

功能特点

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

支持多窗口切换，保持当前窗口置顶最前。支持拖拽、缩放等功能。

项目结构

package.json配置

{
  "name": "electron-macui",
  "version": "0.1.0",
  "description": "基于Electron13+Vite2+ElementPlus仿Mac桌面UI后台框架",
  "author": "andy 🐧：282310962",
  "copyright": "MIT License(MIT) ©2021 Andy",
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "electron:serve": "vue-cli-service electron:serve",
    "electron:build": "vue-cli-service electron:build"
  },
  "main": "background.js",
  "dependencies": {
    "element-plus": "^1.0.2-beta.45",
    "echarts": "^5.1.1",
    "element-resize-detector": "^1.2.2",
    "mockjs": "^1.1.0",
    "sortablejs": "^1.13.0",
    "sass": "^1.34.0",
    "sass-loader": "^10.1.1",
    "vue": "^3.0.11",
    "vue-i18n": "^9.1.6",
    "vue-router": "^4.0.6",
    "vuex": "^4.0.0",
    "wangeditor": "^4.7.1"
  },
  "devDependencies": {
    "@vitejs/plugin-vue": "^1.2.1",
    "@vue/cli-service": "^4.5.12",
    "@vue/compiler-sfc": "^3.0.5",
    "electron": "^13.0.1",
    "electron-devtools-installer": "^3.1.0",
    "vite": "^2.3.4",
    "vue-cli-plugin-electron-builder": "~2.0.0-rc.6"
  }
}

入口配置main.js

/**
 * 渲染进程主入口
 * @author XiaoYan
 */

import { createApp } from 'vue'
import App from './App.vue'

// 引入Router和Store
import Router from './router'
import Store from './store'

// 引入公共配置
import gPlugins from './plugins'

import { winCfg, loadWin } from './windows/actions'

loadWin().then(config => {
    winCfg.window = config

    createApp(App)
    .use(Router)
    .use(Store)
    .use(gPlugins)
    .mount('#app')
})

桌面主模板

<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>

electron+vue3无边框透明导航栏

顶部导航条均是自定义组件实现功能。同时支持自定义标题、背景及文字颜色等功能。下拉菜单则是使用的element-plus中的Dropdown组件实现功能。

<template>
    <WinBar bgcolor="rgba(29,29,32,.7)" color="#fff" zIndex="1000" title="false">
        <template #menu>
            ...
            <el-dropdown placement="bottom-start" @command="handleMenuClicked">
                <a class="menu menu-label">首页</a>
                <template #dropdown>
                    <el-dropdown-menu>
                        <el-dropdown-item command="2-1">首页</el-dropdown-item>
                        <el-dropdown-item command="2-2">控制台</el-dropdown-item>
                        <el-dropdown-item command="2-3">自定义面包屑导航</el-dropdown-item>
                    </el-dropdown-menu>
                </template>
            </el-dropdown>
            ...
        </template>
        <template #wbtn>
            <MsgMenu />
            <a class="menu" title="换肤" @click="handleSkinWin"><i class="iconfont el-icon-magic-stick"></i></a>
            <a class="menu" :class="{'on': isAlwaysOnTop}" :title="isAlwaysOnTop ? '取消置顶' : '置顶'" @click="handleAlwaysTop"><i class="iconfont icon-ding"></i></a>
            <a class="menu" title="搜索"><i class="iconfont el-icon-search"></i></a>
            <Setting />
            <a class="menu menu-label">{{currentDate}}</a>
            <el-divider direction="vertical" />
            <Avatar @logout="handleLogout" />
            <el-divider direction="vertical" />
        </template>
    </WinBar>
</template>

electron+vue3实现动效dock菜单

dock菜单采用了毛玻璃模糊背景效果。

<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 src="/static/mac/appstore.png" /></a>
            <a class="macui__dock-item active"><span class="tooltips">launchpad</span><img src="/static/mac/launchpad.png" /></a>
            ...
        </div>
    </div>
</template>

使用了sortablejs来实现拖拽位置排序。

// 拖拽Dock菜单
const dragDockMenu = () => {
    Sortable.create(dockRef.value, {
        handle: '.macui__dock-item',
        filter: '.macui__dock-filter',
        animation: 200,
        delay: 0,
        onEnd({ newIndex, oldIndex }) {
            console.log('新索引：', newIndex)
            console.log('旧索引：', oldIndex)
        }
    })
}

// 打开地图
const openMaps = () => {
    createWin({
        title: '地图',
        route: '/map',
        width: 1000,
        height: 500,
    })
}

// 打开日历
const openCalendar = () => {
    createWin({
        title: '日历',
        route: '/calendar',
        width: 500,
        height: 500,
        resize: false,
    })
}

vue3弹窗页面组件

项目中桌面菜单点击后会出现弹窗页面，支持iframe载入和组件页面载入。

deskmenu.js配置如下：

import Home from '@/views/home/index.vue'
import ControlPanel from '@/views/home/dashboard.vue'
import CustomTpl from '@/views/home/customTpl.vue'
import Table from '@/views/component/table/custom.vue'
import Form from '@/views/component/form/all.vue'
import UserSetting from '@/views/setting/manage/user/index.vue'
import Ucenter from '@/views/setting/ucenter.vue'

const deskmenu = [
    {
        type: 'component',
        icon: 'el-icon-monitor',
        title: '首页',
        component: Home,
    },
    {
        type: 'component',
        icon: 'icon-gonggao',
        title: '控制面板',
        component: ControlPanel,
    },
    {
        type: 'component',
        img: '/static/mac/reminders.png',
        title: '自定义组件模板',
        component: CustomTpl,
        area: ['600px', '360px'],
    },
    {
        type: 'iframe',
        img: '/static/vite.png',
        title: 'vite.js官方文档',
        component: 'https://cn.vitejs.dev/',
    },
    {
        type: 'component',
        icon: 'el-icon-s-grid',
        title: '表格',
        component: Table,
    },
    // ...
]

点击菜单后出现弹窗功能。

// 点击菜单
const handleMenuClicked = (menu) => {
    let icon = menu.icon ? `<i class="iconfont ${menu.icon}"></i>` : menu.img ? `<img src="${menu.img}" />` : ''
    let title = menu.title ? `<div class="macui__customTitle">${icon}${menu.title}</div>` : '标题'
    v3layer({
        type: menu.type || null,
        layerStyle: menu.style || '',
        customClass: 'macui__deskLayer',
        title: title,
        content: menu.component || '<div style="color:red;margin-top:50px;">嗷嗷！您似乎忘记了填充内容。</div>',
        area: menu.area || ['1000px', '550px'],
        shade: false,
        xclose: true,
        maximize: menu.maximize != false ? true : false,
        resize: menu.resize != false ? true : false,
        fullscreen: menu.fullscreen || false,
        zIndex: 500,
        topmost: true,
    })
}

如上图的弹窗组件，都是使用vue3自定义弹窗组件v3layer改进版实现功能。

v3layer支持超过30+种参数自定义配置，支持拖拽、四角缩放、全屏等功能，并且新增了支持动态传入组件页面功能。

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

vite2和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}"
    }
}

okay，以上就是vite2+vue3+electron跨端仿制mac big sur桌面UI管理框架。

最后附上两个vue3+electron实例项目

1、electron11+vue3跨平台仿QQ聊天软件
https://blog.csdn.net/yanxinyun1990/article/details/114162969

2、electron12+vite2跨端中后台管理系统
https://blog.csdn.net/yanxinyun1990/article/details/116936475