AI助手Cursor辅助Vue3+Electron+大模型跨平台AI桌面聊天应用实战

AI助手Cursor辅助Vue3+Electron+大模型跨平台AI桌面聊天应用实战

网盘下载地址

以下是使用AI助手Cursor辅助开发Vue3 + Electron + 大模型跨平台AI桌面聊天应用的实战方案，整合了技术选型、架构设计、核心功能实现及优化策略：

一、技术选型与架构设计

0. 技术栈

   • 前端框架：Vue3.5（Composition API + Pinia状态管理），提供响应式UI和组件化开发能力。

   • 跨平台框架：Electron（Chromium + Node.js），支持Windows/macOS/Linux，通过BrowserWindow嵌入Vue应用。

   • 大模型集成：

     • 云端API：OpenAI GPT-4/Claude（适合快速集成，需网络请求）。
     • 本地部署：LLaMA 3/Mistral（通过child_process调用Python服务，适合隐私敏感场景）。

   • 通信机制：Electron的ipcMain（主进程）与ipcRenderer（渲染进程）实现前后端通信。

   • 数据存储：lowdb（JSON文件存储）或IndexedDB（浏览器端持久化）。

1. 架构图

   [Vue3渲染进程] ↔ [Electron IPC] ↔ [Node.js主进程] ↔ [大模型服务（云端/本地）]
   

二、开发环境搭建

0. 初始化项目

   npm create vue@latest ai-chat-app  # 选择Vue3.5模板
   cd ai-chat-app
   npm install electron lowdb openai --save  # 安装依赖
   npm install vite-plugin-electron -D     # Electron Vite插件
   

1. 配置Electron主进程

   • 创建electron/main.js：

     const { app, BrowserWindow, ipcMain } = require('electron');
     const path = require('path');
     ​
     let mainWindow;
     app.whenReady().then(() => {
       mainWindow = new BrowserWindow({
         width: 1200, height: 800,
         webPreferences: { preload: path.join(__dirname, 'preload.js') }
       });
       mainWindow.loadURL(process.env.NODE_ENV === 'development' 
           ? 'http://localhost:5173' 
           : `file://${path.join(__dirname, '../dist/index.html')}`);
     });
     ​
     // 示例：接收渲染进程消息并调用大模型
     ipcMain.on('chat', async (event, prompt) => {
       const response = await callModelAPI(prompt); // 调用云端/本地模型
       event.reply('chat-reply', response);
     });
     

2. 配置Vite（支持Electron）

   • 在vite.config.js中添加：

     import electron from 'vite-plugin-electron';
     export default defineConfig({
       plugins: [vue(), electron({ entry: 'electron/main.js' })]
     });
     

三、核心功能实现

0. AI聊天功能

   • 云端API调用（OpenAI示例） ：

     // src/services/api.js
     import axios from 'axios';
     export const callModelAPI = async (prompt) => {
       const response = await axios.post('https://api.openai.com/v1/chat/completions', {
         model: 'gpt-4',
         messages: [{ role: 'user', content: prompt }]
       }, { headers: { Authorization: `Bearer YOUR_API_KEY` } });
       return response.data.choices[0].message.content;
     };
     

   • 本地模型调用（Python服务示例） ：

     // 在主进程中启动Python服务
     const { spawn } = require('child_process');
     const modelProcess = spawn('python', ['model_server.py']);
     modelProcess.stdout.on('data', (data) => {
       mainWindow.webContents.send('model-response', data.toString());
     });
     

1. 消息记录与存储

   • 使用lowdb存储聊天记录：

     // src/store/messages.js
     import { low } from 'lowdb';
     import { FileSync } from 'lowdb/adapters/FileSync';
     const adapter = new FileSync('db.json');
     const db = low(adapter);
     db.data ||= { messages: [] };
     export const saveMessage = (role, content) => {
       db.data.messages.push({ role, content });
       db.write();
     };
     

2. Vue组件实现聊天界面

   <template>
     <div class="chat-container">
       <div v-for="(msg, index) in messages" :key="index" :class="['message', msg.role]">
         {{ msg.content }}
       </div>
       <input v-model="input" @keyup.enter="sendMessage" placeholder="输入消息..." />
     </div>
   </template>
   ​
   <script setup>
   import { ref, onMounted } from 'vue';
   import { ipcRenderer } from 'electron';
   import { saveMessage } from './store/messages';
   ​
   const messages = ref([]);
   const input = ref('');
   ​
   const sendMessage = () => {
     if (!input.value.trim()) return;
     saveMessage('user', input.value);
     ipcRenderer.send('chat', input.value);
     input.value = '';
   };
   ​
   ipcRenderer.on('chat-reply', (event, response) => {
     saveMessage('ai', response);
     messages.value.push({ role: 'ai', content: response });
   });
   </script>
   

四、优化策略

0. 性能优化

   • 模型预加载：在Electron应用启动时加载本地模型（如modelProcess.spawn提前初始化）。
   • 缓存机制：对高频查询结果使用localStorage或IndexedDB缓存。
   • 懒加载：按需加载Vue组件（如<Suspense>配合异步组件）。

1. 安全增强

   • 上下文隔离：在Electron中启用contextIsolation: true，通过preload.js暴露安全API。
   • API密钥保护：将OpenAI密钥存储在环境变量中（.env文件），避免硬编码。

2. 跨平台适配

   • 系统托盘：在macOS/Windows/Linux上实现统一的托盘菜单。
   • 主题切换：使用CSS变量或Tailwind CSS实现暗黑/明亮模式。

五、扩展功能

0. 插件系统：通过Electron的protocol注册自定义协议，支持动态加载插件。
1. 语音交互：集成Web Speech API实现语音输入/输出。
2. 多语言支持：使用Vue I18n实现国际化。

六、部署与打包

0. 打包配置

   • 在package.json中添加Electron Builder脚本：

     "scripts": {
       "build": "vite build",
       "electron:build": "electron-builder"
     }
     

   • 生成跨平台安装包：

     npm run build && npm run electron:build
     

1. 自动更新：使用Electron Builder的autoUpdater模块实现增量更新。