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

refactor(generate): 删除前端视频预览 + AI 标题生成，Step3 全宽展示标题模板卡片 #2022

Merged
xiaoxia merged 2 commits from clean/remove-preview-ai-title-develop into develop 2026-09-23 22:17:22 +08:00
Conversation 4 Commits 2 Files Changed 22
+27 -3235
xiaoxia commented 2026-09-23 21:56:23 +08:00
Owner
Copy Link
Copy Source

变更概述

智能剪辑页面（apps/web/src/pages/generate/）三项清理+布局调整：

任务1：删除所有前端视频预览代码

整个前端视频预览链路删除，-3235 行 / +27 行，不留死代码。成片播放器（Step4 生成后

删除组件（4）：

  • components/FrontendPreviewPlayer.tsx — 前端视频预览播放器（含字幕叠加、配音混音、尾段冻结看门狗）
  • components/CanvasPreviewGrid.tsx — 批量预览网格（N 个变体卡片，勾选/播放互斥）
  • components/PreviewControls.tsx — 预览控制条（播放/暂停/静音/进度）
  • components/PreviewProgressBar.tsx — 预览进度条子组件

删除 hooks（4）：

  • hooks/usePreviewAssets.ts — 素材详情批量加载
  • hooks/usePreviewAudio.ts — 配音音轨同步
  • hooks/useVariantVoicePreview.ts — 批量变体配音 URL 获取
  • hooks/useSegmentScheduler.ts — 片段播放调度（仅被 FrontendPreviewPlayer 使用）

GeneratePage/GenerateStepContent 改动：

  • 移除 previewAssets/previewVoiceAudioUrl/variantVoiceAudioUrls/ensureAssets/toggleVariantSelect/clipAssetIds 等预览相关 state/effect/callback
  • 删除 currentStep===3 时左侧 xx-generate-preview-col 整个渲染块
  • 布局统一为 xx-generate-layout full-width（不再有双列 step4-layout）
  • 删除 onServerClipsChange props 链路
  • 保留 useBatchVariantPlans（给正式批量生成传 variantPlanIds 给后端用）
  • 保留 PreviewCountModal（批量数量选择弹窗，不是预览）

任务2：删除 AI 智能生成标题功能

删除组件（2）：

  • components/title/AiTitleGenerator.tsx — AI 生成标题按钮+结果卡片
  • components/title/AiTitleCard.tsx — 单个 AI 标题候选卡片

删除 hook/常量/类型：

  • hooks/useStep4Title/useAiTitleGenerator.ts — AI 标题生成/刷新/选择/自动选择
  • constants.ts 中的 AI_TITLE_TEMPLATES 常量
  • types.ts 中的 AiTitleResult 接口

Step4TitleSettings 改动：

  • 单视频：直接显示 TitleLibraryAutoComplete 标题输入框（历史标题库 AutoComplete 保留），移除 AI 生成按钮/AI 自动选择开关/AI 选定标题展示
  • 批量：直接显示 N 个独立标题输入框列表，移除「✨ 一键生成 N 个标题」「补填空标题」按钮、主题词输入、batchAiTopic/batchAiLoading state
  • useStep4Title 返回值清理所有 aiTitle* 字段

任务3：Step3（代码中 currentStep===3，即标题页面）主区域全放模板卡片

  • 删除左侧预览列后，xx-generate-form 占满 100% 宽度
  • 清理 generate.css：移除 step4-layout 双列规则、xx-generate-preview-col 规则、xx-title-sidebar max-height/overflow 侧边栏约束、响应式断点里对应规则
  • 标题输入框 maxWidth:640px 避免过宽
  • 模板卡片使用既有 ttv3-grid（repeat(auto-fill, minmax(180px,1fr))）响应式布局：宽屏约 4-5 列、窄屏自动调整列数
  • 卡片本身 v3 样式（图片背景+3:4竖版+底栏始终可见操作按钮）和 TitleTemplateEditor 弹窗保持不变

