经过半个多月潜心研发，原创自研tauri2.0+vite6+arco-design桌面版仿macos/windows11管理OS系统完结了。 
tauri2-os采用最新跨平台框架Tauri2.0和Vite6搭建项目模板。内置了macos和windows两种桌面风格模式、自研拖拽式栅格引擎、封装tauri2多窗口管理、自定义json配置桌面/Dock菜单。
技术栈
- 技术框架：vite^6.0.3+vue^3.5.13+vue-router^4.5.0
- 跨平台框架：tauri^2.1.1
- UI组件库：@arco-design/web-vue^2.56.3 (字节桌面版vue3组件库)
- 状态管理：pinia^2.3.0
- 拖拽插件：sortablejs^1.15.6
- 滑动分屏插件：swiper^11.1.15
- 图表组件：echarts^5.5.1
- markdown编辑器：md-editor-v3^5.1.1
项目特色
- Tauri2.0封装高复用多开窗口管理
- 支持macos/windows两种桌面风格
- 支持自定义json配置桌面菜单和Dock菜单
- 自研桌面栅格化拖拽布局引擎
- 支持自定义桌面个性化壁纸、全场景毛玻璃虚化UI质感
- 支持宿主窗口和独立新开窗口打开路由页面
项目结构框架
tauri2-os桌面布局
<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 flexbox" :style="{'--themeSkin': appstate.config.skin}"> <component :is="DeskLayout[appstate.config.layout]" /> </div> </template>
<script setup> import { appState } from '@/pinia/modules/app' import Titlebar from '@/layouts/components/titlebar/index.vue' import Desk from '@/layouts/components/mac/desk.vue' import Dock from '@/layouts/components/mac/dock.vue' const appstate = appState() </script> <template> <div class="vu__layout flexbox flex-col"> <div class="vu__layout-header"> <Titlebar /> </div> <div class="vu__layout-body flex1 flexbox"> <Desk /> </div> <div class="vu__layout-footer"> <Dock v-if="appstate.config.dockEnable" /> </div> </div> </template>
tauri2-os栅格桌面
/** * ===== Desk桌面菜单配置项 ===== * label 图标标题 * imgico 图标(本地或网络图片) 支持Arco Design内置图标或自定义iconfont图标 * path 跳转路由页面 * link 跳转外部链接 * hideLabel 是否隐藏图标标题 * filter 是否禁用拖拽 * background 自定义图标背景色 * color 自定义图标颜色 * size 栅格磁贴布局 1x1 ... 12x12 * padding 内边距 * onClick 点击图标回调函数 * isNewin 新窗口打开路由页面 * children 二级菜单 */
综上就是tauri2.0+vue3+arco实战开发桌面os系统的一些分享知识，希望对大家有所帮助哈~
