2026/7正式版deepseek-v4+react19仿豆包/kimi网页版ai智能聊天系统

时间：2026-07-29 12:21:58 编辑：袖梨来源：一聚教程网

上一周有开发一款react19+deepseek搭建h5版流式智能ai助手。今天来分享最新研发的react19+arco-design+zustand5+deepseek-v4搭建web网页版智能ai对话系统ReactWebAI。

智能ai对话模板h5版：DeepSeek-V4+React19+Zustand5+Arco+Markdown实战

浅色+深色界面、深度思考链、katex公式以及mermaid、echarts图表展示等功能，均由深度接入deepseek-v4-flash大模型的react19-webai支持。

采用的技术

vscode：编码工具
技术框架：react^19.2.7+react-router^7.18.1
AI智能模型：DeepSeek-V4-Flash + OpenAI
@arco-design/mobile-react^2.39.1：组件库
zustand^5.0.14：状态管理
markdown解析：react-markdown^10.1.0
echarts图表：echarts^6.1.0
rehype-highlight^7.0.2：高亮插件
katex渲染：rehype-katex^7.0.1

项目框架结构

环境变量配置：react

# 项目名称VITE_APPNAME = 'React19-Web-DeepSeek'# 运行端口默认http://localhost:5173/VITE_PORT = 3001# 运行 yarn dev 时自动打开浏览器VITE_OPEN = true# 开启httpsVITE_HTTPS = false# 是否删除生产环境consoleVITE_DROP_CONSOLE = true# DeepSeek API配置VITE_DEEPSEEK_API_KEY = 替换为你的 API KeyVITE_DEEPSEEK_BASE_URL = https://api.deepseek.com

布局模板：react19-webai

react-router v7路由管理

import { lazy, Suspense } from 'react'import { useRoutes, Navigate, Outlet } from 'react-router-dom'import { Spin } from '@arco-design/web-react'import { appStore } from '@/store/app'// 引入路由页面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'))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 appState = appStore()return appState.isLogged ? (children) : (<Navigate to='/login' replace />)}// 路由占位模板const RouterLayout = () => (<div className='rai__container'><div className='rai__layout flexbox flex-col'><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: '*', element: <Error404 /> },]},// 登录/注册{ path: '/login', element: <Login /> },{ path: '/register', element: <Register /> },]

入口文件app.jsx

import { HashRouter } from 'react-router-dom'import { appStore } from '@/store/app'// 引入路由配置import Router from './router'function App() {const appState = appStore()appState.updateTheme()return (<><HashRouter><Router /></HashRouter></>)}export default App