root/vscode-workbench

Fork 0

Files

T

root 39af400fc8 feat: PLANNING体系首版（00路线图/02任务总表/03执行协议/I-03/I-04/registry42口径）+M1止血交付

2026-09-12 14:25:25 +08:00

12 KiB

Raw Blame History

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

概述

本文档描述个人主页（UserHome）和个人设置（Profile）的功能增强实现方案。

用户选择的功能

个人主页（UserHome）：

学习/课程展示 - 展示用户已学习的课程和学习进度
活动时间线 - 展示用户的动态、评论、点赞等活动
个人主页封面设置 - 允许用户自定义个人主页的背景图/封面

个人设置（Profile）：

隐私设置 - 控制谁可以查看你的主页、文章等内容
登录设备管理 - 管理已登录的设备，支持远程登出
消息通知设置 - 管理邮件、浏览器等消息通知偏好

一、个人主页（UserHome）功能增强

1.1 学习/课程展示

当前状态：UserHome 没有展示用户已学课程和学习进度。

实现方案：

后端

在 learn/views.py 中添加接口获取用户学习进度
返回用户已学习的课程列表和完成百分比

新增API：

GET /learn/my-progress/ - 获取当前用户学习进度

请求参数：无

响应示例：

{
  "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/ - 获取用户活动时间线

响应示例：

{
  "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

模型变更：

# 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

模型变更：

# 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/ - 更新隐私设置

响应示例：

{
  "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

新增模型：

# 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

模型变更：

# 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`	添加繁体中文国际化

四、实现步骤

第一阶段：后端基础

添加 UserDevice 模型和相关迁移
添加 FUser 的新字段（封面、隐私、通知）和相关迁移
实现学习进度API
实现用户活动API
实现隐私设置API
实现设备管理API
实现通知设置API
运行数据库迁移

第二阶段：前端个人主页

添加学习/课程展示标签页
实现活动时间线组件
实现个人主页封面设置功能

第三阶段：前端个人设置

实现隐私设置组件
实现登录设备管理组件
实现消息通知设置组件

第四阶段：国际化

添加所有新文本的国际化支持
测试多语言显示

第五阶段：测试与优化

功能测试
UI/UX优化
响应式适配

五、验证步骤

后端验证

运行 python manage.py migrate 确认迁移成功
使用API测试工具测试所有新接口
验证权限控制（仅本人可操作）

前端验证

启动开发服务器 npm run dev
访问 /user 查看个人主页新功能
访问 /profile 查看个人设置新功能
测试深色/浅色模式下的显示
测试移动端响应式布局

功能验证清单

学习进度正确显示
活动时间线正确聚合
个人主页封面可上传和显示
隐私设置正确保存和应用
登录设备列表正确显示
可成功退出其他设备
消息通知设置正确保存
多语言文本正确显示

六、技术注意事项

性能优化：活动时间线需要分页加载，避免一次性加载过多数据
安全考虑：隐私设置需要在所有相关接口中生效
图片上传：封面图片需要压缩和格式验证
设备识别：使用 User-Agent 解析设备信息
兼容性：确保新字段不影响现有用户数据

12 KiB Raw Blame History Unescape Escape

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

概述

用户选择的功能

一、个人主页（UserHome）功能增强

1.1 学习/课程展示

后端

前端

1.2 活动时间线

后端

前端

1.3 个人主页封面设置

后端

前端

二、个人设置（Profile）功能增强

2.1 隐私设置

后端

前端

2.2 登录设备管理

后端

前端

2.3 消息通知设置

后端

前端

三、文件清单

新增文件

修改文件

四、实现步骤

第一阶段：后端基础

第二阶段：前端个人主页

第三阶段：前端个人设置

第四阶段：国际化

第五阶段：测试与优化

五、验证步骤

后端验证

前端验证

功能验证清单

六、技术注意事项

12 KiB

Raw Blame History