关于electron:electron13vue3macui基于vite2xelectron高仿iMac桌面UI管理框架系统

我的项目介绍

vite2-electron-macui 一款轻量级的桌面端仿 mac big sur 桌面治理框架。应用最新技术栈 electron13+vue3+element-plus 开发实现。反对多窗口、可拖拽桌面 +dock 菜单等性能。

性能个性

✅经典的图标 +dock 菜单模式
✅晦涩的操作体验
✅可拖拽桌面 +dock 菜单
✅合乎 macOS big sur 操作窗口治理
✅丰盛的视觉效果，自定义桌面壁纸
✅可视化创立多窗口，反对拖拽 / 缩放 / 最大化，可传入自定义组件页面。

实现技术

• 技术框架：vite^2.3.4+vue^3.0.11+vuex@4+vue-router4.x
• 跨端框架：electron^13.0.1
• 组件库：element-plus^1.0.2
• 图表组件：echarts^5.1.1
• 拖拽排序：sortablejs^1.13
• 预处理器：sass^1.34
• 弹窗组件：maclayer
• 滚动条：macscroll

我的项目构造目录

整个我的项目均是应用 vue3 最新语法编码开发而成。

package.json 依赖信息

{
  "name": "electron-macui",
  "version": "0.1.0",
  "description": "基于 Electron13+Vite2+ElementPlus 仿 Mac 桌面 UI 后盾框架",
  "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-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-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 自定义无边框导航

为了放弃整体我的项目 UI 的一致性，窗口采纳了无边框模式 frame:false
顶部导航条采纳自定义组件实现性能。同时反对自定义题目、背景及文字色彩等性能。下拉菜单则是应用的 element-plus 中的 Dropdown 组件实现性能。

<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 #dropdown>
                    <el-dropdown-menu>
                        <el-dropdown-item command="home"> 首页 </el-dropdown-item>
                        <el-dropdown-item command="dashboard"> 控制台 </el-dropdown-item>
                        <el-dropdown-item command="breadnav"> 自定义面包屑导航 </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>

桌面 UI 模板

如上图：桌面菜单栏位于屏幕顶部。程序坞 Dock 位于屏幕底部。

<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 实现 dock 菜单

如上图：桌面 dock 应用了毛玻璃含糊背景，应用 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>

应用 sortablejs 实现菜单拖拽扭转地位。

// 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,
    })
}

vue3 动静加载组件

如上图：我的项目中的弹窗性能，是基于之前开发的一款 vue3 桌面端弹窗插件 v3layer 改进版。
https://segmentfault.com/a/11…

v3layer 反对超过 30+ 种参数自定义配置，反对 拖拽、四角缩放、全屏 等性能，并且新增了反对 动静传入组件 页面性能。

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

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

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

这样就能应用弹窗加载组件或 iframe 页面了。

桌面菜单配置 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',
        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,
    },
    // ...
]

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

okey，应用 electron13+vite2 开发仿造 macBigSur 桌面零碎就分享到这里。

最初附上一个 electron+vue3+antdv 仿 QQ 客户端我的项目
https://segmentfault.com/a/11…