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

CSDN热搜

程序园 精品问答 技术交流 资源下载
返回列表 发新帖
首页 › 业界区 › 业界 ›Tauri2.0+Vite5聊天室|vue3+tauri2+element-plus仿微信| ...

Tauri2.0+Vite5聊天室|vue3+tauri2+element-plus仿微信|tauri聊天应用

兜蛇 前天 16:42
原创tauri2.0+vue3+pinai2仿QQ/微信客户端聊天Exe程序TauriWinChat。
tauri2-vue3-winchat自研vite5+tauri2.0+vue3 setup+element-plus跨平台仿QQ|微信桌面端聊天软件。全新封装tauri2多开窗口管理、自定义圆角阴影窗体。实现聊天、通讯录、收藏、我的、朋友圈/小视频等模块。
1.png

技术栈


  • 编码器：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
  • UI组件库：element-plus^2.8.3
  • 富文本编辑器：@vueup/vue-quill^1.2.0
  • 样式预处理：sass^1.79.3
  • 小视频滑动组件：swiper^11.1.14
2.gif

3.gif

项目框架结构

vue3-taurichat桌面聊天项目采用最新跨平台框架 tauri2.0 整合 vite5 搭建项目模板。
4.png

5.gif

Tauri2.0-Vue3chat聊天程序已经同步到我的原创作品集，有需要的可以去看看~

原创tauri2.0+vite5+element-plus仿微信桌面端Exe聊天系统
vite.js整合tauri2.0创建多窗口|自定义托盘闪烁右键菜单

之前有分享过一篇介绍tauri2结合vite.js搭建桌面端项目、创建多窗口、自定义托盘闪烁及右键菜单。感兴趣的可以去瞅瞅。
https://www.cnblogs.com/xiaoyan2017/p/18416811
6.png

7.png

tauri2-vue3chat实现类似QQ登录/主窗口切换，支持主题壁纸、置顶窗口、自定义最大化/最小化/关闭按钮，聊天模块支持图片/视频新窗口预览、拖拽图片到聊天区域。
8.gif

9.png

10.png

11.png

12.png

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

26.png

27.png

28.png

29.png

30.png

31.png

32.png

33.png

如果需要做数据管理的话，可以去看看下面这篇最新开发的tauri2.0+vue3桌面端后台管理系统。

https://www.cnblogs.com/xiaoyan2017/p/18467237
主入口main.js
  1. /**
  2. * 主入口文件main.js
  3. */
  5. import { createApp } from 'vue'
  6. import './style.scss'
  7. import App from './App.vue'
  9. // 引入组件库
  10. import VEPlus from 've-plus'
  11. import 've-plus/dist/ve-plus.css'
  12. import ElementPlus from 'element-plus'
  13. import 'element-plus/dist/index.css'
  15. // 引入路由/状态管理
  16. import Router from './router'
  17. import Pinia from './pinia'
  19. createApp(App)
  20. .use(VEPlus)
  21. .use(ElementPlus)
  22. .use(Router)
  23. .use(Pinia)
  24. .mount('#app')
复制代码
Tauri2.0-Vue3chat布局模板

34.png

项目整体分为菜单栏+侧边栏+右侧内容区+右上角导航条等模块。
35.png
  1. <template>
  2.   
  3.     <template v-if="!route?.meta?.isNewWin">
  4.       
  5.         
  6.          
  7.             
  8.             <slot v-if="!route?.meta?.hideMenuBar" name="menubar">
  9.               <MenuBar />
  10.             </slot>
  12.             
  13.             
  14.               
  15.                 <slot name="sidebar">
  16.                   <SideBar />
  17.                 </slot>
  18.               </aside>
  19.             
  21.             
  22.             
  23.               <ToolBar v-if="!route?.meta?.hideToolBar" />
  24.               <router-view v-slot="{ Component, route }">
  25.                 <keep-alive>
  26.                   <component :is="Component" :key="route.path" />
  27.                 </keep-alive>
  28.               </router-view>
  29.             
  30.          
  31.         
  32.       
  33.     </template>
  34.     <template v-else>
  35.       <WinLayout />
  36.     </template>
  37.   
  38. </template>
复制代码
vite.js+tauri2.0实现无边框圆角阴影拖拽窗体

36.png

37.png

38.png

39.png

40.png

41.png

项目采用  decorations: false  无边框模式。结合  transparent: true  和  shadow: false  实现自定义圆角阴影窗口。
  1. .vu__chatbox {height: calc(100vh); padding: 5px; overflow: hidden;}
  2. .vu__layout {
  3.   background-color: #f5f5f5;
  4.   overflow: hidden;
  5.   height: 100%; width: 100%;
  6.   position: relative; z-index: 100;
  7.   border-radius: 8px;
  8.   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);
  9. }
复制代码

  • tauri2.0自定义系统最小化/最大化/关闭
42.png

43.png
  1. <template>
  2.   
  3.    
  4.       <i ></i>
  5.       
  6.         <i  :></i>
  7.       
  8.       <i ></i>
  9.    
  10.   
  11. </template>
复制代码
tauri设置无边框窗口后，拖拽功能直接在需要拖拽的元素设置  data-tauri-drag-region  属性，另外tauri还支持css设置拖拽功能。
  1. // 拖拽
  2. .vu__drag {-webkit-app-region: drag;}
  3. // 取消拖拽
  4. .vu__undrag {-webkit-app-region: no-drag;}
复制代码
tauri2+vue3自定义托盘闪烁|托盘右键菜单

44.png

45.png

