tauri2-vue3-macos首创跨平台桌面OS系统模板-阿里云开发者社区

tauri2-vue3-macos首创跨平台桌面OS系统模板

2024-12-24 11

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

本文涉及的产品

应用实时监控服务-用户体验监控，每月100OCU免费额度

注册配置 MSE Nacos/ZooKeeper，118元/月

可观测可视化 Grafana 版，10个用户账号 1个月

简介： 自研Tauri2.0+Vite6+Pinia2+Arco-Design+Echarts+sortablejs桌面端OS管理平台系统。提供macos和windows两种桌面风格模式、自研拖拽式栅格引擎、封装tauri2多窗口管理。

经过半个多月潜心研发，原创自研tauri2.0+vite6+arco-design桌面版仿macos/windows11管理OS系统完结了。 360截图20241224120048548.png

tauri2-os采用最新跨平台框架Tauri2.0和Vite6搭建项目模板。内置了macos和windows两种桌面风格模式、自研拖拽式栅格引擎、封装tauri2多窗口管理、自定义json配置桌面/Dock菜单。

360截图20241222111435900.png

技术栈

技术框架：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质感
支持宿主窗口和独立新开窗口打开路由页面

360截图20241219162458542.png 360截图20241219162614145.png 360截图20241219164506023.png 002360截图20241219141657242.png 002360截图20241219142048884.png 003360截图20241219142559152.png

项目结构框架

360截图20241219171029819.png

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>

9cd7e1f1afc5c51371679e67d379efc4_1289798-20241220000233342-357441883.png

2b5a2b06c0db408fe31f1424bdc68b11_1289798-20241220000504510-2129572876.png

<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>

006360截图20241219145813064.png 006360截图20241219150548349.png 009360截图20241219152407145.png 009360截图20241219152747992.png 010360截图20241219153140935.png 011360截图20241219153433287.png 011360截图20241219153455569.png 012360截图20241219153719928.png 016360截图20241219155124317.png 018360截图20241219155504938.png 020360截图20241219160040412.png

tauri2-os栅格桌面

8b56a2c8f25ab60eb0666374fbc5a0a2_1289798-20241220002319216-15087848.png

0af34f11b98d7cac9e85513dd0625557_1289798-20241220002222402-696402975.png

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