Tauri2.0-Vue3OS桌面端os平臺(tái)|tauri2+vite6+arco電腦版OS管理系統(tǒng)

自研tauri2.x+vite6+vue3+arco.design客戶端os管理系統(tǒng)Tauri2ViteOS。

vue3-tauri2-os原創(chuàng)跨平臺(tái)Tauri2.0+Vite6+Pinia2+Arco-Design+Echarts+sortablejs桌面端OS管理平臺(tái)系統(tǒng)。提供macos和windows兩種桌面風(fēng)格模式、自研拖拽式柵格引擎、封裝tauri2多窗口管理、自定義json配置桌面/Dock菜單。

Tauri2.0-DeepSeek電腦端Ai對(duì)話|tauri2+vite6+deepseek流式ai聊天系統(tǒng)

Tauri2.0+Vite5聊天室|vue3+tauri2+element-plus仿微信|tauri聊天應(yīng)用

tauri2.0-admin桌面端后臺(tái)系統(tǒng)|Tauri2+Vite5+ElementPlus管理后臺(tái)EXE程序

使用技術(shù)

開(kāi)發(fā)工具：VScode
技術(shù)框架：vite^6.0.3+vue^3.5.13+vue-router^4.5.0
跨平臺(tái)框架：tauri^2.1.1
UI組件庫(kù)：@arco-design/web-vue^2.56.3 (字節(jié)桌面版vue3組件庫(kù))
狀態(tài)管理：pinia^2.3.0
拖拽插件：sortablejs^1.15.6
滑動(dòng)分屏插件：swiper^11.1.15
圖表組件：echarts^5.5.1
markdown編輯器：md-editor-v3^5.1.1
模擬數(shù)據(jù)：mockjs^1.1.0

項(xiàng)目特性

Tauri2.0封裝高復(fù)用多開(kāi)窗口管理
支持macos/windows兩種桌面風(fēng)格
支持自定義json配置桌面菜單和Dock菜單
自研桌面柵格化拖拽布局引擎
支持自定義桌面?zhèn)€性化壁紙、全場(chǎng)景毛玻璃虛化UI質(zhì)感
支持宿主窗口和獨(dú)立新開(kāi)窗口打開(kāi)路由頁(yè)面

項(xiàng)目框架目錄

tauri2-vue3-os使用 vite6.x 整合 tauri2.0 跨平臺(tái)框架創(chuàng)建項(xiàng)目模板，采用vue3 setup語(yǔ)法糖編碼開(kāi)發(fā)。

Tauri2.0-Vue3OS已經(jīng)同步到我的原創(chuàng)作品集，有需要的可以去下載使用。

tauri2+vite6+pinia2+arco-design桌面端OS管理系統(tǒng)。

項(xiàng)目入口配置main.js

import { createApp } from 'vue'
import './style.scss'
import App from './App.vue'

// 引入插件配置
import Plugins from './plugins'

// 引入路由/狀態(tài)配置
import Router from './router'
import Pinia from './pinia'

createApp(App)
.use(Router)
.use(Pinia)
.use(Plugins)
.mount("#app")

tauri2-os桌面布局模板

tauri2os內(nèi)置了macos+windows兩種風(fēng)格桌面。

<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-os桌面柵格系統(tǒng)

桌面圖標(biāo)變量

const deskVariable = ref({
    '--icon-radius': '10px', // 圓角
    '--icon-size': '60px', // 圖標(biāo)尺寸
    '--icon-gap-col': '30px', // 水平間距
    '--icon-gap-row': '30px', // 垂直間距
    '--icon-labelSize': '12px', // 標(biāo)簽文字大小
    '--icon-labelColor': '#fff', // 標(biāo)簽顏色
    '--icon-fit': 'contain', // 圖標(biāo)自適應(yīng)模式
})

桌面json配置參數(shù)

/**
 * ===== Desk桌面菜單配置項(xiàng) =====
 * label 圖標(biāo)標(biāo)題
 * imgico 圖標(biāo)(本地或網(wǎng)絡(luò)圖片) 支持Arco Design內(nèi)置圖標(biāo)或自定義iconfont圖標(biāo)
 * path 跳轉(zhuǎn)路由頁(yè)面
 * link 跳轉(zhuǎn)外部鏈接
 * hideLabel 是否隱藏圖標(biāo)標(biāo)題
 * filter 是否禁用拖拽
 * background 自定義圖標(biāo)背景色
 * color 自定義圖標(biāo)顏色
 * size 柵格磁貼布局 1x1 ... 12x12
 * padding 內(nèi)邊距
 * onClick 點(diǎn)擊圖標(biāo)回調(diào)函數(shù)
 * isNewin 新窗口打開(kāi)路由頁(yè)面
 * children 二級(jí)菜單
 */

桌面json配置片段

