基于React19+Arco+Zustand5接入DeepSeek-V4网页版仿豆包/Kimi流式AI系统

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

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 /> },
]

return (
  <>
    <div className={clsx('rai__sidebar', {'collapsed': collapsed})}>
      <Button className='rai__sidebar-collapse' shape='circle' onClick={handleCollapse}><div className='flex-c'><IconLayout style={{fontSize: 16}} /></div></Button>
      <aside className='rai__sidebar-aside flex1 flexbox flex-col'>
        <div className='rai__aside-head'>
          <div className='logo flexbox flex-alignc' onClick={()=>navigate('/')}><i className='iconfont ai-deepseek' style={{fontSize: 28}}></i><span className='fw-700 ff-ar' style={{fontSize: 16}}>react19-webseek</span></div>
          <div className='btn-create flex-c' onClick={handleCreate}><i className='iconfont ai-newchat'></i>新建对话<span className='shortkey'>(Ctrl+K)</span></div>
        </div>
        <div className='rai__aside-navwrap flexbox flex-col'>
          <div className={clsx('rai__aside-navitem', {'active': pathname == '/aihub'})} onClick={()=>navigate('/aihub')}><span className='icon'><IconCompass /></span><div className='title'>AI 导航</div></div>
          <Dropdown
            position='rt'
            droplist={
              <Menu style={{minWidth: 150, marginLeft: 10}}>
                <Menu.Item><div className='flexbox flex-alignc' style={{gap: 5}}><i className='iconfont ai-aisousou'></i>AI搜索</div></Menu.Item>
                <Menu.Item><div className='flexbox flex-alignc' style={{gap: 5}}><i className='iconfont ai-fanyi'></i>快速翻译</div></Menu.Item>
                <Menu.Item><div className='flexbox flex-alignc' style={{gap: 5}}><i className='iconfont ai-xiezuo'></i>帮我写作</div></Menu.Item>
                <Menu.Item><div className='flexbox flex-alignc' style={{gap: 5}}><i className='iconfont ai-tuxiang'></i>图像生成</div></Menu.Item>
                <Menu.Item><div className='flexbox flex-alignc' style={{gap: 5}}><i className='iconfont ai-aicode'></i>AI编程</div></Menu.Item>
              </Menu>
            }
          >
            <div className='rai__aside-navitem'><span className='icon'><IconCommand /></span><div className='title'>AI 技能</div><IconRight /></div>
          </Dropdown>
        </div>
        {/* 对话列表 */}
        <div className='rai__aside-sessions flex1 flexbox flex-col'>
          <div className='rai__aside-navwrap' style={{paddingTop: 0, paddingBottom: 0}}>
            <div className='rai__aside-navitem plain'><span className='icon'><IconHistory /></span><div className='title'>最近对话</div><i className='clean iconfont ai-clean' onClick={handleClean}></i></div>
          </div>
          <div className='rai__sessionwrap flex1'>
            <Rscroll size={5}>
              {sessions.length ?
                <ul className='rai__sessionlist'>
                  ...
                </ul>
                :
                <Empty icon={<IconEmpty style={{fontSize: 32}} />} description='暂无对话' />
              }
            </Rscroll>
          </div>
        </div>
        {/* 底部 */}
        <div className='rai__aside-navwrap'>
          ...
        </div>
      </aside>
    </div>
  </>
)

const completion = await openai.chat.completions.create({
  // 多轮会话
  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)
})