基于Electron25+Vite4.x仿chatgpt客户端应用ElectronChatGPT

Electron25+vue3桌面端聊天AI实例|electron仿chatgpt

基于最新前端技术栈 vite4+vue3+pinia2+vue-router 整合 electron25 跨端技术开发桌面端仿chatgpt聊天程序。支持经典+分栏布局、暗黑+明亮主题模式、多开窗口功能。

在这里插入图片描述

技术框架

编辑器:VScode
使用技术:Electron25+Vite4+Vue3+Pinia2
组件库:VEPlus (基于vue3组件库)
打包插件:electron-builder^23.6.0
代码高亮:highlight.js^11.7.0
markdown插件:vue3-markdown-it
本地缓存:pinia-plugin-persistedstate^3.1.0
electron整合vite插件:vite-plugin-electron^0.11.2

在这里插入图片描述
在这里插入图片描述
electron-chatgpt 使用的electron25和vite4.x融合开发,运行构建速度非常快,明显改善了之前electron多开窗口卡顿问题。

在这里插入图片描述

electron整合vite4创建桌面端程序

electron+vite4窗口多开管理|electron新建多窗口

项目结构目录

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

布局结构

在这里插入图片描述

<template><div class="vegpt__layout flexbox flex-col"><!-- //操作工具栏 --><Toolbar /><div class="ve__layout-body flex1 flexbox"><!-- //侧边栏 --><div class="ve__layout-menus flexbox" :class="{'hidden': store.config.collapse}"><aside class="ve__layout-aside flexbox flex-col"><ChatNew /><Scrollbar class="flex1" autohide size="4" gap="1"><ChatList /></Scrollbar><ExtraLink /><Collapse /></aside></div><!-- //主区域 --><div class="ve__layout-main flex1 flexbox flex-col"><Main /></div></div></div>
</template>

electron运行主入口

在项目根目录新建一个electron-main.js用来作为主进程入口文件。

在这里插入图片描述

/*** 主进程入口* @author YXY*/const { app, BrowserWindow } = require('electron')const MultiWindow = require('./src/multiwindow')// 关闭提示
// ectron Security Warning (Insecure Content-Security-Policy)
process.env['ELECTRON_DISABLE_SECURITY_WARNINGS'] = 'true'const createWindow = () => {let win = new MultiWindow()win.createWin({isMainWin: true})
}app.whenReady().then(() => {createWindow()app.on('activate', () => {if(BrowserWindow.getAllWindows().length === 0) createWindow()})
})app.on('window-all-closed', () => {if(process.platform !== 'darwin') app.quit()
})

然后在vite.config.js中引入vite-plugin-electron插件,并配置入口。

