deepseek-electron基于Electron35+Vue3.5仿deepseek/豆包ai客户端助手

星夢妙者
发布: 2025-05-13 09:08:11
原创
485人浏览过

2025跨平台ai实战-electron35+vite6对接deepseek-v3聊天模型搭建客户端ai聊天助手。

deepseek-electron基于Electron35+Vue3.5仿deepseek/豆包ai客户端助手

Electron-DeepChat支持流式stream输出、暗黑+亮色主题、代码高亮等功能。

deepseek-electron基于Electron35+Vue3.5仿deepseek/豆包ai客户端助手
使用技术技术框架:vite^6.2.0+vue^3.5.13+vue-router^4.5.0大模型ai框架:DeepSeek-V3-0324 + OpenAI跨平台框架:electron^35.1.2组件库:arco-design^2.57.0 (字节桌面端组件库)状态插件:pinia^3.0.1会话缓存:pinia-plugin-persistedstate^4.2.0高亮插件:highlight.js^11.11.1markdown解析:markdown-it
deepseek-electron基于Electron35+Vue3.5仿deepseek/豆包ai客户端助手
功能特点基于跨平台Electron35框架,接入DeepSeek-V3,性能更丝滑支持各种代码高亮效果、易于展示分享代码片段支持上下文多轮对话、提示词生成图片及预览功能支持多窗口、亮色+暗黑主题支持新窗口打开会话里面的链接采用arco-design组件库,风格一致性
deepseek-electron基于Electron35+Vue3.5仿deepseek/豆包ai客户端助手
项目结构目录

基于最新跨平台框架Electron35和Vite6构建工具搭建项目模板,整合最新DeepSeek-V3聊天大模型。

deepseek-electron基于Electron35+Vue3.5仿deepseek/豆包ai客户端助手
环境变量.env配置

需先申请一个deepseek apikey,替换掉.env文件里的key即可快速体验聊天ai功能。

代码语言:actionscript复制
# 项目名称VITE_APPNAME = 'Electron35-DeepSeek'# 运行端口VITE_PORT = 3003# 是否加载调试工具devtoolsVITE_DEVTOOLS = true# 是否打开调试工具devtoolsVITE_OPEN_DEVTOOLS = true# 是否删除生产环境consoleVITE_DROP_CONSOLE = true# DeepSeek API配置VITE_DEEPSEEK_API_KEY = 替换为你的 API KeyVITE_DEEPSEEK_BASE_URL = https://api.deepseek.com
登录后复制
项目入口配置main.js代码语言:actionscript复制
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')})
登录后复制

立即进入豆包AI人工智官网入口”;

立即学习豆包AI人工智能在线问答入口”;

deepseek-electron基于Electron35+Vue3.5仿deepseek/豆包ai客户端助手
deepseek-electron基于Electron35+Vue3.5仿deepseek/豆包ai客户端助手
deepseek-electron基于Electron35+Vue3.5仿deepseek/豆包ai客户端助手
deepseek-electron基于Electron35+Vue3.5仿deepseek/豆包ai客户端助手
deepseek-electron基于Electron35+Vue3.5仿deepseek/豆包ai客户端助手
deepseek-electron基于Electron35+Vue3.5仿deepseek/豆包ai客户端助手
deepseek-electron基于Electron35+Vue3.5仿deepseek/豆包ai客户端助手
deepseek-electron基于Electron35+Vue3.5仿deepseek/豆包ai客户端助手
项目框架模板

立即进入豆包AI人工智官网入口”;

立即学习豆包AI人工智能在线问答入口”;

deepseek-electron基于Electron35+Vue3.5仿deepseek/豆包ai客户端助手
deepseek-electron基于Electron35+Vue3.5仿deepseek/豆包ai客户端助手
代码语言:actionscript复制
<script setup>  import Titlebar from '@/layouts/components/titlebar/index.vue'  import Sidebar from '@/layouts/components/sidebar/index.vue'</script><template>  <div class="vu__container">    <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></template>
登录后复制

当历史聊天对话超过一定高度后,会出现滚动条。

deepseek-electron基于Electron35+Vue3.5仿deepseek/豆包ai客户端助手
deepseek-electron基于Electron35+Vue3.5仿deepseek/豆包ai客户端助手
deepseek-electron基于Electron35+Vue3.5仿deepseek/豆包ai客户端助手
deepseek-electron基于Electron35+Vue3.5仿deepseek/豆包ai客户端助手
deepseek-electron基于Electron35+Vue3.5仿deepseek/豆包ai客户端助手
deepseek-electron基于Electron35+Vue3.5仿deepseek/豆包ai客户端助手
deepseek-electron基于Electron35+Vue3.5仿deepseek/豆包ai客户端助手
deepseek-electron基于Electron35+Vue3.5仿deepseek/豆包ai客户端助手
路由配置文件

立即进入豆包AI人工智官网入口”;

立即学习豆包AI人工智能在线问答入口”;

