# 情绪博物馆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对话实时通信 |

> 说明：部分页面如“人生里程碑”“情绪分析”等功能正在开发中，接口和流程会持续完善。