160 lines
5.1 KiB
Markdown
160 lines
5.1 KiB
Markdown
# 文章模块功能完善计划
|
||
|
||
## Summary
|
||
修复文章模块的功能缺陷，并添加搜索、相关推荐、阅读进度等核心新功能，提升用户体验。
|
||
|
||
## Current State Analysis
|
||
|
||
### 已有功能
|
||
- ✅ 文章列表（网格/列表视图）
|
||
- ✅ 分类筛选 + 排序 + 分页
|
||
- ✅ 文章详情页（含封面、作者信息、标签）
|
||
- ✅ 点赞 / 收藏 / 评论 / 回复
|
||
- ✅ @用户提及功能
|
||
- ✅ 评论点赞
|
||
- ✅ 分享（复制链接）
|
||
- ✅ 文章管理后台（基础版）
|
||
|
||
### 功能缺陷
|
||
1. **关注按钮无实际功能** - `ArticleDetail.tsx:392-399` 只切换本地状态；`UserHome.tsx:543-546` 只显示"即将开放"
|
||
2. **无文章种子数据** - `article/management/commands/` 下没有 `seed_articles.py`
|
||
3. **点击标签无法筛选** - `Articles.tsx` 中标签没有点击事件，无法按标签筛选
|
||
|
||
### 缺失的核心功能
|
||
- 文章搜索（按标题/摘要/标签）
|
||
- 相关推荐（同分类或同标签）
|
||
- 阅读进度条
|
||
- 评论分页加载
|
||
|
||
---
|
||
|
||
## Proposed Changes
|
||
|
||
### Phase 1: 修复功能缺陷
|
||
|
||
#### 1.1 添加 Follow 模型（后端）
|
||
**文件**: `user/models.py`
|
||
- 添加 `Follow` 模型：
|
||
```python
|
||
class Follow(models.Model):
|
||
follower = models.ForeignKey(FUser, on_delete=models.CASCADE, related_name='following')
|
||
following = models.ForeignKey(FUser, on_delete=models.CASCADE, related_name='followers')
|
||
created_at = models.DateTimeField(auto_now_add=True)
|
||
|
||
class Meta:
|
||
unique_together = ('follower', 'following')
|
||
ordering = ['-created_at']
|
||
```
|
||
|
||
#### 1.2 添加关注 API（后端）
|
||
**文件**: `user/views/user.py`
|
||
- `FollowToggleView` - 关注/取消关注
|
||
- POST /api/users/<user_id>/follow/
|
||
- 返回: { is_following: bool, follower_count: int, following_count: int }
|
||
|
||
**文件**: `user/urls.py`
|
||
- 添加路由: `path('<int:user_id>/follow/', FollowToggleView.as_view())`
|
||
|
||
#### 1.3 添加种子数据命令
|
||
**文件**: `article/management/commands/seed_articles.py`
|
||
- 创建 6-8 篇示例文章
|
||
- 覆盖不同分类：tech, design, productivity, industry, React, Python
|
||
- 包含封面图 URL、标签、摘要、内容
|
||
|
||
#### 1.4 前端关注按钮接入真实 API
|
||
**文件**: `ArticleDetail.tsx`
|
||
- 修改 `handleFollow` 函数调用真实 API
|
||
- 加载时检查当前关注状态
|
||
- 关注/取消关注后更新本地状态和计数
|
||
|
||
**文件**: `utils/request.ts`
|
||
- 添加 `user.follow(userId)` API 调用
|
||
|
||
#### 1.5 标签点击筛选
|
||
**文件**: `Articles.tsx`
|
||
- 标签添加点击事件，跳转到文章列表并筛选该标签
|
||
- 支持通过 URL 参数 `?tag=xxx` 筛选
|
||
- 后端 `ArticleListCreateView.get_queryset()` 支持 `tag` 参数
|
||
|
||
---
|
||
|
||
### Phase 2: 核心新功能
|
||
|
||
#### 2.1 文章搜索
|
||
**文件**: `article/views.py`
|
||
- `ArticleListCreateView.get_queryset()` 支持 `search` 参数
|
||
- 搜索范围：title, excerpt, tags（使用 Q 对象）
|
||
|
||
**文件**: `Articles.tsx`
|
||
- 在分类筛选栏添加搜索输入框
|
||
- 输入时实时搜索（防抖 300ms）
|
||
- 支持回车触发搜索
|
||
|
||
#### 2.2 相关推荐
|
||
**文件**: `article/views.py`
|
||
- `ArticleDetailView.get()` 返回 `related_articles` 字段
|
||
- 逻辑：同分类 4 篇 + 同标签 4 篇，排除当前文章，按 views 排序取前 4
|
||
|
||
**文件**: `ArticleDetail.tsx`
|
||
- 详情页底部添加"相关推荐"区域
|
||
- 显示文章卡片（封面、标题、浏览量）
|
||
|
||
#### 2.3 阅读进度条
|
||
**文件**: `ArticleDetail.tsx`
|
||
- 页面顶部添加固定进度条
|
||
- 监听 scroll 事件，根据文章区域计算阅读百分比
|
||
|
||
#### 2.4 评论分页
|
||
**文件**: `article/views.py`
|
||
- `ArticleCommentListCreateView` 添加分页支持
|
||
- 支持 `page` 和 `page_size` 参数
|
||
|
||
**文件**: `ArticleDetail.tsx`
|
||
- 评论列表底部添加"加载更多"按钮
|
||
- 或使用无限滚动加载
|
||
|
||
---
|
||
|
||
### Phase 3: 增强功能（可选）
|
||
|
||
#### 3.1 文章目录（TOC）
|
||
- 从文章内容解析 h2/h3 标题生成目录
|
||
- 固定侧边栏显示，点击跳转到对应位置
|
||
- 高亮当前阅读位置
|
||
|
||
#### 3.2 文章管理页分类筛选
|
||
**文件**: `ArticleManage.tsx`
|
||
- 在状态筛选旁添加分类筛选下拉框
|
||
|
||
#### 3.3 社交分享增强
|
||
- 微信分享生成二维码
|
||
- 微博分享链接
|
||
|
||
---
|
||
|
||
## Assumptions & Decisions
|
||
|
||
1. **关注关系设计**: 单向关注（类似 Twitter），非双向好友
|
||
2. **搜索范围**: 标题 + 摘要 + 标签，暂不搜索正文（性能考虑）
|
||
3. **相关推荐优先级**: 同分类优先，其次同标签
|
||
4. **评论分页**: 每页 10 条，支持"加载更多"
|
||
5. **种子文章**: 使用外部图片 URL（Unsplash），不依赖本地上传
|
||
|
||
## Verification
|
||
|
||
### 功能缺陷修复验证
|
||
- [ ] 关注按钮能正确显示关注状态，点击后状态切换
|
||
- [ ] 种子数据命令成功执行，创建 6-8 篇文章
|
||
- [ ] 点击文章标签能跳转到列表页并筛选该标签
|
||
|
||
### 新功能验证
|
||
- [ ] 搜索框输入关键词能实时显示匹配文章
|
||
- [ ] 文章详情页底部显示相关推荐
|
||
- [ ] 阅读时顶部进度条正确显示百分比
|
||
- [ ] 评论超过 10 条时显示"加载更多"按钮
|
||
|
||
### API 验证
|
||
- [ ] POST /api/users/<id>/follow/ 返回正确状态
|
||
- [ ] GET /api/articles/?search=xxx 返回搜索结果
|
||
- [ ] GET /api/articles/<id>/ 返回 related_articles 字段
|