自研Tauri2.1+Vite6.0+ArcoDesign桌面os模板|vue3+tauri2+pinia2客户端os管理系统

vue3-tauri2-winos基于跨平台框架tauri2.0+vue3+vite6+pinia2+arco-design仿MacOS/Windows桌面os管理平台。自研拖拽式栅格引擎、封装tauri2多窗口、自定义json配置桌面/Dock菜单。

运用技术

• 编辑器：vscode
  
• 技术框架：vite^6.0.3+vue^3.5.13+vue-router^4.5.0
  
• 跨平台框架：tauri^2.1.1
  
• 组件库：@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.x跨平台框架结合vite6.x搭建项目框架，采用vue3 setup语法开发。

tauri2-vue3-os桌面os项目已经发布到我的原创作品集。

https://gf.bilibili.com/item/detail/1107621011

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桌面栅格系统

桌面菜单配置项

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

tauri2+vue3自定义底部Dock栏

dock菜单配置项

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

tauri2+rust自定义系统托盘

/**
 * 自定义托盘图标
 */

use tauri::{
  tray::{MouseButton, TrayIconBuilder, TrayIconEvent}, Emitter, Manager, Runtime
};

pub fn tray_create<R: Runtime>(app: &tauri::AppHandle<R>) -> tauri::Result<()> {
  let _ = TrayIconBuilder::with_id("tray")
    .tooltip("TAURI2-ViteOS")
    .icon(app.default_window_icon().unwrap().clone())
    .on_tray_icon_event(|tray, event| match event {
      TrayIconEvent::Click {
        id: _,
        position,
        rect: _,
        button,
        button_state: _,
      } => match button {
        MouseButton::Left {} => {
          let windows = tray.app_handle().webview_windows();
          for (key, value) in windows {
            println!("点击左键: {}", key);
            if key == "main-login" || key == "main" {
              value.show().unwrap();
              value.unminimize().unwrap();
              value.set_focus().unwrap();
            }
          }
        }
        MouseButton::Right {} => {
          println!("点击右键");
          tray.app_handle().emit("tray_rightclick", position).unwrap();
        }
        _ => {}
      },
      /* TrayIconEvent::Enter {
        id: _,
        position,
        rect: _,
      } => {
        println!("鼠标滑过托盘");
        tray.app_handle().emit("tray_mouseenter", position).unwrap();
      }
      TrayIconEvent::Leave {
        id: _,
        position,
        rect: _,
      } => {
        println!("鼠标离开托盘");
        tray.app_handle().emit("tray_mouseleave", position).unwrap();
      } */
      _ => {}
    })
    .build(app);
  Ok(())
}

作者：xiaoyan2017
链接：https://www.cnblogs.com/xiaoyan2017/p/18618163
来源：博客园
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。