自研tauri2.0-vue3-os桌面端仿macos系统|Vite6+Tauri2.x+Arco管理os平台

原创倾力之作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

在这里插入图片描述

功能特点

  1. 基于tauri2.0封装多开窗口管理器
  2. 内置macos+windows两种桌面风格
  3. 支持定制化JSON配置桌面菜单和Dock菜单
  4. 自研拖拽式桌面栅格化布局引擎
  5. 支持桌面个性化壁纸、全场景高斯虚化UI质感
  6. 支持主窗口和独立窗口打开路由页面

在这里插入图片描述

项目框架结构

整个项目使用最新跨平台框架tauri2.0vite6构建,采用vue3 setup语法编码开发。

在这里插入图片描述
在这里插入图片描述

目前tauri2-vue3-macos桌面os项目已经同步到了我的原创作品合集。

tauri2.0+vite6+vue3+arco-design桌面端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聊天实例

在这里插入图片描述

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

xiaoyan_2018

你的鼓励将是我持续作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值