feat(router): 添加拼写练习路由和页面

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

@@ -0,0 +1,128 @@
+---
+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)，与首页单词听写卡片配色呼应
+- 播放状态下的动态波形动画
+- 进度条采用渐变填充效果
+
+### 交互细节
+
+- 输入框获取焦点时边框高亮
+- 配置项使用滑块和开关控件
+- 播放按钮悬停放大效果
+- 当前播放单词突出显示

src/router/index.js

@@ -4,6 +4,7 @@ import Pronunciation from '../views/Pronunciation.vue'
 import Speaking from '../views/Speaking.vue'
 import EssayCorrection from '../views/EssayCorrection.vue'
 import ExamAnalysis from '../views/ExamAnalysis.vue'
+import SpellPractice from '../views/SpellPractice.vue'
 
 const router = createRouter({
   history: createWebHistory(import.meta.env.BASE_URL),
@@ -32,6 +33,11 @@ const router = createRouter({
       path: '/exam-analysis',
       name: 'exam-analysis',
       component: ExamAnalysis
+    },
+    {
+      path: '/spell-practice',
+      name: 'spell-practice',
+      component: SpellPractice
     }
   ]
 })

src/views/HomePage.vue

@@ -43,7 +43,7 @@ const features = ref([
     desc: "自适应发音报词，智能追踪拼写薄弱点，让词汇记忆更高效。",
     class: "card-5",
     icon: "spell",
-    route: null,
+    route: "/spell-practice",
   },
   {
     id: 6,