audio_codebuddy/.plans/audiobook-v2-ux/frontend-dev/task-opt02/task_plan.md

OPT-02 前端改造 - 30s 超时移除

任务目标

移除前端代码中的 30s setTimeout 超时逻辑，改为监听 WebSocket 事件 audio_generation_complete 和 video_generation_complete。

任务范围

文件 1: my-uniapp-vue3/src/pages/book-generator/index.vue

• 第256-261行：移除 setTimeout 30s 超时逻辑
• 第318-323行：移除 setTimeout 30s 超时逻辑
• 改为监听 WebSocket 事件

文件 2: my-uniapp-vue3/src/pages/book-generator/chapter-detail.vue

• 第822-825行：移除 setTimeout 30s 超时逻辑
• 第854-857行：移除 setTimeout 30s 超时逻辑
• 改为监听 WebSocket 事件

WebSocket 事件格式

audio_generation_complete: { bookId: string, chapterId: number, status: 'completed' | 'failed' }
video_generation_complete: { bookId: string, chapterId: number, status: 'completed' | 'failed' }

实现思路

1. 创建 websocket.ts 工具类
2. 在页面 onMounted 时建立 WebSocket 连接
3. 监听 audio_generation_complete / video_generation_complete 事件
4. 收到事件后根据 bookId/chapterId 更新对应章节状态
5. 在 onUnmounted 时取消订阅（关闭连接由 wsManager 内部处理）

验收标准

• 30s 超时 setTimeout 已移除
• WebSocket 事件监听已实现
• 页面卸载时 WebSocket 订阅正确取消
• H5 + 小程序两端兼容

状态

已完成