自研tauri2.0+vite5+vue3+element-plus电脑版exe聊天系统Vue3-Tauri2Chat

历经半个多月潜心研发，又一款原创跨平台重磅新作Tauri2-Vue3Chat桌面端聊天正式完结了。

tauri-vue3chat采用最新跨平台框架Tauri2.0整合Vite5构建聊天项目模板。

技术选型

• 开发工具：vscode
• 使用技术：tauri2.0+vite^5.4.7+vue^3.5.8+vue-router^4.4.5
• 状态插件：pinia^2.2.2
• 本地存储服务：pinia-plugin-persistedstate^4.0.2
• 组件库：element-plus^2.8.3
• 编辑器插件：@vueup/vue-quill^1.2.0
• 样式管理：sass^1.79.3
• 短视频滑动插件：swiper^11.1.14

功能亮点

1. 采用自定义无边框圆角阴影窗体
2. tauri2封装新开多窗口管理
3. 内置朋友圈/短视频等功能模块
4. 整体UI清爽简洁，支持自定义壁纸换肤
5. 支持打开独立聊天窗口
6. 支持新窗口预览图片/视频

项目源码框架

tauri2.0+vite.js搭建跨平台项目

前段时间有给大家分享一篇关于tauri2+vue3搭建桌面端项目，封装多窗口管理及自定义系统托盘图标及托盘闪烁|右键菜单的文章。

大家如果感兴趣的话，可以去看一看哈。

juejin.cn/post/741473…

tauri2.0相比于1.0版本，api有了很多变更，而且2.0版本还支持创建android/ios应用。

入口配置

在main.js文件引入路由/状态管理及UI组件库。

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

// 引入组件库
import VEPlus from 've-plus'
import 've-plus/dist/ve-plus.css'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'

// 引入路由/状态管理
import Router from './router'
import Pinia from './pinia'

createApp(App)
.use(VEPlus)
.use(ElementPlus)
.use(Router)
.use(Pinia)
.mount('#app')

tauri.conf.json配置

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

tauri2chat布局模板

整体项目采用左侧菜单栏+侧边栏+右侧内容区+顶部导航栏几个模块。

<template>
  <div class="vu__chatbox">
    <template v-if="!route?.meta?.isNewWin">
      <div class="vu__container flexbox flex-alignc flex-justifyc">
        <div class="vu__layout flexbox flex-col">
          <div class="vu__layout-body flex1 flexbox" @contextmenu.prevent>
            <!-- 菜单栏 -->
            <slot v-if="!route?.meta?.hideMenuBar" name="menubar">
              <MenuBar />
            </slot>

            <!-- 侧边栏 -->
            <div v-if="route?.meta?.showSideBar" class="vu__layout-sidebar flexbox">
              <aside class="vu__layout-sidebar__body flexbox flex-col">
                <slot name="sidebar">
                  <SideBar />
                </slot>
              </aside>
            </div>

            <!-- 主内容区 -->
            <div class="vu__layout-main flex1 flexbox flex-col">
              <ToolBar v-if="!route?.meta?.hideToolBar" />
              <router-view v-slot="{ Component, route }">
                <keep-alive>
                  <component :is="Component" :key="route.path" />
                </keep-alive>
              </router-view>
            </div>
          </div>
        </div>
      </div>
    </template>
    <template v-else>
      <WinLayout />
    </template>
  </div>
</template>

tauri2+vue3自定义拖拽无边框阴影圆角窗口

通过new WebviewWindow创建窗口的时候，设置decorations: false，transparent: true，shadow: false参数，即可创建一个无边框透明的窗体。

通过css来自定义窗口圆角及阴影。

.vu__chatbox {height: calc(100vh); padding: 5px; overflow: hidden;}
.vu__layout {
  background-color: #f5f5f5;
  overflow: hidden;
  height: 100%; width: 100%;
  position: relative; z-index: 100;
  border-radius: 8px;
  box-shadow: 0 1px 5px 0 rgba(0, 0, 0, 0.15),0 1px 5px -1px rgba(0, 0, 0, 0.1),0 2px 5px rgba(0, 0, 0, 0.1);
}

tauri自定义实现系统最小化/最大化/关闭按钮功能。

