79 lines
2.5 KiB
Markdown
79 lines
2.5 KiB
Markdown
 
|
# 路由与页面结构
|
|||
|
|
|
|||
|
|
> 本文约定 MVP 的前端页面路由和组件归属。具体 go-app 写法以实现时的代码结构为准。
|
|||
|
|
|
|||
|
|
## 页面路由
|
|||
|
|
|
|||
|
|
| 路由 | 页面 | MVP 说明 |
|
|||
|
|
| --- | --- | --- |
|
|||
|
|
| `/` | 课程列表页 | 默认首页，展示 26 集和各幕状态 |
|
|||
|
|
| `/episode/{episode_id}/act/{act}` | 播放页 | 播放某一集某一幕，支持字幕同步和点句跳转 |
|
|||
|
|
| `/vocab` | 生词本页 | 登录后查看个人生词 |
|
|||
|
|
| `/login` | 登录页 | 登录入口 |
|
|||
|
|
| `/register` | 注册页 | 注册入口 |
|
|||
|
|
|
|||
|
|
后续如果 go-app 路由实现需要 hash 路由，语义仍保持一致。
|
|||
|
|
|
|||
|
|
## 页面职责
|
|||
|
|
|
|||
|
|
### 课程列表页
|
|||
|
|
|
|||
|
|
读取 `episodes.json` 渲染：
|
|||
|
|
|
|||
|
|
- 26 集课程。
|
|||
|
|
- 每集下的 act。
|
|||
|
|
- 是否有音频。
|
|||
|
|
- 后续接入进度后显示学习进度。
|
|||
|
|
|
|||
|
|
视觉参考：`design_mockups/list.html`。
|
|||
|
|
|
|||
|
|
### 播放页
|
|||
|
|
|
|||
|
|
根据 URL 参数定位 `episode_id + act`：
|
|||
|
|
|
|||
|
|
- 有音频时显示播放器、字幕列表、当前句高亮。
|
|||
|
|
- 点击字幕句子时 seek 到该句 `t`。
|
|||
|
|
- 无音频时优雅降级，只显示文本和无音频提示。
|
|||
|
|
- 后续接入生词本后支持点词加入。
|
|||
|
|
- 后续接入进度后读写 `last_position`。
|
|||
|
|
|
|||
|
|
视觉参考：`design_mockups/play.html`。
|
|||
|
|
|
|||
|
|
### 生词本页
|
|||
|
|
|
|||
|
|
通过 `GET /api/vocab` 获取当前登录用户生词：
|
|||
|
|
|
|||
|
|
- 展示单词。
|
|||
|
|
- 展示来源：episode、act、上下文句子。
|
|||
|
|
- 支持删除。
|
|||
|
|
|
|||
|
|
MVP 不展示词典释义。
|
|||
|
|
|
|||
|
|
### 登录 / 注册页
|
|||
|
|
|
|||
|
|
通过账号 API 建立 httpOnly Session Cookie：
|
|||
|
|
|
|||
|
|
- 登录成功后返回原目标页或首页。
|
|||
|
|
- 未登录访问需要账号的页面时，引导登录。
|
|||
|
|
|
|||
|
|
## 组件建议
|
|||
|
|
|
|||
|
|
| 组件 | 归属 | 说明 |
|
|||
|
|
| --- | --- | --- |
|
|||
|
|
| `EpisodeList` | 课程列表页 | 渲染 episode 和 act 列表 |
|
|||
|
|
| `AudioPlayer` | 播放页 | 封装浏览器 Audio API 互操作 |
|
|||
|
|
| `TranscriptView` | 播放页 | 渲染字幕、当前句高亮、点句跳转 |
|
|||
|
|
| `VocabList` | 生词本页 | 渲染当前用户生词 |
|
|||
|
|
| `AuthForm` | 登录 / 注册页 | 复用账号表单 |
|
|||
|
|
|
|||
|
|
`AudioPlayer` 和 `TranscriptView` 是后续多教材可复用的核心组件，但 MVP 不提前实现多教材逻辑。
|
|||
|
|
|
|||
|
|
## 导航规则
|
|||
|
|
|
|||
|
|
- 首页进入播放页：点击某一幕。
|
|||
|
|
- 播放页返回首页：保留简单返回入口。
|
|||
|
|
- 生词本入口：可以放在全局导航或列表页顶部。
|
|||
|
|
- 未登录时：课程内容可否浏览仍待产品确认；需要账号数据的生词本和进度接口必须登录。
|
|||
|
|
|
|||
|
|
如果游客浏览策略未确认，实现账号相关任务前先回到 [`02-requirements.md`](02-requirements.md) 的待确认项做决策。
|