第二次团队作业
第二次团队作业——原型设计+概要设计
作业基础信息
| 项目 | 内容 |
|---|---|
| 作业所属课程 | https://edu.cnblogs.com/campus/gdgy/SoftwareEngineering24 |
| 作业要求的链接 | https://edu.cnblogs.com/campus/gdgy/SoftwareEngineering24/homework/15656 |
| 作业的目标 | 基于前期项目需求分析，完成个性化AI陪伴聊天助手系统的原型设计与概要设计 |
| 团队名称 | wsq |
| 团队成员学号-名字 | 1. 3124004518-王俊琦2. 3124004516-绳璨泽3. 3124004515-钱河辰 |
一、原型设计
本次原型设计采用墨刀（Modao） 工具完成，为AI陪伴聊天助手系统制作了高保真交互原型，覆盖系统所有核心功能模块，包括登录注册页、主聊天界面、人设配置页、语料上传页、收藏语录页、主题设置页等完整页面。
1. 原型整体说明
原型完整模拟了用户从登录、聊天交互到人设配置、语料训练、语录收藏、主题切换的全业务流程，通过页面跳转、状态切换、按钮交互实现了接近真实软件的用户体验，为后续前端开发提供了清晰的UI与交互规范。
2. 核心交互与规则描述
- 主聊天界面交互：用户输入消息后点击「发送」按钮或按下回车，消息以气泡形式出现在右侧，AI回复气泡出现在左侧；支持消息引用、编辑功能，引用消息自动添加
>前缀格式，AI回复将结合引用内容进行上下文理解。发送过程中按钮状态锁定，防止重复提交，输入内容为空或超过长度限制时，按钮将置灰并给出提示。 - 人设配置交互：用户可在侧边栏修改机器人名称、性格特点与说话风格，修改内容将实时同步到聊天界面顶部；支持上传TXT格式的聊天语料文件，文件上传时会进行格式与大小校验，上传成功后语料内容将自动填充到输入框，供用户调整。
- 语料上传交互：用户点击「上传聊天语料文件」按钮，选择本地TXT文件后，系统将读取并解析文件内容，按“我：xxx\n机器人：xxx”的对话格式提取语料，用于训练机器人回复风格。文件格式错误或大小超出限制时，将给出明确的错误提示。
- 扩展功能交互：支持主题皮肤切换，用户可在设置页选择粉色/简约/暗黑模式，页面背景、聊天气泡、按钮样式将全局同步变化；支持语录收藏功能，用户可点击AI消息上的「收藏」按钮，将喜欢的回复添加到收藏列表，收藏内容可在个人中心单独查看。
3. UI设计说明
原型整体采用清新治愈的配色方案，主色调为粉色与白色，契合陪伴型聊天机器人的产品定位；聊天气泡区分用户与AI消息样式，用户消息采用浅蓝色气泡，AI消息采用粉色气泡，搭配圆角设计提升视觉舒适度；所有按钮、输入框均设置了悬停与点击状态，交互反馈清晰直观。
二、概要设计
本次系统采用分层架构设计，自顶向下拆解为系统架构、功能模块、UML设计与数据库设计四大板块，以下为各部分的详细说明。
1. 系统架构设计
系统整体分为四层架构，实现前后端分离、解耦设计：
- 表现层（前端）：包含聊天界面、人设配置模块、个人中心模块、主题设置模块，负责用户交互与页面渲染。
- 业务逻辑层（后端）：包含用户管理服务、聊天交互服务、人设配置服务、语料管理服务、历史记录服务、收藏语录服务，实现核心业务逻辑处理。
- 接口层（API）：提供用户认证、聊天请求、人设配置、语料上传、记录管理、收藏管理等RESTful接口，实现前后端数据交互。
- 数据持久层：负责用户数据、聊天记录、人设配置、语料库、收藏数据的存储与读取，当前原型阶段采用内存存储，后续将扩展为数据库存储。
2. 功能模块设计
系统共划分为六大核心功能模块，覆盖所有业务场景：
- 用户管理模块：支持用户注册/登录、游客模式、个人信息管理，区分多用户独立数据，互不干扰。
- 核心聊天模块：实现实时对话交互、消息引用/编辑、上下文记忆、消息状态管理，支持AI回复结合历史对话理解用户意图。
- 人设配置模块：支持自定义机器人名称、性格特点、说话风格，提供人设模板管理与语料上传训练功能，用户可一键切换不同风格的机器人。
- 数据管理模块：实现聊天记录存储、分页查询、单条/批量删除、聊天记录导出，以及语录收藏/取消、收藏列表管理功能。
- 界面个性化模块：支持主题皮肤切换、聊天气泡样式设置、字体大小调整，满足用户个性化使用需求。
3. UML设计
本次设计使用多种UML图对系统进行建模，清晰展示了系统的需求、流程、结构与交互逻辑：
- 用例图：以用户为参与者，描述了注册登录、发起对话、配置人设、上传语料、管理历史记录、收藏语录、切换主题等核心用例，明确了系统的功能边界。
- 活动图：绘制了用户登录流程、聊天交互流程、语料上传流程，清晰展示了各业务流程的步骤与分支逻辑。
- 类图：定义了User（用户类）、ChatMessage（聊天消息类）、RobotProfile（人设类）、ChatCorpus（语料类）、FavoriteNote（收藏类）等核心实体类，描述了类的属性、方法与类之间的关联关系。
- 时序图：绘制了用户登录、发送消息、保存人设的时序流程，展示了前端、后端、AI服务之间的消息传递与交互逻辑。
- 协作图：描述了聊天消息处理过程中，前端UI层、业务逻辑层、数据层的对象协作关系与消息传递过程。
4. 数据库设计
本次数据库设计采用实体-关系（ER）模型，定义了系统的核心实体与关联关系，并设计了对应的关系数据模型与对象-关系映射：
- ER图：核心实体包括用户、聊天记录、机器人人设、聊天语料、收藏语录；实体关系为：用户与聊天记录（1:N）、用户与人设（1:N）、用户与语料（1:N）、用户与收藏语录（1:N）、聊天记录与收藏语录（1:1）。
- 关系数据模型：设计了五张数据表：用户表（user）、聊天记录表（chat_record）、人设表（robot_profile）、语料表（chat_corpus）、收藏表（favorite_note），明确了各表的字段、类型与约束。
- 对象-关系映射（ORM）：建立了实体类与数据表的映射关系，User类对应user表、ChatMessage类对应chat_record表、RobotProfile类对应robot_profile表、ChatCorpus类对应chat_corpus表、FavoriteNote类对应favorite_note表，为后续数据库实现提供了清晰的映射规则。
三、团队协作记录
团队分工安排
| 成员学号-姓名 | 角色 | 负责模块 | 具体开发内容 |
|---|---|---|---|
| 绳璨泽 | 后端开发 | 项目整体协调+后端服务 | 后端接口设计、数据库设计、GitHub仓库管理 |
| 王俊琦 | 前端开发/UI设计 | 原型设计+前端页面 | 墨刀原型设计、聊天界面、设置页、个人中心开发 |
| 钱河辰 | 测试工程师/文档编写 | 测试+文档 | 功能测试、编写系统设计说明书、数据库设计说明书 |
四、后端设计展示
1. 后端整体架构说明
后端采用 Node.js + Express 框架开发，整体分为接口层、业务逻辑层、数据持久层三个部分，结构清晰、耦合度低，便于后续功能扩展与维护。接口层提供RESTful API，负责接收前端请求并返回响应；业务逻辑层实现消息校验、AI请求转发、聊天历史管理、人设配置管理、语料解析等核心逻辑；数据持久层负责用户数据、聊天记录、人设配置的存储与读取，当前原型阶段采用内存存储，后续将扩展为MySQL数据库存储。
2. 核心接口设计
| 接口路径 | 请求方式 | 功能描述 | 参数说明 |
|---|---|---|---|
/api/chat |
POST | 发送聊天消息并获取AI回复 | userId（用户ID）、message（用户消息）、name（机器人名称）、personality（性格）、style（风格）、chatCorpus（语料） |
/api/clear-history |
POST | 清空用户聊天历史 | userId（用户ID） |
/api/user/login |
POST | 用户登录 | username、password |
/api/profile/save |
POST | 保存机器人人设配置 | userId、name、personality、style |
/api/corpus/upload |
POST | 上传聊天语料文件 | userId、file（TXT文件） |
3. 关键交互流程说明
- 聊天消息交互流程：用户在前端发送消息，携带用户ID、消息内容、人设配置、语料内容请求
/api/chat接口；后端校验参数后，初始化用户聊天历史，构建包含系统提示词、历史消息、用户消息的请求体；调用AI大模型API获取AI回复，将用户消息和AI回复存入聊天历史；最后返回AI回复给前端，前端渲染消息气泡。 - 语料上传流程：用户选择TXT文件并请求
/api/corpus/upload接口；后端校验文件格式与大小，读取文件内容并解析对话语料；将解析后的语料内容与用户ID绑定并保存；返回上传成功提示，前端自动填充语料到设置框。
浙公网安备 33010602011771号