AI.Demo/.codebuddy/plans/单词听写功能页面开发_85c008d0.md

name	overview	design	todos
单词听写功能页面开发	创建单词听写页面，包含文本输入框、发音配置选项（发音人/朗读次数/语速/是否显示单词）、开始听写按钮，实现基于豆包TTS API的逐词朗读功能	architecture styleKeywords fontSystem colorSystem framework vue Dark Theme Glassmorphism Amber Accent Gradient fontFamily heading subheading body Inter size weight 1.5rem 600 size weight 1.125rem 500 size weight 1rem 400 primary background text functional #f59e0b #d97706 #0d0f17 #1a1d27 #ffffff #94a3b8 #22c55e #ef4444	id content status create-spell-practice-component 创建 SpellPractice.vue 听写组件，集成 TTS API 和播放控制逻辑 completed id content status dependencies add-spell-practice-route 在 router/index.js 中添加 /spell-practice 路由 completed create-spell-practice-component id content status dependencies update-homepage-navigation 更新 HomePage.vue 中单词听写卡片的路由跳转 completed 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)，与首页单词听写卡片配色呼应
• 播放状态下的动态波形动画
• 进度条采用渐变填充效果

交互细节

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