131 lines
5.6 KiB
Markdown
131 lines
5.6 KiB
Markdown
# 情绪博物馆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（开开）进行实时情绪对话。
|
||
- **主要流程**：
|
||
1. 进入页面自动建立WebSocket连接。
|
||
2. 用户输入消息，前端通过WebSocket发送到后端。
|
||
3. 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自动点评。
|
||
- **主要流程**：
|
||
1. 用户输入日记内容，点击发布。
|
||
2. 日记发布后自动刷新列表，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. 主要流程说明
|
||
|
||
### 登录流程
|
||
1. 用户输入账号、密码、验证码，点击登录。
|
||
2. 前端调用POST /auth/login，成功后保存token，跳转首页。
|
||
3. 登录后可获取当前用户信息（GET /auth/user/info）。
|
||
|
||
### AI对话流程
|
||
1. 进入/chat页面，自动建立WebSocket连接。
|
||
2. 用户输入消息，通过WebSocket发送到后端（/ws/chat，/app/chat.send）。
|
||
3. AI回复通过WebSocket推送到前端。
|
||
4. 会话和消息历史通过REST接口管理。
|
||
|
||
### 日记发布流程
|
||
1. 用户输入日记内容，点击发布。
|
||
2. 前端调用POST /diary-post/publish。
|
||
3. 发布成功后刷新日记列表（GET /diary-post/user/{userId}/page）。
|
||
4. 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对话实时通信 |
|
||
|
||
> 说明：部分页面如“人生里程碑”“情绪分析”等功能正在开发中，接口和流程会持续完善。 |