xiaoxia/xiaoxia-saas
1
0
Fork 0
Code Issues 16 Pull Requests 8 Actions 34.2k Packages Projects Releases 7 Wiki Activity

refactor(web): 智能剪辑 & AI数字人 前端代码审查与重构 #1883

Merged
auto-approve-bot merged 4 commits from refactor/frontend-audit-cleanup-0914 into develop 2026-09-14 02:44:41 +08:00
Conversation 4 Commits 4 Files Changed 8
+547 -1668
xiaoxia commented 2026-09-14 02:35:53 +08:00
Owner
Copy Link
Copy Source

重构范围

仅限「智能剪辑」（apps/web/src/pages/generate/）与「AI数字人」（apps/web/src/pages/ai-avatar/）前端代码，严格遵守：不增删功能、不破坏功能、不改变 UI/交互、不改变接口契约、不改变路由路径。

改动点

P1 死代码/冗余代码删除

  1. 删除 hooks/useCanvasPlayer.ts（1039 行）：WebCodecs 播放路径早已废弃（useWebCodecs 恒为 false，生产代码零 import），该文件是纯粹死代码。同步清理 FrontendPreviewPlayer 中相关条件分支、isWebCodecsSupported 判断、LoadingOutlined 图标引用，以及测试文件中对应的 vi.mock。
  2. 清理 ai-avatar 遗留 debug console.log（6 处）：AiAvatarPage 对口型流程中 4 处调试日志（开始/请求/响应/轮询）、PanelVoiceSelector 克隆试听中 2 处调试日志（请求/响应）。console.error/console.warn 保留用于真正异常告警。

P2 解耦

  1. FrontendPreviewPlayer 去除对 WebCodecs 路径的依赖，始终走原生 video + useSegmentScheduler 单一路径，消除双实现分支。
  2. API 层保持纯净（本次未发现 API 函数夹带业务逻辑）。

P3 大文件/大组件拆分（FrontendPreviewPlayer）

原文件 1121 行 → 主文件 601 行 + 3 个独立模块：

  • hooks/usePreviewAudio.ts（132 行）：配音音频管理 hook，封装 audio 元素生命周期、loadedmetadata 时长自测、play/pause/seek 同步、末帧冻结期间续播。
  • components/PreviewProgressBar.tsx（107 行）：进度条组件，独立封装点击/拖拽 seek 逻辑。
  • components/PreviewControls.tsx（195 行）：播放控制 UI，封装静音按钮、片段指示器胶囊、中央播放按钮、底部毛玻璃控制条。
  • 主组件 FrontendPreviewPlayer 仅保留容器职责：片段映射、标题层渲染、批量互斥、尾帧冻结看门狗、音画同步调度。

P4 规范改进

  • hooks/组件命名已统一（useXxx / PascalCase）
  • 无 any 类型残留
  • useEffect 依赖数组合规（仅保留两处经核实的 eslint-disable 注释，分别为 TTS 文案变化重置和对口型提交）
  • 新增文件均使用 PascalCase（组件）/ camelCase（hook）命名

未改动（已审查确认）

  • GeneratePage.tsx（422 行 < 600，步骤状态管理已由 useStepNavigation + useGenerateFormState 承担，无需额外拆分）
  • CanvasPreviewGrid.tsx（156 行）、BatchGenerationGrid.tsx（134 行）— 规模合理，无耦合问题
  • useGenerateVideo / useBatchVariantPlans / useVariantVoicePreview / usePreviewAssets / useBatchCovers 等 hooks — 已良好分模块，无死代码
  • useGenerateFormState/ 目录已按子 hook 拆分（templateFallback / useTitleCoverSync / useVoiceState / usePlanConfigLoader / useTemplateSelection），结构清晰
  • ai-avatar 下各 Panel/Modal 组件规模均 < 450 行，类型/API/utils 已独立目录
  • types/ 目录（cover.ts）+ 根 types.ts 类型定义已集中
  • API 层 generate-video/*、api/aiAvatar.ts 保持纯净，无业务逻辑侵入

验证结果

  • ✅ npx tsc --noEmit：零类型错误
  • ✅ npx eslint src/pages/generate/ --ext .ts,.tsx --max-warnings 0：零错误零警告
  • ✅ npx eslint src/pages/ai-avatar/ --ext .ts,.tsx --max-warnings 0：零错误零警告
  • ✅ npx prettier --check "src/pages/generate/**/*.{ts,tsx}"：格式正确
  • ✅ npx prettier --check "src/pages/ai-avatar/**/*.{ts,tsx}"：格式正确
  • ✅ npx vitest run src/test/pages/generate/ --reporter=verbose：12 个测试文件、64 个测试全部通过（含 FrontendPreviewPlayer 音频行为 8 个测试、CanvasPreviewGrid 播放互斥 6 个测试）