const deskMenu = [
  {
    uid: 'h128f210-737e-1d4e-6438-7feefac27e48',
    label: '主頁(yè)',
    imgico: '/tauri.svg',
    list: [
      // ...
      {label: '備忘錄', imgico: markRaw(Note), size: '2x2'},
      {label: '倒計(jì)時(shí)', 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/',},
      
    ]
  },
  {
    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: '摸魚(yú)',
    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: '工作臺(tái)',
    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/'},
      // ...
      {
        label: '組件',
        children: [
          // ...
        ]
      },
      {
        label: '管理中心',
        children: [
          {label: '主頁(yè)', imgico: '/static/svg/ucenter.svg', path: '/setting'},
          // ...
        ]
      },
      {
        label: '設(shè)置',
        children: [
          // ...
        ]
      },
      {label: 'Element-Plus', imgico: '/images/element-plus-logo.svg', link: 'https://element-plus.org/', padding: '10px', size: '3x1'},
      {
        label: '收藏夾',
        children: [
          // ...
        ]
      },
      {
        label: '公眾號(hào)', imgico: '/static/qrimg.png', background: '#fff', size: '2x1',
        onClick: () => {
          // ...
        }
      },
    ]
  }
]

tauri2+vue3自定義Dock菜單

dock菜單參數(shù)配置

/**
 * ===== Dock菜單配置項(xiàng) =====
 * label 圖標(biāo)tooltip提示
 * imgico 圖標(biāo)(本地或網(wǎng)絡(luò)圖片) 支持Arco Design內(nèi)置圖標(biāo)或自定義iconfont圖標(biāo)
 * path 跳轉(zhuǎn)路由頁(yè)面
 * link 跳轉(zhuǎn)外部鏈接
 * filter 是否禁用拖拽
 * color 自定義圖標(biāo)顏色
 * onClick 點(diǎn)擊圖標(biāo)回調(diào)函數(shù)
 * isNewin 新窗口打開(kāi)路由頁(yè)面
 * children 二級(jí)菜單
 */

如下圖：自定義tauri2系統(tǒng)托盤(pán)圖標(biāo)菜單。

End，綜上就是tauri2.0+vue3實(shí)戰(zhàn)開(kāi)發(fā)桌面端os系統(tǒng)的一些知識(shí)分享，希望對(duì)大家有所幫助~

附上幾個(gè)最新研發(fā)的跨平臺(tái)實(shí)戰(zhàn)項(xiàng)目

uniapp+vue3酒店預(yù)訂|vite5+uniapp預(yù)約訂房系統(tǒng)模板(h5+小程序+App端)

Tauri2.0+Vite5聊天室|vue3+tauri2+element-plus仿微信|tauri聊天應(yīng)用

Electron31-Vue3Admin管理系統(tǒng)|vite5+electron+pinia桌面端后臺(tái)Exe

uniapp+vue3聊天室|uni-app+vite4+uv-ui跨端仿微信app聊天語(yǔ)音/朋友圈

flutter3-dylive仿抖音App實(shí)例|Flutter3+Getx實(shí)戰(zhàn)短視頻直播應(yīng)用

posted @ 2024-12-20 00:52 xiaoyan2017 閱讀(1153) 評(píng)論(4) 收藏舉報(bào)

刷新頁(yè)面返回頂部

web前端項(xiàng)目案例實(shí)戰(zhàn)

交流分享前端(移動(dòng)端|微信端|小程序)最新技術(shù)、知識(shí)、項(xiàng)目案例...

Tauri2.0-Vue3OS桌面端os平臺(tái)|tauri2+vite6+arco電腦版OS管理系統(tǒng)

Tauri2.0-DeepSeek電腦端Ai對(duì)話|tauri2+vite6+deepseek流式ai聊天系統(tǒng)

Tauri2.0+Vite5聊天室|vue3+tauri2+element-plus仿微信|tauri聊天應(yīng)用

tauri2.0-admin桌面端后臺(tái)系統(tǒng)|Tauri2+Vite5+ElementPlus管理后臺(tái)EXE程序

使用技術(shù)

項(xiàng)目特性

項(xiàng)目框架目錄

Tauri2.0-Vue3OS已經(jīng)同步到我的原創(chuàng)作品集，有需要的可以去下載使用。

項(xiàng)目入口配置main.js

tauri2-os桌面布局模板

tauri2-os桌面柵格系統(tǒng)

tauri2+vue3自定義Dock菜單

公告

web前端項(xiàng)目案例實(shí)戰(zhàn)

交流分享前端(移動(dòng)端|微信端|小程序)最新技術(shù)、知識(shí)、項(xiàng)目案例...

Tauri2.0-Vue3OS桌面端os平臺(tái)|tauri2+vite6+arco電腦版OS管理系統(tǒng)

Tauri2.0-DeepSeek電腦端Ai對(duì)話|tauri2+vite6+deepseek流式ai聊天系統(tǒng)

Tauri2.0+Vite5聊天室|vue3+tauri2+element-plus仿微信|tauri聊天應(yīng)用

tauri2.0-admin桌面端后臺(tái)系統(tǒng)|Tauri2+Vite5+ElementPlus管理后臺(tái)EXE程序

使用技術(shù)

項(xiàng)目特性

項(xiàng)目框架目錄

Tauri2.0-Vue3OS已經(jīng)同步到我的原創(chuàng)作品集，有需要的可以去下載使用。

項(xiàng)目入口配置main.js

tauri2-os桌面布局模板

tauri2-os桌面柵格系統(tǒng)

tauri2+vue3自定義Dock菜單

公告

交流分享前端(移動(dòng)端|微信端|小程序)最新技術(shù)、知識(shí)、項(xiàng)目案例...

Tauri2.0-Vue3OS已經(jīng)同步到我的原創(chuàng)作品集，有需要的可以去下載使用。