vite6+tauri2.0客户端仿MacOS桌面|tauri2+rust+vue3桌面os

今天给大伙分享一款最新原创研发的Tauri2.x+Vue3桌面版OS管理平台系统。

vue3-tauri2-winos一款基于最新跨平台技术tauri2.0+vite6+vue3 setup+pinia2+arco-design搭建的仿Mac/Windows客户端OS系统实例项目。

内置了macos和windows两种桌面风格、自研拖拽式栅格系统引擎、封装tauri2多窗口管理窗口、自定义json配置桌面菜单和Dock菜单。

使用技术

• 技术框架：vite^6.0.3+vue^3.5.13+vue-router^4.5.0
• 跨端框架：tauri^2.1.1
• 组件库：@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
• 模拟数据：mockjs^1.1.0

Tauri2-Vue3OS桌面项目已经发布到了我的原创作品集。
https://gf.bilibili.com/item/detail/1107621011

项目框架结构

整个项目使用Tauri2.0跨平台框架搭配Vue3技术栈开发。

tauri2-os布局结构

提供了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 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桌面栅格系统

桌面菜单参数配置如下：

/**
 * ===== Desk桌面菜单配置项 =====
 * label 图标标题
 * imgico 图标(本地或网络图片) 支持Arco Design内置图标或自定义iconfont图标
 * path 跳转路由页面
 * link 跳转外部链接
 * hideLabel 是否隐藏图标标题
 * filter 是否禁用拖拽
 * background 自定义图标背景色
 * color 自定义图标颜色
 * size 栅格磁贴布局 1x1 ... 12x12
 * padding 内边距
 * onClick 点击图标回调函数
 * isNewin 新窗口打开路由页面
 * children 二级菜单
 */

配置children支持二级弹窗菜单。

vue3+tauri2实现Dock菜单

/**
 * ===== Dock菜单配置项 =====
 * label 图标tooltip提示
 * imgico 图标(本地或网络图片) 支持Arco Design内置图标或自定义iconfont图标
 * path 跳转路由页面
 * link 跳转外部链接
 * filter 是否禁用拖拽
 * color 自定义图标颜色
 * onClick 点击图标回调函数
 * isNewin 新窗口打开路由页面
 * children 二级菜单
 */

另外tauri2-os托盘功能采用自定义窗口实现自定义托盘菜单。

tauri2-vue3-os桌面os项目涉及到的知识点还是蛮多的，就先暂时分享到这里。

https://segmentfault.com/a/1190000045556523
https://segmentfault.com/a/1190000045331960
https://segmentfault.com/a/1190000045186093
https://segmentfault.com/a/1190000045042968
https://segmentfault.com/a/1190000044899693
https://segmentfault.com/a/1190000044847552