爆肝原创 DeepSeek-V4+React19+Zustand5+Arco+Markdown 智能ai聊天模板

佚名 2026-07-21 08:54:55

2026/7原创实战react19.2+deepseek-v4-flash+arco-mobile+openai智能ai聊天对话模板React19DeepSeek。

react19-deepseek-ai深度对接deepseek v4智能大模型。支持暗黑+亮色主题、深度思考、代码高亮/复制/下载、latex/mermaid渲染、本地存储会话等功能。

项目技术栈

编辑器：VScode
技术框架：React^19.2.7+react-router^7.18.1
大模型框架：deepseek-v4 + openai
UI组件库：@arco-design/mobile-react^2.39.1
状态管理：zustand^5.0.14
markdown解析：react-markdown^10.1.0
代码高亮/katex渲染：rehype-highlight + rehype-katex

功能特性

支持亮色+暗黑主题 ✨
支持深度思考模式 ✨
支持katex数学公式 ✨
支持渲染mermaid图表（拖拽、缩放（放大+缩小+重置）、下载）✨
支持代码块顶部sticky粘性、横向滚动、代码复制/下载代码 ✨
支持上下文多轮对话/本地存储对话 ✨
支持链接跳转、图片功能 ✨

项目框架目录

基于vite8构建react19项目模板，采用react hooks编码页面。

项目入口模板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

项目布局模板

return (<><div className='flexbox flex-col' style={{height: '100%'}}><Toolbar title={chatSession()?.title} /><div className='rai__scrollview flex1'>{chatSession() && !isEmpty(chatSession().data) ?<>{/* Chat对话 */}<div ref={scrollRef} className='rai__chatbot' onScroll={onScroll} onWheel={onWheel}><div className='rai__chatbot-sessions'>...</div>{/* 滚动到底部 */}<div className='rai__scrollbottom' onClick={scrollToBottom}><i className='iconfont ai-arrD'></i></div></div></>:<>{/* 开始 */}<div className='rai__chatbot-intro'><div className='flexbox flex-alignc' style={{ gap: '15px' }}><img src="react.svg" style={{ height: '35px' }} alt="react" /><span className="c-999 ff-ar fs-18">+</span><i className='logo iconfont ai-deepseek'></i></div><h3 className='name'><span className='txt text-gradient'>React19-DeepSeek</span></h3><p className='desc'>你身边的智能小帮手，我可以帮你搜索、答疑、写作，请把你的任务交给我吧~</p><div className='prompt'><p className='tip flex-c'><span className='flex1'>推荐问题</span><a onClick={refreshPrompt}>换一换<IconRefresh /></a></p><ul className='list'>{promptList.map((item, index) => (<li key={index}><div className='txt' onClick={() => changePrompt(item.prompt)}>{item.emoji} {item.prompt} ➝</div></li>))}</ul></div></div></>}</div>{/* 编辑器 */}<ChatEditor value={promptValue} onChange={v => setPromptValue(v)} scrollBottom={scrollToBottom} /></div></>)

react渲染katex公式/mermaid图表

// 支持删除线、表格、任务列表和网址等GitHub Flavored Markdownimport remarkGfm from 'remark-gfm'// 代码高亮import rehypeHighlight from 'rehype-highlight'import 'highlight.js/styles/atom-one-light.css'import xml from 'highlight.js/lib/languages/xml'// 支持数学公式import remarkMath from 'remark-math'import rehypeKatex from 'rehype-katex'import 'katex/dist/katex.min.css'// 渲染mermaid图表import MermaidBlock from './mermaidBlock'

封装Markdown组件。

const Markdown = memo(({ source, scrollToBottom }) => {const processedContent = useMemo(() => {return preprocessMath(source || '')}, [source])return (<ReactMarkdownchildren={processedContent}components={{// 自定义代码块，所有代码都会被pre包裹pre(props) {const { children, node, ...rest } = props// 从 children 中提取 code 元素的信息const codeElement = children?.props?.childrenconst className = children?.props?.className || ''const match = /language-(w+)/.exec(className || '')const language = match ? match[1] : 'plaintext'// 渲染mermaidif (language === 'mermaid') {return (　　　　　　　　　　<MermaidBlock code={codeElement} scrollToBottom={scrollToBottom} />)}return (<div className="md-code-block">...</div>)},// 自定义a渲染a({ href, children, node, ...rest}) {return <a {...rest} href={href} target='_blank'>{children}</a>},// 自定义img渲染img({ src, children, node, ...rest}) {return <img {...rest} src={src} onClick={() => handleImageClick(src)} />}}}remarkPlugins={[remarkGfm, remarkMath]}rehypePlugins={[rehypeKatex,[rehypeHighlight,{aliases: {xml: ['vue']}, // 支持vue语法}],]}/>)})