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

xiaoyan2017發表於2021-06-24
ViteMacUI框架Vue

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

 

相關文章