多模型AI对话聊天平台系统，H5端直接使用，后台可视化管...

zhang*** · 2026-6-30 08:12:50

多模型AI对话聊天平台系统，H5端直接使用，后台可视化管理，支持 DeepSeek 等九大模型自由切换

复制代码

---
## 项目功能详述
### 一、H5 用户对话端
**页面驱动的对话系统**
系统通过 URL 中的页面标识（slug）加载不同的对话页面。每个页面拥有独立的标题、欢迎语、系统提示词、快捷问题列表、可用模型集合以及底部导航菜单。用户访问的 URL 路径若不存在对应页面，系统自动回退到数据库中的首个页面。所有未匹配路由均会被兜底重定向到对话页。
**多模型切换对话**
页面顶部以胶囊标签栏形式展示该页面已配置的可用大模型。用户可随时点击切换模型，切换后自动加载该模型对应的历史对话记录。当前使用的模型名称显示在标题栏右侧。
**流式对话与实时反馈**
用户输入问题后，系统通过 SSE（服务端推送事件）协议与后端建立流式连接，AI 回复内容逐字符实时渲染到对话区域。流式输出过程中，消息气泡末尾显示闪烁光标动画，让用户感知生成进行中。支持随时点击停止按钮中断生成。
**消息管理与操作**
每条 AI 回复消息底部固定显示操作按钮栏，包含四项功能：
- 分享：生成当前页面 URL 的二维码并弹出弹窗，支持下载二维码图片和复制链接
- 复制：将回复文本写入系统剪贴板
- 重新生成：删除该组用户消息与 AI 回复，自动将原问题重新填入输入框并触发发送
- 渲染模式切换：在 Markdown 渲染与纯文本显示之间切换，纯文本模式下对 HTML 特殊字符做转义处理
**输入体验**
输入框支持多行文本输入，Enter 键发送消息，Ctrl+Enter 组合键换行。正确处理中文输入法组合输入状态，避免输入法确认过程中误触发发送。输入框在流式生成期间自动禁用。
**欢迎引导**
对话区无消息时展示空状态引导页面，内容包括自定义欢迎标题、欢迎副标题，以及可配置的快捷问题标签列表。点击任意快捷问题标签，文本自动填入输入框。
**会话持久化**
系统在浏览器本地存储中维护一个会话标识，同一会话内的对话记录会关联保存。点击清空对话按钮后，生成新的会话标识，之前的对话仍保留在数据库中，但前端不再加载。每次进入页面时自动从服务端拉取该会话的历史消息。
**底部导航栏**
页面可关联一个底部菜单配置，在输入栏下方渲染导航条。每个导航项包含图标和标签文字，点击后支持两种跳转方式：外部链接在新标签页打开，内部路径通过 hash 路由导航。
### 二、管理后台
**身份认证与安全**
管理后台所有页面均受路由守卫保护，未登录用户自动跳转到登录页。登录采用用户名加密码的方式，密码经过 bcrypt 哈希存储，登录成功后颁发 JWT 令牌，有效期 24 小时。后端管理接口统一通过 JWT 鉴权中间件验证身份，无效令牌返回 401 状态码。
管理员可在后台界面中修改自己的密码，需先验证旧密码，新密码长度不少于 6 位，且需二次确认输入一致。修改成功后自动清除登录态并跳转回登录页。
**H5 页面管理**
此模块管理面向终端用户的对话页面配置。列表展示所有页面，包含 ID、标题、启用的模型标签、访问链接（可点击直接跳转到 H5 对话页）、创建时间。支持的操作包括：
- 新增页面：设置页面标题、英文标识（创建后不可修改）、系统提示词（用于设定 AI 角色行为）、欢迎标题与副标题、快捷问题（每行一个）、关联菜单、关联启用模型
- 编辑页面：可修改除标识外的全部字段，标识字段在编辑时锁定不可修改。更新模型关联时采用先删后插的方式确保一致性
- 删除页面：级联清理该页面下的所有对话记录、消息记录以及模型关联关系后，再删除页面本体
- 复制链接：一键将 H5 对话页链接写入剪贴板
开发环境下，生成的 H5 链接会自动将端口从管理端的 5173 修正为 H5 端的 5174，避免被管理端的路径前缀拦截。
**底部菜单管理**
此模块管理 H5 端底部导航栏的菜单配置。每个菜单包含名称和若干菜单项。菜单项包含标签名、图标（通过可视化图标选择器从预设的 36 个图标中选取）和跳转链接。列表展示菜单名称、菜单项预览（以标签形式展示图标和标签名）、创建时间。支持新增、编辑和删除操作。
**大模型配置**
此模块管理接入的大模型参数。每个模型配置包含以下字段：
- 显示名称：在 H5 端标签栏中展示
- 厂商名称：模型提供商标识
- API 接口地址：完整的 API Base URL
- API 密钥：访问凭证，以密码框展示，存储时使用 AES-256-CBC 算法加密
- 模型标识名：API 调用时传递的 model 参数值
- 温度：控制生成随机性，取值范围 0 到 2
- 最大 Token：单次生成上限
- 上下文长度：模型支持的上下文窗口大小
- 排序：控制列表展示顺序
- 启用开关：控制模型是否对外可用
列表中每行可直接通过开关切换启用状态。删除模型时会同步清理该模型与页面的关联关系。
**对话记录管理**
此模块提供全量对话记录的查询与管理功能。列表以用户提问为粒度展示，每条记录包含所属页面、使用模型、用户提问内容、AI 回复内容、提问时间。
支持的多维筛选条件包括：
- 所属页面下拉选择
- 使用模型下拉选择
- 关键词模糊搜索（同时匹配用户提问和 AI 回复）
- 时间区间选择（日期范围选择器，结束日期自动补齐到当日 23:59:59）
支持分页浏览，每页条数可切换。操作功能包括：
- 查看详情：弹出对话详情窗口，展示会话元信息及完整的用户与 AI 交替消息列表
- 单条删除：删除指定会话及其所有消息
- 批量删除：勾选多条记录后一键删除
- 导出记录：将当前筛选条件下所有会话的完整消息记录导出为 JSON 文件下载
### 三、后端服务
**对话引擎**
后端对话接口接收页面标识、模型标识、会话标识和用户消息，按以下流程处理：
1. 根据模型标识查询模型配置，解密 API 密钥
2. 根据会话标识、页面标识和模型标识查找或创建对话会话
3. 保存用户消息到数据库
4. 加载该会话最近 10 轮历史消息
5. 若页面配置了系统提示词，将其插入消息列表首位作为 system 角色
6. 通过 OpenAI 兼容适配器向模型 API 发起流式请求
7. 以 SSE 格式逐块将生成内容推送给前端
8. 生成完成后将 AI 回复写入数据库
客户端断开连接或请求出错时，系统会尽力保存已生成的部分回复内容，避免数据丢失。
**速率限制**
系统实施两级速率限制：全局接口每分钟每 IP 最多 200 次请求；对话接口每分钟每 IP 最多 20 次请求，防止 API 额度被滥用。
**文件上传**
提供图片上传接口，支持 jpg、png、gif、webp、bmp 格式，单文件上限 10MB。上传成功后文件存储在 uploads 目录，并记录到数据库上传表中。
**静态资源托管**
生产环境下，后端 Express 服务同时托管 H5 前端与管理端前端的构建产物。H5 端部署在根路径，管理端部署在 /admin 路径下。两个前端均为 SPA 应用，配置了对应的 fallback 规则：非 API、非 admin、非 uploads 路径的请求均返回 H5 的 index.html；/admin 下所有路径返回管理端的 index.html。
**API 密钥加密**
数据库中存储的 API 密钥使用 AES-256-CBC 对称加密算法保护。加密过程使用 SHA-256 对配置密钥进行哈希派生得到 32 字节密钥，每次加密生成随机 IV。加密后的密文以 "ENC:" 前缀标识，解密时自动识别是否需要解密，兼容明文存储的历史数据。
---
## 通用推广标题
1. 多模型聚合聊天系统源码，一套代码接入所有主流大模型
2. 开箱即用的 AI 聚合聊天平台，支持 DeepSeek 等九大模型自由切换
3. 自建 AI 对话服务平台，多模型聚合、流式输出、前后端一体化部署
4. 企业级 AI 聚合聊天系统，一个平台管理所有大模型对话
## 管理后台能力导向
5. 多页面多模型的 AI 对话管理后台源码，每个页面独立配置提示词与欢迎语
6. 可视化配置的 AI 聊天平台，页面模型菜单全部后台动态管理
7. 可配置系统提示词的 AI 聚合对话系统，轻松定制专属 AI 助手角色
## 运营分析导向
8. 自带全量对话记录管理与导出功能的 AI 聚合聊天系统
9. 对话数据可查可导出，支持多维度筛选的 AI 聊天管理平台
10. 全链路可追溯的 AI 对话系统，用户提问与模型回复完整存档
## 安全与部署导向
11. API 密钥加密存储的 AI 聚合聊天系统源码，安全接入各大模型厂商标记
12. 自带速率限制的 AI 对话平台，防止 API 额度滥用与恶意调用
13. 前后端一体化部署的 AI 聊天系统，一个端口跑通管理端与用户端
## 场景化应用导向
14. 搭建企业智能客服系统的最佳实践，多模型聚合对话平台源码
15. 知识问答与智能助手快速构建方案，可配置的多模型聚合聊天系统
16. 零门槛搭建属于你自己的 AI 聚合对话网站，完整源码开箱即用
## 功能特色导向
17. 支持流式输出与 Markdown 渲染的 AI 聚合聊天 H5 页面源码
18. 带底部导航菜单与二维码分享功能的移动端 AI 对话系统
19. 支持多模型标签切换与快捷问题引导的 AI 聊天交互界面
## 差异化竞争力导向
20. 一套源码实现 AI 模型聚合、对话管理、数据追溯三大核心能力的统一平台
21. 从模型配置到对话管理的全栈 AI 服务系统，代码结构清晰易于二次开发
22. 管理端 H5 端分离设计，一个后端同时服务管理员与终端用户的 AI 对话平台

复制代码

shahes*** · 2026-6-30 08:12:51

支持！！！

lansef*** · 2026-6-30 08:12:57

支持！！！

gdfs*** · 2026-6-30 10:06:30

你历害！！

y08*** · 2026-6-30 12:18:30

已加客服

zxcvb7*** · 2026-6-30 17:52:28

沙发！！

ctkt05*** · 2026-6-30 23:16:17

顶一下！！

qiu*** · 2026-6-30 23:17:27

不错！！

rgth*** · 2026-7-1 19:47:14

你好棒！！

haiyunt*** · 2026-7-5 12:22:36

非常好！！

		自动登录	找回密码
密码			立即注册