Commit 拆分

  1. refactor(web): FrontendPreviewPlayer 拆分 - 删除WebCodecs死代码、拆分usePreviewAudio/PreviewProgressBar/PreviewControls
  2. refactor(web): 删除死代码 useCanvasPlayer（WebCodecs废弃路径，1039行零生产引用）
  3. refactor(web): 清理 ai-avatar 遗留 debug console.log（6处）
  4. chore(web): prettier 格式化收尾
## 重构范围 仅限「智能剪辑」（apps/web/src/pages/generate/）与「AI数字人」（apps/web/src/pages/ai-avatar/）前端代码，严格遵守：**不增删功能、不破坏功能、不改变 UI/交互、不改变接口契约、不改变路由路径**。 ## 改动点 ### P1 死代码/冗余代码删除 1. **删除 `hooks/useCanvasPlayer.ts`（1039 行）**：WebCodecs 播放路径早已废弃（useWebCodecs 恒为 false，生产代码零 import），该文件是纯粹死代码。同步清理 FrontendPreviewPlayer 中相关条件分支、`isWebCodecsSupported` 判断、`LoadingOutlined` 图标引用，以及测试文件中对应的 vi.mock。 2. **清理 ai-avatar 遗留 debug console.log（6 处）**：AiAvatarPage 对口型流程中 4 处调试日志（开始/请求/响应/轮询）、PanelVoiceSelector 克隆试听中 2 处调试日志（请求/响应）。console.error/console.warn 保留用于真正异常告警。 ### P2 解耦 1. FrontendPreviewPlayer 去除对 WebCodecs 路径的依赖，始终走原生 video + useSegmentScheduler 单一路径，消除双实现分支。 2. API 层保持纯净（本次未发现 API 函数夹带业务逻辑）。 ### P3 大文件/大组件拆分（FrontendPreviewPlayer） 原文件 1121 行 → 主文件 601 行 + 3 个独立模块： - `hooks/usePreviewAudio.ts`（132 行）：配音音频管理 hook，封装 audio 元素生命周期、loadedmetadata 时长自测、play/pause/seek 同步、末帧冻结期间续播。 - `components/PreviewProgressBar.tsx`（107 行）：进度条组件，独立封装点击/拖拽 seek 逻辑。 - `components/PreviewControls.tsx`（195 行）：播放控制 UI，封装静音按钮、片段指示器胶囊、中央播放按钮、底部毛玻璃控制条。 - 主组件 FrontendPreviewPlayer 仅保留容器职责：片段映射、标题层渲染、批量互斥、尾帧冻结看门狗、音画同步调度。 ### P4 规范改进 - hooks/组件命名已统一（useXxx / PascalCase） - 无 any 类型残留 - useEffect 依赖数组合规（仅保留两处经核实的 eslint-disable 注释，分别为 TTS 文案变化重置和对口型提交） - 新增文件均使用 PascalCase（组件）/ camelCase（hook）命名 ## 未改动（已审查确认） - GeneratePage.tsx（422 行 < 600，步骤状态管理已由 useStepNavigation + useGenerateFormState 承担，无需额外拆分） - CanvasPreviewGrid.tsx（156 行）、BatchGenerationGrid.tsx（134 行）— 规模合理，无耦合问题 - useGenerateVideo / useBatchVariantPlans / useVariantVoicePreview / usePreviewAssets / useBatchCovers 等 hooks — 已良好分模块，无死代码 - useGenerateFormState/ 目录已按子 hook 拆分（templateFallback / useTitleCoverSync / useVoiceState / usePlanConfigLoader / useTemplateSelection），结构清晰 - ai-avatar 下各 Panel/Modal 组件规模均 < 450 行，类型/API/utils 已独立目录 - types/ 目录（cover.ts）+ 根 types.ts 类型定义已集中 - API 层 generate-video/*、api/aiAvatar.ts 保持纯净，无业务逻辑侵入 ## 验证结果 - ✅ `npx tsc --noEmit`：零类型错误 - ✅ `npx eslint src/pages/generate/ --ext .ts,.tsx --max-warnings 0`：零错误零警告 - ✅ `npx eslint src/pages/ai-avatar/ --ext .ts,.tsx --max-warnings 0`：零错误零警告 - ✅ `npx prettier --check "src/pages/generate/**/*.{ts,tsx}"`：格式正确 - ✅ `npx prettier --check "src/pages/ai-avatar/**/*.{ts,tsx}"`：格式正确 - ✅ `npx vitest run src/test/pages/generate/ --reporter=verbose`：12 个测试文件、64 个测试全部通过（含 FrontendPreviewPlayer 音频行为 8 个测试、CanvasPreviewGrid 播放互斥 6 个测试） ## Commit 拆分 1. `refactor(web): FrontendPreviewPlayer 拆分 - 删除WebCodecs死代码、拆分usePreviewAudio/PreviewProgressBar/PreviewControls` 2. `refactor(web): 删除死代码 useCanvasPlayer（WebCodecs废弃路径，1039行零生产引用）` 3. `refactor(web): 清理 ai-avatar 遗留 debug console.log（6处）` 4. `chore(web): prettier 格式化收尾`
xiaoxia added 4 commits 2026-09-14 02:35:53 +08:00
refactor(web): FrontendPreviewPlayer 拆分 - 删除WebCodecs死代码、拆分usePreviewAudio/PreviewProgressBar/PreviewControls 370ae3b0bc 
- 移除未启用的 WebCodecs 路径死代码（isWebCodecsSupported 判断、useCanvasPlayer 条件分支、LoadingOutlined 引用），主路径始终走原生 video 元素
- 拆分配音音频管理为 hooks/usePreviewAudio.ts，独立封装 audio 元素生命周期、时长自测、play/pause/seek 同步
- 拆分进度条组件为 PreviewProgressBar.tsx，封装点击/拖拽 seek 逻辑
- 拆分播放控制 UI 为 PreviewControls.tsx，封装静音按钮/片段指示器/中央播放按钮/底部毛玻璃控制条
- 主组件 FrontendPreviewPlayer 从 1121 行减至 601 行，只承担容器/调度/标题渲染/看门狗职责
- 对外 API、UI、交互、路由、接口契约完全不变
- 8个现有单测全通过，tsc/eslint 无错误
refactor(web): 删除死代码 useCanvasPlayer（WebCodecs废弃路径，1039行零生产引用） 7e34fcf472 
- useCanvasPlayer 仅被 FrontendPreviewPlayer 条件引用（useWebCodecs=false 永不开启），重构后生产代码零引用
- 清理测试文件中对应的 vi.mock
- 保留 useSegmentScheduler 为唯一调度器，前端始终走原生 video 硬件解码路径
refactor(web): 清理 ai-avatar 遗留 debug console.log（6处） 1059d6178e 
- AiAvatarPage 对口型流程中 4 处调试日志（开始/请求/响应/轮询）
- PanelVoiceSelector 克隆试听中 2 处调试日志（请求/响应）
- console.error/console.warn 保留用于真正异常告警
chore(web): prettier 格式化收尾
CI/CD Pipeline / Dedup Check - skip PR tests when covered by push pipeline (pull_request) Successful in 2s
Details
CI/CD Pipeline / Check if frontend-only change (pull_request) Successful in 2s
Details
Preview Deploy / Deploy Preview Environment (pull_request) Successful in 57s
Details
CI/CD Pipeline / PR Build Web Image (pull_request) Successful in 56s
Details
CI/CD Pipeline / Frontend Lint (pull_request) Successful in 1m5s
Details
CI/CD Pipeline / Frontend Unit Tests (pull_request) Successful in 1m8s
Details
PR Automation / Auto Approve on CI Green (pull_request) Successful in 1m18s
Details
CI/CD Pipeline / Validate - Style (pull_request) Successful in 3m11s
Details
CI/CD Pipeline / Validate - Python (mypy + alembic) (pull_request) Successful in 3m13s
Details
AI Code Review / AI Code Review (pull_request) Successful in 6m17s
Details
CI/CD Pipeline / Validate - Security (pull_request) Successful in 8m6s
Details
CI/CD Pipeline / CI Gate (pull_request) Successful in 1s
Details
CI/CD Pipeline / Production Browser E2E (pull_request) Has been skipped
Details
PR Automation / Auto Merge on CI Green + Approved (pull_request) Successful in 7m28s
Details
ACR Cleanup / ACR Image Cleanup (pull_request_target) Successful in 5s
Details
Preview Cleanup / Cleanup Preview Environment (pull_request) Successful in 1m32s
Details
CI/CD Pipeline / Deploy Production (pull_request) Failing after 60h39m46s
Details
CI/CD Pipeline / Staging E2E Tests (pull_request) Failing after 60h47m43s
Details
CI/CD Pipeline / Retag skipped Staging Web Image (pull_request) Failing after 60h47m47s
Details
CI/CD Pipeline / Unit Tests (pull_request) Failing after 60h47m51s
Details
CI/CD Pipeline / Deploy Staging (Watchtower auto-deploy) (pull_request) Failing after 60h47m20s
Details
CI/CD Pipeline / Retag skipped Staging API Image (pull_request) Failing after 60h47m22s
Details
CI/CD Pipeline / Build Staging Worker Image (pull_request) Failing after 60h47m23s
Details
CI/CD Pipeline / Build Staging Web Image (pull_request) Failing after 60h47m24s
Details
CI/CD Pipeline / Build Staging API Image (pull_request) Failing after 60h47m24s
Details
CI/CD Pipeline / PR Build Worker Image (pull_request) Failing after 60h47m25s
Details
CI/CD Pipeline / PR Build API Image (pull_request) Failing after 60h47m25s
Details
CI/CD Pipeline / ACR Image Cleanup (pull_request) Failing after 60h47m17s
Details
CI/CD Pipeline / Check push changed paths (pull_request) Failing after 60h47m29s
Details
CI/CD Pipeline / Build Production Worker Image (pull_request) Failing after 60h39m20s
Details
CI/CD Pipeline / Staging API Integration Tests (pull_request) Failing after 60h47m17s
Details
CI/CD Pipeline / Canary Release to Production (pull_request) Failing after 60h39m18s
Details
CI/CD Pipeline / Build Production Web Image (pull_request) Failing after 60h39m20s
Details
CI/CD Pipeline / Retag skipped Staging Worker Image (pull_request) Failing after 60h47m21s
Details
CI/CD Pipeline / Integration Tests (pull_request) Failing after 60h47m25s
Details
CI/CD Pipeline / Build Production API Image (pull_request) Failing after 61h14m41s
Details
095ae6c9e1
gitea-actions bot commented 2026-09-14 02:36:50 +08:00
Copy Link
Copy Source