src-tauri/src目录新建一个tray.rs托盘图标文件。
46.png
  1. /**
  2. * 自定义托盘图标
  3. */
  5. use tauri::{
  6.   tray::{MouseButton, TrayIconBuilder, TrayIconEvent}, Emitter, Manager, Runtime
  7. };
  9. pub fn tray_create<R: Runtime>(app: &tauri::AppHandle<R>) -> tauri::Result<()> {
  10.   let _ = TrayIconBuilder::with_id("tray")
  11.     .tooltip("TAURI-WINCHAT")
  12.     .icon(app.default_window_icon().unwrap().clone())
  13.     .on_tray_icon_event(|tray, event| match event {
  14.       TrayIconEvent::Click {
  15.         id: _,
  16.         position,
  17.         rect: _,
  18.         button,
  19.         button_state: _,
  20.       } => match button {
  21.         MouseButton::Left {} => {
  22.           let windows = tray.app_handle().webview_windows();
  23.           for (key, value) in windows {
  24.             println!("点击左键: {}", key);
  25.             if key == "main-login" || key == "main" {
  26.               value.show().unwrap();
  27.               value.unminimize().unwrap();
  28.               value.set_focus().unwrap();
  29.             }
  30.           }
  31.         }
  32.         MouseButton::Right {} => {
  33.           println!("点击右键");
  34.           tray.app_handle().emit("tray_contextmenu", position).unwrap();
  35.         }
  36.         _ => {}
  37.       },
  38.       TrayIconEvent::Enter {
  39.         id: _,
  40.         position,
  41.         rect: _,
  42.       } => {
  43.         println!("鼠标滑过托盘");
  44.         tray.app_handle().emit("tray_mouseenter", position).unwrap();
  45.       }
  46.       TrayIconEvent::Leave {
  47.         id: _,
  48.         position,
  49.         rect: _,
  50.       } => {
  51.         println!("鼠标离开托盘");
  52.         tray.app_handle().emit("tray_mouseleave", position).unwrap();
  53.       }
  54.       _ => {}
  55.     })
  56.     .build(app);
  57.   Ok(())
  58. }
复制代码
47.gif

托盘闪烁提醒和右键菜单文件
48.png
  1. export default async function TrayContextMenu() {
  2.   console.log('create tray contextmenu...')
  4.   const authstate = authState()
  6.   // 右键菜单宽度
  7.   let menuW = 150
  8.   // 右键菜单高度
  9.   let menuH = authstate.authorization ? 300 : 48
  11.   let webview = new WebviewWindow('win-traymenu', {
  12.     url: '/tray/contextmenu',
  13.     title: '托盘右键菜单',
  14.     width: menuW,
  15.     height: menuH,
  16.     x: window.screen.width,
  17.     y: window.screen.height,
  18.     skipTaskbar: true,
  19.     transparent: true,
  20.     shadow: false,
  21.     decorations: false,
  22.     center: false,
  23.     resizable: false,
  24.     alwaysOnTop: true,
  25.     focus: true,
  26.     visible: false
  27.   })
  29.   await webview.listen('tauri://window-created', async() => {
  30.     const win = await WebviewWindow.getByLabel('win-traymenu')
  31.     win.hide()
  32.   })
  33.   await webview.listen('tauri://blur', async() => {
  34.     const win = await WebviewWindow.getByLabel('win-traymenu')
  35.     win.hide()
  36.   })
  37.   await webview.listen('tauri://error', async(error) => {
  38.     console.log('traymenu error!', error)
  39.   })
  41.   // 监听托盘右键菜单事件
  42.   listen('tray_contextmenu', async(event) => {
  43.     console.log('tray_contextmenu: ', event)
  45.     let position = event.payload
  46.     const win = await WebviewWindow.getByLabel('win-traymenu')
  47.     if(!win) return
  49.     win.setAlwaysOnTop(true)
  50.     win.setFocus()
  51.     win.setPosition(new LogicalPosition(position.x - 5, position.y - menuH + 5))
  52.     win.show()
  53.   })
  54. }
复制代码
  1. <template>
  2.   
  3.     <template v-if="authstate.authorization">
  4.       <img src="https://www.cnblogs.com/static/tray-online.png" />我在线上
  5.       <img src="https://www.cnblogs.com/static/tray-busy.png" />忙碌
  6.       <img src="https://www.cnblogs.com/static/tray-nodisturb.png" />请勿打扰
  7.       <img src="https://www.cnblogs.com/static/tray-hide.png" />隐身
  8.       <img src="https://www.cnblogs.com/static/tray-offline.png" />离线
  9.       关闭头像闪动
  10.       设置
  11.       关于
  12.       <el-icon size="12"><Monitor /></el-icon>打开主面板
  13.     </template>
  14.     <el-icon size="12" color="red"><SwitchButton /></el-icon>退出
  15.   
  16. </template>
复制代码
综上就是Tauri2.0+Vue3实战开发桌面端聊天项目的一些知识分享，希望对大家有些帮助~
Uniapp-DeepSeek跨三端AI助手|uniapp+vue3+deepseek-v3流式ai聊天模板
vue3-webseek网页版AI问答|Vite6+DeepSeek+Arco流式ai聊天打字效果
Tauri2.0-Vue3OS桌面端os平台|tauri2+vite6+arco电脑版OS管理系统
tauri2.0-admin桌面端后台系统|Tauri2+Vite5+ElementPlus管理后台EXE程序
uniapp+vue3聊天室|uni-app+vite4+uv-ui跨端仿微信app聊天语音/朋友圈
uniapp+vue3酒店预订|vite5+uniapp预约订房系统模板(h5+小程序+App端)
最后附上两个最新electron+vue3实例项目
https://www.cnblogs.com/xiaoyan2017/p/18396212
https://www.cnblogs.com/xiaoyan2017/p/18366451
54.png

 

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

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

0

粉丝关注

11

主题发布

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