107 lines
3.2 KiB
Markdown
107 lines
3.2 KiB
Markdown
# 编程学习模块添加浏览历史记录
|
|
|
|
## 摘要
|
|
为 Learn 模块（课程列表页和课程学习详情页）添加浏览历史记录功能，支持云端和本地存储。
|
|
|
|
## 当前状态分析
|
|
|
|
### 缺失的页面
|
|
|
|
| 页面 | 文件路径 | 是否使用 useRecordHistory |
|
|
|------|----------|---------------------------|
|
|
| 课程列表页（桌面端） | `src/pages/Learn/Learn.tsx` | ❌ 否 |
|
|
| 课程列表页（移动端） | `src/pages/Learn/LearnMobile.tsx` | ❌ 否 |
|
|
| 课程学习详情页 | `src/pages/CourseLearn/CourseLearn.tsx` | ❌ 否 |
|
|
|
|
### 现有功能
|
|
- 项目已有完整的浏览历史系统，支持 `learn` 类型
|
|
- 后端 `BrowsingHistory` 模型已支持 `learn` 类型
|
|
- 前端 `useRecordHistory` Hook 支持 `learn` 类型
|
|
- 历史记录页面已有"学习"类型筛选按钮
|
|
|
|
## 实施步骤
|
|
|
|
### 步骤 1：在 CourseLearn.tsx 添加浏览记录
|
|
|
|
**文件**: `src/pages/CourseLearn/CourseLearn.tsx`
|
|
|
|
**修改内容**:
|
|
1. 添加 `useRecordHistory` 导入
|
|
2. 在获取课程详情成功后，调用 `useRecordHistory` 记录浏览历史
|
|
3. 需要等 `courseData` 加载完成后调用
|
|
|
|
**代码修改**:
|
|
```typescript
|
|
// 添加导入
|
|
import { useRecordHistory } from "@/hooks/useRecordHistory";
|
|
|
|
// 在组件中使用
|
|
const [courseData, setCourseData] = useState<CourseDetailData | null>(null);
|
|
|
|
useRecordHistory(
|
|
courseData
|
|
? {
|
|
type: "learn",
|
|
title: courseData.title,
|
|
description: courseData.description,
|
|
image: courseData.cover_image_url || "",
|
|
category: courseData.category,
|
|
link: `/course-learn?id=${courseData.id}`,
|
|
}
|
|
: null
|
|
);
|
|
```
|
|
|
|
### 步骤 2：在 Learn.tsx 添加浏览记录
|
|
|
|
**文件**: `src/pages/Learn/Learn.tsx`
|
|
|
|
**修改内容**:
|
|
1. 添加 `useRecordHistory` 导入
|
|
2. 记录课程列表页的浏览
|
|
|
|
**代码修改**:
|
|
```typescript
|
|
// 添加导入
|
|
import { useRecordHistory } from "@/hooks/useRecordHistory";
|
|
|
|
// 在组件顶部调用
|
|
useRecordHistory({
|
|
type: "learn",
|
|
title: "编程学习",
|
|
description: "系统化编程学习课程，从入门到精通",
|
|
link: "/learn",
|
|
});
|
|
```
|
|
|
|
### 步骤 3：在 LearnMobile.tsx 添加浏览记录
|
|
|
|
**文件**: `src/pages/Learn/LearnMobile.tsx`
|
|
|
|
**修改内容**: 与 Learn.tsx 相同
|
|
|
|
## 涉及的文件清单
|
|
|
|
| 文件 | 操作 |
|
|
|------|------|
|
|
| `src/pages/CourseLearn/CourseLearn.tsx` | 添加 useRecordHistory 调用 |
|
|
| `src/pages/Learn/Learn.tsx` | 添加 useRecordHistory 调用 |
|
|
| `src/pages/Learn/LearnMobile.tsx` | 添加 useRecordHistory 调用 |
|
|
|
|
## 验证步骤
|
|
|
|
1. 运行 TypeScript 编译检查：`npx tsc --noEmit`
|
|
2. 启动开发服务器：`npm run dev`
|
|
3. 测试以下场景：
|
|
- 访问 `/learn` 页面，检查是否记录浏览历史
|
|
- 访问 `/course-learn?id=1` 页面，检查是否记录浏览历史
|
|
- 检查历史记录页面（`/history`）是否能正确显示学习记录
|
|
- 未登录用户访问时，检查 localStorage 是否有记录
|
|
- 已登录用户访问时，检查云端是否有记录
|
|
|
|
## 注意事项
|
|
|
|
- `useRecordHistory` 的防抖机制：同一链接 2 秒内不重复记录
|
|
- 课程详情页的 `link` 需要包含课程 ID，以便正确区分不同课程
|
|
- 课程列表页的 `link` 固定为 `/learn`
|