保留不动

  • AI 数字人页面（apps/web/src/pages/ai-avatar/）零改动——TitleStylePanel 公共组件的 paramsOnly 模式、TitleTemplateEditor 编辑器、标题模板管理（useTitleTemplates）全部兼容
  • PreviewCountModal（批量数量选择弹窗）
  • useBatchVariantPlans（正式批量生成需要 variantPlanIds）
  • TitleLibraryAutoComplete（历史标题库输入建议，非 AI 生成功能）
  • TitleMiniPreview / TitlePresetsGrid（标题样式面板内部共用）
  • Step4 生成完成后成片 <video> 播放器（finalVideo）
  • cover-settings / voice / material 子模块零改动

验证

  • tsc --noEmit 零错误
  • eslint src/pages/generate/ 零错误/警告
  • eslint src/ 全量零错误
  • prettier --write 格式化
  • 确认 AI 数字人目录无任何 diff
  • 确认删除文件无残留 import（grep 验证零引用）

影响

净删除 3208 行代码，前端预览/AI 标题功能彻底下线，Step3 标题页布局升级为全宽模板卡片网格。用户工作流：Step1 选模式 → Step2 选素材 → Step3 选标题（输入文字+直接选模板卡片，宽屏 4-5 列展示）→ Step4 确认生成 → Step5 选封面。

## 变更概述 智能剪辑页面（apps/web/src/pages/generate/）三项清理+布局调整： ### 任务1：删除所有前端视频预览代码 整个前端视频预览链路删除，-3235 行 / +27 行，不留死代码。成片播放器（Step4 生成后 <video> 播放 finalVideo）保留不动。 **删除组件（4）：** - `components/FrontendPreviewPlayer.tsx` — 前端视频预览播放器（含字幕叠加、配音混音、尾段冻结看门狗） - `components/CanvasPreviewGrid.tsx` — 批量预览网格（N 个变体卡片，勾选/播放互斥） - `components/PreviewControls.tsx` — 预览控制条（播放/暂停/静音/进度） - `components/PreviewProgressBar.tsx` — 预览进度条子组件 **删除 hooks（4）：** - `hooks/usePreviewAssets.ts` — 素材详情批量加载 - `hooks/usePreviewAudio.ts` — 配音音轨同步 - `hooks/useVariantVoicePreview.ts` — 批量变体配音 URL 获取 - `hooks/useSegmentScheduler.ts` — 片段播放调度（仅被 FrontendPreviewPlayer 使用） **GeneratePage/GenerateStepContent 改动：** - 移除 previewAssets/previewVoiceAudioUrl/variantVoiceAudioUrls/ensureAssets/toggleVariantSelect/clipAssetIds 等预览相关 state/effect/callback - 删除 `currentStep===3` 时左侧 `xx-generate-preview-col` 整个渲染块 - 布局统一为 `xx-generate-layout full-width`（不再有双列 step4-layout） - 删除 onServerClipsChange props 链路 - 保留 useBatchVariantPlans（给正式批量生成传 variantPlanIds 给后端用） - 保留 PreviewCountModal（批量数量选择弹窗，不是预览） ### 任务2：删除 AI 智能生成标题功能 **删除组件（2）：** - `components/title/AiTitleGenerator.tsx` — AI 生成标题按钮+结果卡片 - `components/title/AiTitleCard.tsx` — 单个 AI 标题候选卡片 **删除 hook/常量/类型：** - `hooks/useStep4Title/useAiTitleGenerator.ts` — AI 标题生成/刷新/选择/自动选择 - `constants.ts` 中的 `AI_TITLE_TEMPLATES` 常量 - `types.ts` 中的 `AiTitleResult` 接口 **Step4TitleSettings 改动：** - 单视频：直接显示 TitleLibraryAutoComplete 标题输入框（历史标题库 AutoComplete 保留），移除 AI 生成按钮/AI 自动选择开关/AI 选定标题展示 - 批量：直接显示 N 个独立标题输入框列表，移除「✨ 一键生成 N 个标题」「补填空标题」按钮、主题词输入、batchAiTopic/batchAiLoading state - useStep4Title 返回值清理所有 aiTitle* 字段 ### 任务3：Step3（代码中 currentStep===3，即标题页面）主区域全放模板卡片 - 删除左侧预览列后，xx-generate-form 占满 100% 宽度 - 清理 generate.css：移除 step4-layout 双列规则、xx-generate-preview-col 规则、xx-title-sidebar max-height/overflow 侧边栏约束、响应式断点里对应规则 - 标题输入框 maxWidth:640px 避免过宽 - 模板卡片使用既有 `ttv3-grid`（`repeat(auto-fill, minmax(180px,1fr))`）响应式布局：宽屏约 4-5 列、窄屏自动调整列数 - 卡片本身 v3 样式（图片背景+3:4竖版+底栏始终可见操作按钮）和 TitleTemplateEditor 弹窗保持不变 ## 保留不动 - AI 数字人页面（apps/web/src/pages/ai-avatar/）零改动——TitleStylePanel 公共组件的 paramsOnly 模式、TitleTemplateEditor 编辑器、标题模板管理（useTitleTemplates）全部兼容 - PreviewCountModal（批量数量选择弹窗） - useBatchVariantPlans（正式批量生成需要 variantPlanIds） - TitleLibraryAutoComplete（历史标题库输入建议，非 AI 生成功能） - TitleMiniPreview / TitlePresetsGrid（标题样式面板内部共用） - Step4 生成完成后成片 `<video>` 播放器（finalVideo） - cover-settings / voice / material 子模块零改动 ## 验证 - [x] `tsc --noEmit` 零错误 - [x] `eslint src/pages/generate/` 零错误/警告 - [x] `eslint src/` 全量零错误 - [x] `prettier --write` 格式化 - [x] 确认 AI 数字人目录无任何 diff - [x] 确认删除文件无残留 import（grep 验证零引用） ## 影响 净删除 3208 行代码，前端预览/AI 标题功能彻底下线，Step3 标题页布局升级为全宽模板卡片网格。用户工作流：Step1 选模式 → Step2 选素材 → Step3 选标题（输入文字+直接选模板卡片，宽屏 4-5 列展示）→ Step4 确认生成 → Step5 选封面。
xiaoxia added 2 commits 2026-09-23 21:56:23 +08:00
refactor(generate): remove frontend video preview & AI title generation, adjust step3 layout eeebdbfdc9 
Task 1 - Delete all frontend video preview code:
- Remove FrontendPreviewPlayer, CanvasPreviewGrid, PreviewControls, PreviewProgressBar
- Remove usePreviewAssets, usePreviewAudio, useVariantVoicePreview, useSegmentScheduler hooks
- Clean up GeneratePage: remove preview state/effects/callbacks/render block
- Remove onServerClipsChange prop chain (GenerateStepContent → Step2 still optional)
- Layout: currentStep===3 now uses full-width (no more step4-layout dual column)

