From e1a7764174b05a0c3a758fdfff24243b249af159 Mon Sep 17 00:00:00 2001
From: cc <94575594@qq.com>
Date: Fri, 20 Mar 2026 11:46:18 +0800
Subject: [PATCH] =?UTF-8?q?feat(router):=20=E6=B7=BB=E5=8A=A0=E6=8B=BC?=
 =?UTF-8?q?=E5=86=99=E7=BB=83=E4=B9=A0=E8=B7=AF=E7=94=B1=E5=92=8C=E9=A1=B5?=
 =?UTF-8?q?=E9=9D=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../plans/单词听写功能页面开发_85c008d0.md    |  128 ++
 src/router/index.js                           |    6 +
 src/views/HomePage.vue                        |    2 +-
 src/views/SpellPractice.vue                   | 1278 +++++++++++++++++
 4 files changed, 1413 insertions(+), 1 deletion(-)
 create mode 100644 .codebuddy/plans/单词听写功能页面开发_85c008d0.md
 create mode 100644 src/views/SpellPractice.vue

diff --git a/.codebuddy/plans/单词听写功能页面开发_85c008d0.md b/.codebuddy/plans/单词听写功能页面开发_85c008d0.md
new file mode 100644
index 0000000..6a44991
--- /dev/null
+++ b/.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)，与首页单词听写卡片配色呼应
+- 播放状态下的动态波形动画
+- 进度条采用渐变填充效果
+
+### 交互细节
+
+- 输入框获取焦点时边框高亮
+- 配置项使用滑块和开关控件
+- 播放按钮悬停放大效果
+- 当前播放单词突出显示
\ No newline at end of file
diff --git a/src/router/index.js b/src/router/index.js
index dd1ae5e..543d553 100644
--- a/src/router/index.js
+++ b/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
     }
   ]
 })
