online_sys/frontend_智能开发/AI课程可试看功能实现总结.md

AI课程"可试看"功能实现总结

📋 实施时间

实施日期: 2025-01-15

✅ 已完成的工作

1. 数据层配置 (src/data/mockData.js)

修改位置: generatePublicCourseLiveList 函数

修改内容:

• 在第510-514行添加了可试看配置(有映射的课程)
• 在第551-555行添加了可试看配置(没有映射的课程)

// 第一处:有映射的课程
if (event.title === "为什么要学习 AI" && unitName === "AI 入门与工具环境") {
  courseData.canPreview = true;
  courseData.previewUrl = "https://du9uay.github.io/AIcourse-education-web/#/";
}

// 第二处:没有映射的课程
if (event.title === "为什么要学习 AI" && defaultUnit === "AI 入门与工具环境") {
  courseData.canPreview = true;
  courseData.previewUrl = "https://du9uay.github.io/AIcourse-education-web/#/";
}

备份文件: src/data/mockData.js.backup_*_add_ai_preview

2. 组件层配置 (src/components/PublicCourseList/index.jsx)

修改位置1: 单元标题 (第299-326行)

• 添加了单元级别的"可试看"标签
• 当单元包含可试看课程时,在单元标题右侧显示蓝色"可试看"标签
• 为单元添加 has-preview-unit 类名

修改位置2: 课程项 (第334-362行)

• 添加了课程级别的"可试看"标签
• 在课程卡片中央显示蓝色"可试看"标签
• 为课程添加 has-preview 类名

备份文件: src/components/PublicCourseList/index.jsx.backup_*_add_preview

3. 样式层配置 (src/components/PublicCourseList/index.css)

修改位置: 文件末尾 (第446-478行)

添加的样式:

1. .course-list-item.has-preview-unit .arco-collapse-item-header - 单元渐变蓝色背景
2. .course-list-item .time-line-item.has-preview - 课程蓝色虚线边框
3. .course-list-item .time-line-item .preview-badge - 可试看标签样式
4. .course-list-item .time-line-item.has-preview.selected .preview-badge - 选中状态样式

备份文件: src/components/PublicCourseList/index.css.backup_*_add_preview

4. 播放器支持 (src/components/CoursesVideoPlayer/index.jsx)

已确认: 视频播放器组件已经支持可试看功能

• 第157-224行实现了iframe播放逻辑
• 支持全屏切换功能
• zoom属性自动调整(非全屏0.5,全屏1)

🎨 视觉效果

单元样式

┌─────────────────────────────────┐
│ AI 入门与工具环境 [可试看]      │ ← 渐变蓝色背景 #f0f7ff → #e8f3ff
└─────────────────────────────────┘

课程样式

┌─────────────────────────────────┐
│         [可试看]                │ ← 蓝色标签居中 #4080ff
│  为什么要学习 AI                │
│  李奇         2025-09-05         │
└─────────────────────────────────┘

🔍 关键技术点

1. 数据筛选逻辑分析

AI课程的筛选条件:

if ((event.type === 'public-course' ||
     event.type === 'ai-course' ||
     event.type === 'marketing-course') && event.title)

结论: AI课程使用 type: 'ai-course',不会被筛选掉,可以正常显示。

2. 可试看字段

• canPreview: Boolean - 是否可试看
• previewUrl: String - 试看页面URL

3. iframe缩放

• 非全屏: zoom: 0.5
• 全屏: zoom: 1
• 通过 isFullscreen 状态控制

📝 测试验证清单

✅ 数据层测试

• JavaScript语法检查通过 (node -c src/data/mockData.js)
• 数据结构正确(包含canPreview和previewUrl字段)
• AI课程不会被筛选逻辑过滤

✅ 视觉展示测试(待浏览器验证)

• 单元标题右侧显示"可试看"标签
• 单元背景使用渐变蓝色
• 课程中央显示"可试看"标签
• 课程使用蓝色虚线边框

✅ 功能测试(待浏览器验证)

• 点击"为什么要学习 AI"课程
• 视频播放器区域显示iframe
• iframe加载 https://du9uay.github.io/AIcourse-education-web/#/
• 全屏按钮正常工作
• zoom在全屏/非全屏之间切换

🚀 如何验证

步骤1: 启动开发服务器

cd /Users/apple/Documents/cursor/教务系统/frontend_智能开发
pnpm run dev

步骤2: 打开公共课直播间

1. 浏览器访问 http://localhost:5151
2. 导航到"公共课直播间"页面

步骤3: 检查"AI 入门与工具环境"单元

1. 找到"AI 入门与工具环境"单元
2. 检查单元标题是否有蓝色"可试看"标签
3. 检查单元背景是否为渐变蓝色

步骤4: 检查"为什么要学习 AI"课程

1. 展开"AI 入门与工具环境"单元
2. 找到"为什么要学习 AI"课程
3. 检查课程卡片中央是否有蓝色"可试看"标签
4. 检查课程边框是否为蓝色虚线

步骤5: 测试播放功能

1. 点击"为什么要学习 AI"课程
2. 观察右侧视频播放器区域
3. 确认显示iframe而不是锁定图标
4. 确认iframe加载了AI课程网页
5. 测试全屏按钮功能

📊 修改文件清单

文件路径	修改类型	修改行数	备份文件
src/data/mockData.js	添加可试看数据配置	2处,共10行	✅ 已创建
src/components/PublicCourseList/index.jsx	添加标签显示逻辑	2处,共35行	✅ 已创建
src/components/PublicCourseList/index.css	添加可试看样式	1处,共33行	✅ 已创建
src/components/CoursesVideoPlayer/index.jsx	无需修改(已支持)	0行	-

⚠️ 注意事项

1. AI课程不会被筛选

经过检查,generatePublicCourseLiveList 函数的筛选条件包含 event.type === 'ai-course',因此AI课程可以正常显示。

2. 双重配置保障

为了确保可试看功能在任何情况下都能生效,我们在两个地方添加了配置:

• 有课程映射时 (第510-514行)
• 没有课程映射时 (第551-555行)

3. iframe跨域问题

确认目标URL https://du9uay.github.io/AIcourse-education-web/#/ 允许被iframe嵌套,不会有X-Frame-Options限制。

4. 样式优先级

CSS样式添加在文件末尾,具有较高的优先级,可以覆盖默认样式。

🔄 如何回滚

如果需要回滚更改,可以从备份文件恢复:

# 回滚mockData.js
cp src/data/mockData.js.backup_*_add_ai_preview src/data/mockData.js

# 回滚PublicCourseList组件
cp src/components/PublicCourseList/index.jsx.backup_*_add_preview src/components/PublicCourseList/index.jsx

# 回滚PublicCourseList样式
cp src/components/PublicCourseList/index.css.backup_*_add_preview src/components/PublicCourseList/index.css

📚 相关文档

• 可试看功能实现文档
• AI课程添加可试看功能操作文档

👥 实施人员

• AI Assistant: 配置实施
• 项目: 教务系统前端(智能开发产业)

---

总结: 已成功为"为什么要学习 AI"课程添加可试看功能,包括数据配置、组件更新和样式添加。所有修改均已创建备份,可安全回滚。语法验证通过,待浏览器端功能测试。