426 lines
12 KiB
Markdown
426 lines
12 KiB
Markdown
# 个人主页与个人设置功能增强计划
|
||
|
||
## 概述
|
||
|
||
本文档描述个人主页（UserHome）和个人设置（Profile）的功能增强实现方案。
|
||
|
||
### 用户选择的功能
|
||
|
||
**个人主页（UserHome）**：
|
||
1. 学习/课程展示 - 展示用户已学习的课程和学习进度
|
||
2. 活动时间线 - 展示用户的动态、评论、点赞等活动
|
||
3. 个人主页封面设置 - 允许用户自定义个人主页的背景图/封面
|
||
|
||
**个人设置（Profile）**：
|
||
1. 隐私设置 - 控制谁可以查看你的主页、文章等内容
|
||
2. 登录设备管理 - 管理已登录的设备，支持远程登出
|
||
3. 消息通知设置 - 管理邮件、浏览器等消息通知偏好
|
||
|
||
---
|
||
|
||
## 一、个人主页（UserHome）功能增强
|
||
|
||
### 1.1 学习/课程展示
|
||
|
||
**当前状态**：UserHome 没有展示用户已学课程和学习进度。
|
||
|
||
**实现方案**：
|
||
|
||
#### 后端
|
||
- 在 `learn/views.py` 中添加接口获取用户学习进度
|
||
- 返回用户已学习的课程列表和完成百分比
|
||
|
||
**新增API**：
|
||
- `GET /learn/my-progress/` - 获取当前用户学习进度
|
||
|
||
**请求参数**：无
|
||
|
||
**响应示例**：
|
||
```json
|
||
{
|
||
"code": 10000,
|
||
"data": {
|
||
"courses": [
|
||
{
|
||
"id": 1,
|
||
"title": "Python基础",
|
||
"cover_image": "",
|
||
"progress": 75,
|
||
"completed_chapters": 3,
|
||
"total_chapters": 4,
|
||
"last_studied_at": "2026-08-01 15:30:00"
|
||
}
|
||
],
|
||
"total_courses": 5,
|
||
"total_completed": 2
|
||
}
|
||
}
|
||
```
|
||
|
||
#### 前端
|
||
- 在 `UserHome.tsx` 添加新的标签页"学习"
|
||
- 展示课程卡片，包含进度条和完成状态
|
||
- 点击跳转到课程详情页
|
||
|
||
**新增文件**：
|
||
- `src/pages/UserHome/components/CourseProgressCard.tsx` - 课程进度卡片组件
|
||
|
||
**修改文件**：
|
||
- `src/pages/UserHome/UserHome.tsx` - 添加"学习"标签页
|
||
- `src/pages/UserHome/UserHome.css` - 添加进度条样式
|
||
- `src/utils/request.ts` - 添加API请求方法
|
||
- `src/locales/*.json` - 添加国际化文本
|
||
|
||
---
|
||
|
||
### 1.2 活动时间线
|
||
|
||
**当前状态**：UserHome 的"活动"标签页是空的（`<Empty description={t('userHome.empty.noActivities')} />`）。
|
||
|
||
**实现方案**：
|
||
|
||
#### 后端
|
||
- 在 `user/views/` 中添加活动视图
|
||
- 聚合用户的各种活动（发表文章、评论、点赞、收藏、学习等）
|
||
|
||
**新增API**：
|
||
- `GET /user/activities/` - 获取用户活动时间线
|
||
|
||
**响应示例**：
|
||
```json
|
||
{
|
||
"code": 10000,
|
||
"data": {
|
||
"activities": [
|
||
{
|
||
"id": 1,
|
||
"type": "article",
|
||
"title": "发表文章",
|
||
"description": "发布了《Python入门指南》",
|
||
"created_at": "2026-08-01 10:30:00"
|
||
},
|
||
{
|
||
"id": 2,
|
||
"type": "comment",
|
||
"title": "评论",
|
||
"description": "评论了《JavaScript高级技巧》",
|
||
"created_at": "2026-07-31 14:20:00"
|
||
},
|
||
{
|
||
"id": 3,
|
||
"type": "like",
|
||
"title": "点赞",
|
||
"description": "点赞了《Vue3实战》",
|
||
"created_at": "2026-07-30 09:15:00"
|
||
},
|
||
{
|
||
"id": 4,
|
||
"type": "favorite",
|
||
"title": "收藏",
|
||
"description": "收藏了《React Hooks详解》",
|
||
"created_at": "2026-07-29 16:45:00"
|
||
},
|
||
{
|
||
"id": 5,
|
||
"type": "study",
|
||
"title": "学习",
|
||
"description": "完成了《Python基础》第3章",
|
||
"created_at": "2026-07-28 11:00:00"
|
||
}
|
||
]
|
||
}
|
||
}
|
||
```
|
||
|
||
#### 前端
|
||
- 实现活动时间线组件
|
||
- 按时间倒序展示活动
|
||
- 每种活动类型有不同的图标和颜色
|
||
|
||
**新增文件**：
|
||
- `src/pages/UserHome/components/ActivityTimeline.tsx` - 活动时间线组件
|
||
|
||
**修改文件**：
|
||
- `src/pages/UserHome/UserHome.tsx` - 实现"活动"标签页
|
||
- `src/pages/UserHome/UserHome.css` - 添加时间线样式
|
||
- `src/utils/request.ts` - 添加API请求方法
|
||
- `src/locales/*.json` - 添加国际化文本
|
||
|
||
---
|
||
|
||
### 1.3 个人主页封面设置
|
||
|
||
**当前状态**：UserHome 没有封面图，只有纯色渐变背景。
|
||
|
||
**实现方案**：
|
||
|
||
#### 后端
|
||
- 在 `FUser` 模型中添加 `cover_image` 字段
|
||
- 添加封面上传API
|
||
|
||
**模型变更**：
|
||
```python
|
||
# user/models.py
|
||
class FUser(AbstractUser):
|
||
# ... 现有字段 ...
|
||
cover_image = models.ImageField(upload_to='covers/', blank=True, null=True, verbose_name='个人主页封面')
|
||
```
|
||
|
||
**新增API**：
|
||
- `POST /user/profile/cover/` - 上传个人主页封面
|
||
|
||
#### 前端
|
||
- 在 UserHome Hero 区域添加封面图
|
||
- 仅主页所有者显示"更换封面"按钮
|
||
- 支持拖拽或点击上传
|
||
|
||
**修改文件**：
|
||
- `src/pages/UserHome/UserHome.tsx` - 添加封面图和上传功能
|
||
- `src/pages/UserHome/UserHome.css` - 添加封面样式
|
||
- `src/utils/request.ts` - 添加API请求方法
|
||
- `src/locales/*.json` - 添加国际化文本
|
||
|
||
---
|
||
|
||
## 二、个人设置（Profile）功能增强
|
||
|
||
### 2.1 隐私设置
|
||
|
||
**当前状态**：Profile 没有隐私设置选项。
|
||
|
||
**实现方案**：
|
||
|
||
#### 后端
|
||
- 在 `FUser` 模型中添加隐私设置字段
|
||
- 添加隐私设置API
|
||
|
||
**模型变更**：
|
||
```python
|
||
# user/models.py
|
||
class FUser(AbstractUser):
|
||
# ... 现有字段 ...
|
||
privacy_profile = models.CharField(max_length=20, default='public', verbose_name='主页可见性')
|
||
privacy_articles = models.CharField(max_length=20, default='public', verbose_name='文章可见性')
|
||
privacy_friends = models.CharField(max_length=20, default='public', verbose_name='好友列表可见性')
|
||
```
|
||
|
||
**新增API**：
|
||
- `GET /user/privacy/` - 获取隐私设置
|
||
- `PUT /user/privacy/` - 更新隐私设置
|
||
|
||
**响应示例**：
|
||
```json
|
||
{
|
||
"code": 10000,
|
||
"data": {
|
||
"privacy_profile": "public",
|
||
"privacy_articles": "public",
|
||
"privacy_friends": "friends_only"
|
||
}
|
||
}
|
||
```
|
||
|
||
#### 前端
|
||
- 在 Profile 侧边栏添加"隐私设置"菜单项
|
||
- 实现隐私设置表单
|
||
- 选项：公开、仅好友、仅自己
|
||
|
||
**新增文件**：
|
||
- `src/pages/Profile/components/PrivacySettingCard.tsx` - 隐私设置卡片
|
||
|
||
**修改文件**：
|
||
- `src/pages/Profile/Profile.tsx` - 添加隐私设置菜单
|
||
- `src/utils/request.ts` - 添加API请求方法
|
||
- `src/locales/*.json` - 添加国际化文本
|
||
|
||
---
|
||
|
||
### 2.2 登录设备管理
|
||
|
||
**当前状态**：Profile 有"最近登录"记录查看，但没有设备管理功能。
|
||
|
||
**实现方案**：
|
||
|
||
#### 后端
|
||
- 创建 `UserDevice` 模型管理登录设备
|
||
- 添加设备管理API
|
||
|
||
**新增模型**：
|
||
```python
|
||
# user/models.py
|
||
class UserDevice(models.Model):
|
||
user = models.ForeignKey(FUser, on_delete=models.CASCADE, related_name='devices')
|
||
device_name = models.CharField(max_length=100, verbose_name='设备名称')
|
||
device_type = models.CharField(max_length=20, verbose_name='设备类型')
|
||
browser = models.CharField(max_length=100, verbose_name='浏览器')
|
||
ip_address = models.GenericIPAddressField(verbose_name='IP地址')
|
||
location = models.CharField(max_length=200, verbose_name='登录地点')
|
||
last_active = models.DateTimeField(auto_now=True, verbose_name='最后活跃时间')
|
||
created_at = models.DateTimeField(auto_now_add=True, verbose_name='创建时间')
|
||
is_current = models.BooleanField(default=False, verbose_name='是否当前设备')
|
||
```
|
||
|
||
**新增API**：
|
||
- `GET /user/devices/` - 获取登录设备列表
|
||
- `DELETE /user/devices/<id>/` - 移除/登出设备
|
||
|
||
#### 前端
|
||
- 在 Profile 侧边栏添加"登录设备"菜单项
|
||
- 展示设备列表，包含设备类型图标
|
||
- 支持"退出其他设备"操作
|
||
- 当前设备高亮显示
|
||
|
||
**新增文件**：
|
||
- `src/pages/Profile/components/DeviceManagementCard.tsx` - 设备管理卡片
|
||
|
||
**修改文件**：
|
||
- `src/pages/Profile/Profile.tsx` - 添加设备管理菜单
|
||
- `src/utils/request.ts` - 添加API请求方法
|
||
- `src/locales/*.json` - 添加国际化文本
|
||
|
||
---
|
||
|
||
### 2.3 消息通知设置
|
||
|
||
**当前状态**：Settings（全局设置）有消息通知开关，但 Profile 没有针对个人的通知偏好设置。
|
||
|
||
**实现方案**：
|
||
|
||
#### 后端
|
||
- 在 `FUser` 模型中添加通知偏好字段
|
||
- 添加通知设置API
|
||
|
||
**模型变更**：
|
||
```python
|
||
# user/models.py
|
||
class FUser(AbstractUser):
|
||
# ... 现有字段 ...
|
||
notify_email = models.BooleanField(default=True, verbose_name='邮件通知')
|
||
notify_browser = models.BooleanField(default=True, verbose_name='浏览器通知')
|
||
notify_reply = models.BooleanField(default=True, verbose_name='回复通知')
|
||
notify_like = models.BooleanField(default=True, verbose_name='点赞通知')
|
||
notify_follow = models.BooleanField(default=True, verbose_name='关注通知')
|
||
notify_system = models.BooleanField(default=True, verbose_name='系统通知')
|
||
```
|
||
|
||
**新增API**：
|
||
- `GET /user/notification-settings/` - 获取通知设置
|
||
- `PUT /user/notification-settings/` - 更新通知设置
|
||
|
||
#### 前端
|
||
- 在 Profile 侧边栏添加"消息通知"菜单项
|
||
- 实现通知设置表单
|
||
- 分类设置：评论、点赞、关注、系统
|
||
|
||
**新增文件**：
|
||
- `src/pages/Profile/components/NotificationSettingCard.tsx` - 通知设置卡片
|
||
|
||
**修改文件**：
|
||
- `src/pages/Profile/Profile.tsx` - 添加通知设置菜单
|
||
- `src/utils/request.ts` - 添加API请求方法
|
||
- `src/locales/*.json` - 添加国际化文本
|
||
|
||
---
|
||
|
||
## 三、文件清单
|
||
|
||
### 新增文件
|
||
|
||
| 文件路径 | 说明 |
|
||
|---------|------|
|
||
| `src/pages/UserHome/components/CourseProgressCard.tsx` | 课程进度卡片 |
|
||
| `src/pages/UserHome/components/ActivityTimeline.tsx` | 活动时间线 |
|
||
| `src/pages/Profile/components/PrivacySettingCard.tsx` | 隐私设置卡片 |
|
||
| `src/pages/Profile/components/DeviceManagementCard.tsx` | 设备管理卡片 |
|
||
| `src/pages/Profile/components/NotificationSettingCard.tsx` | 通知设置卡片 |
|
||
| `learn/migrations/0005_add_course_progress.py` | 学习进度迁移 |
|
||
| `user/migrations/0007_add_user_device_and_privacy.py` | 设备管理迁移 |
|
||
|
||
### 修改文件
|
||
|
||
| 文件路径 | 说明 |
|
||
|---------|------|
|
||
| `learn/views.py` | 添加学习进度接口 |
|
||
| `learn/urls.py` | 添加学习进度路由 |
|
||
| `user/models.py` | 添加封面、隐私、通知字段，UserDevice模型 |
|
||
| `user/views/user.py` | 添加隐私、设备、通知接口 |
|
||
| `user/urls.py` | 添加新路由 |
|
||
| `src/pages/UserHome/UserHome.tsx` | 添加学习标签页、活动实现、封面功能 |
|
||
| `src/pages/UserHome/UserHome.css` | 添加时间线、进度条、封面样式 |
|
||
| `src/pages/Profile/Profile.tsx` | 添加新菜单项 |
|
||
| `src/utils/request.ts` | 添加API请求方法 |
|
||
| `src/locales/zh.json` | 添加中文国际化 |
|
||
| `src/locales/en.json` | 添加英文国际化 |
|
||
| `src/locales/ja.json` | 添加日文国际化 |
|
||
| `src/locales/ko.json` | 添加韩文国际化 |
|
||
| `src/locales/ru.json` | 添加俄文国际化 |
|
||
| `src/locales/zh-TW.json` | 添加繁体中文国际化 |
|
||
|
||
---
|
||
|
||
## 四、实现步骤
|
||
|
||
### 第一阶段：后端基础
|
||
1. 添加 `UserDevice` 模型和相关迁移
|
||
2. 添加 `FUser` 的新字段（封面、隐私、通知）和相关迁移
|
||
3. 实现学习进度API
|
||
4. 实现用户活动API
|
||
5. 实现隐私设置API
|
||
6. 实现设备管理API
|
||
7. 实现通知设置API
|
||
8. 运行数据库迁移
|
||
|
||
### 第二阶段：前端个人主页
|
||
1. 添加学习/课程展示标签页
|
||
2. 实现活动时间线组件
|
||
3. 实现个人主页封面设置功能
|
||
|
||
### 第三阶段：前端个人设置
|
||
1. 实现隐私设置组件
|
||
2. 实现登录设备管理组件
|
||
3. 实现消息通知设置组件
|
||
|
||
### 第四阶段：国际化
|
||
1. 添加所有新文本的国际化支持
|
||
2. 测试多语言显示
|
||
|
||
### 第五阶段：测试与优化
|
||
1. 功能测试
|
||
2. UI/UX优化
|
||
3. 响应式适配
|
||
|
||
---
|
||
|
||
## 五、验证步骤
|
||
|
||
### 后端验证
|
||
1. 运行 `python manage.py migrate` 确认迁移成功
|
||
2. 使用API测试工具测试所有新接口
|
||
3. 验证权限控制（仅本人可操作）
|
||
|
||
### 前端验证
|
||
1. 启动开发服务器 `npm run dev`
|
||
2. 访问 `/user` 查看个人主页新功能
|
||
3. 访问 `/profile` 查看个人设置新功能
|
||
4. 测试深色/浅色模式下的显示
|
||
5. 测试移动端响应式布局
|
||
|
||
### 功能验证清单
|
||
- [ ] 学习进度正确显示
|
||
- [ ] 活动时间线正确聚合
|
||
- [ ] 个人主页封面可上传和显示
|
||
- [ ] 隐私设置正确保存和应用
|
||
- [ ] 登录设备列表正确显示
|
||
- [ ] 可成功退出其他设备
|
||
- [ ] 消息通知设置正确保存
|
||
- [ ] 多语言文本正确显示
|
||
|
||
---
|
||
|
||
## 六、技术注意事项
|
||
|
||
1. **性能优化**：活动时间线需要分页加载，避免一次性加载过多数据
|
||
2. **安全考虑**：隐私设置需要在所有相关接口中生效
|
||
3. **图片上传**：封面图片需要压缩和格式验证
|
||
4. **设备识别**：使用 User-Agent 解析设备信息
|
||
5. **兼容性**：确保新字段不影响现有用户数据 |