登录/ 注册
 找回密码
 立即注册
关闭

CSDN热搜

程序园 精品问答 技术交流 资源下载
返回列表 发新帖
首页 › 业界区 › 业界 ›Tauri2.0-Vue3OS桌面端os平台|tauri2+vite6+arco电脑版O ...

Tauri2.0-Vue3OS桌面端os平台|tauri2+vite6+arco电脑版OS管理系统

丁若云 前天 18:53
自研tauri2.x+vite6+vue3+arco.design客户端os管理系统Tauri2ViteOS。
vue3-tauri2-os原创跨平台Tauri2.0+Vite6+Pinia2+Arco-Design+Echarts+sortablejs桌面端OS管理平台系统。提供macos和windows两种桌面风格模式、自研拖拽式栅格引擎、封装tauri2多窗口管理、自定义json配置桌面/Dock菜单。
1.png

2.png

使用技术


  • 开发工具：VScode
  • 技术框架：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
  • 模拟数据：mockjs^1.1.0
3.gif

4.gif

项目特性


  • Tauri2.0封装高复用多开窗口管理
  • 支持macos/windows两种桌面风格
  • 支持自定义json配置桌面菜单和Dock菜单
  • 自研桌面栅格化拖拽布局引擎
  • 支持自定义桌面个性化壁纸、全场景毛玻璃虚化UI质感
  • 支持宿主窗口和独立新开窗口打开路由页面
5.gif

项目框架目录

tauri2-vue3-os使用 vite6.x 整合 tauri2.0 跨平台框架创建项目模板，采用vue3 setup语法糖编码开发。
6.png

7.png

Tauri2.0-Vue3OS已经同步到我的原创作品集，有需要的可以去下载使用。

tauri2+vite6+pinia2+arco-design桌面端OS管理系统。
项目入口配置main.js
  1. import { createApp } from 'vue'
  2. import './style.scss'
  3. import App from './App.vue'
  5. // 引入插件配置
  6. import Plugins from './plugins'
  8. // 引入路由/状态配置
  9. import Router from './router'
  10. import Pinia from './pinia'
  12. createApp(App)
  13. .use(Router)
  14. .use(Pinia)
  15. .use(Plugins)
  16. .mount("#app")
复制代码
8.png

9.png

tauri2-os桌面布局模板

tauri2os内置了macos+windows两种风格桌面。
10.png
  1. <template>
  2.   
  3.     <component :is="DeskLayout[appstate.config.layout]" />
  4.   
  5. </template>
复制代码
11.png

  1. <template>
  2.   
  3.     <component :is="DeskLayout[appstate.config.layout]" />
  4.   
  5. </template><template>
  6.   
  7.     <component :is="DeskLayout[appstate.config.layout]" />
  8.   
  9. </template><template>
  10.   
  11.     <component :is="DeskLayout[appstate.config.layout]" />
  12.   
  13. </template><template>
  14.   
  15.     <component :is="DeskLayout[appstate.config.layout]" />
  16.   
  17. </template><template>
  18.   
  19.     <component :is="DeskLayout[appstate.config.layout]" />
  20.   
  21. </template>      
复制代码
13.png

14.png

15.png

16.png

17.png

18.png

19.png

20.png

21.png

22.png

23.png

24.png

25.png


27.png

28.png

29.png

30.png

31.png

32.png

33.png

34.png

35.png

36.png

tauri2-os桌面栅格系统

37.png

38.png

桌面图标变量
  1. const deskVariable = ref({
  2.     '--icon-radius': '10px', // 圆角
  3.     '--icon-size': '60px', // 图标尺寸
  4.     '--icon-gap-col': '30px', // 水平间距
  5.     '--icon-gap-row': '30px', // 垂直间距
  6.     '--icon-labelSize': '12px', // 标签文字大小
  7.     '--icon-labelColor': '#fff', // 标签颜色
  8.     '--icon-fit': 'contain', // 图标自适应模式
  9. })
