vue3+tauri2.0+element-plus桌面端exe聊天模板|vite5+tauri2仿QQ/微信客户端程序

分类：HTML5+

趁着国庆假期，我的又一款原创重磅新作Vue3.5+Tauri2.0+Vite5.4+Pinia2+ElementPlus跨平台实战仿QQ/微信电脑端聊天Exe程序Vue3Tauri2Chat，正式的完结了。整体UI采用全新无边框透明圆角阴影窗体。

Vue3+Tauri2.0聊天实例|tauri2+vite5+element-plus仿微信|tauri聊天应用

封装tauri2.x多开窗口管理、换肤壁纸、自定义系统托盘闪烁/右键菜单功能。实现聊天、联系人、收藏、朋友圈、短视频、我的等页面模块。

运用技术

编码工具：Vscode
技术框架：tauri2.0+vite^5.4+vue^3.5+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

目前tauri2-vue3chat聊天项目已经发布到我的原创作品集，有需要的话可以去瞅瞅~
https://gf.bilibili.com/item/detail/1107133011

tauri2-vue3chat项目布局模板

<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多窗口实践

// 朋友圈窗口  
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,  
  })  
}  

// 界面管理器  
const handleManageUI = () => {  
  winCreate({  
    label: 'win-manage',  
    url: '/win/manage',  
    title: '界面管理器',  
    width: 320,  
    height: 360,  
    resizable: false,  
    maximizable: false,  
  })  
}

之前有过一篇关于tauri2创建多窗口应用的分享文章，可以去看看。
基于Tauri2+Vite5搭建桌面端程序|tauri2+vue3多窗口|消息提醒|托盘闪烁

vue3+tauri2自定义透明圆角阴影窗体

.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);  
}

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

  // ...  

  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},  

    // 关闭前回调，会暂停实例关闭 function(done)，done用于关闭  
        beforeClose: Function  
  })  

  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>