vite5-macos仿macOS网页osx管理系统|vue3+arcoDesign桌面os

基于vite5.x+vue3+arco-design原创自研网页版os管理框架ViteWebOS。

使用最新前端技术vite5+vue3+pinia2+arcoDesign+sortablejs+echarts搭建网页pc版桌面os式后台管理系统解决方案。支持自定义桌面栅格布局引擎、可拖拽桌面图标、多屏分页管理、自定义桌面壁纸主题、毛玻璃虚化背景等功能。

在这里插入图片描述
vite-macos管理系统支持windowsmacos桌面模式。

在这里插入图片描述

技术栈

  • 编辑器:vscode
  • 技术框架:vite5+vue3+vue-router4+pinia2
  • UI组件库:arco-design^2.55.3 (字节桌面版vue3组件库)
  • 状态管理:pinia^2.1.7
  • 图表插件:echarts^5.5.1
  • 拖拽组件:sortablejs^1.15.2
  • 富文本编辑器:wangeditor^4.7.15
  • 模拟数据:mockjs^1.1.0
  • 构建工具:vite^5.3.3

在这里插入图片描述
在这里插入图片描述

特性

  1. 菜单支持动态JSON配置
  2. 支持windows+macos两种桌面模式
  3. 支持桌面菜单可拖拽排序
  4. 自定义桌面主题皮肤、虚化毛玻璃UI质感
  5. 全新os式后台管理系统解决方案

在这里插入图片描述

项目结构

使用最新版vite5.x搭建项目,采用vue3 setup语法糖编码。
在这里插入图片描述
在这里插入图片描述
目前vite-macos项目已经发布到我的原创作品集,感兴趣的可以去看看。
vite5+vue3+arco-design仿macOS网页版os管理系统

在这里插入图片描述

main.js入口管理

import { createApp } from 'vue'
import './style.scss'
import App from './App.vue'// 引入arco.design组件库
import ArcoDesign from '@arco-design/web-vue'
import '@arco-design/web-vue/dist/arco.css'
// 额外引入图标库
import ArcoIcon from '@arco-design/web-vue/es/icon'
import VEPlus from 've-plus'
import 've-plus/dist/ve-plus.css'// 引入路由及状态管理
import Router from './router'
import Pinia from './pinia'const app = createApp(App)app
.use(ArcoDesign)
.use(ArcoIcon)
.use(VEPlus)
.use(Router)
.use(Pinia)
.mount('#app')

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

vue3-webos桌面模板

在这里插入图片描述

支持macoswindows两种桌面模式。

<script setup>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 desktop flexbox flex-alignc flex-justifyc":style="{'--themeSkin': appstate.config.skin}"@contextmenu.prevent><component :is="DeskLayout[appstate.config.layout]" /></div>
</template>

在这里插入图片描述

<template><div class="vu__layout flexbox flex-col"><div class="vu__layout-header"><Toolbar /></div><div class="vu__layout-body flex1 flexbox"><Desk /></div><div class="vu__layout-footer"><Dock /></div><!-- 悬浮球(辅助触控) --><Touch /></div>
</template>

vue3实现Dock菜单

在这里插入图片描述
在这里插入图片描述

<template><div class="vu__macos-dock"><div class="vu__dock-wrap" :class="appstate.config.dock||'compact'"><div v-for="(data, key) in dockMenu" :key="key" class="vu__dock-group"><a v-for="(item, index) in data?.list" :key="index" class="vu__dock-item" @click="handleClickDock(item)"><span v-if="item.label" class="label">{{item.label}}</span><!-- 二级菜单 --><a-trigger v-if="isArray(item?.children)" trigger="click"><!-- 二级缩略 --><div class="thumb"><div class="vu__dock-thumbmenu">...</div></div><template #content><!-- 二级弹窗 --><div class="vu__dock-thumbpopup"><a-scrollbar style="overflow: auto; margin-top: 10px; height: 210px;">...</a-scrollbar></div></template></a-trigger><div v-else class="imgico" :style="{'color': item.color}"><template v-if="isImg(item.imgico)"><img :src="item.imgico" /></template><template v-else><component v-if="isObject(item.imgico)" class="ico" :is="item.imgico" /><i v-else class="ico elec-icon" :class="item.imgico"></i></template></div></a></div></div></div>
</template>

