Electron 13-Vue3-MacUI: Based on Vite2. X + Electron high imitation iMac desktop UI management framework system

Project introduction

Vite2-Electron-MacUI is a lightweight desktop management framework that mimics Mac Big Sur. Developed and implemented using the latest technology stack Electron 13+ Vue3 + Element-Plus. Support multi-window, drag-and-drop desktop +dock menu and other functions.

features

✅ Classic icon + Dock menu mode with smooth operation experience. The drag-and-drop desktop + Dock menu conforms to MacOS Big Sur operation window management with rich visual effects, custom desktop wallpaper visualization to create multiple Windows, support drag/zoom/maximization, can be passed into the custom component page.

Implementation technology

Technical framework: Vite ^2.3.4+ Vue ^3.0.11+vuex@4+ Vue-Router4.x
Cross-end frame: Electron ^13.0.1
Component library: ELEMent-plus ^1.0.2
Chart component: echarts^5.1.1
Drag and drop sort: sortablejs^1.13
Preprocessor: Sass ^1.34
Popover component: MacLayer
Scroll bar: macscroll

Project Structure Directory

The whole project is developed using the latest VUE3 syntax encoding.

Package. json depends on information

{"name": "electron-macui", "version": "0.1.0", "description": "based on Electron13+Vite2+ElementPlus imitates Mac desktop UI background frame ", "author": "Andy 🐧 : 282310962", "copyright": "MIT License(MIT) ©2021 Andy", "scripts": {"dev": "vite", "build": "vite build", "electron:serve": "vue-cli-service electron:serve", "electron:build": "vue-cli-service electron:build" }, "main": "background.js", "dependencies": { "element-plus": "^ 1.0.2 - beta. 45", "echarts" : "^ 5.1.1", "element - the resize - detector" : "^ 1.2.2", "mockjs" : "^ 1.1.0," "sortablejs" : "^ 1.13.0 sass", ""," ^ 1.34.0 ", "sass - loader" : "^ 10.1.1", "vue" : "^ 3.0.11", "vue - i18n" : "^ 9.1.6", "vue - the router" : "^ 4.0.6 vuex", ""," ^ 4.0.0 ", "wangeditor" : "^ 4.7.1"}, "devDependencies" : {" @ vitejs/plugin - vue ": "^ 1.2.1 @", "vue/cli - service" : "^ 4.5.12", "@ vue/compiler - SFC" : "^ 3.0.5", "electron" : "^ 13.0.1 electron - devtools -", "installer" : "^ 3.1.0", "vite" : "^ 2.3.4", "vue - cli - plugin - electron - builder" : "~ 2.0.0 - rc. 6"}}

Electron custom borderless navigation

In order to keep the overall project UI consistent, the window is in frame:false mode and the top navigation bar is implemented with custom components. At the same time support the custom title, background and text color and other functions. The drop-down menu implements the function using the Dropdown component in the Element-Plus.

<template> <WinBar bgcolor="rgba(39,39,39,.5)" color="# FFF "zIndex="1010"> <template #menu>... <el-dropdown placement="bottom-start" @command="handleMenuClicked"> <a class="menu menu label"> </a> <template # > <el-dropdown-menu> <el-dropdown-item command="home"> </el-dropdown-item> <el-dropdown-item > <el-dropdown-item Command = "dashboard" > < / console el - dropdown can - item > < el - dropdown can - item command = "breadnav" > custom breadcrumb navigation < / el - dropdown can - item > </el-dropdown-menu> </template> </el-dropdown> ... </template> <template # WBTN >< MsgMenu /> <a class="menu" @click="handleSkinWin">< I class=" Iconfont el-icon-magic-stick"></i></a> <a class="menu" :class="{'on': isAlwaysOnTop}" :title="isAlwaysOnTop ? 'Cancel top placement' : 'top' @ click "=" handleAlwaysTop "> < I class =" iconfont icon - ding "> < / I > < / a > < a class =" menu "title =" search "> < 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>

Desktop UI Templates

The desktop menu bar is at the top of the screen. The programming Dock is located at the bottom of the screen.

<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 menu --> <Dock /> </div> <router-view v-else class="macui__layouts-main flexbox flex-col macui__filter"></router-view> </div> </template>

Vue3 + Electron implements the DOCK menu

As shown in the figure above, the desktop Dock uses ground glass to blur the background and CSS3 to achieve dynamic display.

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

Use SortableJS to implement menu drag and drop to change position.

// const dragDockMenu = () = bb0 {sortable.create (dockRef. Value, {handle: '.macui__dock-item', filter: '.macui__dock-filter', animation: 200, delay: 0, onEnd({newIndex, oldIndex}) {console.log(' newIndex: ', newIndex) console.log(' oldIndex: ') }})} const openMaps = () => {createWin({title: 'map', route: '/map', width: 1000, height: 1000)} })} const openCalendar = () = bb0 {createWin({title: 'calendar', route: '/calendar', width: 500, height: 100)} 500, resize: false, }) }

Vue3 loads components dynamically

As shown in the picture above, the pop-up function in this project is based on an improved version of VUE3 desktop pop-up plugin V3Layer developed previously.

https://segmentfault.com/a/11…

V3Layer supports more than 30 kinds of parameter customization configuration, support drag and drop, four corner zoom, full screen and other functions, and has added support for dynamic input component pages.

// import Home from '@/views/home.vue' V3Layer ({type: 'component', content: Home,... })

v3layer({
    type: 'iframe',
    content: 'https://cn.vitejs.dev/',
    ...
})

This allows you to load a component or iframe page using a popover.

Desktop menu configuration DeskMenu.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, the title:' homepage, component: Home,}, {type: 'Component ', icon:' Icon -gonggao', title: 'ControlPanel ', component: ControlPanel,}, {type:' Component ', icon: 'Icon -gonggao', title:' ControlPanel ', component: ControlPanel,}, {type: 'component' img: '/ static/MAC/reminders. PNG, title:' custom component templates, component: CustomTpl, area: ['600px', '360px'],}, {type: 'iframe', img: '/static/vite.png', img: 'vite.js ', component: "Https://cn.vitejs.dev/"}, {type: 'component' icon: 'el - icon - s - grid, the title:' form, component: Table,}, / /...

Electron-Builder. JSON packaging configuration

{ "productName": "electron-macui", "appId": "cc.xiaoyan.electron-macui", "copyright": "Copyright © 2021 - present", "author" : "the Power By XiaoYan | Q: 282310962 WX: xy190310" "compression will" : "maximum" and "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}" } }

Okey, using Electron 13+ Vite2 to develop a clone of MacBigSur desktop system.

Finally attach an electron + vue3 + antdv imitation QQ client project https://segmentfault.com/a/11…