5.6 KiB
5.6 KiB
情绪博物馆Web端功能与页面梳理
1. 总览
情绪博物馆Web端基于Vue3+TypeScript开发，主要功能包括AI对话、情绪日记、个人仪表盘、情绪分析、社交分享等。前端通过RESTful API与后端服务交互，部分功能（如AI对话）支持WebSocket实时通信。
2. 页面与功能列表
首页（/）
- 功能描述：产品介绍、引导注册/登录、快速入口。
- 主要流程：展示产品亮点，未登录用户可跳转登录/注册，已登录用户可直接进入AI对话。
- 涉及接口：无直接数据接口。
登录页（/login）
- 功能描述：用户登录，支持验证码、第三方登录。
- 主要流程：输入账号/密码/验证码，调用登录接口，登录成功后跳转首页或上次访问页。
- 涉及接口：
- POST /auth/login 用户登录
- GET /auth/captcha 获取验证码
- POST /auth/oauth/login 第三方登录
注册页（/register）
- 功能描述：新用户注册。
- 主要流程：填写注册信息，获取验证码，注册成功自动登录。
- 涉及接口：
- POST /auth/register 用户注册
- GET /auth/captcha 获取验证码
AI对话（/chat）
- 功能描述：与AI（开开）进行实时情绪对话。
- 主要流程：
- 进入页面自动建立WebSocket连接。
- 用户输入消息，前端通过WebSocket发送到后端。
- AI回复通过WebSocket推送到前端。
- 涉及接口：
- WebSocket /ws/chat 实时对话
- POST /conversation 创建会话
- GET /conversation/user/{userId} 获取用户会话
- DELETE /conversation/{sessionId} 删除会话
聊天历史（/chat-history）
- 功能描述：查看历史对话记录。
- 主要流程：分页加载历史会话和消息。
- 涉及接口：
- GET /conversation/user/{userId} 获取用户会话
- GET /message/user/page 分页获取消息
情绪日记（/diary）
- 功能描述：发布、查看个人情绪日记，AI自动点评。
- 主要流程：
- 用户输入日记内容，点击发布。
- 日记发布后自动刷新列表，AI生成点评。
- 涉及接口：
- POST /diary-post/publish 发布日记
- GET /diary-post/user/{userId}/page 获取用户日记
个人仪表盘（/personal-dashboard）
- 功能描述：展示用户基础信息、成长数据、兴趣、技能等。
- 主要流程：页面加载时获取用户信息和成长统计。
- 涉及接口：
- GET /user/profile 获取用户资料
- GET /user/growth-stats 获取成长数据
情绪分析（/analysis）
- 功能描述：情绪趋势、雷达图等可视化分析（开发中）。
- 主要流程：后续补充。
- 涉及接口：后续补充。
其他页面
- 人生里程碑（/life-milestones）：展示用户重要事件。
- 人生轨迹（/life-trajectory）：可视化用户成长轨迹。
- 消息中心（/messages）：系统与AI消息通知。
- 设置（/settings）：账号与隐私设置。
- 话题追踪（/topic-tracker）：追踪关注的话题。
- 情绪管理（/emotion）：情绪记录与管理。
- 情绪地图（/map）：情绪地理分布。
- 社交分享（/social）：分享内容到社交平台。
- 个人中心（/profile）：个人信息管理。
- 调试/错误页面：/debug, /404, /403等。
3. 主要流程说明
登录流程
- 用户输入账号、密码、验证码，点击登录。
- 前端调用POST /auth/login，成功后保存token，跳转首页。
- 登录后可获取当前用户信息（GET /auth/user/info）。
AI对话流程
- 进入/chat页面，自动建立WebSocket连接。
- 用户输入消息，通过WebSocket发送到后端（/ws/chat，/app/chat.send）。
- AI回复通过WebSocket推送到前端。
- 会话和消息历史通过REST接口管理。
日记发布流程
- 用户输入日记内容，点击发布。
- 前端调用POST /diary-post/publish。
- 发布成功后刷新日记列表（GET /diary-post/user/{userId}/page）。
- AI自动生成点评并展示。
4. 附录：接口汇总表
除了/auth的接口,其他所有接口都要在请求头中携带token调用
| 接口路径 | 方法 | 说明 |
|---|---|---|
| /auth/login | POST | 用户登录 |
| /auth/register | POST | 用户注册 |
| /auth/captcha | GET | 获取验证码 |
| /auth/logout | POST | 用户登出 |
| /auth/user/info | GET | 获取当前用户信息 |
| /auth/refresh-token | POST | 刷新Token |
| /conversation | POST | 创建会话 |
| /conversation/user/{userId} | GET | 获取用户会话列表 |
| /conversation/{sessionId} | DELETE | 删除会话 |
| /message/user/page | GET | 分页获取用户消息 |
| /message/user/search | POST | 搜索用户消息 |
| /message/user/recent | POST | 获取最近消息 |
| /message/{id} | GET | 获取消息详情 |
| /diary-post/publish | POST | 发布日记 |
| /diary-post/user/{userId}/page | GET | 获取用户日记 |
| /user/profile | GET | 获取用户资料 |
| /user/growth-stats | GET | 获取成长数据 |
| /user/profile | PUT | 更新用户资料 |
| /user/avatar/upload | POST | 上传头像 |
| /user/password | PUT | 修改密码 |
| /user/email/verify | POST | 验证邮箱 |
| /user/email/send-code | POST | 发送邮箱验证码 |
| /user/phone/verify | POST | 验证手机号 |
| /user/phone/send-code | POST | 发送手机验证码 |
| /ws/chat | WebSocket | AI对话实时通信 |
说明：部分页面如“人生里程碑”“情绪分析”等功能正在开发中，接口和流程会持续完善。