vite2.3+electron13+element-plus高仿mac桌面平台系统

ElectronVue3MacOS 一款精美的模仿mac桌面UI框架系统

运用vite2.3+electron13+vue3+element-plus+echarts5等技术架构开发，丝滑般可拖拽桌面+dock动效菜单。支持动态壁纸、mac风格拖拽/缩放/全屏弹窗功能。

技术栈

• 技术框架：vite2.3.4+vue3.0.11+vuex@4+vue-router4.x
• 跨端框架：electron13.0.1
• UI组件库：element-plus1.0.2
• 图表组件：echarts5.1.1
• 拖拽组件：sortablejs1.13
• css预处理：sass1.34
• vue3弹窗：mac-v3layer

特性

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

项目目录结构

渲染进程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')
})

桌面公共布局模板

如上图：这个桌面分为顶部导航栏+桌面菜单+底部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>

vue3实现mac底部dock菜单

项目中多个地方使用了毛玻璃模糊效果。通过css3的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 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>

.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;}

vue3仿mac弹窗组件

项目中的弹窗加载组件页面，使用的是之前研发的一款vue3自定义弹窗组件v3layer的改进版本。

// 引入组件页面
import Home from '@/views/home.vue'

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

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

桌面菜单配置menu.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,
    },
    // ...
]

另外electron项目打包配置，之前的文章有过相关介绍，大家有需要的可以去看看。

到这里，基于vue3+electron13开发跨端macos桌面管理系统就分享差不多了。

juejin.cn/post/694428…

juejin.cn/post/696331…