全新研发electron41+react19+arco正式版deepseek-v4客户端ai系统exe

原创

andy2018

发布于 2026-08-03 22:40:04

1550

文章被收录于专栏：h5h5

2026年8月爆肝新作React19+Electron41+ArcoDesign快速集成deepseek-v4-flash正式版大模型，零到一纯手撸一款高颜值桌面端ai流式打字对话系统。

electron41-reactai支持light/dark主题、深度思考链、代码高亮/复制、latex公式、mermaid渲染、echarts图表展示等功能。

使用技术

跨平台框架：Electron^41.1.0
前端框架：react^19.2.7+react-router^7.18.1
大模型框架：deepseek-v4-flash+openai
组件库：@arco-design/web-react^2.66.16
状态管理：zustand^5.0.14
markdown解析：react-markdown^10.1.0
代码高亮：rehype-highlight^7.0.2
echarts图表：echarts^6.1.0
打包工具：electron-builder^26.15.3
react桥接electron插件：vite-plugin-electron^1.1.0

功能特性

支持light+dark主题界面，收缩侧边栏
支持丰富markdown，代码高亮/复制代码/下载
支持深度思考链模式
支持Katex数学公式
支持Mermaid图表渲染(拖拽/缩放/下载)
支持Echarts图表展示
支持上下文多轮对话，本地存储会话
支持链接跳转浏览器，图片预览

项目结构目录

使用最新跨平台框架electron41+react19构建项目，调用正式版deepseek-v4-flash大模型。

项目运行

首先需要自己申请一个deepseek apikey，然后替换掉项目根目录下.env文件里的key即可。

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

快速接入deepseek-v4-flash智能模型

const completion = await openai.chat.completions.create({
  // 单一会话
  /* messages: [
    {role: 'user', content: editorValue}
  ], */
  // 多轮会话
  messages: multiConversation ? historySession() : [{role: 'user', content: editorValue}],
  // 对话模型(快速模式deepseek-v4-flash 专家模式deepseek-v4-pro)
  model: 'deepseek-v4-flash',
  // 是否深度思考
  thinking: {'type': thinkingEnabled ? 'enabled' : 'disabled'},
  stream: true, // 流式输出
  max_tokens: 8192, // 限制一次请求中模型生成 completion 的最大 token 数(默认使用 4096)
  temperature: 0.4, // 严谨采样 越低越严谨(默认1)
})

项目入口配置

import '@arco-design/web-react/es/_util/react-19-adapter'
import { createRoot } from 'react-dom/client'
import './style.scss'
import App from './App.jsx'
import '@arco-design/web-react/dist/css/arco.css'

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

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

  createRoot(document.getElementById('root')).render(
    <App />
  )
})

react19路由管理

/**
 * react-router7路由配置
 */

import { lazy, Suspense, useEffect } from 'react'
import { useRoutes, useLocation, Outlet } from 'react-router-dom'
import { Spin } from '@arco-design/web-react'

import { appStore } from '@/store/app'
import { loginWindow } from '@/windows/actions'

// 引入路由页面
import Login from '@views/auth/login'
import Register from '@views/auth/register'
const Index = lazy(() => import('@views/index'))
const Aihub = lazy(() => import('@views/aihub'))
const Setting = lazy(() => import('@views/setting'))
const Error404 = lazy(() => import('@views/error/404'))
// 新窗口
const WinAbout = lazy(() => import('@views/win/about'))
const WinSetting = lazy(() => import('@views/win/setting'))

import Toolbar from '@/layouts/toolbar'
import Sidebar from '@/layouts/sidebar'

// 加载提示
const SpinLoading = () => {
  return <Spin tip='loading...' style={{width: '100%'}} />
}

// 预加载
const Lazyload = (children) => {
  return <Suspense fallback={<SpinLoading />}>{children}</Suspense>
}

// 路由鉴权验证
const RouterAuth = ({children}) => {
  const location = useLocation()
  const { isLogged } = appStore()

  useEffect(() => {
    if(!isLogged) loginWindow()
  }, [location])

  return children
}

// 路由占位模板
const RouterLayout = () => (
  <div className='rai__container'>
    <div className='rai__layout flexbox flex-col'>
      <Toolbar />
      <div className='rai__layout-body flex1 flexbox'>
        {/* 侧边栏 */}
        <Sidebar />

        <div className='rai__layout-main flex1'>
          { Lazyload(<Outlet />) }
        </div>
      </div>
    </div>
  </div>
)

const routes = [
  {
    path: '/',
    element: <RouterAuth><RouterLayout /></RouterAuth>,
    children: [
      // 首页
      { index: true, element: <Index /> },
      // ai导航
      { path: '/aihub', element: <Aihub /> },
      // 我的模块
      { path: '/setting', element: <Setting /> },
    ]
  },
  // 新窗口页面
  {
    path: '/win',
    children: [
      // 关于
      { path: 'about', element: <WinAbout />},
      // 设置
      { path: 'setting', element: <WinSetting />},
    ]
  },
  // 404模块
  { path: '*', element: <Error404 /> },
  // 登录/注册
  { path: '/login', element: <Login /> },
  { path: '/register', element: <Register /> },
]