Electron-Vite2-MacUI桌面管理框架|electron13+vue3.x仿mac桌面UI

基於vue3.0.11+electron13仿製macOS桌面UI管理系統ElectronVue3MacUI。

前段時間有分享一個vue3結合electron12開發後臺管理系統專案。今天要分享的是最新研發的跨平臺仿macOS桌面UI管理框架。使用了最新前端技術electron13+vite2.3+vue3搭建開發。支援多視窗、動態桌布、程式塢DOCK選單、可拖拽等功能。

一、實現技術

編輯器：Vscode
框架技術：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操作視窗管理
豐富的視覺效果，自定義桌面個性桌布
視覺化建立多視窗，支援拖拽/縮放/最大化，可傳入自定義元件頁面。

三、專案分層結構

專案中的彈窗分為vue3自定義彈窗元件和electron新開彈窗視窗。

◆ Electron桌面公共佈局模板

選單欄位於螢幕頂部。程式塢Dock選單位於螢幕底部。位於二者之間的稱為桌面。

<!-- //Main主模組模板 -->

<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+Electron實現無邊框導航條

如上圖：頂部導航條均是自定義元件實現功能。同時支援自定義標題、背景及文字顏色等功能。

下拉選單則是使用的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>

對於導航條元件的一些實現方式，大家如果感興趣可以去看看之前的分享文章哈~

https://www.cnblogs.com/xiaoyan2017/p/14449570.html

◆ Vite2+Electron實現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>

// 拖拽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,

    })

}

.macui__dock {display: flex; justify-content: center; height: 60px; transform: translateX(-50%); position: fixed; left: 50%; bottom: 5px; z-index: 10010;}

.macui__dock-wrap {background: rgba(255,255,255,.3); box-shadow: 0 1px 1px rgba(29,29,32,.15); border-radius: 15px; display: flex; align-items: center; height: 60px; padding: 0 10px;}

.macui__dock-item {color: #fff; cursor: pointer; display: inline-block; position: relative;}

.macui__dock-item .tooltips {display: none; background: rgba(0,0,0,.3); border-radius: 5px; padding: 4px 8px; text-align: center; width: 100%; position: absolute;}

.macui__dock-item img {height: 50px; width: 50px; object-fit: cover; transition: all .2s;}

.macui__dock-item.active:after {content: ''; background: rgba(29,29,32,.9); border-radius: 50%; margin-left: -2px; height: 4px; width: 4px; position: absolute; left: 50%; bottom: -2px;}

.macui__dock-item:hover .tooltips {display: block; opacity: 1; top: -70px; animation: animTooltips .3s;}

.macui__dock-item:hover img {margin: 0 2em; transform: scale(2) translateY(-10px);}

◆ Vue3仿mac彈窗元件

專案中如上圖的彈窗元件，都是使用vue3自定義彈窗元件v3layer改進版實現功能。

v3layer支援超過30+種引數自定義配置，支援拖拽、四角縮放、全屏等功能，並且新增了支援動態傳入元件頁面功能。

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,

    })

}

大家如果對v3layer的實現感興趣的話，可以去看看之前的這篇分享文章。

https://www.cnblogs.com/xiaoyan2017/p/14221729.html

◆ Vite2+Electron專案打包配置

基於vite2和electron搭建的專案，如果需要打包成.exe檔案，需要新建一個 electron-builder.json 的配置檔案。

{

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

    }

}

好了，以上就是基於vite2.x+electron13開發跨端仿製macOS桌面UI後臺管理系統，希望對大家有所幫助哈！

最後附上一個vue3+electron跨平臺桌面端仿QQ聊天例項

https://www.cnblogs.com/xiaoyan2017/p/14454624.html

Electron-Vite2-MacUI桌面管理框架|electron13+vue3.x仿mac桌面UI