# 个人主页与个人设置功能增强计划

## 概述

本文档描述个人主页（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. **兼容性**：确保新字段不影响现有用户数据