diff --git a/src/views/HomePage.vue b/src/views/HomePage.vue
index bd8ebd2..0f4d41f 100644
--- a/src/views/HomePage.vue
+++ b/src/views/HomePage.vue
@@ -43,7 +43,7 @@ const features = ref([
     desc: "自适应发音报词，智能追踪拼写薄弱点，让词汇记忆更高效。",
     class: "card-5",
     icon: "spell",
-    route: null,
+    route: "/spell-practice",
   },
   {
     id: 6,
diff --git a/src/views/SpellPractice.vue b/src/views/SpellPractice.vue
new file mode 100644
index 0000000..0df670e
--- /dev/null
+++ b/src/views/SpellPractice.vue
@@ -0,0 +1,1278 @@
+<script setup>
+import { ref, computed, onUnmounted } from "vue";
+import { useRouter } from "vue-router";
+import {
+  DOUBAO_APP_ID,
+  DOUBAO_ACCESS_TOKEN,
+  DOUBAO_RESOURCE_ID,
+  DOUBAO_TTS_API_PATH,
+  DOUBAO_AUDIO_FORMAT,
+  DOUBAO_SAMPLE_RATE,
+} from "@/config/index.js";
+
+const router = useRouter();
+
+// 单词输入
+const wordInput = ref("");
+const wordList = computed(() => {
+  return wordInput.value
+    .split("\n")
+    .map((w) => w.trim())
+    .filter((w) => w.length > 0);
+});
+
+// 发音配置
+const selectedVoice = ref("4");
+const repeatCount = ref(2);
+const speechRate = ref(1.0);
+const wordInterval = ref(2.0); // 每个单词朗读间隔时间（秒）
+const repeatInterval = ref(1.0); // 单个单词重复朗读间隔时间（秒）
+
+// 英语音色列表
+const englishVoices = ref([
+  {
+    id: "1",
+    name: "Dacey (美音)",
+    avatar: "👩🏼",
+    voice_type: "en_female_dacey_uranus_bigtts",
+  },
+  {
+    id: "2",
+    name: "Tim (美音)",
+    avatar: "👨🏼",
+    voice_type: "en_male_tim_uranus_bigtts",
+  },
+  {
+    id: "3",
+    name: "Stokie (美音)",
+    avatar: "👩🏻",
+    voice_type: "en_female_stokie_uranus_bigtts",
+  },
+  {
+    id: "4",
+    name: "Tina (英音)",
+    avatar: "👩‍🏫",
+    voice_type: "zh_female_yingyujiaoxue_uranus_bigtts",
+  },
+]);
+
+// 听写状态
+const dictationState = ref("idle"); // idle | playing | paused | completed
+const currentWordIndex = ref(0);
+const currentRepeatIndex = ref(0);
+const completedWords = ref(0);
+
+let audioInstance = null;
+let audioCache = new Map(); // 缓存已生成的音频
+
+// 进度计算
+const progress = computed(() => {
+  if (wordList.value.length === 0) return 0;
+  return Math.round((completedWords.value / wordList.value.length) * 100);
+});
+
+const currentWord = computed(() => {
+  if (wordList.value.length === 0) return "";
+  return wordList.value[currentWordIndex.value] || "";
+});
+
+const statusText = computed(() => {
+  switch (dictationState.value) {
+    case "idle":
+      return wordList.value.length > 0
+        ? `准备就绪，共 ${wordList.value.length} 个单词`
+        : "请输入单词列表";
+    case "playing":
+      return `正在朗读: ${currentWord.value}`;
+    case "paused":
+      return `已暂停: ${currentWord.value}`;
+    case "completed":
+      return `听写完成！共 ${wordList.value.length} 个单词`;
+    default:
+      return "";
+  }
+});
+
+// 预加载音频
+const preloadAudio = async (word) => {
+  const cacheKey = `${word}_${selectedVoice.value}`;
+  if (audioCache.has(cacheKey)) {
+    return audioCache.get(cacheKey);
+  }
+
+  try {
+    const voice = englishVoices.value.find((v) => v.id === selectedVoice.value);
+    const payload = {
+      user: { uid: "spell_" + Date.now() },
+      req_params: {
+        text: word,
+        speaker: voice.voice_type,
+        audio_params: {
+          format: DOUBAO_AUDIO_FORMAT,
+          sample_rate: DOUBAO_SAMPLE_RATE,
+        },
+      },
+    };
+
+    const response = await fetch(DOUBAO_TTS_API_PATH, {
+      method: "POST",
+      headers: {
+        "Content-Type": "application/json",
+        "X-Api-App-Id": DOUBAO_APP_ID,
+        "X-Api-Access-Key": DOUBAO_ACCESS_TOKEN,
+        "X-Api-Resource-Id": DOUBAO_RESOURCE_ID,
+        "X-Api-Request-Id": crypto.randomUUID(),
+      },
+      body: JSON.stringify(payload),
+    });
+
+    if (!response.ok) throw new Error(`HTTP ${response.status}`);
+
+    const reader = response.body.getReader();
+    const decoder = new TextDecoder();
+    let buffer = "";
+    let audioChunks = [];
+
+    while (true) {
+      const { done, value } = await reader.read();
+      if (done) break;
+      buffer += decoder.decode(value, { stream: true });
+      const lines = buffer.split("\n");
+      buffer = lines.pop();
+      for (const line of lines) {
+        if (!line.trim()) continue;
+        try {
+          const resData = JSON.parse(line);
+          if (resData.code === 0 && resData.data) {
+            const binaryString = window.atob(resData.data);
+            const bytes = new Uint8Array(binaryString.length);
+            for (let i = 0; i < binaryString.length; i++) {
+              bytes[i] = binaryString.charCodeAt(i);
+            }
+            audioChunks.push(bytes);
+          }
+        } catch (e) {}
+      }
+    }
+
+    if (buffer.trim()) {
+      try {
+        const resData = JSON.parse(buffer);
+        if (resData.code === 0 && resData.data) {
+          const binaryString = window.atob(resData.data);
+          const bytes = new Uint8Array(binaryString.length);
+          for (let i = 0; i < binaryString.length; i++) {
+            bytes[i] = binaryString.charCodeAt(i);
+          }
+          audioChunks.push(bytes);
+        }
+      } catch (e) {}
+    }
+
+    if (audioChunks.length > 0) {
+      const totalLength = audioChunks.reduce((acc, val) => acc + val.length, 0);
+      const allBytes = new Uint8Array(totalLength);
+      let offset = 0;
+      for (const chunk of audioChunks) {
+        allBytes.set(chunk, offset);
+        offset += chunk.length;
+      }
+      const blob = new Blob([allBytes], { type: "audio/mp3" });
+      const url = URL.createObjectURL(blob);
+      audioCache.set(cacheKey, url);
+      return url;
+    }
+  } catch (error) {
+    console.error("Preload audio error:", error);
+  }
+  return null;
+};
+
+// 播放音频
+const playAudio = (url) => {
+  if (audioInstance) {
+    audioInstance.pause();
+    audioInstance = null;
+  }
+  audioInstance = new Audio(url);
+  audioInstance.playbackRate = speechRate.value;
+  audioInstance.onended = handleAudioEnded;
+  audioInstance.onerror = handleAudioError;
+  audioInstance.play().catch(handleAudioError);
+};
+
+// 处理音频播放结束
+const handleAudioEnded = () => {
+  // 检查是否已停止
+  if (dictationState.value !== "playing") return;
+
+  currentRepeatIndex.value++;
+  if (currentRepeatIndex.value < repeatCount.value) {
+    // 继续播放同一单词的下一次，间隔 repeatInterval 秒
+    setTimeout(() => {
+      if (dictationState.value !== "playing") return;
+      const cacheKey = `${currentWord.value}_${selectedVoice.value}`;
+      const url = audioCache.get(cacheKey);
+      if (url) {
+        playAudio(url);
+      }
+    }, repeatInterval.value * 1000);
+  } else {
+    // 进入下一个单词
+    completedWords.value++;
+    currentRepeatIndex.value = 0;
+    currentWordIndex.value++;
+
+    if (currentWordIndex.value < wordList.value.length) {
+      // 间隔 wordInterval 秒后播放下一个单词
+      setTimeout(() => {
+        if (dictationState.value !== "playing") return;
+        playNextWord();
+      }, wordInterval.value * 1000);
+    } else {
+      // 全部完成
+      dictationState.value = "completed";
+    }
+  }
+};
+
+const handleAudioError = () => {
+  // 出错时跳过当前单词
+  currentRepeatIndex.value++;
+  if (currentRepeatIndex.value < repeatCount.value) {
+    const cacheKey = `${currentWord.value}_${selectedVoice.value}`;
+    const url = audioCache.get(cacheKey);
+    if (url) playAudio(url);
+  } else {
+    completedWords.value++;
+    currentRepeatIndex.value = 0;
+    currentWordIndex.value++;
+    if (currentWordIndex.value < wordList.value.length) {
+      playNextWord();
+    } else {
+      dictationState.value = "completed";
+    }
+  }
+};
+
+// 播放下一个单词
+const playNextWord = async () => {
+  const word = currentWord.value;
+  if (!word) return;
+
+  const url = await preloadAudio(word);
+  if (url) {
+    playAudio(url);
+  } else {
+    // 生成失败，跳过
+    handleAudioError();
+  }
+};
+
+// 开始听写
+const startDictation = async () => {
+  if (wordList.value.length === 0) return;
+
+  // 重置状态
+  dictationState.value = "playing";
+  currentWordIndex.value = 0;
+  currentRepeatIndex.value = 0;
+  completedWords.value = 0;
+  audioCache.clear();
+
+  // 预加载第一个单词并播放
+  const firstWord = wordList.value[0];
+  const url = await preloadAudio(firstWord);
+  if (url) {
+    playAudio(url);
+  }
+};
+
+// 暂停听写
+const pauseDictation = () => {
+  if (audioInstance) {
+    audioInstance.pause();
+  }
+  dictationState.value = "paused";
+};
+
+// 继续听写
+const resumeDictation = () => {
+  if (audioInstance) {
+    audioInstance.play();
+  }
+  dictationState.value = "playing";
+};
+
+// 重播当前单词
+const replayCurrentWord = async () => {
+  if (!currentWord.value) return;
+  currentRepeatIndex.value = 0;
+  const url = await preloadAudio(currentWord.value);
+  if (url) {
+    playAudio(url);
+    dictationState.value = "playing";
+  }
+};
+
+// 停止听写
+const stopDictation = () => {
+  if (audioInstance) {
+    audioInstance.pause();
+    audioInstance = null;
+  }
+  dictationState.value = "idle";
+  currentWordIndex.value = 0;
+  currentRepeatIndex.value = 0;
+  completedWords.value = 0;
+};
+
+// 重置听写
+const resetDictation = () => {
+  stopDictation();
+  wordInput.value = "";
+};
+
+onUnmounted(() => {
+  if (audioInstance) {
+    audioInstance.pause();
+    audioInstance = null;
+  }
+  // 清理缓存的音频 URL
+  audioCache.forEach((url) => URL.revokeObjectURL(url));
+  audioCache.clear();
+});
+</script>
+
+<template>
+  <div class="page-container">
+    <nav class="nav-bar">
+      <button @click="router.push('/')" class="back-btn">
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          fill="none"
+          viewBox="0 0 24 24"
+          stroke-width="2"
+          stroke="currentColor"
+        >
+          <path
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            d="M10.5 19.5L3 12m0 0l7.5-7.5M3 12h18"
+          />
+        </svg>
+        返回首页
+      </button>
+      <div class="nav-title">单词听写</div>
+    </nav>
+
+    <div class="content-grid">
+      <!-- 左侧：单词输入区 + 听写控制区（上下排列） -->
+      <div class="left-column">
+        <!-- 单词输入区 -->
+        <div class="panel input-panel">
+          <div class="panel-header">
+            <h3>单词列表</h3>
+            <span class="word-count">{{ wordList.length }} 个单词</span>
+          </div>
+          <div class="word-input-wrapper">
+            <textarea
+              v-model="wordInput"
+              class="word-input"
+              placeholder="请输入要听写的单词，每行一个单词&#10;例如：&#10;apple&#10;banana"
+              :disabled="
+                dictationState === 'playing' || dictationState === 'paused'
+              "
+            ></textarea>
+          </div>
+        </div>
+
+        <!-- 听写控制区 -->
+        <div class="panel control-panel">
+          <!-- 状态显示 -->
+          <div class="status-area">
+            <div class="status-text">{{ statusText }}</div>
+
+            <!-- 进度条 -->
+            <div class="progress-container" v-if="wordList.length > 0">
+              <div class="progress-bar">
+                <div
+                  class="progress-fill"
+                  :style="{ width: progress + '%' }"
+                ></div>
+              </div>
+              <span class="progress-text"
+                >{{ completedWords }} / {{ wordList.length }}</span
+              >
+            </div>
+          </div>
+
+          <!-- 当前单词显示 -->
+          <div class="current-word-area" v-if="dictationState === 'completed'">
+            <div class="current-word">{{ currentWord }}</div>
+            <div class="repeat-indicator">
+              第 {{ currentRepeatIndex + 1 }} / {{ repeatCount }} 遍
+            </div>
+          </div>
+
+          <!-- 波形动画 -->
+          <div class="waveform-area" v-if="dictationState === 'playing'">
+            <div class="waveform">
+              <span
+                v-for="i in 12"
+                :key="i"
+                class="wave-bar"
+                :style="{ animationDelay: i * 0.1 + 's' }"
+              ></span>
+            </div>
+          </div>
+
+          <!-- 完成图标 -->
+          <div class="complete-icon" v-if="dictationState === 'completed'">
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              fill="none"
+              viewBox="0 0 24 24"
+              stroke-width="1.5"
+              stroke="currentColor"
+            >
+              <path
+                stroke-linecap="round"
+                stroke-linejoin="round"
+                d="M9 12.75L11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
+              />
+            </svg>
+          </div>
+
+          <!-- 控制按钮 -->
+          <div class="control-buttons">
+            <!-- 空闲状态 -->
+            <template v-if="dictationState === 'idle'">
+              <button
+                class="primary-btn"
+                :disabled="wordList.length === 0"
+                @click="startDictation"
+              >
+                <svg
+                  xmlns="http://www.w3.org/2000/svg"
+                  fill="none"
+                  viewBox="0 0 24 24"
+                  stroke-width="2"
+                  stroke="currentColor"
+                >
+                  <path
+                    stroke-linecap="round"
+                    stroke-linejoin="round"
+                    d="M5.25 5.653c0-.856.917-1.398 1.667-.986l11.54 6.347a1.125 1.125 0 010 1.972l-11.54 6.347a1.125 1.125 0 01-1.667-.986V5.653Z"
+                  />
+                </svg>
+                开始听写
+              </button>
+            </template>
+
+            <!-- 播放中 -->
+            <template v-else-if="dictationState === 'playing'">
+              <button class="control-btn pause-btn" @click="pauseDictation">
+                <svg
+                  xmlns="http://www.w3.org/2000/svg"
+                  fill="none"
+                  viewBox="0 0 24 24"
+                  stroke-width="2"
+                  stroke="currentColor"
+                >
+                  <path
+                    stroke-linecap="round"
+                    stroke-linejoin="round"
+                    d="M15.75 5.25v13.5m-7.5-13.5v13.5"
+                  />
+                </svg>
+              </button>
+              <button class="control-btn replay-btn" @click="replayCurrentWord">
+                <svg
+                  xmlns="http://www.w3.org/2000/svg"
+                  fill="none"
+                  viewBox="0 0 24 24"
+                  stroke-width="2"
+                  stroke="currentColor"
+                >
+                  <path
+                    stroke-linecap="round"
+                    stroke-linejoin="round"
+                    d="M16.023 9.348h4.992v-.001M2.985 19.644v-4.992m0 0h4.992m-4.993 0l3.181 3.183a8.25 8.25 0 0013.803-3.7M4.031 9.865a8.25 8.25 0 0113.803-3.7l3.181 3.182m0-4.991v4.99"
+                  />
+                </svg>
+              </button>
+              <button class="control-btn stop-btn" @click="stopDictation">
+                <svg
+                  xmlns="http://www.w3.org/2000/svg"
+                  fill="none"
+                  viewBox="0 0 24 24"
+                  stroke-width="2"
+                  stroke="currentColor"
+                >
+                  <path
+                    stroke-linecap="round"
+                    stroke-linejoin="round"
+                    d="M5.25 7.5A2.25 2.25 0 017.5 5.25h9a2.25 2.25 0 012.25 2.25v9a2.25 2.25 0 01-2.25 2.25h-9a2.25 2.25 0 01-2.25-2.25v-9z"
+                  />
+                </svg>
+              </button>
+            </template>
+
+            <!-- 暂停状态 -->
+            <template v-else-if="dictationState === 'paused'">
+              <button class="control-btn resume-btn" @click="resumeDictation">
+                <svg
+                  xmlns="http://www.w3.org/2000/svg"
+                  fill="none"
+                  viewBox="0 0 24 24"
+                  stroke-width="2"
+                  stroke="currentColor"
+                >
+                  <path
+                    stroke-linecap="round"
+                    stroke-linejoin="round"
+                    d="M5.25 5.653c0-.856.917-1.398 1.667-.986l11.54 6.347a1.125 1.125 0 010 1.972l-11.54 6.347a1.125 1.125 0 01-1.667-.986V5.653Z"
+                  />
+                </svg>
+              </button>
+              <button class="control-btn replay-btn" @click="replayCurrentWord">
+                <svg
+                  xmlns="http://www.w3.org/2000/svg"
+                  fill="none"
+                  viewBox="0 0 24 24"
+                  stroke-width="2"
+                  stroke="currentColor"
+                >
+                  <path
+                    stroke-linecap="round"
+                    stroke-linejoin="round"
+                    d="M16.023 9.348h4.992v-.001M2.985 19.644v-4.992m0 0h4.992m-4.993 0l3.181 3.183a8.25 8.25 0 0013.803-3.7M4.031 9.865a8.25 8.25 0 0113.803-3.7l3.181 3.182m0-4.991v4.99"
+                  />
+                </svg>
+              </button>
+              <button class="control-btn stop-btn" @click="stopDictation">
+                <svg
+                  xmlns="http://www.w3.org/2000/svg"
+                  fill="none"
+                  viewBox="0 0 24 24"
+                  stroke-width="2"
+                  stroke="currentColor"
+                >
+                  <path
+                    stroke-linecap="round"
+                    stroke-linejoin="round"
+                    d="M5.25 7.5A2.25 2.25 0 017.5 5.25h9a2.25 2.25 0 012.25 2.25v9a2.25 2.25 0 01-2.25 2.25h-9a2.25 2.25 0 01-2.25-2.25v-9z"
+                  />
+                </svg>
+              </button>
+            </template>
+
+            <!-- 完成状态 -->
+            <template v-else-if="dictationState === 'completed'">
+              <button class="primary-btn" @click="startDictation">
+                <svg
+                  xmlns="http://www.w3.org/2000/svg"
+                  fill="none"
+                  viewBox="0 0 24 24"
+                  stroke-width="2"
+                  stroke="currentColor"
+                >
+                  <path
+                    stroke-linecap="round"
+                    stroke-linejoin="round"
+                    d="M16.023 9.348h4.992v-.001M2.985 19.644v-4.992m0 0h4.992m-4.993 0l3.181 3.183a8.25 8.25 0 0013.803-3.7M4.031 9.865a8.25 8.25 0 0113.803-3.7l3.181 3.182m0-4.991v4.99"
+                  />
+                </svg>
+                重新听写
+              </button>
+              <button class="secondary-btn" @click="resetDictation">
+                <svg
+                  xmlns="http://www.w3.org/2000/svg"
+                  fill="none"
+                  viewBox="0 0 24 24"
+                  stroke-width="2"
+                  stroke="currentColor"
+                >
+                  <path
+                    stroke-linecap="round"
+                    stroke-linejoin="round"
+                    d="M9 15L3 9m0 0l6-6M3 9h12a6 6 0 010 12h-3"
+                  />
+                </svg>
+                重置
+              </button>
+            </template>
+          </div>
+        </div>
+      </div>
+
+      <!-- 右侧：发音配置区 -->
+      <div class="panel config-panel">
+        <div class="panel-header">
+          <h3>发音配置</h3>
+        </div>
+
+        <!-- 发音人选择 -->
+        <div class="config-section">
+          <label class="config-label">选择发音人</label>
+          <div class="voice-list">
+            <div
+              v-for="voice in englishVoices"
+              :key="voice.id"
+              class="voice-item"
+              :class="{ selected: selectedVoice === voice.id }"
+              @click="selectedVoice = voice.id"
+            >
+              <span class="voice-avatar">{{ voice.avatar }}</span>
+              <span class="voice-name">{{ voice.name }}</span>
+            </div>
+          </div>
+        </div>
+
+        <!-- 朗读次数 -->
+        <div class="config-section">
+          <label class="config-label">
+            朗读次数
+            <span class="config-value">{{ repeatCount }} 次</span>
+          </label>
+          <input
+            type="range"
+            v-model.number="repeatCount"
+            min="1"
+            max="5"
+            step="1"
+            class="range-slider"
+          />
+          <div class="range-labels">
+            <span>1</span>
+            <span>3</span>
+            <span>5</span>
+          </div>
+        </div>
+
+        <!-- 语速调节 -->
+        <div class="config-section">
+          <label class="config-label">
+            朗读语速
+            <span class="config-value">{{ speechRate.toFixed(1) }}x</span>
+          </label>
+          <input
+            type="range"
+            v-model.number="speechRate"
+            min="0.5"
+            max="2.0"
+            step="0.1"
+            class="range-slider"
+          />
+          <div class="range-labels">
+            <span>0.5x</span>
+            <span>1.0x</span>
+            <span>2.0x</span>
+          </div>
+        </div>
+
+        <!-- 单词间隔 -->
+        <div class="config-section">
+          <label class="config-label">
+            单词间隔
+            <span class="config-value">{{ wordInterval.toFixed(1) }}s</span>
+          </label>
+          <input
+            type="range"
+            v-model.number="wordInterval"
+            min="0.5"
+            max="5"
+            step="0.5"
+            class="range-slider"
+          />
+          <div class="range-labels">
+            <span>0.5s</span>
+            <span>2.5s</span>
+            <span>5s</span>
+          </div>
+        </div>
+
+        <!-- 重复朗读间隔 -->
+        <div class="config-section">
+          <label class="config-label">
+            重复朗读间隔
+            <span class="config-value">{{ repeatInterval.toFixed(1) }}s</span>
+          </label>
+          <input
+            type="range"
+            v-model.number="repeatInterval"
+            min="0"
+            max="3"
+            step="0.5"
+            class="range-slider"
+          />
+          <div class="range-labels">
+            <span>0s</span>
+            <span>1.5s</span>
+            <span>3s</span>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+* {
+  box-sizing: border-box;
+}
+
+.page-container {
+  max-width: 1200px;
+  margin: 0 auto;
+  padding: 2rem;
+  min-height: 100vh;
+  display: flex;
+  flex-direction: column;
+}
+
+.nav-bar {
+  display: flex;
+  align-items: center;
+  margin-bottom: 2rem;
+}
+
+.back-btn {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  background: none;
+  border: none;
+  color: var(--text-secondary);
+  font-size: 1rem;
+  cursor: pointer;
+  padding: 0.5rem 1rem;
+  border-radius: 8px;
+  transition: all 0.2s;
+}
+
+.back-btn:hover {
+  background: var(--card-bg);
+  color: var(--text-primary);
+}
+
+.back-btn svg {
+  width: 20px;
+  height: 20px;
+}
+
+.nav-title {
+  font-size: 1.5rem;
+  font-weight: 600;
+  margin-left: auto;
+  margin-right: auto;
+  transform: translateX(-40px);
+}
+
+.content-grid {
+  display: grid;
+  grid-template-columns: 1fr 400px;
+  gap: 1.5rem;
+  flex: 1;
+}
+
+.left-column {
+  display: flex;
+  flex-direction: column;
+  gap: 1.5rem;
+}
+
+.input-panel {
+  min-height: 200px;
+}
+
+.config-panel {
+  min-height: auto;
+}
+
+.control-panel {
+  flex: 1;
+  min-height: 300px;
+}
+
+.panel {
+  background: var(--card-bg);
+  border: 1px solid var(--card-border);
+  border-radius: 20px;
+  backdrop-filter: blur(12px);
+  padding: 1.5rem;
+}
+
+.panel-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 1rem;
+}
+
+.panel-header h3 {
+  margin: 0;
+  font-size: 1.125rem;
+  font-weight: 600;
+}
+
+.word-count {
+  color: var(--text-secondary);
+  font-size: 0.875rem;
+}
+
+/* 输入区 */
+.word-input-wrapper {
+  overflow: hidden;
+  border-radius: 12px;
+  border: 1px solid var(--card-border);
+  transition: border-color 0.3s;
+}
+
+.word-input-wrapper:focus-within {
+  border-color: var(--accent-5);
+}
+
+.word-input {
+  width: 100%;
+  height: 200px;
+  background: rgba(0, 0, 0, 0.2);
+  border: none;
+  border-radius: 12px;
+  padding: 1rem;
+  color: var(--text-primary);
+  font-family: inherit;
+  font-size: 1rem;
+  line-height: 1.8;
+  resize: none;
+  outline: none;
+  transition: border-color 0.3s;
+}
+
+.word-input:disabled {
+  opacity: 0.6;
+  cursor: not-allowed;
+}
+
+.word-input::placeholder {
+  color: var(--text-secondary);
+}
+
+/* 滚动条美化 */
+.word-input {
+  scrollbar-width: thin;
+  scrollbar-color: rgba(245, 158, 11, 0.5) rgba(245, 158, 11, 0.1);
+}
+
+.word-input::-webkit-scrollbar {
+  width: 6px;
+}
+
+.word-input::-webkit-scrollbar-track {
+  background: rgba(245, 158, 11, 0.1);
+  border-radius: 3px;
+}
+
+.word-input::-webkit-scrollbar-thumb {
+  background: rgba(245, 158, 11, 0.5);
+  border-radius: 3px;
+}
+
+.word-input::-webkit-scrollbar-thumb:hover {
+  background: rgba(245, 158, 11, 0.7);
+}
+
+/* 配置区 */
+.config-section {
+  margin-bottom: 1.5rem;
+}
+
+.config-section:last-child {
+  margin-bottom: 0;
+}
+
+.config-label {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  font-size: 0.875rem;
+  color: var(--text-secondary);
+  margin-bottom: 0.75rem;
+}
+
+.config-value {
+  color: var(--accent-5);
+  font-weight: 600;
+}
+
+.voice-list {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  gap: 0.75rem;
+}
+
+.voice-item {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+  padding: 0.75rem 1rem;
+  background: rgba(0, 0, 0, 0.2);
+  border: 1px solid var(--card-border);
+  border-radius: 10px;
+  cursor: pointer;
+  transition: all 0.2s;
+}
+
+.voice-item:hover {
+  background: rgba(255, 255, 255, 0.05);
+}
+
+.voice-item.selected {
+  border-color: var(--accent-5);
+  background: linear-gradient(
+    to right,
+    rgba(245, 158, 11, 0.1),
+    rgba(0, 0, 0, 0.2)
+  );
+}
+
+.voice-avatar {
+  font-size: 1.5rem;
+}
+
+.voice-name {
+  font-size: 0.875rem;
+  font-weight: 500;
+}
+
+.range-slider {
+  width: 100%;
+  height: 6px;
+  -webkit-appearance: none;
+  appearance: none;
+  background: rgba(255, 255, 255, 0.1);
+  border-radius: 3px;
+  outline: none;
+  cursor: pointer;
+}
+
+.range-slider::-webkit-slider-thumb {
+  -webkit-appearance: none;
+  appearance: none;
+  width: 18px;
+  height: 18px;
+  background: linear-gradient(135deg, var(--accent-5), #d97706);
+  border-radius: 50%;
+  cursor: pointer;
+  box-shadow: 0 2px 8px rgba(245, 158, 11, 0.4);
+  transition: transform 0.2s;
+}
+
+.range-slider::-webkit-slider-thumb:hover {
+  transform: scale(1.1);
+}
+
+.range-labels {
+  display: flex;
+  justify-content: space-between;
+  margin-top: 0.5rem;
+  font-size: 0.75rem;
+  color: var(--text-secondary);
+}
+
+.toggle-switch {
+  width: 52px;
+  height: 28px;
+  background: rgba(255, 255, 255, 0.1);
+  border: none;
+  border-radius: 14px;
+  cursor: pointer;
+  position: relative;
+  transition: background 0.3s;
+}
+
+.toggle-switch.active {
+  background: linear-gradient(135deg, var(--accent-5), #d97706);
+}
+
+.toggle-knob {
+  position: absolute;
+  top: 3px;
+  left: 3px;
+  width: 22px;
+  height: 22px;
+  background: white;
+  border-radius: 50%;
+  transition: transform 0.3s;
+}
+
+.toggle-switch.active .toggle-knob {
+  transform: translateX(24px);
+}
+
+/* 控制面板 */
+.control-panel {
+  display: flex;
+  flex-direction: column;
+  min-height: 280px;
+}
+
+.status-area {
+  text-align: center;
+  margin-bottom: 2rem;
+}
+
+.status-text {
+  font-size: 1rem;
+  color: var(--text-secondary);
+  margin-bottom: 1rem;
+}
+
+.progress-container {
+  display: flex;
+  align-items: center;
+  gap: 1rem;
+}
+
+.progress-bar {
+  flex: 1;
+  height: 8px;
+  background: rgba(255, 255, 255, 0.1);
+  border-radius: 4px;
+  overflow: hidden;
+}
+
+.progress-fill {
+  height: 100%;
+  background: linear-gradient(90deg, var(--accent-5), #d97706);
+  border-radius: 4px;
+  transition: width 0.3s ease;
+}
+
+.progress-text {
+  font-size: 0.875rem;
+  color: var(--text-secondary);
+  font-variant-numeric: tabular-nums;
+}
+
+/* 当前单词显示 */
+.current-word-area {
+  text-align: center;
+  margin-bottom: 2rem;
+}
+
+.current-word {
+  font-size: 3rem;
+  font-weight: 700;
+  color: var(--text-primary);
+  margin-bottom: 0.5rem;
+  text-shadow: 0 0 30px rgba(245, 158, 11, 0.3);
+}
+
+.repeat-indicator {
+  font-size: 0.875rem;
+  color: var(--accent-5);
+}
+
+/* 波形动画 */
+.waveform-area {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 100px;
+  margin-bottom: 2rem;
+}
+
+.waveform {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 4px;
+  height: 60px;
+}
+
+.wave-bar {
+  width: 4px;
+  background: linear-gradient(to top, var(--accent-5), #d97706);
+  border-radius: 2px;
+  animation: wave 0.8s ease-in-out infinite;
+}
+
+@keyframes wave {
+  0%,
+  100% {
+    height: 20px;
+  }
+  50% {
+    height: 50px;
+  }
+}
+
+/* 完成图标 */
+.complete-icon {
+  display: flex;
+  justify-content: center;
+  margin-bottom: 2rem;
+}
+
+.complete-icon svg {
+  width: 80px;
+  height: 80px;
+  color: var(--accent-4);
+  animation: scaleIn 0.5s ease-out;
+}
+
+@keyframes scaleIn {
+  0% {
+    transform: scale(0);
+    opacity: 0;
+  }
+  100% {
+    transform: scale(1);
+    opacity: 1;
+  }
+}
+
+/* 控制按钮 */
+.control-buttons {
+  display: flex;
+  justify-content: center;
+  gap: 1rem;
+  margin-top: auto;
+}
+
+.primary-btn {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  background: linear-gradient(135deg, var(--accent-5), #d97706);
+  color: white;
+  border: none;
+  padding: 1rem 2rem;
+  border-radius: 12px;
+  font-size: 1rem;
+  font-weight: 600;
+  cursor: pointer;
+  transition: all 0.3s;
+  box-shadow: 0 4px 15px rgba(245, 158, 11, 0.3);
+}
+
+.primary-btn:hover:not(:disabled) {
+  transform: translateY(-2px);
+  box-shadow: 0 6px 20px rgba(245, 158, 11, 0.4);
+}
+
+.primary-btn:disabled {
+  opacity: 0.6;
+  cursor: not-allowed;
+  transform: none;
+}
+
+.primary-btn svg {
+  width: 20px;
+  height: 20px;
+}
+
+.secondary-btn {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  background: rgba(255, 255, 255, 0.05);
+  color: var(--text-secondary);
+  border: 1px solid var(--card-border);
+  padding: 1rem 1.5rem;
+  border-radius: 12px;
+  font-size: 1rem;
+  font-weight: 500;
+  cursor: pointer;
+  transition: all 0.3s;
+}
+
+.secondary-btn:hover {
+  background: rgba(255, 255, 255, 0.1);
+  color: var(--text-primary);
+}
+
+.secondary-btn svg {
+  width: 20px;
+  height: 20px;
+}
+
+.control-btn {
+  width: 56px;
+  height: 56px;
+  border-radius: 50%;
+  border: none;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  transition: all 0.3s;
+}
+
+.control-btn svg {
+  width: 24px;
+  height: 24px;
+}
+
+.pause-btn {
+  background: linear-gradient(135deg, var(--accent-5), #d97706);
+  color: white;
+  box-shadow: 0 4px 15px rgba(245, 158, 11, 0.3);
+}
+
+.pause-btn:hover {
+  transform: scale(1.05);
+  box-shadow: 0 6px 20px rgba(245, 158, 11, 0.4);
+}
+
+.resume-btn {
+  background: linear-gradient(135deg, var(--accent-4), #0d9488);
+  color: white;
+  box-shadow: 0 4px 15px rgba(20, 184, 166, 0.3);
+}
+
+.resume-btn:hover {
+  transform: scale(1.05);
+  box-shadow: 0 6px 20px rgba(20, 184, 166, 0.4);
+}
+
+.replay-btn {
+  background: rgba(255, 255, 255, 0.1);
+  color: var(--text-primary);
+}
+
+.replay-btn:hover {
+  background: rgba(255, 255, 255, 0.15);
+  transform: scale(1.05);
+}
+
+.stop-btn {
+  background: rgba(239, 68, 68, 0.2);
+  color: #ef4444;
+}
+
+.stop-btn:hover {
+  background: rgba(239, 68, 68, 0.3);
+  transform: scale(1.05);
+}
+
+@media (max-width: 900px) {
+  .content-grid {
+    grid-template-columns: 1fr;
+  }
+
+  .left-column {
+    gap: 1rem;
+  }
+
+  .page-container {
+    padding: 1rem;
+  }
+
+  .voice-list {
+    grid-template-columns: 1fr;
+  }
+}
+</style>