Location>code7788 >text

Electron32-ViteOS desktop version os system|vue3+electron+arco client OS management template

Popularity：724 ℃/2024-09-04 12:22:04

on the basis ofelectron32+vue3 setup+pinia2Desktop os management solutionsElectronVue3OS。

vue3-electron32-osNew and originalElectron32+Vite5+Vue3+Pinia2+ArcoDesign+Echarts+SwiperBuild desktop os admin templates. Built-inmacos+windowsTwo desktop layout styles,Self-developed drag-and-drop grid layout template engine, support for JSON dynamic configuration of the desktop menu / Dock menu。

technology stack

  • Editor: vscode
  • Technical framework: vite^5.4.1+vue^3.4.37+vue-router^4.4.3
  • Cross-platform framework: electron^32.0.1
  • Component library: @arco-design/web-vue^2.56.0 (byte frontend vue3 component library)
  • Status plugin: pinia^2.2.2
  • Drag and drop plugin: sortablejs^1.15.2
  • Chart component: echarts^5.5.1
  • Markdown editor: md-editor-v3^4.19.2
  • Simulated data: mockjs^1.1.0
  • Packaging build: electron-builder^24.13.3
  • Electron+vite plugin: vite-plugin-electron^0.28.7

Project Features

  1. Electron32 wraps high-performance multi-open window management
  2. Support macos/windows two desktop template style
  3. Support dynamic json configuration desktop menu and Dock menu
  4. Self-developed rasterized drag-and-drop layout engine
  5. Support custom desktop theme wallpaper, full scene Gaussian blur UI texture
  6. Supports main window and new window to open routing page

Project framework structure

electron-vite-macos usage conformelectron32 Build a project framework template that followsVue3 setup Syntactic sugar coding style.

Currently Electron32-Vue3-Macos desktop side os system has been synchronized to my original portfolio.

/item/detail/1106958011

Entrance Configuration

/**
 * Renderer process configuration portal
 * @author andy
*/

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

import { launchApp } from '@/windows/actions'

// Introduction of routing and state management
import Router from './router'
import Pinia from './pinia'

// Introduction of plug-ins
import Plugins from './plugins'

launchApp().then(config => {
  if(config) {
    // Global Window Configuration
     = config
  }

  // Initializing an app instance
  createApp(App)
  .use(Router)
  .use(Pinia)
  .use(Plugins)
  .mount('#app')
})

electron-os desktop layout structure

Built-in provides both macos and windows style desktop templates.

<!-- Desktop Templates-->

<script setup>
  import { appState } from '@/pinia/modules/app'

  // Introduction of layout templates
  import MacosLayout from './template/'
  import WindowsLayout from './template/'

  const appstate = appState()

  const DeskLayout = {
    macos: MacosLayout,
    windows: WindowsLayout
  }
</script>

<template>
  <div class="vu__container" :style="{'--themeSkin': }">
    <component :is="DeskLayout[]" />
  </div>
</template>

<script setup>
  import Wintool from '@/layouts/components/wintool/'
  import Desk from '@/layouts/components/mac/'
  import Dock from '@/layouts/components/mac/'
</script>

<template>
  <div class="vu__layout flexbox flex-col">
    <div class="vu__layout-header">
      <Wintool />
    </div>
    <div class="vu__layout-body flex1 flexbox">
      <Desk />
    </div>
    <div class="vu__layout-footer">
      <Dock />
    </div>
  </div>
</template>

electron-os desktop grid template

Desktop icon customization variables

const deskGridVariable = ref({
  '--icon-radius': '10px', // rounded corner
  '--icon-size': '60px', // Icon size
  '--icon-gap-col': '30px', // Horizontal spacing
  '--icon-gap-row': '30px', // vertical distance
  '--icon-labelSize': '12px', // Label Text Size
  '--icon-labelColor': '#fff', // label color
  '--icon-fit': 'contain', // Icon Adaptive Mode
})

Customizing desktop json configuration items