Task 2 - Delete AI title generation:
- Remove AiTitleGenerator, AiTitleCard components
- Remove useAiTitleGenerator hook
- Remove AI_TITLE_TEMPLATES from constants.ts
- Remove AiTitleResult type from types.ts
- Clean up Step4TitleSettings: remove AI toggle, AI generate buttons, batch AI row
- Clean up useStep4Title: remove all aiTitle* fields and auto-generate effect

Task 3 - Step3 title page layout adjustment:
- generate.css: remove step4-layout grid, preview-col rules, title-sidebar max-height
- Step4TitleSettings: title inputs max-width 640px, template grid uses full width
- TitleStylePanel with enableTemplates gets 4-5 columns via auto-fill responsive grid

Preserved: useBatchVariantPlans (used by useGenerateVideo), PreviewCountModal,
aiAutoSelect field in TitleSettings (used by buildPayload/ai-avatar), TitleMiniPreview
(shared with TitleStylePanel for AI数字人)
chore(generate): 删除已废弃组件的单测，清理孤儿 CSS 规则
CI/CD Pipeline / Check push changed paths (pull_request) Has been skipped
Details
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
CI/CD Pipeline / Unit Tests (pull_request) Has been skipped
Details
CI/CD Pipeline / Integration Tests (pull_request) Has been skipped
Details
CI/CD Pipeline / PR Build Worker Image (pull_request) Has been skipped
Details
CI/CD Pipeline / PR Build API Image (pull_request) Has been skipped
Details
CI/CD Pipeline / Build Staging API Image (pull_request) Has been skipped
Details
CI/CD Pipeline / Build Staging Web Image (pull_request) Has been skipped
Details
CI/CD Pipeline / Build Staging Worker Image (pull_request) Has been skipped
Details
CI/CD Pipeline / Retag skipped Staging API Image (pull_request) Has been skipped
Details
CI/CD Pipeline / Retag skipped Staging Worker Image (pull_request) Has been skipped
Details
CI/CD Pipeline / Retag skipped Staging Web Image (pull_request) Has been skipped
Details
CI/CD Pipeline / Deploy Staging (Watchtower auto-deploy) (pull_request) Has been skipped
Details
CI/CD Pipeline / Staging E2E Tests (pull_request) Has been skipped
Details
CI/CD Pipeline / Staging API Integration Tests (pull_request) Has been skipped
Details
CI/CD Pipeline / ACR Image Cleanup (pull_request) Has been skipped
Details
CI/CD Pipeline / Frontend Lint (pull_request) Successful in 1m39s
Details
CI/CD Pipeline / PR Build Web Image (pull_request) Successful in 1m52s
Details
Preview Deploy / Deploy Preview Environment (pull_request) Successful in 2m1s
Details
CI/CD Pipeline / Frontend Unit Tests (pull_request) Successful in 1m57s
Details
PR Automation / Auto Approve on CI Green (pull_request) Successful in 4m32s
Details
CI/CD Pipeline / Validate - Style (pull_request) Successful in 4m37s
Details
AI Code Review / AI Code Review (pull_request) Successful in 6m56s
Details
CI/CD Pipeline / Validate - Python (mypy + alembic) (pull_request) Successful in 9m13s
Details
CI/CD Pipeline / Validate - Security (pull_request) Successful in 15m8s
Details
CI/CD Pipeline / Build Production API Image (pull_request) Has been skipped
Details
CI/CD Pipeline / Build Production Web Image (pull_request) Has been skipped
Details
CI/CD Pipeline / Build Production Worker Image (pull_request) Has been skipped
Details
CI/CD Pipeline / Deploy Production (pull_request) Has been skipped
Details
CI/CD Pipeline / Canary Release to Production (pull_request) Has been skipped
Details
CI/CD Pipeline / Production Browser E2E (pull_request) Has been skipped
Details
CI/CD Pipeline / CI Gate (pull_request) Successful in 6s
Details
PR Automation / Auto Merge on CI Green + Approved (pull_request) Successful in 10m56s
Details
ACR Cleanup / ACR Image Cleanup (pull_request_target) Successful in 42s
Details
Preview Cleanup / Cleanup Preview Environment (pull_request) Successful in 1m8s
Details
355e5117a0 
- 删除 CanvasPreviewGrid.audio.test.tsx / FrontendPreviewPlayer.audio.test.tsx / step5-preview.smoke.test.tsx（对应组件已删除）
- 清理 generate.css 中无意义的空 .xx-title-sidebar 规则及其响应式块
- tsc/eslint 均零错误
gitea-actions bot commented 2026-09-23 21:58:23 +08:00
Copy Link
Copy Source

🚀 预览环境已部署

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

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

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

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

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

CI全绿，自动审批通过。

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

CI全绿，自动审批通过。

CI全绿，自动审批通过。
xiaoxia merged commit 04c28dc705 into develop 2026-09-23 22:17:22 +08:00
xiaoxia deleted branch clean/remove-preview-ai-title-develop 2026-09-23 22:17:24 +08:00
gitea-actions bot commented 2026-09-23 22:18:29 +08:00
Copy Link
Copy Source

🗑️ 预览环境已清理

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

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

🗑️ **预览环境已清理** PR #2022 已关闭或合并，对应的预览环境已被清理。 > 如有需要，可以重新打开 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#2022
Delete Branch "clean/remove-preview-ai-title-develop"

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?