2026年山东大学软件学院创新项目实训前端技术报告（五）

2302_81973067

296人浏览 · 2026-05-28 17:23:34

2302_81973067 · 2026-05-28 17:23:34 发布

一、本周工作进展

本周围绕"用药提醒功能与AI Agent模块前端对接"完成了后端新增功能的前端适配工作。根据后端5月25日至26日提交的用药提醒功能和AI Agent模块，完成了前端服务层接口对接、用药提醒页面功能完善、AI聊天页面多Agent支持优化等工作。

本人工作：

完成用药提醒服务层与后端MedicationReminderController的接口对接
完成用药计划服务层与后端MedicationPlanController的接口对接
优化AI聊天页面对5种Agent类型的支持，确保会话管理接口路径正确
完善前端服务层的错误处理和用户提示

二、后端功能分析与前端对接

2.1 后端新增功能概述

根据后端提交记录，5月25日至26日新增了以下核心功能：

用药提醒模块

MedicationReminderController：提供今日提醒查询、未确认提醒查询、历史记录查询、确认服药等接口
MedicationReminderTask：定时任务，每分钟扫描未来5分钟内需要提醒的用药计划，发送短信提醒

AI Agent模块

HealthCompanionController：健康陪诊Agent，路径 /api/health-companion
EmotionalCompanionController：情感陪伴Agent，路径 /api/companion
HealthInterventionController：健康干预Agent，路径 /api/health-intervention
FamilyAssistController：家属辅诊Agent，路径 /api/family-assist
MedicationSafetyController：用药安全审核Agent，路径 /api/medication-safety

2.2 前端服务层对接情况

用药提醒服务（medicationReminder.js）

已实现接口：

getToday(elderlyId)：获取今日用药提醒，对应 /api/medication-reminder/today
getUnconfirmed(elderlyId)：获取未确认提醒，对应 /api/medication-reminder/unconfirmed
getHistory(elderlyId, days)：获取用药历史，对应 /api/medication-reminder/history
confirm(reminderId)：确认服药，对应 /api/medication-reminder/confirm

用药计划服务（medicationPlan.js）

已实现接口：

list()：获取用药计划列表
get(id)：获取单个计划详情
add(data)：添加用药计划
update(data)：更新用药计划
remove(id)：删除用药计划

AI Agent服务层

各Agent服务文件已实现统一的接口模式：

chat(data)：普通对话接口
chatStream(data, onChunk)：流式对话接口
sessions()：获取会话列表
session(id)：获取会话详情
deleteSession(id)：删除会话

接口路径与后端Controller路径对照：

前端服务接口路径后端Controller
companion.js /api/companion/** EmotionalCompanionController
healthCompanion.js /api/health-companion/** HealthCompanionController
healthIntervention.js /api/health-intervention/** HealthInterventionController
familyAssist.js /api/family-assist/** FamilyAssistController
medicationSafety.js /api/medication-safety/** MedicationSafetyController

三、前端功能完善情况

3.1 用药提醒页面完善

已完成功能：

今日用药提醒列表展示，支持按时间排序
用药计划管理（添加、编辑、删除）
确认服药功能，调用后端confirm接口
今日提醒与用药计划的Tab切换

数据流设计：

页面加载 → loadTodayReminders() → 调用medicationReminder.getToday()
         → loadPlans() → 调用medicationPlan.list()
         → 数据渲染到页面
         
确认服药 → confirmReminder() → 调用medicationReminder.confirm()
         → 重新加载今日提醒

3.2 AI聊天页面优化

已完成功能：

5种Agent类型支持，每种Agent有独立的欢迎语和快捷问题
流式对话与普通对话的双模式支持
历史会话管理（查看、加载、删除）
会话连续性支持，加载历史后可继续追问

会话管理流程：

选择Agent → startChat() → 初始化会话
发送消息 → sendMessage() → _fetchReply() → 调用Agent.chatStream()
接收回复 → _consumeSse() → 增量渲染消息
查看历史 → openHistory() → 调用Agent.sessions()
加载会话 → loadSession() → 调用Agent.session(sid) → 恢复消息
删除会话 → deleteSession() → 调用Agent.deleteSession(sid)

3.3 错误处理优化

优化内容：