deepseek-electron基于Electron35+Vue3.5仿deepseek/豆包ai客户端助手
代码语言:actionscript复制
import { createRouter, createWebHashHistory } from 'vue-router'import { authState } from '@/pinia/modules/auth'import Layout from '@/layouts/index.vue'import { loginWindow } from '@/windows/actions'// 批量导入路由const modules = import.meta.glob('./modules/*.js', { eager: true })const patchRouters = Object.keys(modules).map(key => modules[key].default).flat()/** * meta配置 * @param meta.requireAuth 需登录验证页面 */const routes = [  ...patchRouters,  // 错误模块  {    path: '/:pathMatch(.*)*',    redirect: '/404',    component: Layout,    meta: {      title: '404 error',    },    children: [      {        path: '404',        component: () => import('@/views/error/404.vue'),      }    ]  },]const router = createRouter({  history: createWebHashHistory(),  routes,})// 全局路由钩子拦截router.beforeEach((to, from) => {  const authstate = authState()  // 登录验证  if(to?.meta?.requireAuth && !authstate.authorization) {    // console.log('你还未登录!')    loginWindow()  }})router.afterEach(() => {  // ...})router.onError(error => {  console.warn('[Router Error]', error)})export default router
登录后复制
编辑框模板

立即进入豆包AI人工智官网入口”;

立即学习豆包AI人工智能在线问答入口”;

deepseek-electron基于Electron35+Vue3.5仿deepseek/豆包ai客户端助手
deepseek-electron基于Electron35+Vue3.5仿deepseek/豆包ai客户端助手
代码语言:actionscript复制
<template>  <div class="v3ai__footbar flexbox flex-col">    <!-- 技能栏 -->    <div v-if="skillbar" class="v3ai__skills flexbox flex-alignc">      ...    </div>    <!-- 编辑栏 -->    <div class="v3ai__inputbox flexbox flex-col">      <div class="v3ai__editor flexbox">        ...      </div>      <!-- 操作栏 -->      <div class="v3ai__tools flexbox flex-alignc">        <div class="option flex1 flexbox">          <div class="btn" :class="{'active': isDeep}" @click="isDeep =! isDeep"><i class="iconfont ai-deepthink"></i> 深度思考 <span class="fs-12">(R1)</span></div>          <div class="btn" :class="{'active': isNetwork}" @click="isNetwork =! isNetwork"><i class="iconfont ai-network"></i> 联网</div>        </div>        <a-dropdown trigger="hover" :show-arrow="false" position="lb" :content-style="{'min-width': '250px'}">          <a-button shape="circle"><icon-attachment size="18" /></a-button>          <template #content>            <a-dgroup>              <template #title><div style="margin-bottom: 5px;">从网盘添加</div></template>              <a-doption value="wx"><icon-more /> 选择网盘文件</a-doption>            </a-dgroup>            <a-dgroup>              <template #title><div style="margin-bottom: 5px;">从本地添加</div></template>              <a-doption value="wx"><icon-apps /> 上传文件</a-doption>              <a-dsubmenu trigger="hover" position="rb" :popup-translate="[8, 8]" value="option-1" :content-style="{'min-width': '125px'}">                <template #default><icon-apps /> 上传代码</template>                <template #content>                  <a-doption value="pyq"><icon-apps /> 代码文件</a-doption>                  <a-doption value="qq"><icon-apps /> 代码文件夹</a-doption>                  <a-doption value="qq"><icon-apps /> GitHub仓库</a-doption>                </template>              </a-dsubmenu>            </a-dgroup>          </template>        </a-dropdown>        <a-tooltip content="截图提问" position="top" mini>          <a-button shape="circle"><icon-scissor size="18" @click="handleCut" /></a-button>        </a-tooltip>        <a-dropdown :show-arrow="false" position="top" :popup-translate="[-10, -5]" :content-style="{'min-width': '160px'}">          <a-button shape="circle"><icon-plus size="18" /></a-button>          <template #content>            <a-doption value="image"><icon-file-image /> 图片</a-doption>            <a-doption value="file"><icon-file /> 本地文件</a-doption>            <a-doption value="pdf"><icon-file-pdf /> PDF文档分析</a-doption>            <a-doption value="page"><icon-cloud /> 网页总结</a-doption>          </template>        </a-dropdown>        <a-divider direction="vertical" style="margin: 0 7px;" />        <a-button class="submit" type="primary" shape="circle" :disabled="!editorText?.trim() || sessionstate.loading" @click="handleSubmit">          <icon-arrow-up v-if="!sessionstate.loading" size="20" />          <icon-loading v-else size="18" />        </a-button>      </div>    </div>  </div></template>
登录后复制

立即进入豆包AI人工智官网入口”;

立即学习豆包AI人工智能在线问答入口”;

热文推荐

以上就是deepseek-electron基于Electron35+Vue3.5仿deepseek/豆包ai客户端助手的详细内容,更多请关注php中文网其它相关文章!

豆包AI编程
豆包AI编程

智能代码生成与优化,高效提升开发速度与质量!

下载
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
最新问题
开源免费商场系统广告
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号