2025最新版原创vite7.1+vue3.5+pinia3+arcoDesign网页端仿macOS/windows风格os管理系统。
vite7-vue3-webos基于vite7+vue3搭建pc端os后台管理系统模板。支持macos+windows两种桌面布局风格。
使用技术
- 开发工具：VScode
- 技术框架：vite7.1.2+vue3.5.18+vue-router4.5.1+pinia3
- UI组件库：arco-design^2.57.0 (字节桌面版vue3组件库)
- 状态管理：pinia^3.0.3
- 图表插件：echarts^6.0.0
- 拖拽组件：sortablejs^1.15.6
- 富文本编辑器：wangeditor^4.7.15
- 模拟数据：mockjs^1.1.0
- 样式编译：sass^1.92.1
- 构建工具：vite^7.1.2
项目框架目录
基于最新版构建工具vite7搭建项目，vue3 setup语法编码开发。
vite-webos桌面布局模板
提供了macos+windows两种桌面风格模板。
<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> <div class="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>
vite-webos桌面栅格模板
自定义桌面图标变量
// 自定义桌面图标变量 const deskVariable = ref({ '--icon-radius': '10px', // 圆角 '--icon-size': '60px', // 图标尺寸(设置rpx自定义手机设备) '--icon-gap-col': '30px', // 水平间距 '--icon-gap-row': '30px', // 垂直间距 '--icon-labelSize': '12px', // 标签文字大小 '--icon-labelColor': '#fff', // 标签颜色 '--icon-fit': 'contain', // 图标自适应模式 })
桌面菜单自定义参数
/** * ====== desk菜单配置项 ====== * label 图标标题 * imgico 图标(本地或网络图片) 支持Arco Design内置图标或自定义iconfont图标 * path 跳转路由页面 * link 跳转外部链接 * hideLabel 是否隐藏图标标题 * filter 是否禁用拖拽 * background 自定义图标背景色 * color 自定义图标颜色 * size 栅格磁贴布局(16种) 1x1 ... 12x12 * padding 内边距 * onClick 点击图标回调函数 * children 二级菜单 */
原创研发不易，感谢大家的阅读与支持！
