# 学习页面优化计划（简化版）

## 问题分析

1. 课程卡片点击无效果 — 缺少课程详情弹窗逻辑
2. `learning.ts` import 了已删除的组件，编译报错
3. 缺少"开始学习"→ 视频页 → 答题页的完整流程

## 企业级组件拆分原则

| 组件 | 策略 | 原因 |
|------|------|------|
| 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 类名