🚀 预览环境已部署

项目 详情
PR号 #1883
预览链接 https://pr-1883.preview.xiaoxiajianji.com
API环境 staging

💡 预览环境使用 staging API 数据，请勿在预览环境中操作重要数据。

🔄 每次提交新代码后预览环境会自动更新。

🗑️ PR 关闭或合并后，预览环境会自动清理。

🚀 **预览环境已部署** | 项目 | 详情 | |------|------| | PR号 | #1883 | | 预览链接 | [https://pr-1883.preview.xiaoxiajianji.com](https://pr-1883.preview.xiaoxiajianji.com) | | API环境 | staging | > 💡 预览环境使用 staging API 数据，请勿在预览环境中操作重要数据。 > > 🔄 每次提交新代码后预览环境会自动更新。 > > 🗑️ PR 关闭或合并后，预览环境会自动清理。
auto-approve-bot approved these changes 2026-09-14 02:37:11 +08:00
auto-approve-bot left a comment
Collaborator
Copy Link
Copy Source

CI全绿，自动审批通过。

CI全绿，自动审批通过。
auto-approve-bot approved these changes 2026-09-14 02:37:11 +08:00
auto-approve-bot left a comment
Collaborator
Copy Link
Copy Source

CI全绿，自动审批通过。

CI全绿，自动审批通过。
auto-approve-bot merged commit 6ff8d48c15 into develop 2026-09-14 02:44:41 +08:00
auto-approve-bot deleted branch refactor/frontend-audit-cleanup-0914 2026-09-14 02:44:41 +08:00
gitea-actions bot commented 2026-09-14 02:46:14 +08:00
Copy Link
Copy Source

