首发Electron41+Vite8.0+Vue3+DeepSeek打造桌面版AI流式输出私人助手

xiaoyan_2018

728人浏览 · 2026-03-26 22:17:41

xiaoyan_2018 · 2026-03-26 22:17:41 发布

electron41+vite8跨平台打造你的专属AI对话助手！

基于vite8+electron41+vue3+arco+openai调用deepseek打造高颜值AI流式回答助手。

在这里插入图片描述

项目知识点

编辑器：Vscode
跨平台框架：electron^41.0.3
前端框架：vite^8.0.1+vue3.5.30+vue-router^5.0.4
大模型框架：deepseek-v3.2+openai
组件库：arco-design^2.57.0
状态管理：pinia^3.0.4
markdown解析：markdown-it^14.1.1
打包工具：electron-builder^26.8.1
vite桥接electron插件：vite-plugin-electron^0.29.1

在这里插入图片描述

项目功能清单

基于Electron41+Vite8接入DeepSeek流式打字输出，丝滑流畅
内置light+dark主题
支持深度思考R1模式
支持Latex数学公式支持Mermaid图表渲染（拖拽、缩放、下载）
支持代码块sticky浮动粘性、横向滚动、代码高亮/复制/下载代码
支持上下文多轮对话、本地存储会话
支持链接跳转、图片预览功能

在这里插入图片描述

项目结构目录

在这里插入图片描述

electron41-vite8-ai客户端ai系统已经更新到我的原创作品集。

Electron41+Vite8+DeepSeek桌面版AI流式会话模板Exe

在这里插入图片描述

入口配置

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

import { launchApp } from '@/windows/actions'

// 引入路由/状态配置
import Router from './router'
import Pinia from './pinia'

// 引入插件配置
import Plugins from './plugins'

launchApp().then(config => {
  if(config) {
    // 存储窗口配置
    window.config = config
  }

  // 初始化app实例
  createApp(App)
  .use(Router)
  .use(Pinia)
  .use(Plugins)
  .mount('#app')
})

项目运行配置

将项目根目录下.env文件里的deepseek apikey替换为自己申请的key，即可体验丝滑流式对话功能。

安装依赖 yarn install
运行项目 yarn dev
打包项目 yarn electron:build

在这里插入图片描述

接入最新deepseek大模型

支持多轮对话、对话/推理模型、流式打字输出功能。

const completion = await openai.chat.completions.create({
  // 单一会话
  /* messages: [
    {role: 'user', content: editorValue}
  ], */
  // 多轮会话
  messages: props.multiConversation ? historySession.value : [{role: 'user', content: editorValue}],
  // deepseek-chat对话模型 deepseek-reasoner推理模型
  model: sessionstate.thinkingEnabled ? 'deepseek-reasoner' : 'deepseek-chat',
  stream: true, // 流式输出
  max_tokens: 8192, // 限制一次请求中模型生成 completion 的最大 token 数(默认使用 4096)
  temperature: 0.4, // 严谨采样
})

在这里插入图片描述

项目公共模板

在这里插入图片描述

<script setup>
  import { appState } from '@/pinia/modules/app'

  import Titlebar from '@/layouts/components/titlebar/index.vue'
  import Sidebar from '@/layouts/components/sidebar/index.vue'

  const appstate = appState()
</script>

<template>
  <div class="vu__chatbot">
    <div class="vu__container" :style="{'--themeSkin': appstate.config.skin}">
      <div class="vu__layout flexbox flex-col">
        <!-- 导航栏 -->
        <Titlebar />

        <div class="vu__layout-body flex1 flexbox">
          <!-- 侧边栏 -->
          <Sidebar />

          <!-- 主面板 -->
          <div class="vu__layout-main flex1">
            <router-view v-slot="{ Component, route }">
              <keep-alive>
                <component :is="Component" :key="route.path" />
              </keep-alive>
            </router-view>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>