import { defineConfig, loadEnv } from 'vite'
import vue from '@vitejs/plugin-vue'
import electron from 'vite-plugin-electron'
import { resolve } from 'path'
import { parseEnv } from './src/utils/env'export default defineConfig(({ command, mode }) => {const viteEnv = loadEnv(mode, process.cwd())const env = parseEnv(viteEnv)return {plugins: [vue(),electron({// 主进程入口文件entry: 'electron-main.js'})],/*构建选项*/build: {/* minify: 'esbuild', // 打包方式 esbuild(打包快)|terserchunkSizeWarningLimit: 2000, // 打包大小rollupOptions: {output: {chunkFileNames: 'assets/js/[name]-[hash].js',entryFileNames: 'assets/js/[name]-[hash].js',assetFileNames: 'assets/[ext]/[name]-[hash].[ext]',}} */},esbuild: {// 打包去除 console.logdrop: env.VITE_DROP_CONSOLE && command === 'build' ? ["console"] : []},/*开发服务器选项*/server: {port: env.VITE_PORT,// ...},resolve: {// 设置别名alias: {'@': resolve(__dirname, 'src'),'@assets': resolve(__dirname, 'src/assets'),'@components': resolve(__dirname, 'src/components'),'@views': resolve(__dirname, 'src/views')}}}
})

vite-plugin-electron插件用于集成electron和vite通讯功能。

目前Electron 尚未支持"type": "module",需要在package.json中去掉,并且配置 “main”: "electron-main.js", 入口。

electron自定义无边框操作栏窗口

在这里插入图片描述
在创建窗口的时候配置 frame: false ,即可创建无边框窗口。设置css3属性-webkit-app-region: drag,可对自定义操作区域进行拖拽功能。

新建components/titlebar目录

在这里插入图片描述
control.vue

<template><div class="vegpt__control ve__nodrag"><div class="vegpt__control-btns" :style="{'color': color}"><slot /><div v-if="isTrue(minimizable)" class="btn win-btn win-min" @click="handleMin"><i class="iconfont ve-icon-minimize"></i></div><div v-if="isTrue(maximizable) && winCfg.window.resizable" class="btn win-btn win-maxmin" @click="handleRestore"><i class="iconfont" :class="isMaximized ? 've-icon-maxrestore' : 've-icon-maximize'"></i></div><div v-if="isTrue(closable)" class="btn win-btn win-close" @click="handleQuit"><i class="iconfont ve-icon-close"></i></div></div></div>
</template><script setup>/*** 封装操作按钮* @author YXY  Q:282310962*/import { onMounted, ref } from 'vue'import { winCfg, setWin } from '@/multiwindow/actions'import { appStore } from '@/pinia/modules/app'import { isTrue } from '@/utils'const appState = appStore()const props = defineProps({// 标题颜色color: String,// 窗口是否可以最小化minimizable: { type: [Boolean, String], default: true },// 窗口是否可以最大化maximizable: { type: [Boolean, String], default: true },// 窗口是否可以关闭closable: { type: [Boolean, String], default: true }})// 是否最大化let isMaximized = ref(false)onMounted(() => {window.electronAPI.invoke('win__isMaximized').then(data => {console.log(data)isMaximized.value = data})window.electronAPI.receive('win__hasMaximized', (e, data) => {console.log(data)isMaximized.value = data})})// 最小化const handleMin = () => {window.electronAPI.send('win__minimize')}// 最大化/还原const handleRestore = () => {window.electronAPI.invoke('win__max2min').then(data => {console.log(data)isMaximized.value = data})}// 关闭窗体const handleQuit = () => {if(winCfg.window.isMainWin) {MessageBox.confirm('应用提示', '是否最小化到托盘, 不退出程序?', {type: 'warning',cancelText: '最小化至托盘',confirmText: '残忍退出',confirmType: 'danger',width: 300,callback: action => {if(action == 'confirm') {appState.$reset()setWin('close')}else if(action == 'cancel') {setWin('hide', winCfg.window.id)}}})}else {setWin('close', winCfg.window.id)}}
</script>

在这里插入图片描述
index.vue

<template><div class="vegpt__titlebar" :class="{'fixed': isTrue(fixed), 'transparent fixed': isTrue(transparent)}"><div class="vegpt__titlebar-wrapper flexbox flex-alignc ve__drag" :style="{'background': bgcolor, 'color': color, 'z-index': zIndex}"><slot name="left"><img src="/logo.png" height="20" style="margin-left: 10px;" /></slot><div class="vegpt__titlebar-title" :class="{'center': isTrue(center)}"><slot name="title">{{ title || winCfg.window.title || env.VITE_APPTITLE }}</slot></div><!-- 控制按钮 --><Control :minimizable="minimizable" :maximizable="maximizable" :closable="closable"><slot name="btn" /></Control></div></div>
</template>

electron创建系统托盘菜单

在这里插入图片描述
创建系统托盘图标文件tray.ico放在resource目录下。
在这里插入图片描述

// 创建托盘图标
createTray() {console.log('——+——+——Start Create Tray!')console.log(__dirname)console.log(join(process.env.ROOT, 'resource/tray.ico'))const trayMenu = Menu.buildFromTemplate([{label: '打开主界面',icon: join(process.env.ROOT, 'resource/home.png'),click: () => {try {for(let i in this.group) {let win = this.getWin(i)if(!win) return// 是否主窗口if(this.group[i].isMainWin) {if(win.isMinimized()) win.restore()win.show()}}} catch (error) {console.log(error)}}},{label: '设置中心',icon: join(process.env.ROOT, 'resource/setting.png'),click: () => {for(let i in this.group) {let win = this.getWin(i)if(win) win.webContents.send('win__ipcData', { type: 'CREATE_WIN_SETTING', value: null })}},},{label: '锁屏',icon: join(process.env.ROOT, 'resource/lock.png'),click: () => null,},{label: '关闭托盘闪烁',click: () => {this.flashTray(false)}},{type: 'separator'},{label: '关于',click: () => {for(let i in this.group) {let win = this.getWin(i)if(win) win.webContents.send('win__ipcData', { type: 'CREATE_WIN_ABOUT', value: null })}}},{label: '关闭应用并退出',icon: join(process.env.ROOT, 'resource/quit.png'),click: () => {dialog.showMessageBox(this.main, {title: '询问',message: '确定要退出应用程序吗?',buttons: ['取消', '最小化托盘', '退出应用'],type: 'error',noLink: false,  // true传统按钮样式  false链接样式cancelId: 0}).then(res => {console.log(res)const index = res.responseif(index == 0) {console.log('取消')}if(index == 1) {console.log('最小化托盘')for(let i in this.group) {let win = this.getWin(i)if(win) win.hide()}}else if(index == 2) {console.log('退出应用')try {for(let i in this.group) {let win = this.getWin(i)if(win) win.webContents.send('win__ipcData', { type: 'WIN_LOGOUT', value: null })}app.quit()} catch (error) {console.log(error)}}})}}])this.tray = new Tray(this.trayIco1)this.tray.setContextMenu(trayMenu)this.tray.setToolTip(app.name)this.tray.on('double-click', () => {console.log('double clicked')})
}

需要注意:这里图标路径很容易设置错误,显示不了图标。__dirname指向你主进程文件目录路径。
在这里插入图片描述
比如你主进程文件在 src/multiwindow/index.js,则需要返回../../ 找到resource目录。

// 根目录路径
process.env.ROOT = join(__dirname, '../../')

electron打包

一切准备就绪,项目也能正常启动运行。最后就需要配置打包。
新建一个electron-builder.json文件,用来作为electron打包配置文件。

{"productName": "Electron-ChatGPT","appId": "com.yxy.electron-chatgpt-vue3","copyright": "Copyright © 2023-present Andy","compression": "maximum","asar": true,"directories": {"output": "release/${version}"},"nsis": {"oneClick": false,"allowToChangeInstallationDirectory": true,"perMachine": true,"deleteAppDataOnUninstall": true,"createDesktopShortcut": true,"createStartMenuShortcut": true,"shortcutName": "ElectronChatGPT"},"win": {"icon": "./resource/shortcut.ico","artifactName": "${productName}-v${version}-${platform}-${arch}-setup.${ext}","target": [{"target": "nsis","arch": ["ia32"]}]},"mac": {"icon": "./resource/shortcut.icns","artifactName": "${productName}-v${version}-${platform}-${arch}-setup.${ext}"},"linux": {"icon": "./resource","artifactName": "${productName}-v${version}-${platform}-${arch}-setup.${ext}"}
}

以上就是electron25+vue3开发客户端仿chatgpt实例的一些分享,希望能喜欢~~

vue3+pinia2后台管理模板|vue3自定义轻量级后台系统

vue3+tauri跨桌面端聊天程序|tauri仿微信聊天应用

在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/30901.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

chatgpt赋能python:Python连接服务器指南

Python连接服务器指南 Python作为一种易于学习和使用的编程语言&#xff0c;越来越受到开发人员的青睐&#xff0c;尤其是在服务器连接方面。在此文章中&#xff0c;我们将介绍如何使用Python连接服务器。 1. 安装必要的库 在使用Python进行服务器连接之前&#xff0c;您需要…

吴恩达联手OpenAI上线免费课程:一个半小时学会ChatGPT Prompt

ChatGPT 来了&#xff0c;一切变化都快了起来&#xff0c;一些科技公司开始招募「prompt 工程师」。与写代码的传统计算机工程师不同&#xff0c;Prompt 工程师通过向 AI 询问一系列逻辑缜密的问题来测试系统是否存在不合理行为或问题。但具体应该怎么做&#xff0c;一直没有统…

chatgpt赋能python:Python实现表格单元格的拆分功能

Python实现表格单元格的拆分功能 随着大数据时代的到来&#xff0c;数据采集和分析变得越来越重要。而表格是一种常见的数据展现方式&#xff0c;但是有些表格中的单元格被合并了&#xff0c;不方便进行数据分析。因此&#xff0c;本文介绍如何使用Python将合并的单元格分解成…

chatgpt赋能python:用Python轻松制作电子表格:优化你的工作流程

用Python轻松制作电子表格&#xff1a;优化你的工作流程 作为一个有10年Python编程经验的工程师&#xff0c;我一直被它的方便和易用性所吸引。Python是一种高级语言&#xff0c;由于它的简单性和强大的库&#xff0c;成为了数据科学和大数据领域最流行的工具之一。借助Python…

chatgpt赋能python:Python自动处理表格

Python 自动处理表格 如果你经常需要处理大量数据&#xff0c;特别是表格数据&#xff0c;那么 Python 自动处理表格可能就会成为你的救星。Python 是一个高级语言&#xff0c;强大的工具库和函数使它成为处理数据的最佳选择之一。本文将介绍 Python 自动处理表格的方法和实践…

ChatGPT底层架构Transformer技术及源码实现(二)

ChatGPT底层架构Transformer技术及源码实现(二) Gavin大咖微信:NLP_Matrix_Space 3.2 图解Transformer精髓之架构设计、数据训练时候全生命周期、数据在推理中的全生命周期、矩阵运算、多头注意力机制可视化等 如图3-14所示,是Transformer编解码的示意图,中间有个关键内…

ChatGPT底层架构Transformer技术及源码实现(四)

ChatGPT底层架构Transformer技术及源码实现(四) 以智能对话机器人为例阐述Transformer的自编码autoencoding和自回归autoregressive语言模型内幕机制 Gavin大咖微信:NLP_Matrix_Space 如图3-33所示,是自编码语言模型,可以根据上下文的注意力进行填充,神经网络背后是向…

多种方法解决java.sql.SQLSyntaxErrorException: Unknown database ‘xxx‘的错误

文章目录 1. 复现错误2. 分析错误3. 解决错误4. 解决错误的其他方法 1. 复现错误 今天尝试创建test2的数据库&#xff0c;却报出如下错误&#xff1a; java.sql.SQLSyntaxErrorException: Unknown database test2at com.mysql.cj.jdbc.exceptions.SQLError.createSQLException…

成年人才能看懂的 80 幅图!

推荐阅读&#xff1a;成年男女欲望过剩的瞬间top7 下面这80副画 让你看清这个世界的真相&#xff01; 1 自弃者扶不起 自强者打不倒 2 人人都活在假象里 3 最大的监狱是思维监狱 4 永远不要自毁机会和前途 5 绝大部分人都是巨婴 6 我们吃的大腹便便 却又营养不良 7 平等并不意味…

AI写剧本炸场戏剧节!DeepMind出品,马斯克看了直夸,网友看到接口悟了

文&#xff5c;羿阁 萧箫 发自 凹非寺源&#xff5c;量子位 OpenAI的ChatGPT大火后&#xff0c;DeepMind终于也坐不住了&#xff01; 这次&#xff0c;他们推出一款名为“Dramatron”的新AI&#xff0c;用上它人人都可以变身编剧或作家。 只需给出一句话大纲&#xff0c;Dramat…

被chatGPT割了一块钱韭菜

大家好&#xff0c;才是真的好。 chatGPT热度一直上升&#xff0c;让我萌生了一个胆大而创新的想法&#xff0c; 把chatGPT嵌入到Notes客户机中来玩。 考虑到我已经下载了一个chatGPT的Notes应用&#xff08;请见《ChatGPT APIs for HCL DOMINO》&#xff09;&#xff0c;想着…

advisor纯电动汽车仿真、纯电动公交、纯电动客车、纯电动汽车动力性仿真

advisor纯电动汽车仿真、纯电动公交、纯电动客车、纯电动汽车动力性仿真、经济性仿真、续航里程仿真&#xff1b;基于advisor的后驱纯电动汽车、基于advisor的四驱轮毂电机电动汽车、 基于advisor的混合动力汽车、混合动力客车/公交、串联混合动力、并联混合动力汽车动力性仿真…

FSEC大学生电动方程式赛车电气系统设计

摘 要 近年来新能源汽车在中国掀起了一股热潮&#xff0c;而电动方程式赛车也因此得到了更广泛的关注。电控系统是电动方程式赛车的核心&#xff0c;涉及嵌入式、传感器、电力拖动、无线数据传输等多项技术。本文以Attacker赛车队的第二代电动方程式赛车为研究对象&#xff…

考虑不同充电需求的电动汽车协调充电调度方法 提出了一种电动汽车(EV)的协调充电调度方法

考虑不同充电需求的电动汽车协调充电调度方法 代码复现&#xff0c;详细注释9 1、提出了一种电动汽车&#xff08;EV&#xff09;的协调充电调度方法。 2、在所提出的方法中估计了电动汽车用户充电需求的紧迫性。 3、根据充电需求的紧迫性为电动汽车选择最佳充电模式。 4、该模…

运用蒙特卡洛法模拟电动汽车常规充电、快速充电、更换电池充电曲线及对日负荷曲线的影响

运用蒙特卡洛法模拟电动汽车常规充电、快速充电、更换电池充电曲线及对日负荷曲线的影响&#xff1b;无序充电、受控充电、受控充放电曲线及对日负荷曲线的影响 ID:1950679239559581唏嘘buling

城市轨道交通线路进站客流控制与列车跳停协同优化的Q-learning方法

1.文章信息 《Q-learning approach to coordinated optimization of passenger inflow control with train skip-stopping on a urban rail transit line》是2019年发表在Computers & Industrial Engineering上的一篇文章。 2.摘要 在城市轨道交通(URT)线路过于拥挤的情况下…

文献阅读——出租车出行预测:Real-Time Taxi-Passenger Prediction with L-CNN

北邮牛琨老师的大作*《Real-Time Taxi-Passenger Prediction with L-CNN》* 写一下自己的收获。 本文是结合CNN与RNN&#xff08;LSTM&#xff09;来进行出行预测。 一、 基本思路 CNN提取空间特征&#xff0c;LSTM提取时间特征。 划分时间间隔&#xff08;预测最小单元&…

名帖237 赵雍 行书《彰南八咏诗》

《中国书法名帖目录》 赵雍《彰南八咏诗》页&#xff0c;纸本&#xff0c;行书。北京故宫博物院藏。 赵雍《彰南八咏诗》 钤“仲穆”印。卷前为执柔道人篆书“彰南八咏”&#xff0c;卷后有刘麟、顾应祥题诗。本幅鉴藏印有“陈子受家珍藏”、“子受秘玩”等3方。 赵雍书法结…

每日习字|2020-05-30

西塞山前白鹭飞&#xff0c;桃花流水鳜鱼肥。青箬笠&#xff0c;绿蓑衣&#xff0c;斜风细雨不须归。 毕竟西湖六月中&#xff0c;风光不与四时同。接天莲叶无穷碧&#xff0c;映日荷花别样红。 故人西辞黄鹤楼&#xff0c;烟花三月下扬州&#xff0c;孤帆远影碧空尽&#xff0…

徽州臭鳜鱼渐成“网红年货”

钟少华品尝臭鳜鱼 江伟 摄 中新网黄山1月24日电 (余皓 江伟 汪娜)臭鳜鱼&#xff0c;是中国八大传统菜系之一——徽菜的代表作&#xff0c;距今已有200多年历史。徽州人用腌制和发酵的方法&#xff0c;将鳜鱼做出了独特鲜美的味道。春节将近&#xff0c;作者来到安徽黄山&…