128 lines
3.8 KiB
Markdown
128 lines
3.8 KiB
Markdown
---
|
||
name: 单词听写功能页面开发
|
||
overview: 创建单词听写页面，包含文本输入框、发音配置选项（发音人/朗读次数/语速/是否显示单词）、开始听写按钮，实现基于豆包TTS API的逐词朗读功能
|
||
design:
|
||
architecture:
|
||
framework: vue
|
||
styleKeywords:
|
||
- Dark Theme
|
||
- Glassmorphism
|
||
- Amber Accent
|
||
- Gradient
|
||
fontSystem:
|
||
fontFamily: Inter
|
||
heading:
|
||
size: 1.5rem
|
||
weight: 600
|
||
subheading:
|
||
size: 1.125rem
|
||
weight: 500
|
||
body:
|
||
size: 1rem
|
||
weight: 400
|
||
colorSystem:
|
||
primary:
|
||
- "#f59e0b"
|
||
- "#d97706"
|
||
background:
|
||
- "#0d0f17"
|
||
- "#1a1d27"
|
||
text:
|
||
- "#ffffff"
|
||
- "#94a3b8"
|
||
functional:
|
||
- "#22c55e"
|
||
- "#ef4444"
|
||
todos:
|
||
- id: create-spell-practice-component
|
||
content: 创建 SpellPractice.vue 听写组件，集成 TTS API 和播放控制逻辑
|
||
status: completed
|
||
- id: add-spell-practice-route
|
||
content: 在 router/index.js 中添加 /spell-practice 路由
|
||
status: completed
|
||
dependencies:
|
||
- create-spell-practice-component
|
||
- id: update-homepage-navigation
|
||
content: 更新 HomePage.vue 中单词听写卡片的路由跳转
|
||
status: completed
|
||
dependencies:
|
||
- add-spell-practice-route
|
||
---
|
||
|
||
## 单词听写功能需求
|
||
|
||
### 核心功能
|
||
|
||
1. **单词列表输入**：提供文本输入框，用户可输入需要听写的单词列表（每行一个单词）
|
||
2. **发音配置**：
|
||
|
||
- 发音人选择：复用豆包 TTS 的英语音色（Dacey/Tim/Stokie/Tina）
|
||
- 朗读次数：每个单词朗读 1-5 次可调
|
||
- 语速调节：0.5x - 2.0x 可调
|
||
- 显示控制：朗读时是否显示单词信息（开关切换）
|
||
|
||
3. **听写控制**：
|
||
|
||
- "开始听写"按钮触发逐个朗读
|
||
- 当前播放进度指示
|
||
- 暂停/继续/重播当前单词控制
|
||
- 听写完成后显示统计
|
||
|
||
### 页面布局
|
||
|
||
- 顶部导航栏（返回按钮+标题）
|
||
- 左侧：单词输入区 + 配置面板
|
||
- 右侧：听写进度/控制区
|
||
|
||
## 技术实现方案
|
||
|
||
### 技术栈
|
||
|
||
- Vue 3 Composition API
|
||
- 豆包 TTS API（复用 Pronunciation.vue 的实现模式）
|
||
- 纯前端实现，无额外后端依赖
|
||
|
||
### 核心实现
|
||
|
||
1. **音频生成**：复用 Pronunciation.vue 的 TTS 调用逻辑，逐个单词调用 API 生成音频
|
||
2. **播放控制**：使用 HTML5 Audio API，通过 Audio 元素的 onended 事件触发下一个单词
|
||
3. **状态管理**：使用 Vue ref 管理听写状态（待听写/播放中/暂停/已完成）
|
||
4. **配置传递**：语速通过 audio.playbackRate 设置
|
||
|
||
### 关键逻辑
|
||
|
||
- 单词解析：按换行符分割输入文本，过滤空行和首尾空格
|
||
- 循环播放：使用递归 + onended 事件实现指定次数朗读
|
||
- 进度跟踪：currentIndex + totalWords 计算进度百分比
|
||
- 音频预加载：当前单词播放时可预加载下一个单词音频，提升体验
|
||
|
||
### 文件修改清单
|
||
|
||
- [新建] src/views/SpellPractice.vue - 听写页面组件
|
||
- [修改] src/router/index.js - 添加路由配置
|
||
- [修改] src/views/HomePage.vue - 更新卡片路由
|
||
|
||
## 设计风格
|
||
|
||
沿用项目现有的深色玻璃态设计语言，保持视觉一致性。
|
||
|
||
### 页面结构
|
||
|
||
- 顶部导航栏：返回按钮 + "单词听写" 标题
|
||
- 主内容区采用左右分栏布局：
|
||
- 左侧（55%）：单词输入文本框 + 发音配置面板
|
||
- 右侧（45%）：听写控制台，显示播放进度和操作按钮
|
||
|
||
### 视觉元素
|
||
|
||
- 玻璃态卡片背景（rgba 透明度 + backdrop-filter blur）
|
||
- 主色调采用 Amber (#f59e0b)，与首页单词听写卡片配色呼应
|
||
- 播放状态下的动态波形动画
|
||
- 进度条采用渐变填充效果
|
||
|
||
### 交互细节
|
||
|
||
- 输入框获取焦点时边框高亮
|
||
- 配置项使用滑块和开关控件
|
||
- 播放按钮悬停放大效果
|
||
- 当前播放单词突出显示 |