Electron-Vite2-MacUI桌⾯管理框架electron13+vue3.x仿m。。。
基于vue3.0.11+electron13仿制macOS桌⾯UI管理系统ElectronVue3MacUI。
前段时间有分享⼀个项⽬。今天要分享的是最新研发的跨平台仿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" :>
<div v-if="!a.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" >
<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>
对于导航条组件的⼀些实现⽅式，⼤家如果感兴趣可以去看看之前的分享⽂章哈~
◆ 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 = () => {
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: '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: pe || null,
layerStyle: menu.style || '',
customClass: 'macui__deskLayer',
title: title,
content: ponent || '<div >嗷嗷！您似乎忘记了填充内容。</div>',
area: menu.area || ['1000px', '550px'],
shade: false,
xclose: true,
maximize: menu.maximize != false ? true : false,
resize: size != false ? true : false,
fullscreen: menu.fullscreen || false,
zIndex: 500,
topmost: true,
})
}
⼤家如果对v3layer的实现感兴趣的话，可以去看看之前的这篇分享⽂章。
◆ 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聊天实例

更多推荐

定义,组件,实现,功能