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

---

## 项目功能详述

### 一、H5 用户对话端

**页面驱动的对话系统**

系统通过 URL 中的页面标识（slug）加载不同的对话页面。每个页面拥有独立的标题、欢迎语、系统提示词、快捷问题列表、可用模型集合以及底部导航菜单。用户访问的 URL 路径若不存在对应页面，系统自动回退到数据库中的首1个页面。所有未匹配路由均会被兜底重定向到对话页。

**多模型切换对话**

页面顶部以胶囊标签栏形式展示该页面已配置的可用大模型。用户可随时点击切换模型，切换后自动加载该模型对应的历史对话记录。当前使用的模型名称显示在标题栏右侧。

**流式对话与实时反馈**

用户输入问题后，系统通过 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

- 最1大 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. 搭建企业智能客服系统的最1佳实践，多模型聚合对话平台源码

15. 知识问答与智能助手快速构建方案，可配置的多模型聚合聊天系统

16. 零门槛搭建属于你自己的 AI 聚合对话网站，完整源码开箱即用

## 功能特色导向

17. 支持流式输出与 Markdown 渲染的 AI 聚合聊天 H5 页面源码

18. 带底部导航菜单与二维码分享功能的移动端 AI 对话系统

19. 支持多模型标签切换与快捷问题引导的 AI 聊天交互界面

## 差异化竞争力导向

20. 一套源码实现 AI 模型聚合、对话管理、数据追溯三大核心能力的统一平台

21. 从模型配置到对话管理的全栈 AI 服务系统，代码结构清晰易于二次开发

22. 管理端 H5 端分离设计，一个后端同时服务管理员与终端用户的 AI 对话平台

定制看需求，一般几小时内完成，也不贵。

【属性】

• 框架: vue
• 语言: 其他
• 数据库: Mysql
• 规格: 整站源码
• 授权: 免授权
• 源文件: 完全开源（含全部源文件）
• 大小: 1 MB
• 移动端: Wap、App、小程序、自适应、公众服务号
• 安装服务: 免费【要求说明】
• 主机类型: 独立主机（服务器、VPS、VM）
• 伪静态: 无需
• 操作系统: Linux
• 安装方式: 提供管理权限
• web服务: nginx

来源: https://www.huzhan.com/code/goods487615.html