## Why 当前 `DialogueChatView.vue` 的对话逻辑全部基于硬编码的 mock 脚本,没有真实的录音采集、LLM 对话、发音评估能力。要让学生能够进行真正的英语口语对话练习,需要将 mock 替换为完整的前后端对话链路。 ## What Changes ### 前端 - 将对话引擎从 UI 组件中解耦为独立的 service + composable 三层架构 - 新增 LLM 流式通信能力,支持逐 token 渲染 AI 回复 - 新增浏览器端录音采集能力,含权限处理 - 重构 `DialogueChatView.vue` 为纯 UI 层,移除所有 mock 逻辑 - 新增消息状态机(loading / done / error)和重试机制 - AI 消息完成后调用 TTS 合成语音并播放 - 后端控制对话时长,前端展示倒计时 ### 后端 - 新建独立编排服务 `cococlass-english-speaking-api`,串联 ASR、LLM、发音评估 - 提供对话创建、语音对话(流式)、报告查询三个接口 - 发音评估后台静默执行,不阻塞对话流程 ## Capabilities ### New Capabilities - `dialogue-engine`: 对话引擎核心——消息状态机、轮次控制、重试、流式输出 - `audio-recording`: 录音采集——MediaRecorder 封装、权限处理 - `llm-streaming`: LLM 流式通信——fetch + ReadableStream SSE 解析、超时控制、错误处理 ### Modified Capabilities _(无已有 specs 需要修改)_ ## Impact - **前端**:EnglishSpeaking preview 模块重构(DialogueChatView 及关联组件),扩展消息类型定义,新增 composables 和 service 层。无新增 npm 依赖,使用浏览器原生 API - **后端**:新增独立项目 `cococlass-english-speaking-api`,需要 MySQL、S3、Azure Speech、One-Hub 等外部依赖