🗑️ 预览环境已清理

PR #1883 已关闭或合并，对应的预览环境已被清理。

如有需要，可以重新打开 PR 来重新生成预览环境。

🗑️ **预览环境已清理** PR #1883 已关闭或合并，对应的预览环境已被清理。 > 如有需要，可以重新打开 PR 来重新生成预览环境。
Sign in to join this conversation.
Reviewers
No Reviewers
auto-approve-bot
Labels
Clear labels
architecture
架构设计
 backend
后端相关
 blocked
阻塞中
 bug
Bug修复
 ci-bug
CI本身的bug
 ci-optimization
CI优化类任务
 ci-pipeline
CI流水线/workflow相关
 cleanup
代码清理
 devops
运维/部署/CI
 documentation
文档相关
 feature
新功能
 frontend
前端相关
 P0
阻塞性，必须立即处理
 P1
高优先级
 P2
中优先级
 P3
低优先级/后考虑
 question
需要讨论确认
 ready
PR CI通过，可合并
 refactor
代码重构
No Label
Milestone
No items
No Milestone
Projects
Clear projects
No project
Assignees
Clear assignees
auto-approve-bot frontend-dev xiaoxia
No Assignees
3 Participants
Notifications
Due Date
No due date set.
Dependencies

No dependencies set.

Reference: xiaoxia/xiaoxia-saas#1883
Delete Branch "refactor/frontend-audit-cleanup-0914"

Deleting a branch is permanent. Although the deleted branch may continue to exist for a short time before it actually gets removed, it CANNOT be undone in most cases. Continue?