---
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)，与首页单词听写卡片配色呼应
- 播放状态下的动态波形动画
- 进度条采用渐变填充效果

### 交互细节

- 输入框获取焦点时边框高亮
- 配置项使用滑块和开关控件
- 播放按钮悬停放大效果
- 当前播放单词突出显示