vue3-webos桌面栅格引擎

全新自研的桌面栅格布局引擎,支持自定义json配置,支持拖拽图标。
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
桌面图标支持自定义圆角、尺寸、间距、背景色等功能。

// 自定义变量(桌面图标)
const deskVariable = ref({'--icon-radius': '8px', // 圆角'--icon-size': '60px', // 图标尺寸(设置rpx自定义手机设备)'--icon-gap-col': '30px', // 水平间距'--icon-gap-row': '30px', // 垂直间距'--icon-labelSize': '12px', // 标签文字大小'--icon-labelColor': '#fff', // 标签颜色'--icon-fit': 'contain', // 图标自适应模式
})

在这里插入图片描述
在这里插入图片描述
桌面desk菜单项配置

const deskMenu = [{pid: 20240507001,list: [{imgico: markRaw(Today), size: '2x2'},{imgico: markRaw(Weather), size: '2x2'},{label: '便签', imgico: markRaw(NoteBook), size: '4x2'},...]},{pid: 20240509002,list: [{label: 'Appstore', imgico: '/static/mac/appstore.png'},{label: '地图', imgico: '/static/mac/maps.png'},...]},{pid: 20240510001,list: [{label: 'Github', imgico: '/static/svg/github.svg', link: 'https://github.com/', background: '#607d8b',},...]},{uid: 'd141f210-207e-1e8e-9950-9deefac27e48',list: [{label: 'Vite^5.3.3', imgico: 'https://vitejs.dev/logo.svg', link: 'https://vitejs.dev/'},...{label: '组件',children: [{label: '表格', imgico: '/static/svg/table.svg', path: '/components/table/all'},{label: '自定义表格', imgico: '/static/svg/table.svg', path: '/components/table/custom'},...]},{label: 'ChatGPT', imgico: '/static/svg/chatgpt.svg', link: 'https://openai.com/chatgpt/', background: '#15A17F',},{label: 'Bilibili', imgico: '/static/svg/bilibili.svg', link: 'https://www.bilibili.com/', background: '#ff6899',},{label: '个人中心',children: [{label: '主页', imgico: '/static/svg/my.svg', path: '/setting'},...]},{label: '设置',children: [{label: '网站设置', imgico: '/static/svg/settings.svg', path: '/setting/system/website'},{label: '邮件服务', imgico: '/static/mac/mail.png', path: '/setting/system/mail'},]},{label: '公众号', imgico: markRaw(IconWechat), color: '#07c160',onClick: () => {...}},]}
]

ok,以上就是vue3+pinia2+arco.design实战网页版os管理系统。该项目涉及到的知识点还是蛮多的,希望对大家有所帮助!

https://blog.csdn.net/yanxinyun1990/article/details/140284304

https://blog.csdn.net/yanxinyun1990/article/details/139103578

https://blog.csdn.net/yanxinyun1990/article/details/138317354

在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/diannao/51451.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

学Java一篇文章就够了(手把手教你入门)

第11章 枚举&注解&内部类 一、枚举 概念 枚举类型是Java 5中新增特性的⼀部分&#xff0c;它是⼀种特殊的数据类型&#xff0c;之所以特殊是因为它既是⼀种类 (class)类型却⼜⽐类类型多了些特殊的约束&#xff0c;但是这些约束的存在也造就了枚举类型的简洁性、安…

51单片机----开发工具介绍及软件安装

目录 一、硬件工具 二、软件工具 三、软件安装 四、总结 51单片机作为经典的入门级微控制器&#xff0c;因其易学易用、性价比高的特点&#xff0c;被广泛应用于各种电子产品中。想要玩转51单片机&#xff0c;首先需要了解其开发工具和软件安装方法。本文将从硬件和软件两方…

