原创倾力之作Tauri2.0+Vite6+Vue3+ArcoDesign桌面版os管理系统。
vue3-tauri2-macos基于最新跨平台框架
tauri2.x整合vite6构建工具搭建桌面端os管理平台系统。支持macos和windows两种桌面风格，自研拖拽式桌面栅格引擎，封装tauri2高复用多窗体管理。
技术栈
- 编辑器：vscode
- 技术框架：vite^6.0.3 + vue^13.5.13 + vue-router^4.5.0
- 跨平台框架：tauri^2.1.1
- UI组件库：@arco-design/web-vue^2.56.3
- 状态管理：pinia^2.3.0
- 拖拽插件：sortablejs^1.15.6
- 滑动插件：swiper^11.1.15
- 图表插件：echarts^5.5.1
- markdown编辑器：md-editor-v3^5.1.1
- 模拟数据：mockjs^1.1.0
功能特点
- 基于
tauri2.0封装多开窗口管理器 - 内置macos+windows两种桌面风格
- 支持定制化JSON配置桌面菜单和Dock菜单
- 自研拖拽式桌面栅格化布局引擎
- 支持桌面个性化壁纸、全场景高斯虚化UI质感
- 支持主窗口和独立窗口打开路由页面
项目框架结构
整个项目使用最新跨平台框架tauri2.0和vite6构建，采用vue3 setup语法编码开发。
目前tauri2-vue3-macos桌面os项目已经同步到了我的原创作品合集。
tauri2-vue3os桌面布局
<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+vue3桌面os栅格引擎
支持自定义桌面变量
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 栅格磁贴布局 1x1 ... 12x12
* padding 内边距
* onClick 点击图标回调函数
* isNewin 新窗口打开路由页面
* children 二级菜单
*/
整个项目涉及到的知识点还是蛮多的，通过开发这个项目，探索一种新型的桌面os式管理后台系统平台模式。如果觉得还不错的话，多多支持一下哈！
过往热文
uniapp+vue3+uv-ui跨三端仿携程酒店预订平台
harmonyos-chat基于最新鸿蒙Next 5.0 api12实战开发聊天app系统
原创Tauri2.0-Vue3-WinChat客户端聊天Exe程序|tauri2+vite5仿微信Exe应用
Electron31-Vue3Admin桌面端后台|vite5.x+electron31+element-plus桌面版后台系统
vue3-uniapp-os：基于uniapp+vite5+uv-ui手机后台OA管理系统
uniapp-vue3-wechat：基于uniapp+vue3仿微信app聊天实例