<script setup>
  /**
   * tauri2.0自定义最大化/最小化/关闭按钮
   * by andy  Q：282310962
   */

  import { ref } from 'vue'
  import { getCurrentWindow } from '@tauri-apps/api/window'
  import { listen } from '@tauri-apps/api/event'
  import { exit } from '@tauri-apps/plugin-process'

  import { authState } from '@/pinia/modules/auth'
  import { isTrue } from '@/utils'
  import { winSet } from '@/windows/actions'

  const authstate = authState()

  const props = defineProps({
    color: String,
    // 窗口是否可最小化
    minimizable: {type: [Boolean, String], default: true},
    // 窗口是否可最大化
    maximizable: {type: [Boolean, String], default: true},
    // 窗口是否可关闭
    closable: {type: [Boolean, String], default: true},
    // 层级
    zIndex: {type: [Number, String], default: 2024},
  })

  const hasMaximized = ref(false)
  const isResizable = ref(true)
  const isMaximizable = ref(true)

  // 用户是否可以手动调整窗口大小
  getCurrentWindow().isResizable().then(res => {
    isResizable.value = res
  })
  // 窗口是否可以最大化
  getCurrentWindow().isMaximizable().then(res => {
    isMaximizable.value = res
  })
  // 初始监听窗口是否最大化
  getCurrentWindow().isMaximized().then(res => {
    hasMaximized.value = res
  })
  // 实时监听窗口是否最大化
  listen('tauri://resize', async() => {
    hasMaximized.value = await getCurrentWindow().isMaximized()
  })

  // 最小化
  const handleWinMin = async() => {
    // winSet('minimize')
    await getCurrentWindow().minimize()
  }
  // 最大化/还原
  const handleWinToggle = async() => {
    // winSet('max2min')
    await getCurrentWindow().toggleMaximize()
  }
  // 关闭
  const handleClose = async() => {
    const isMajor = getCurrentWindow().label.indexOf('main') > -1
    if(isMajor) {
      let el = layer({
        type: 'android',
        content: '是否最小化到托盘，不退出程序?',
        layerStyle: 'background: #f9f9f9; border-radius: 8px;',
        closable: false,
        resize: false,
        btns: [
          {
            text: '最小化托盘',
            style: 'color: #646cff',
            click: () => {
              layer.close(el)
              // winSet('hide')
              await getCurrentWindow().hide()
            }
          },
          {
            text: '退出程序',
            style: 'color: #fa5151',
            click: async() => {
              authstate.logout()
              await exit()
            }
          }
        ]
      })
    }else {
      // winSet('close')
      await getCurrentWindow().close()
    }
  }
</script>

<template>
  <div class="ev__winbtns vu__drag" :style="{'z-index': zIndex}">
    <div class="ev__winbtns-actions vu__undrag" :style="{'color': color}">
      <a v-if="isTrue(minimizable)" class="wbtn min" title="最小化" @click="handleWinMin"><i class="wicon elec-icon elec-icon-min"></i></a>
      <a v-if="isTrue(maximizable) && isResizable && isMaximizable" class="wbtn toggle" :title="hasMaximized ? '向下还原' : '最大化'" @click="handleWinToggle">
        <i class="wicon elec-icon iconfont" :class="hasMaximized ? 've-icon-shrink' : 've-icon-arrowsalt'"></i>
      </a>
      <a v-if="isTrue(closable)" class="wbtn close" title="关闭" @click="handleClose"><i class="wicon elec-icon elec-icon-quit"></i></a>
    </div>
  </div>
</template>

// 朋友圈窗口
const handleFzone = () => {
    winCreate({
      label: 'win-fzone',
      url: '/win/fzone',
      title: '朋友圈',
      width: 500,
      height: 695,
      minWidth: 350,
      minHeight: 500,
      maximizable: false,
    })
}

// 短视频窗口
const handleFvideo = () => {
    winCreate({
      label: 'win-fvideo',
      url: '/win/fvideo',
      title: '短视频',
      width: 575,
      height: 675,
      minWidth: 415,
      minHeight: 545
    })
}

// 换肤壁纸窗口
const handleSkin = () => {
    winCreate({
      label: 'win-skin',
      url: '/win/skin',
      title: '壁纸',
      width: 375,
      height: 480,
      resizable: false,
      maximizable: false,
      visible: true,
    })
}

tauri2.0自定义系统托盘|右键菜单

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

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

pub fn tray_create<R: Runtime>(app: &tauri::AppHandle<R>) -> tauri::Result<()> {
  let _ = TrayIconBuilder::with_id("tray")
    .tooltip("TAURI-WINCHAT")
    .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_contextmenu", 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(())
}

托盘右键菜单模板。

<template>
  <div class="vu__traymenu" @click="handleTrayMenu">
    <template v-if="authstate.authorization">
      <a class="menu"><img src="/static/tray-online.png" />我在线上</a>
      <a class="menu"><img src="/static/tray-busy.png" />忙碌</a>
      <a class="menu"><img src="/static/tray-nodisturb.png" />请勿打扰</a>
      <a class="menu"><img src="/static/tray-hide.png" />隐身</a>
      <a class="menu"><img src="/static/tray-offline.png" />离线</a>
      <a class="menu" @click="winTrayFlash(false)">关闭头像闪动</a>
      <a class="menu" @click="handleSetting">设置</a>
      <a class="menu" @click="handleAbout">关于</a>
      <a class="menu" @click="handleMainWin"><el-icon size="12"><Monitor /></el-icon>打开主面板</a>
    </template>
    <a class="menu" @click="handleLogout"><el-icon size="12" color="red"><SwitchButton /></el-icon>退出</a>
  </div>
</template>

综上就是Tauri2.0+Vue3实战桌面端EXE聊天程序的一些分享，整个项目涉及到的知识点还是非常多的，限于篇幅就先分享到这里吧。希望上述分享对大家有些帮助！

juejin.cn/post/741066…

juejin.cn/post/740431…

juejin.cn/post/738921…