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