/**
  * label icon label
  * imgico icon (local or web image) support Arco Design built-in icon or custom iconfont font icon
  * path Jumps to the route address
  * link Jump to an external link
  * hideLabel whether to hide icon label
  * background Custom icon background color
  * color Custom icon color
  * size raster layout (16 kinds) 1x1 1x2 1x3 1x4, 2x1 2x2 2x3 2x4, 3x1 3x2 3x3 3x4, 4x1 4x2 4x3 4x4
  * onClick Click icon callback function
  * children secondary menu configuration
  * :: isNewin opens the routing page in a new window
*/

Desktop Menu JSON Configuration

const deskMenu = [
  {
    uid: 'd137f210-507e-7e8e-1950-9deefac27e48',
    list: [
      {imgico: markRaw(Today), size: '2x2'},
      {label: 'Calendar', imgico: markRaw(Calendar3x3), size: '3x3'},
      {label: 'Electron32', imgico: '/', link: '/'},
      // ...
    ]
  },
  {
    uid: 'g270f210-207e-6e8e-2650-9deefac27e48',
    list: [
      {label: 'Appstore', imgico: '/static/mac/'},
      // ...
    ]
  },
  {
    uid: 't165f210-607e-4e8e-9950-9deefac27e48',
    list: [
      {label: '', imgico: '/', link: '/',},
      {label: 'Official Documentation', imgico: '/', link: '/',},
      // ...
    ]
  },
  {
    uid: 'u327f210-207e-1e8e-9950-9deefac27e48',
    list: [
      {label: 'Electron32', imgico: '/', link: '/'},
      {label: 'Home', imgico: markRaw(IconHome), path: '/home', color: '#fff', isNewin: true},
      {label: 'Workbench', imgico: 'elec-icon-dotchart', path: '/home/dashboard', color: '#fff'},
      // ...
      {
        label: 'User Center',
        children: [
          {label: 'Home', imgico: '/static/svg/', path: '/setting'},
          {label: 'User Management', imgico: markRaw(IconUserGroup), path: '/user', color: '#fff'},
          // ...
        ]
      },
      {
        label: 'Settings',
        children: [
          // ...
        ]
      },
      {
        label: 'Favorite URLs',
        children: [
          {label: 'Electron32', imgico: '/', link: '/'},
          {label: '', imgico: '/',},
          // ...
        ]
      },
      {
        label: 'Public', imgico: '/static/', color: '#07c160',
        onClick: () => {
          ({
            // ...
          })
        }
      },
    ]
  }
]

electron32+vue3 implement Dock menu

The dock menu supports the following parameter configurations

/**
  * label icon tooltip hint
  * imgico icon (local or web image) support Arco Design built-in icon or custom iconfont icon
  * path Jump to route page
  * link Jump to external link
  * color custom icon color
  * onClick icon click callback function
  * children secondary menu
  * isNewin Whether to open the routing page in a new window.
*/

OK, the above is electron32 + vue3 combat development desktop os system to share some knowledge, I hope to be helpful to you ha~!

Electron package download lag problem

Electron packaging progress is stuck, download stalled, set electron taobao mirror source is still invalid, you can try the following methods.
Go directly to/ Download related documents.

Download the corresponding electron version file.

Place the downloaded electron package file directly under the C drive.C:\Users\andy\AppData\Local\electron\Cache

By downloading the packaging file manually, electron packaging skips the download step and is quickly packaged.

Configure @/no path prompt solution

Install the following to configure vscode's @path hints

  1. vscode installs Path Intellisense plugin
  2. Click on the gear in the lower left corner and click on Settings
  3. Click on this icon in the upper right corner

Configure the following code

"": {
    "@": "${workspaceFolder}/src"
}

Save and quit and @/ will have a path hint.

Finally, I've attached the two latest Electron+Vite5 example projects.

/xiaoyan2017/p/18290962

/xiaoyan2017/p/18366451

 

<Previous Next>