Electron32-ViteOS桌面版os系统|vue3+electron+arco客户端OS管理模板

/**

 * 渲染进程配置入口main.js

 * @author andy*/import { createApp } from'vue'import'./style.scss'import App from'./App.vue'import { launchApp } from'@/windows/actions'

//引入路由及状态管理
import Router from './router'import Pinia from'./pinia'

//引入插件
import Plugins from './plugins'launchApp().then(config=>{if(config) {//全局窗口配置
    window.config =config

  }//初始化app实例
createApp(App)

  .use(Router)

  .use(Pinia)

  .use(Plugins)

  .mount('#app')

})

<!--桌面模板-->

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

  //引入布局模板
import MacosLayout from'./template/macos.vue'import WindowsLayout from'./template/windows.vue'const appstate=appState()



  const DeskLayout={

    macos: MacosLayout,

    windows: WindowsLayout

  }</script>

<template>
  <divclass="vu__container":style="{'--themeSkin': appstate.config.skin}">
    <component:is="DeskLayout[appstate.config.layout]" />
  </div>
</template>

<scriptsetup>import Wintool from'@/layouts/components/wintool/index.vue'import Desk from'@/layouts/components/mac/desk.vue'import Dock from'@/layouts/components/mac/dock.vue'
</script>

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

const deskGridVariable =ref({'--icon-radius': '10px', //圆角
  '--icon-size': '60px', //图标尺寸
  '--icon-gap-col': '30px', //水平间距
  '--icon-gap-row': '30px', //垂直间距
  '--icon-labelSize': '12px', //标签文字大小
  '--icon-labelColor': '#fff', //标签颜色
  '--icon-fit': 'contain', //图标自适应模式
})

/**

  * label 图标标签

  * imgico 图标(本地或网络图片) 支持Arco Design内置图标或自定义iconfont字体图标

  * path 跳转路由地址

  * link 跳转外部链接

  * hideLabel 是否隐藏图标标签

  * background 自定义图标背景色

  * color 自定义图标颜色

  * size 栅格布局(16种) 1x1 1x2 1x3 1x4、2x1 2x2 2x3 2x4、3x1 3x2 3x3 3x4、4x1 4x2 4x3 4x4

  * onClick 点击图标回调函数

  * children 二级菜单配置
* isNewin 新窗口打开路由页面*/

const deskMenu =[

  {

    uid:'d137f210-507e-7e8e-1950-9deefac27e48',

    list: [

      {imgico: markRaw(Today), size:'2x2'},

      {label:'日历', imgico: markRaw(Calendar3x3), size: '3x3'},

      {label:'Electron32', imgico: '/electron.svg', link: 'https://www.electronjs.org/'},//...
]

  },

  {

    uid:'g270f210-207e-6e8e-2650-9deefac27e48',

    list: [

      {label:'Appstore', imgico: '/static/mac/appstore.png'},//...
]

  },

  {

    uid:'t165f210-607e-4e8e-9950-9deefac27e48',

    list: [

      {label:'Vue.js', imgico: '/vue.svg', link: 'https://vuejs.org/',},

      {label:'Vite.js官方文档', imgico: '/vite.svg', link: 'https://vitejs.dev/',},//...
]

  },

  {

    uid:'u327f210-207e-1e8e-9950-9deefac27e48',

    list: [

      {label:'Electron32', imgico: '/electron.svg', link: 'https://www.electronjs.org/'},

      {label:'首页', imgico: markRaw(IconHome), path: '/home', color: '#fff', isNewin: true},

      {label:'工作台', imgico: 'elec-icon-dotchart', path: '/home/dashboard', color: '#fff'},//...
{

        label:'用户中心',

        children: [

          {label:'主页', imgico: '/static/svg/ucenter.svg', path: '/setting'},

          {label:'用户管理', imgico: markRaw(IconUserGroup), path: '/user', color: '#fff'},//...
]

      },

      {

        label:'设置',

        children: [//...
]

      },

      {

        label:'收藏网址',

        children: [

          {label:'Electron32', imgico: '/electron.svg', link: 'https://www.electronjs.org/'},

          {label:'Vite.js', imgico: '/vite.svg',},//...
]

      },

      {

        label:'公众号', imgico: '/static/qrimg.png', color: '#07c160',

        onClick: ()=>{

          Modal.info({//...
})

        }

      },

    ]

  }

]

/**

  * label 图标tooltip提示

  * imgico 图标(本地或网络图片) 支持Arco Design内置图标或自定义iconfont图标

  * path 跳转路由页面

  * link 跳转外部链接

  * color 自定义图标颜色

  * onClick 点击图标回调函数

  * children 二级菜单

  * isNewin 是否新窗口打开路由页面*/

"path-intellisense.mappings": {"@": "${workspaceFolder}/src"}