多租户企业知识库助手 · 前端基于React 18 TypeScript Vite Ant Design 5的 RAG 知识库 Web 前端配套 Spring Boot 后端。配套后端multi-tenant-knowledge配套前端multi-tenant-knowledge-frontend技术栈组件选型框架React 18函数组件 Hooks构建Vite 5 TypeScript 5.6strict 模式UIAnt Design 5 ant-design/icons路由React Router 6守卫 懒加载状态Zustand 4轻量、无模板代码HTTPAxios 1.7统一拦截器Markdownreact-markdown 9 react-syntax-highlighter remark-gfm核心特性SSE 流式问答— 自研useStreamingChatHook逐字打字机输出 闪烁光标三栏布局— 会话列表(左) / 对话区(中) / 引用来源(右)参考 Dify/FastGPT 设计代码高亮— react-syntax-highlighteroneDark 主题 一键复制 折叠引用联动—[1]标签 hover 预览 点击右侧面板高亮定位反馈闭环— / 点赞点踩 标签 评论 → 后端 API多会话管理— 侧栏列表切换/删除URL 路由/chat/:conversationId权限控制— RBACADMIN/USER控制文档上传/删除按钮显隐键盘效率— Cmd/CtrlEnter 发送、Esc 停止生成快速启动# 1. 安装依赖npminstall# 2. 开发模式需先启动后端npmrun dev# 3. 生产构建npmrun build启动后访问http://localhost:5173Vite 自动将/api/**代理到后端localhost:8080。项目结构src/ ├── api/ # Axios 实例 业务接口auth/chat/documents/billing/feedback ├── hooks/ # 自定义 HookuseAuth/useStreamingChat/useConversation/useFeedback ├── stores/ # Zustand 状态authStore/chatStore/conversationStore ├── pages/Chat/ # 聊天页三栏 流式 │ └── components/ # 10 子组件MessageBubble/StreamingMarkdown/InputBar... ├── router/ # 路由表 守卫ProtectedRoute/PublicRoute ├── layout/ # BasicLayout/AuthLayout ├── types/ # TS 类型定义与后端 DTO 对齐 └── utils/ # 工具函数storage/format页面一览页面功能登录JWT 认证自动跳转工作台统计卡 套餐信息 快捷入口文档管理上传/列表/下载/删除处理状态轮询知识问答三栏流式问答 引用来源 会话管理用量账单月度用量 / 账单明细 / 套餐切换效果图登录页文档管理知识问答流式用量概览账单明细环境要求Node.js ≥ 18推荐 20配套后端multi-tenant-knowledge配套前端multi-tenant-knowledge-frontend