编程学习模块添加浏览历史记录

摘要

为 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

修改内容:

添加 useRecordHistory 导入
在获取课程详情成功后，调用 useRecordHistory 记录浏览历史
需要等 courseData 加载完成后调用

代码修改:

// 添加导入
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

修改内容:

添加 useRecordHistory 导入
记录课程列表页的浏览

代码修改:

// 添加导入
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 调用

验证步骤

运行 TypeScript 编译检查：npx tsc --noEmit
启动开发服务器：npm run dev
测试以下场景：
- 访问 /learn 页面，检查是否记录浏览历史
- 访问 /course-learn?id=1 页面，检查是否记录浏览历史
- 检查历史记录页面（/history）是否能正确显示学习记录
- 未登录用户访问时，检查 localStorage 是否有记录
- 已登录用户访问时，检查云端是否有记录

注意事项

useRecordHistory 的防抖机制：同一链接 2 秒内不重复记录
课程详情页的 link 需要包含课程 ID，以便正确区分不同课程
课程列表页的 link 固定为 /learn

3.2 KiB Raw Blame History