tauri2.0-winos基于vite6+tauri2+vue3客户端os系统

原创

andy2018

发布于 2024-12-23 12:13:26

2140

文章被收录于专栏：h5h5

经过半个月的高强度研发，原创自研Tauri2.0-Vue3-MacOS客户端OS桌面系统终于宣告完结。

tauri2-vue3os支持macos和windows两种桌面风格。

技术栈

技术框架：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

tauri2-vue3os支持多窗口管理、自定义拖拽栅格桌面引擎、分屏指示器管理、自定义桌面壁纸等功能。

项目结构框架

使用最新版tauri2.0跨平台框架，搭配vite6.x极速构建桌面项目框架。

支持自定义json配置桌面菜单和Dock菜单，支持主窗口和独立新窗口打开路由页面。

tauri.conf.json配置

{
  "$schema": "https://schema.tauri.app/config/2",
  "productName": "tauri2-viteos",
  "version": "0.1.0",
  "identifier": "com.tauri2-viteos.app",
  "build": {
    "beforeDevCommand": "yarn dev",
    "devUrl": "http://localhost:1420",
    "beforeBuildCommand": "yarn build",
    "frontendDist": "../dist"
  },
  "app": {
    "windows": [
      {
        "title": "tauri2-viteos",
        "width": 1024,
        "height": 640,
        "center": true,
        "decorations": false,
        "transparent": false,
        "shadow": false,
        "visible": false
      }
    ],
    "security": {
      "csp": null
    },
    "withGlobalTauri": false
  },
  "bundle": {
    "active": true,
    "targets": "all",
    "icon": [
      "icons/32x32.png",
      "icons/128x128.png",
      "icons/128x128@2x.png",
      "icons/icon.icns",
      "icons/icon.ico"
    ]
  }
}

入口main.js配置

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

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

// 引入路由/状态配置
import Router from './router'
import Pinia from './pinia'

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

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栅格桌面结构

栅格桌面图标参数

const deskVariable = ref({
    '--icon-radius': '10px', // 圆角
    '--icon-size': '60px', // 图标尺寸
    '--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 二级菜单
 */

tauri2+vue3实现dock菜单

支持如下参数

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

综上就是tauri2.0+vue3+arco.design开发桌面端os系统的一些分享知识，希望对大家有点帮助~

原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。

如有侵权，请联系 cloudcommunity@tencent.com 删除。

arco design