Electron41 + Vite8打造流式输出客户端AI助手

原创

andy2018

发布于 2026-03-27 08:52:47

1480

文章被收录于专栏：h5h5

从零开始:用electron41+vite8.0+Vue 3 + DeepSeek搭建一个支持流式输出的 AI 对话界面系统。

功能支持性

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

项目框架目录

基于Electron41跨平台框架整合Vite8.0全家桶，对接DeepSeek api大模型。

项目入口配置

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')
})

通用布局模板

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