ElectronVue3MacOS is an elegant imitation of MAC desktop UI framework system

Using Vite2.3 +electron13+ VUe3 + Element-Plus + Echarts5 and other technical architecture development, silky can drag desktop +dock dynamic menu. Support dynamic wallpaper, MAC style drag/zoom/full screen popover functions.

Technology stack

  • Technical framework: Vite2.3.4 + Vue3.0.11 +vuex@4+ Vue-Router4.x
  • Cross-end framework: electron13.0.1
  • UI component library: element-plus1.0.2
  • Chart component: echarts5.1.1
  • Drag component: sorTableJs1.13
  • CSS preprocessing: SASS1.34
  • Vue3 popup: Mac-v3Layer

features

  • Classic icon + Dock menu mode
  • Smooth operation experience
  • Drag-and-drop desktop + Dock menu
  • Complies with macOS Big SUR operation window management
  • Rich visual effects, custom desktop wallpaper
  • Visually create multiple Windows, support drag/zoom/maximize, and pass in custom component pages.

Project directory structure

Renderer main.js configuration

/** * import {createApp} from 'vue' import App from './ app.vue '// import Router and Store import Router from './ Router 'import Store from './ Store' // import public configuration import gPlugins from './plugins' import {winCfg, loadWin } from './windows/actions' loadWin().then(config => { winCfg.window = config createApp(App) .use(Router) .use(Store) .use(gPlugins) .mount('#app') })Copy the code

Desktop public layout template

As shown above: This desktop is divided into top navigation bar + desktop menu + bottom dock bar.

<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 /> </div> <router-view V-else class="macui__layouts-main flexbox flex-col macui__filter"></router-view> </div> </template>Copy the code

Vue3 implements the MAC bottom Dock menu

Frosted glass blur effect was used in several areas of the project. The effect can be achieved through the SENsor-in-filter of CSS3.

<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>
Copy the code
.macui__deskmenu {display: flex; flex-direction: column; flex-wrap: wrap; } .macui__deskmenu-box {height: 90px; } .macui__deskmenu-item {border: 1px solid transparent; border-radius: 15px; color: #fff; cursor: pointer; display: flex; align-items: center; flex-direction: column; margin: 10px 0 0 10px; padding: 4px 0; width: 70px; transition: background-color .3s, border-color .3s; }. Macui__deskmenu - item: hover {background: rgba (255255255, 15); border-color: rgba(255, 255, 255, .2); } .macui__deskmenu-item img {height: 40px; width: 40px; object-fit: cover; } .macui__deskmenu-item .title {display: block; margin-top: 4px; padding: 0 8px; word-break: break-all; text-align: center; }Copy the code

Vue3 MAC – like popup component

The popover loading component page in the project is an improved version of vuE3 custom popover component V3Layer developed before.

Import Home from '@/views/home.vue' v3Layer ({type: 'Component ', content: Home,... })Copy the code
// Introduce frame page v3Layer ({type: 'iframe', content: 'https://cn.vitejs.dev/',... })Copy the code

The desktop menu is configured with menu.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' img: '/ static/MAC/reminders. PNG, title:' custom component templates, 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, the title:' form, component: Table,}, / /...Copy the code

In addition, the electron project packaging configuration has been introduced in the previous article. If you need it, you can go and have a look.

Here, based on VUE3 +electron13 to develop cross-terminal MacOS desktop management system to share almost.

Juejin. Cn/post / 694428…

Juejin. Cn/post / 696331…