JCR一区级 | Matlab实现TTAO-Transformer-LSTM多变量回归预测

JCR一区级 | Matlab实现TTAO-Transformer-LSTM多变量回归预测 目录 JCR一区级 | Matlab实现TTAO-Transformer-LSTM多变量回归预测效果一览基本介绍程序设计参考资料 效果一览 基本介绍 1.【JCR一区级】Matlab实现TTAO-Transformer-LSTM多变量回归预测&#xff0c;三角拓扑聚合…

C语言 #具有展开功能的排雷游戏

文章目录 前言 一、整个排雷游戏的思维梳理 二、整体代码分布布局 三、游戏主体逻辑实现--test.c 四、整个游戏头文件的引用以及函数的声明-- game.h 五、游戏功能的具体实现 -- game.c 六、老六版本 总结 前言 路漫漫其修远兮&#xff0c;吾将上下而求索。 一、整个排…

【OSCP系列】OSCP靶机-BTRsys-2.1(原创)

OSCP系列靶机—BTRsys-2.1 原文转载已经过授权 原文链接&#xff1a;Lusen的小窝 - 学无止尽&#xff0c;不进则退 (lusensec.github.io) 一、主机发现 二、端口扫描 1、快速扫描 2、全端口扫描 3、服务系统探测 4、漏洞探测 80端口扫到了一些目录&#xff0c;有wordpress框…

Paimon数据湖详解(第49天)

系列文章目录 一. Paimon数据湖增删改查 二. 查询优化 三. 系统表 四. Lookup Joins 文章目录 系列文章目录前言Paimon数据湖的使用1、创建Table1.1 创建catalog管理的表1.2 分区表1.3 Create Table As&#xff08;了解&#xff09;1.4 Create Table Like1.5 表属性1.6 创建外…

无心剑中译莎士比亚《爱如星辰引迷舟》

莎士比亚十四行诗第116首 Sonnet 116 爱如星辰引迷舟 Let me not to the marriage of true minds Admit impediments. Love is not love Which alters when it alteration finds, Or bends with the remover to remove: O, no! it is an ever-fixed mark That looks on tempe…

C++(week14): C++提高:(一)面向对象设计:设计原则、设计模式

文章目录 一、面向对象设计的概念4.统一建模语言&#xff1a;UML语言StartUML 二、类与类之间的关系0.总结(1)类与类的五种关系(2)区别(3)面向对象 vs 基于对象 1.继承 (泛化耦合)2.组合 (Composition)3.聚合 (Aggregation)4.关联(1)双向关联(2)单向关联 5.依赖 (Dependency) 三…

简单几步,把浏览器书签转换成导航网页

废话不多说直奔主题上干货 Step 1 下载浏览器书签 1&#xff0c;电脑浏览器点击下载Pintree Pintree 是一个开源项目&#xff0c;旨在将浏览器书签导出成导航网站。通过简单的几步操作&#xff0c;就可以将你的书签转换成一个美观且易用的导航页面。 2. 安装 Pintree B…

常见OVS网桥及其链接接口详解

目录 引言OVS简介常见OVS网桥 QBR&#xff08;qbr&#xff09;PLY网桥br-intbr-tunbr-routerbrcps常见网桥链接接口 QVOQVIQVMPatch网桥和接口的工作原理应用场景 虚拟化环境数据中心网络云计算平台 1. 引言 开放虚拟交换机&#xff08;Open vSwitch&#xff0c;简称OVS&…

iOS卡顿优化

概述 怎么优化下面场景离屏渲染的情况 图层阴影(Shadow):设置图层的 shadowOpacity、shadowOffset、shadowRadius 等属性。 图层圆角(Corner Radius):设置图层的 cornerRadius 属性,并同时启用了 masksToBounds。 图层蒙版(Mask):设置图层的 mask 属性或使用 maskT…

