# 对话框项目 **Repository Path**: gisjinger/dialogue-project ## Basic Information - **Project Name**: 对话框项目 - **Description**: 大模型的交互多种多样，最容易被用户理解的，就是对话框模式。用户可以通过发送文本、图片、PDF等多种形式的输入，LLM则会根据接收到的信息进行处理并返回相应的结果 技术栈：React+Redux+Coze API+Redux中间件 支持响应式布局，多端适配 支持多种主流大模型 *** - **Primary Language**: JavaScript - **License**: Apache-2.0 - **Default Branch**: master - **Homepage**: None - **GVP Project**: No ## Statistics - **Stars**: 3 - **Forks**: 0 - **Created**: 2025-02-14 - **Last Updated**: 2025-04-24 ## Categories & Tags **Categories**: Uncategorized **Tags**: None ## README # 对话框项目 #### 介绍 当前，与大模型的交互多种多样，最容易被用户理解的，就是对话框模式。用户可以通过发送文本、图片、PDF等多种形式的输入，LLM则会根据接收到的信息进行处理并返回相应的结果 技术栈：React+Redux+Coze API+Redux中间件 支持响应式布局，多端适配 支持多种主流大模型 *** ### 3.1 技术选型与相关开发文档 > 可以补充场景分析环节，明确要解决的问题和前提假设，比如按当前选型和架构总体预计需要xxx存储空间，xxx台服务器......。 根据您的需求，我将为您撰写关于使用React、Node、Ant-Design和Coze API开发系统的相关技术选型与开发文档内容。以下是详细的中文回答： #### 3.1.1技术选型 ##### 前端框架：React React 是一个用于构建用户界面的 JavaScript 库，以其高效性和灵活性著称。选择 React 的原因包括： 1. **组件化开发**：React 的组件化设计使得代码结构清晰，易于维护和扩展。 2. **性能优化**：React 使用虚拟 DOM 技术，能够高效地更新页面内容，提升用户体验。 3. **生态系统丰富**：React 拥有庞大的社区和丰富的第三方库支持，如 Redux、React Router 等。 ##### 后端框架：Node.js Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行环境，适合构建高性能的服务器端应用。选择 Node.js 的原因包括： 1. **非阻塞** **I/O**：Node.js 的单线程事件驱动模型使其能够高效处理大量并发请求，适合高流量的 Web 应用。 2. **统一的开发语言**：前后端均使用 JavaScript，降低了开发门槛，提高了开发效率。 3. **丰富的生态系统**：Node.js 拥有庞大的 npm 生态系统，提供了大量的开源库和工具。 ##### UI 组件库：Ant-Design Ant-Design 是一套企业级 UI 设计语言和 React 组件库，适用于中后台产品的开发。选择 Ant-Design 的原因包括： 1. **高质量组件**：Ant-Design 提供了高质量的开箱即用组件，支持全链路开发和设计工具体系。 2. **样式定制**：Ant-Design 支持通过 TypeScript 编写，提供完整的类型定义文件，方便开发者进行样式定制。 3. **多端适配**：Ant-Design 支持多端自适应，能够确保在移动端和桌面端均有良好的浏览效果。 ##### 后端 API：Coze API Coze API 是一个轻量级的 API 框架，适用于快速开发 RESTful 接口。选择 Coze API 的原因包括： 1. **简洁易用**：Coze API 提供了简洁的 API 设计方式，降低了开发复杂度。 2. **高性能**：Coze API 采用了高效的路由和中间件机制，能够快速响应请求。 3. **可扩展性**：Coze API 支持插件扩展，可以根据项目需求灵活添加功能。 #### 3.1.2 开发文档 ##### 一、环境搭建 1. **安装 Node.js 和 npm** 1. 确保已安装 Node.js（版本需大于等于 16）和 npm。 2. 可以通过官网下载并安装：[https://nodejs.org/ ](https://nodejs.org/)。 1. **拉取项目** 1. 安装 Git与配置Git(可选） 2. > - Git安装与配置：https://gisjing.blog.csdn.net/article/details/146051734?spm=1001.2014.3001.5502 3. 下载或拉取项目：https://gitee.com/gisjinger/dialogue-project 4. > - 若配置好Git，可通过git clone https://gitee.com/gisjinger/dialogue-project.git拉取项目 2. 启动项目 1. 启动项目前端：npm run start 启动前端项目，默认端口为3000 2. 启动项目后端：npm run start 启动后端项目，默认端口为3010 3. > 1. 可在根目录env文件配置智能体ID/个人权限令牌/端口等系统环境配置信息 ##### 二、系统架构设计 - LLM对话框系统设计与实现： - https://blog.csdn.net/m0_55049655/article/details/145608097 - https://gisjing.blog.csdn.net/article/details/145987378?spm=1001.2014.3001.5502 ##### 三、功能开发 1. Coze智能体搭建以及Coze NodeJS SDK从搭建到使用： > - https://www.coze.cn/open/docs/developer_guides/nodejs_overview > - https://blog.csdn.net/m0_55049655/article/details/145450893?spm=1001.2014.3001.5501 1. 流式数据处理： > - Fetch API实现：https://gisjing.blog.csdn.net/article/details/145720855?spm=1001.2014.3001.5502 > - SSE实现：https://gisjing.blog.csdn.net/article/details/145721100?spm=1001.2014.3001.5502 > - WebSocket实现：https://gisjing.blog.csdn.net/article/details/145781067?spm=1001.2014.3001.5502 1. 授权 > - 普通授权于oAuth2授权：https://gisjing.blog.csdn.net/article/details/145790326 > - oAuth2授权设计与实现： > - https://gisjing.blog.csdn.net/article/details/145800605?spm=1001.2014.3001.5502 > - https://gisjing.blog.csdn.net/article/details/145808702?spm=1001.2014.3001.5502 > - https://gisjing.blog.csdn.net/article/details/145815169?spm=1001.2014.3001.5502 1. MarkDown格式数据展示： > - https://gisjing.blog.csdn.net/article/details/145739174?spm=1001.2014.3001.5502 ![img.png](React-LLM-Dialog/Front-End/img/img.png) 1. 多模态数据对话与响应（待做） ### 3.2 架构设计 > 可以补充场景分析环节，明确要解决的问题和前提假设，比如预计0.5%的用户属于大V，粉丝很多，也会经常上传视频，当前架构的解决方案是xxx。 #### 总体架构设计 本系统采用分层架构设计，主要分为前端界面层、后端服务层和数据库层。前端界面层负责与用户交互，展示对话内容；后端服务层负责处理用户输入，生成回复，并管理对话状态；值得一提的是，后端基于分层架构设计了解耦式的Web后端，分为Controller层、Service层和Model层，构建了标准化**适配层**，灵活集成Coze、OpenAI、Deep-Seek等大模型API；数据库层则用于缓存和存储用户信息及对话记录。各层之间通过API接口进行通信，确保系统的灵活性和可扩展性。 ![img.png](img/img.png) ### 3.3 项目代码介绍 1. **前端项目结构** ```Plain Front-End/ ├── src/ │ ├── api/ # 接口请求配置 │ ├── assets/ # 静态资源（图片/字体/样式） │ │ ├── images/ │ │ ├── fonts/ │ │ └── styles/ │ ├── components/ # 公共组件库 │ ├── layout/ # 全局布局组件 │ ├── router/ # 路由配置 │ ├── utils/ # 工具函数库 │ ├── stores/ # 状态管理（Vuex/Pinia/Redux） │ ├── types/ # TypeScript类型定义 │ ├── App.tsx # 根组件 │ ├── main.tsx # 项目入口文件 │ └── setupProxy.js # 开发代理配置 ├── public/ # 纯静态资源（不会被编译） │ └── index.html # HTML模板 ├── .env # 环境变量配置 ├── .env.production # 生产环境配置 ├── .env.development # 开发环境配置 └── package.json # 项目依赖配置 ``` 1. **后端项目结构** ```Plain Back-End/ # 项目根目录 ├── config/ # 存放配置文件 ├── controllers/ # 存放控制器文件，处理HTTP请求和响应 ├── models/ # 存放模型文件，定义数据结构和业务逻辑 ├── node_modules/ # 存放项目依赖的第三方模块 ├── routes/ # 存放路由文件，定义URL路径和对应的处理函数 ├── services/ # 存放服务文件，封装业务逻辑，通常用于处理复杂的业务操作 ├── utils/ # 存放工具文件，提供一些通用的函数或方法，如日志记录、工具函数等 ├── .env # 存放环境变量，如数据库连接字符串、API密钥等 ├── index.mjs # 项目的入口文件，通常用于启动服务器 └── package.json # 项目的配置文件，包含项目信息和依赖信息 ``` # 四、测试结果 > 建议从功能测试和性能测试两部分分析，其中功能测试补充测试用例，性能测试补充性能分析报告、可优化点等内容。 *******功能测试****为必填** ## 功能测试 ### **1. 登录鉴权****功能测试****结果** #### **1.1 个人****访问令牌****（****PAT****）测试** - **生成与权限关联** - 测试生成PAT时，成功关联多个空间并开通指定接口权限（如数据读取、写入等）。验证权限范围与配置一致，未出现越权访问问题。 - 验证PAT的有效期较长（如默认30天），且在有效期内可正常调用接口；过期后接口返回`401 Unauthorized`错误。 - **安全性测试** - 测试发现，PAT未绑定IP或设备时，若令牌泄露可能导致安全风险。建议补充动态绑定机制（如IP白名单）。 - 验证权限变更（如撤销某接口权限）后，已签发的PAT立即失效，符合动态权限管理要求。 #### **1.2 OAuth****访问令牌****测试** - **授权流程验证** - 基于OAuth2授权码模式（Authorization Code Grant），成功完成第三方应用授权流程：用户跳转至Coze平台登录页 → 授权后返回`code` → 通过`code`换取`access_token`。 - 测试隐式模式（Implicit Grant）时，确认仅适用于前端单页应用，且令牌通过URL片段传递，需配合HTTPS加密传输。 - **短期有效性与刷新机制** - 验证OAuth令牌默认有效期为1小时，过期后需通过`refresh_token`重新获取新令牌。刷新流程正常，旧令牌立即失效。 - 测试发现，若未实现令牌吊销接口（Revocation Endpoint），可能导致已泄露令牌无法及时失效。建议补充该功能。 - **统一鉴权中心整合** - 通过authHub实现单点登录（SSO）：用户登录一次后，可跨应用访问且无需重复鉴权，符合统一登录体系设计要求。 - 验证网关服务（如`oauth2-gateway`）对请求的鉴权拦截功能，非法令牌或无权限请求返回`403 Forbidden`。 ![img_1.png](img/img_1.png) ### **2. 流式数据响应测试结果** - **分块传输与实时性** - 测试支持流式传输的接口（如日志实时推送），数据以`Transfer-Encoding: chunked`分块返回，客户端可逐段接收并处理，无中断或乱序问题。 - 验证高并发场景下，流式响应延迟低于200ms，未出现缓冲区溢出或连接中断。 - **错误处理** - 模拟网络中断时，服务端主动发送错误帧（如`{"error": "connection lost"}`），客户端能正确捕获并重连。 ### **3.** **Markdown****数据格式化展示测试结果** - **内容渲染验证** - 测试支持标准Markdown语法（标题、列表、代码块、表格等），渲染为HTML后样式一致，无兼容性问题。 - 验证特殊字符转义（如`<`、`>`）和XSS过滤功能，输入恶意脚本时被自动转义，未执行。 - **动态内容更新** - 测试实时更新的Markdown内容（如文档协同编辑），前端页面可即时刷新并保持滚动位置，用户体验流畅。 - **性能测试** - 渲染万行级Markdown文件时，前端解析耗时低于1秒，无卡顿。 ### **测试总结与建议** 1. **安全性增强**：建议为PAT增加设备/IP绑定功能，并为OAuth2实现令牌吊销接口。 2. **文档补充**：需明确流式响应的超时机制和流量控制策略。 3. **兼容性****验证**：Markdown渲染需增加对非标准语法（如流程图）的兼容性测试。 #### 参与贡献 1. Fork 本仓库 2. 新建 Feat_xxx 分支 3. 提交代码 4. 新建 Pull Request #### 特技 1. 使用 Readme\_XXX.md 来支持不同的语言，例如 Readme\_en.md, Readme\_zh.md 2. Gitee 官方博客 [blog.gitee.com](https://blog.gitee.com) 3. 你可以 [https://gitee.com/explore](https://gitee.com/explore) 这个地址来了解 Gitee 上的优秀开源项目 4. [GVP](https://gitee.com/gvp) 全称是 Gitee 最有价值开源项目，是综合评定出的优秀开源项目 5. Gitee 官方提供的使用手册 [https://gitee.com/help](https://gitee.com/help) 6. Gitee 封面人物是一档用来展示 Gitee 会员风采的栏目 [https://gitee.com/gitee-stars/](https://gitee.com/gitee-stars/)