Electron-MacWebOS 基于vite2.x+electron13仿osx桌面系统

前几天有给大家分享一个electron12 vite2中后台管理系统。今天分享的是electron13 vue3仿mac桌面后台。

Electron-Mac-webOSX 一款基于vite2.x electron13结合搭建开发的仿macOS桌面管理应用EXE。流畅的操作体验，经典的桌面图标及鱼眼dock效果，支持桌面图标拖拽排序换位。可自定义桌面壁纸主题。

electron12 vite2.x桌面端后台管理系统

拥有极致的操作体验，自定义无边框窗体、支持窗口拖拽/缩放/最大化/全屏等功能。

实现技术

• 技术框架：vite2.3.4 vue3.0.11 vuex4 vue-router4.x
• 跨端框架：electron13.0.1
• 组件库：element-plus1.0.2
• 图表组件：echarts5.1.1
• 拖拽排序：sortablejs1.13
• 预处理器：sass1.34
• 弹窗组件：maclayer

功能特性

✅经典的图标 dock菜单模式
✅流畅的操作体验
✅可拖拽桌面 dock菜单
✅符合macOS big sur操作窗口管理
✅丰富的视觉效果，自定义桌面壁纸
✅可视化创建多窗口，支持拖拽/缩放/最大化，可传入自定义组件页面。

项目结构

main.js配置

/**  
 * 渲染进程主入口  
 * @author XiaoYan  
 */  

import { createApp } from 'vue'  
import App from './App.vue'  

// 引入Router和Store  
import Router from './router'  
import Store from './store'  

// 引入公共配置  
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')  
})

公共布局模板

<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仿mac鱼眼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>

vue3仿mac弹窗效果

// 引入组件页面  
import Home from '@/views/home.vue'  

v3layer({  
    type: 'component',  
    content: Home,  
    ...  
})

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,  
    },  
    // ...  
]

ok，基于vite2+electron13开发仿mac桌面管理系统就分享到这里。

链接：https://juejin.cn/post/6977298346905960456/
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。