【保姆级讲解下QT6.3】

&#x1f3a5;博主&#xff1a;程序员不想YY啊 &#x1f4ab;CSDN优质创作者&#xff0c;CSDN实力新星&#xff0c;CSDN博客专家 &#x1f917;点赞&#x1f388;收藏⭐再看&#x1f4ab;养成习惯 ✨希望本文对您有所裨益&#xff0c;如有不足之处&#xff0c;欢迎在评论区提出…

【人工智能 | 机器学习 | 理论篇】线性模型

文章目录 1. 基本形式2. 线性回归3. 对数几率回归4. 线性判别分析5. 多分类学习6. 类别不平衡问题 1. 基本形式 设有 d 个属性描述的示例 x ( x 1 , x 2 , x 3 , . . . , x d ) x ({x_1, x_2, x_3, ..., x_d}) x(x1​,x2​,x3​,...,xd​) 线性模型&#xff08;linear mode…

每天一个设计模式之命令模式(第二天)

交互模式中的命令模式&#xff0c;在开始记录之前&#xff0c;要讲些自己的感受&#xff0c;真真切切的感受到了悟性的瓶颈&#xff01;一共十页书&#xff0c;需要自己细细琢磨品味&#xff0c;至少三四遍才大概了解了他们间的逻辑&#xff0c;我需要调整下自己的学习思路&…

使用 Vue 2.x + Element UI 搭建后台管理系统详解

引言 Vue.js 是一个非常流行的前端框架&#xff0c;而 Element UI 是基于 Vue 2.x 的一套完整的 UI 组件库&#xff0c;非常适合用来构建企业级的后台管理系统。本文将详细介绍如何使用 Vue 2.x 和 Element UI 来搭建一个后台管理系统&#xff0c;包括项目初始化、路由配置、状…

高级java每日一道面试题-2024年7月29日-并发篇-什么时候用乐观锁,什么时候用悲观锁?

面试官: 什么时候用乐观锁,什么时候用悲观锁? 我回答: 乐观锁和悲观锁是两种常用的并发控制策略&#xff0c;它们在多线程环境下用于保护共享资源免受并发修改的问题。下面我们将详细讨论这两种锁的使用场景和优缺点&#xff0c;以便你在实际开发中能够根据具体情况做出合适…

快速写一个Makefile

本文主要展示Makefile的基本要素和示例&#xff0c;让读者可以快速写出一个实用的Makefile。 简要说明 Makefile&#xff0c;GNU make命令工具。 书写格式 <target> : <prerequisites> [tab] <commands> <target> 文件名或某操作的名字&#xff0…

uniapp开发精选短视频视频小程序实战笔记20240725,实现顶部轮播图和热门短剧

创建项目 创建项目,叫video_app。 在pages.json里面修改一下标题: 新建search搜索页面和me我的页面。 此时界面预览效果如下: 引入静态资源 主要是static里面的内容,全部复制过来。 配置底部导航栏 pages.json,放到顶层,和全部样式同级: "tabBar&quo…

详细分析 Sql Server查询卡顿的排查方向

目录 前言1. 问题所示2. 原理分析2.1 缺乏索引2.2 表碎片2.3 查询计划缓存2.4 锁和阻塞 3. 总结 前言 本篇为理论知识的分析以及对症下药&#xff0c;前阵子发生过Bug&#xff0c;后通过迁移服务器以及数据库最终才解决问题&#xff0c;但是细想当时可能是因为碎片或者缓存的概…

WEBKIT 通过JavaScript 调用本地,硬件未来之窗OS硬件APP

以酒店为例我们需要调用shen份证读取&#xff0c;采集人脸&#xff0c;门锁写房卡&#xff0c;如何通过浏览器调用 1.通过本地http服务 2.通过webkit模式 这里说政务单位模式的集成 由于篇幅问题&#xff0c;怎么集成webkit就不说了 一、webkkit加载交互本地代码 browser.…