复制代码
桌面json配置参数
  1. /**
  2. * ===== Desk桌面菜单配置项 =====
  3. * label 图标标题
  4. * imgico 图标(本地或网络图片) 支持Arco Design内置图标或自定义iconfont图标
  5. * path 跳转路由页面
  6. * link 跳转外部链接
  7. * hideLabel 是否隐藏图标标题
  8. * filter 是否禁用拖拽
  9. * background 自定义图标背景色
  10. * color 自定义图标颜色
  11. * size 栅格磁贴布局 1x1 ... 12x12
  12. * padding 内边距
  13. * onClick 点击图标回调函数
  14. * isNewin 新窗口打开路由页面
  15. * children 二级菜单
  16. */
复制代码
39.png

40.png

桌面json配置片段
  1. const deskMenu = [  {    uid: 'h128f210-737e-1d4e-6438-7feefac27e48',    label: '主页',    imgico: '/tauri.svg',    list: [      // ...      {label: '备忘录', imgico: markRaw(Note), size: '2x2'},      {label: '倒计时', imgico: markRaw(CountDown), size: '2x2'},      {label: 'Tauri^2.1', imgico: '/tauri.svg', link: 'https://tauri.app/', background: '#fff', padding: '5px',},      {label: 'Vite^6.0.3', imgico: 'https://vitejs.dev/logo.svg', link: 'https://vitejs.dev/',},<template>
  2.   
  3.     <component :is="DeskLayout[appstate.config.layout]" />
  4.   
  5. </template>  ]  },  {    uid: 'y587f210-037e-1u4e-1250-4seefac27e48',    label: 'Apps',    imgico: '/static/mac/safari.png',    list: [      {label: 'Appstore', imgico: '/static/mac/appstore.png'},      {label: '地图', imgico: '/static/mac/maps.png'},      // ...    ]  },  {    uid: 'u658f210-807e-1e4e-1550-4deefac27e48',    label: '摸鱼',    imgico: 'https://hao8.qhimg.com/dmfd/80_80_75/t11148baf6114dc38875f0173e7.webp',    list: [      {label: 'Github', imgico: '/static/svg/github.svg', link: 'https://github.com/', background: '#607d8b', size: '2x2'},      {label: 'Vue.js', imgico: '/vue.svg', link: 'https://vuejs.org/',},      {label: 'Vite.js官方文档', imgico: '/vite.svg', link: 'https://vitejs.dev/',},      // ...    ]  },  {    uid: 'u658f210-807e-1e4e-1550-4deefac27e48',    label: 'AI',    imgico: 'https://openres.xfyun.cn/xfyundoc/2024-10-20/b2b49aa6-ee0d-4b77-9ce9-c20a27ee6618/1729415860861/adfsasdf.png',    list: [      {label: 'ChatGPT', imgico: '/static/svg/chatgpt.svg', link: 'https://openai.com/chatgpt/', hideLabel: true, background: '#0ea17e', size: '3x2'},      // ...    ]  },  {    uid: 'd141f210-207e-1e8e-9950-9deefac27e48',    label: '工作台',    imgico: markRaw(IconComputer),    list: [      {label: '纯血鸿蒙', imgico: 'images/logo-dev.svg', link: 'https://developer.huawei.com/', hideLabel: true, background: '#f3f6f9', size: '2x1'},      {label: 'Tauri^2.1', imgico: '/static/svg/tauri.svg', link: 'https://tauri.app/', background: '#dffbff', padding: '10px', size: '2x2'},      {label: 'Vite^6.0.3', imgico: 'https://vitejs.dev/logo.svg', link: 'https://vitejs.dev/'},      // ...      {<template>
  6.   
  7.     <component :is="DeskLayout[appstate.config.layout]" />
  8.   
  9. </template>label: '组件',<template>
  10.   
  11.     <component :is="DeskLayout[appstate.config.layout]" />
  12.   
  13. </template>children: [<template>
  14.   
  15.     <component :is="DeskLayout[appstate.config.layout]" />
  16.   
  17. </template>  // ...<template>
  18.   
  19.     <component :is="DeskLayout[appstate.config.layout]" />
  20.   
  21. </template>]      },      {<template>
  22.   
  23.     <component :is="DeskLayout[appstate.config.layout]" />
  24.   
  25. </template>label: '管理中心',<template>
  26.   
  27.     <component :is="DeskLayout[appstate.config.layout]" />
  28.   
  29. </template>children: [<template>
  30.   
  31.     <component :is="DeskLayout[appstate.config.layout]" />
  32.   
  33. </template>  {label: '主页', imgico: '/static/svg/ucenter.svg', path: '/setting'},<template>
  34.   
  35.     <component :is="DeskLayout[appstate.config.layout]" />
  36.   
  37. </template>  // ...<template>
  38.   
  39.     <component :is="DeskLayout[appstate.config.layout]" />
  40.   
  41. </template>]      },      {<template>
  42.   
  43.     <component :is="DeskLayout[appstate.config.layout]" />
  44.   
  45. </template>label: '设置',<template>
  46.   
  47.     <component :is="DeskLayout[appstate.config.layout]" />
  48.   
  49. </template>children: [<template>
  50.   
  51.     <component :is="DeskLayout[appstate.config.layout]" />
  52.   
  53. </template>  // ...<template>
  54.   
  55.     <component :is="DeskLayout[appstate.config.layout]" />
  56.   
  57. </template>]      },      {label: 'Element-Plus', imgico: '/images/element-plus-logo.svg', link: 'https://element-plus.org/', padding: '10px', size: '3x1'},      {<template>
  58.   
  59.     <component :is="DeskLayout[appstate.config.layout]" />
  60.   
  61. </template>label: '收藏夹',<template>
  62.   
  63.     <component :is="DeskLayout[appstate.config.layout]" />
  64.   
  65. </template>children: [<template>
  66.   
  67.     <component :is="DeskLayout[appstate.config.layout]" />
  68.   
  69. </template>  // ...<template>
  70.   
  71.     <component :is="DeskLayout[appstate.config.layout]" />
  72.   
  73. </template>]      },      {<template>
  74.   
  75.     <component :is="DeskLayout[appstate.config.layout]" />
  76.   
  77. </template>label: '公众号', imgico: '/static/qrimg.png', background: '#fff', size: '2x1',<template>
  78.   
  79.     <component :is="DeskLayout[appstate.config.layout]" />
  80.   
  81. </template>onClick: () => {<template>
  82.   
  83.     <component :is="DeskLayout[appstate.config.layout]" />
  84.   
  85. </template>  // ...<template>
  86.   
  87.     <component :is="DeskLayout[appstate.config.layout]" />
  88.   
  89. </template>}      },    ]  }]
