学习页面优化计划（简化版）
问题分析
- 课程卡片点击无效果 — 缺少课程详情弹窗逻辑
learning.ts import 了已删除的组件，编译报错- 缺少"开始学习"→ 视频页 → 答题页的完整流程
企业级组件拆分原则
| 组件 |
策略 |
原因 |
| learning 页面内容 |
✅ 一个组件搞定 |
单页面内容，无需拆分 |
| 课程详情 Sheet |
✅ 内嵌到 learning.html |
仅此一处使用，无需独立组件 |
| video-player |
✅ 已有独立路由页面 |
全屏页面，独立路由 |
| quiz |
✅ 已有独立路由页面 |
全屏页面，独立路由 |
| quiz-result |
✅ 已有独立路由页面 |
全屏页面，独立路由 |
核心原则：只有多处复用才抽离为共享组件，单一用途直接内嵌。
实现方案
唯一需要改的文件
| 文件 |
操作 |
features/learning/learning/learning.html |
重写：学习路线 + 课程网格 + 全部模块 + 课程详情 Sheet（内嵌） |
features/learning/learning/learning.ts |
重写：所有逻辑（showCourseDetail、openCourseDetail、closeCourseDetail、startLearning 等） |
功能流程
点击课程卡片 → showCourseDetail = true → 显示课程详情 Sheet
↓ 点击"开始学习"
closeCourseDetail() → router.navigate(['/video-player'])
↓
video-player 页面（已有的独立路由页面）
↓ 点击"进入答题"
router.navigate(['/quiz'])
关键实现
- 课程详情 Sheet 内嵌在 learning.html 底部，用
[class.hidden]="!showCourseDetail()" 控制
- 使用 signals 管理状态（showCourseDetail、selectedCourseId）
- 课程数据在 ts 中维护
- 视频页和答题页使用 Router 导航（已有路由配置）
- 严格按照 demo 的 HTML 结构和 CSS 类名
