sion123
36195ea55a
- 新增 hooks/ 目录，包含三个专用 Hook： * useVoiceGeneration - 语音生成和校验逻辑 * useDigitalHumanGeneration - 数字人视频生成逻辑 * useIdentifyFaceController - 协调两个子 Hook 的控制器 - 新增 types/identify-face.ts 完整类型定义 - 重构 IdentifyFace.vue 使用 hooks 架构： * 视图层与业务逻辑分离 * 状态管理清晰化 * 模块解耦，逻辑清晰 - 遵循单一职责原则，每个 Hook 只负责一个领域 - 提升代码可测试性和可维护性 - 支持两种视频素材来源：素材库选择和直接上传 - 实现语音生成优先校验的业务规则 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
3.1 KiB
3.1 KiB
Implementation Tasks
1. 创建类型定义
- 1.1 创建
types/identify-face.ts文件- 定义 VideoState 接口
- 定义 IdentifyState 接口
- 定义 AudioState 接口
- 定义 MaterialValidation 接口
- 定义 VoiceMeta 接口
- 导出所有类型
2. 实现 useVoiceGeneration Hook
- 2.1 创建
hooks/useVoiceGeneration.ts- 2.1.1 实现响应式状态初始化
- 2.1.2 实现 canGenerateAudio 计算属性
- 2.1.3 实现 suggestedMaxChars 计算属性
- 2.1.4 实现 generateAudio 方法
- 2.1.5 实现 parseAudioDuration 辅助函数
- 2.1.6 实现 validateAudioDuration 方法
- 2.1.7 实现 resetAudioState 方法
- 2.1.8 添加错误处理和用户反馈
3. 实现 useDigitalHumanGeneration Hook
- 3.1 创建
hooks/useDigitalHumanGeneration.ts- 3.1.1 实现响应式状态初始化
- 3.1.2 实现 faceDuration 计算属性
- 3.1.3 实现 canGenerate 计算属性
- 3.1.4 实现 handleFileUpload 方法
- 3.1.5 实现 handleVideoSelect 方法
- 3.1.6 实现 performFaceRecognition 方法
- 3.1.7 实现 validateMaterialDuration 方法
- 3.1.8 实现 resetVideoState 方法
- 3.1.9 实现视频预览 URL 生成
- 3.1.10 添加文件格式验证
4. 实现 useIdentifyFaceController Hook
- 4.1 创建
hooks/useIdentifyFaceController.ts- 4.1.1 组合 useVoiceGeneration 和 useDigitalHumanGeneration
- 4.1.2 实现 generateDigitalHuman 方法
- 4.1.3 实现 replaceVideo 方法
- 4.1.4 实现 formatDuration 辅助函数
- 4.1.5 实现 formatFileSize 辅助函数
- 4.1.6 确保业务流程顺序（先配音校验再生成）
- 4.1.7 添加完整的错误处理
5. 重构 IdentifyFace.vue
- 5.1 重构
IdentifyFace.vue- 5.1.1 简化模板，移除业务逻辑
- 5.1.2 使用 useIdentifyFaceController hook
- 5.1.3 绑定响应式状态到 UI
- 5.1.4 绑定事件处理器
- 5.1.5 保留样式（保持 UI 一致性）
- 5.1.6 优化计算属性使用
6. 验证和测试
- 6.1 功能验证
- 6.1.1 测试视频上传流程
- 6.1.2 测试素材库选择流程
- 6.1.3 测试人脸识别流程
- 6.1.4 测试配音生成流程
- 6.1.5 测试时长校验逻辑
- 6.1.6 测试数字人生成流程
- 6.1.7 测试更换视频流程
- 6.2 边界情况测试
- 6.2.1 测试不支持的文件格式
- 6.2.2 测试网络错误处理
- 6.2.3 测试空数据场景
- 6.2.4 测试快速连续操作
7. 清理和优化
- 7.1 移除旧代码
- 7.1.1 删除原有的状态管理代码
- 7.1.2 删除原有的业务逻辑方法
- 7.1.3 删除重复的辅助函数
- 7.2 代码质量检查
- 7.2.1 添加 JSDoc 注释
- 7.2.2 优化类型定义
- 7.2.3 统一代码风格
- 7.2.4 检查未使用的导入
8. 文档更新
- 8.1 更新 README 或相关文档
- 8.1.1 说明新的架构设计
- 8.1.2 添加 Hook 使用示例
- 8.1.3 说明迁移注意事项