复制代码
tauri2+vue3自定义Dock菜单

41.png

42.png

dock菜单参数配置
  1. /**
  2. * ===== Dock菜单配置项 =====
  3. * label 图标tooltip提示
  4. * imgico 图标(本地或网络图片) 支持Arco Design内置图标或自定义iconfont图标
  5. * path 跳转路由页面
  6. * link 跳转外部链接
  7. * filter 是否禁用拖拽
  8. * color 自定义图标颜色
  9. * onClick 点击图标回调函数
  10. * isNewin 新窗口打开路由页面
  11. * children 二级菜单
  12. */
复制代码
43.png

如下图：自定义tauri2系统托盘图标菜单。
44.png

End，综上就是tauri2.0+vue3实战开发桌面端os系统的一些知识分享，希望对大家有所帮助~
附上几个最新研发的跨平台实战项目
uniapp+vue3酒店预订|vite5+uniapp预约订房系统模板(h5+小程序+App端)
Tauri2.0+Vite5聊天室|vue3+tauri2+element-plus仿微信|tauri聊天应用
Electron31-Vue3Admin管理系统|vite5+electron+pinia桌面端后台Exe
uniapp+vue3聊天室|uni-app+vite4+uv-ui跨端仿微信app聊天语音/朋友圈
flutter3-dylive仿抖音App实例|Flutter3+Getx实战短视频直播应用
45.gif

 

来源：程序园用户自行投稿发布，如果侵权，请联系站长删除
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！

使用道具 举报
相关推荐
B Color Image Link Quote Code Smilies
您需要登录后才可以回帖 登录 | 立即注册
发帖
丁若云
前天 18:53

0

粉丝关注

13

主题发布

板块介绍填写区域，请于后台编辑
微信扫一扫