科技公司的网站建设费入什么科目,网站资源建设的步骤,shopify网站建设,store软件下载原创新作electron32.xvue3arco.design仿ipad/windows桌面os系统。 基于最新跨平台技术Electron32、Vite5、Vue3 setup、Pinia2、Arco-Design、Echarts、Sortablejs实战开发桌面版osx管理系统。内置ipad/windows两种桌面风格模板、动态json配置桌面图标、自研栅格拖拽布局模板。…原创新作electron32.xvue3arco.design仿ipad/windows桌面os系统。 基于最新跨平台技术Electron32、Vite5、Vue3 setup、Pinia2、Arco-Design、Echarts、Sortablejs实战开发桌面版osx管理系统。内置ipad/windows两种桌面风格模板、动态json配置桌面图标、自研栅格拖拽布局模板。 vite5-electron-os桌面os系统封装了多窗口管理器。 技术栈
编辑器Vscode技术框架vite5.4vue3.4.37vue-router^4.4.3跨平台框架electron^32.0.1组件库arco-design^2.56.0 (字节跳动vue3组件库)状态管理pinia^2.2.2拖拽插件sortablejs^1.15.2图表组件echarts^5.5.1模拟数据mockjs^1.1.0打包工具electron-builder^24.13.3electronvite插件vite-plugin-electron^0.28.7 项目结构目录
electron32-os桌面os系统整合vite5.xelectronjs跨平台技术。 electron32-macos项目已经上架到我的原创作品集欢迎下载使用。
Electron32Vite5ArcoDesign桌面OS管理系统 功能性
支持macoswindows两种桌面风格支持自定义json配置桌面菜单和Dock菜单自研栅格化拖拽布局模板支持自定义桌面主题壁纸、全场景高斯模糊UI质感支持主窗口和新开窗口打开路由页面 main.js配置
/*** 渲染进程配置入口main.js* author andy*/import { createApp } from vue
import ./style.scss
import App from ./App.vueimport { launchApp } from /windows/actions// 引入路由及状态管理
import Router from ./router
import Pinia from ./pinia// 引入插件
import Plugins from ./pluginslaunchApp().then(config {if(config) {// 全局窗口配置window.config config}// 初始化app实例createApp(App).use(Router).use(Pinia).use(Plugins).mount(#app)
})公共桌面布局模板 !-- 桌面模板 --script setupimport { appState } from /pinia/modules/app// 引入布局模板import MacosLayout from ./template/macos.vueimport WindowsLayout from ./template/windows.vueconst appstate appState()const DeskLayout {macos: MacosLayout,windows: WindowsLayout}
/scripttemplatediv classvu__container :style{--themeSkin: appstate.config.skin}component :isDeskLayout[appstate.config.layout] //div
/templatescript setupimport Wintool from /layouts/components/wintool/index.vueimport Desk from /layouts/components/mac/desk.vueimport Dock from /layouts/components/mac/dock.vue
/scripttemplatediv classvu__layout flexbox flex-coldiv classvu__layout-headerWintool //divdiv classvu__layout-body flex1 flexboxDesk //divdiv classvu__layout-footerDock //div/div
/templatevue3-electron-os栅格模板引擎 桌面图标菜单配置参数
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, // 图标自适应模式
})桌面json参数
/*** 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({// ...})}},]}
]electron32-os实现dock菜单 dock菜单配置参数
/*** label 图标tooltip提示* imgico 图标(本地或网络图片) 支持Arco Design内置图标或自定义iconfont图标* path 跳转路由页面* link 跳转外部链接* color 自定义图标颜色* onClick 点击图标回调函数* children 二级菜单* isNewin 是否新窗口打开路由页面*/综上就是electron32vue3arco.design实战开发桌面版os管理系统的一些知识分享。整个项目覆盖到的知识点还是非常多的限于篇幅就先分享到这里。
https://blog.csdn.net/yanxinyun1990/article/details/141310166
https://blog.csdn.net/yanxinyun1990/article/details/140284304
https://blog.csdn.net/yanxinyun1990/article/details/139103578
