xiaoxia/xiaoxia-saas
1
0
Fork 0
Code Issues 11 Pull Requests 3 Actions 3 Packages Projects Releases 7 Wiki Activity

feat: 封面功能接入 UI + AI 生成按钮 + 进度弹窗 (#1341) #1343

Closed
xiaoxia wants to merge 2 commits from feat/cover-generation-ui-1341 into develop
pull from: feat/cover-generation-ui-1341
merge into: xiaoxia:develop
Conversation 3 Commits 2 Files Changed 8
+137 -2
xiaoxia commented 2026-08-12 15:05:53 +08:00
Owner
Copy Link
Copy Source

改动内容

将封面选择器接入编辑器 UI，添加 AI 生成封面按钮和进度弹窗。

修改文件（8 个）

  1. useEditorDrawers.ts — 添加 coverDrawerOpen 开关状态
  2. EditorDrawers.tsx — 渲染 CoverSelector Drawer
  3. EditingPlanner.tsx — 传递 cover 相关 props 到 EditorDrawers 和 RightPanel
  4. clipProperties.ts — 添加 onOpenCoverDrawer 属性
  5. ClipPropertiesPanel.tsx — 右栏添加「封面设置」section 入口按钮
  6. RightPanel.tsx — 透传 onOpenCoverDrawer
  7. cover-selector/index.tsx — 添加 templateId prop、AI 生成封面按钮、进度弹窗 Modal + Spin
  8. EditingPlanner.css — 生成按钮样式

验收标准

  • 右栏属性面板出现「封面设置」section，点击打开 CoverSelector Drawer
  • Drawer 中切换「智能封面」模式时，显示「AI 生成封面」按钮
  • 点击按钮弹出 Modal + Spin 进度提示
  • 生成成功后关闭弹窗，封面预览区域显示生成的图片
  • 生成失败关闭弹窗，显示错误提示
  • 编译无报错，CI 全绿

关联 #1341

## 改动内容 将封面选择器接入编辑器 UI，添加 AI 生成封面按钮和进度弹窗。 ### 修改文件（8 个） 1. **useEditorDrawers.ts** — 添加 `coverDrawerOpen` 开关状态 2. **EditorDrawers.tsx** — 渲染 `CoverSelector` Drawer 3. **EditingPlanner.tsx** — 传递 cover 相关 props 到 EditorDrawers 和 RightPanel 4. **clipProperties.ts** — 添加 `onOpenCoverDrawer` 属性 5. **ClipPropertiesPanel.tsx** — 右栏添加「封面设置」section 入口按钮 6. **RightPanel.tsx** — 透传 `onOpenCoverDrawer` 7. **cover-selector/index.tsx** — 添加 `templateId` prop、AI 生成封面按钮、进度弹窗 Modal + Spin 8. **EditingPlanner.css** — 生成按钮样式 ### 验收标准 - 右栏属性面板出现「封面设置」section，点击打开 CoverSelector Drawer - Drawer 中切换「智能封面」模式时，显示「AI 生成封面」按钮 - 点击按钮弹出 Modal + Spin 进度提示 - 生成成功后关闭弹窗，封面预览区域显示生成的图片 - 生成失败关闭弹窗，显示错误提示 - 编译无报错，CI 全绿 关联 #1341
xiaoxia added the feature label 2026-08-12 15:05:53 +08:00
xiaoxia added 1 commit 2026-08-12 15:05:53 +08:00
feat: 封面功能接入 UI + AI 生成按钮 + 进度弹窗 (#1341)
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 / Build Staging API 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 / Check if frontend-only change (pull_request) Successful in 30s
Details
CI/CD Pipeline / Unit Tests (pull_request) Has been skipped
Details
CI/CD Pipeline / PR Build API Image (pull_request) Has been skipped
Details
CI/CD Pipeline / PR Build Worker Image (pull_request) Has been skipped
Details
Preview Deploy / Deploy Preview Environment (pull_request) Failing after 1m18s
Details
PR Automation / Auto Merge on CI Green + Approved (pull_request) Successful in 1m44s
Details
AI Code Review / AI Code Review (pull_request) Failing after 1m42s
Details
CI/CD Pipeline / Frontend Unit Tests (pull_request) Successful in 1m25s
Details
CI/CD Pipeline / Frontend Lint (pull_request) Failing after 1m33s
Details
PR Automation / Auto Approve on CI Green (pull_request) Successful in 2m11s
Details
CI/CD Pipeline / Validate - Type Check (mypy) (pull_request) Successful in 2m42s
Details
CI/CD Pipeline / Validate - Migration (alembic) (pull_request) Successful in 2m42s
Details
CI/CD Pipeline / PR Build Web Image (pull_request) Failing after 2m33s
Details
CI/CD Pipeline / Validate - Code Quality (pull_request) Has been cancelled
Details
CI/CD Pipeline / Integration Tests (pull_request) Has been cancelled
Details
CI/CD Pipeline / Build Production API Image (pull_request) Has been cancelled
Details
CI/CD Pipeline / Build Production Web Image (pull_request) Has been cancelled
Details
CI/CD Pipeline / Build Production Worker Image (pull_request) Has been cancelled
Details
CI/CD Pipeline / Deploy Production (pull_request) Has been cancelled
Details
CI/CD Pipeline / Production Browser E2E (pull_request) Has been cancelled
Details
CI/CD Pipeline / Canary Release to Production (pull_request) Has been cancelled
Details
CI/CD Pipeline / CI Gate (pull_request) Has been cancelled
Details
b6e89b16a8 
- useEditorDrawers: 添加 coverDrawerOpen 开关状态
- EditorDrawers: 渲染 CoverSelector Drawer
- EditingPlanner: 传递 cover 相关 props 到 EditorDrawers 和 RightPanel
- clipProperties.ts: 添加 onOpenCoverDrawer 属性
- ClipPropertiesPanel: 添加封面设置入口按钮
- RightPanel: 透传 onOpenCoverDrawer 到 ClipPropertiesPanel
- cover-selector/index.tsx: 添加 templateId prop、AI 生成封面按钮、
  进度弹窗 Modal + Spin
- EditingPlanner.css: 添加生成按钮样式
xiaoxia added 1 commit 2026-08-12 15:10:32 +08:00
style: prettier format
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 / 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 / Check if frontend-only change (pull_request) Successful in 47s
Details
CI/CD Pipeline / Unit Tests (pull_request) Has been skipped
Details
CI/CD Pipeline / PR Build API Image (pull_request) Has been skipped
Details
CI/CD Pipeline / PR Build Worker Image (pull_request) Has been skipped
Details
Preview Deploy / Deploy Preview Environment (pull_request) Failing after 57s
Details
CI/CD Pipeline / Frontend Unit Tests (pull_request) Successful in 59s
Details
PR Automation / Auto Merge on CI Green + Approved (pull_request) Successful in 1m48s
Details
CI/CD Pipeline / Frontend Lint (pull_request) Failing after 1m1s
Details
AI Code Review / AI Code Review (pull_request) Failing after 1m53s
Details
PR Automation / Auto Approve on CI Green (pull_request) Successful in 2m0s
Details
CI/CD Pipeline / Validate - Migration (alembic) (pull_request) Successful in 2m2s
Details
CI/CD Pipeline / Validate - Type Check (mypy) (pull_request) Successful in 2m10s
Details
CI/CD Pipeline / PR Build Web Image (pull_request) Failing after 2m31s
Details
CI/CD Pipeline / Validate - Code Quality (pull_request) Successful in 6m35s
Details
CI/CD Pipeline / Integration Tests (pull_request) Has been skipped
Details
CI/CD Pipeline / Build Production Web Image (pull_request) Has been skipped
Details
CI/CD Pipeline / Build Production API 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 / Production Browser E2E (pull_request) Has been skipped
Details
CI/CD Pipeline / Canary Release to Production (pull_request) Has been skipped
Details
CI/CD Pipeline / CI Gate (pull_request) Failing after 14s
Details
ACR Cleanup / ACR Image Cleanup (pull_request_target) Has been cancelled
Details
Preview Cleanup / Cleanup Preview Environment (pull_request) Successful in 59s
Details
1764d2c29f
auto-approve-bot commented 2026-08-12 15:12:26 +08:00
Collaborator
Copy Link
Copy Source

【阻塞级判定】

  • 是否存在阻塞级问题：是
  • 阻塞级问题数量：2 个

📊 审查概览

  • 整体评价：需修改
  • 建议级问题数量：2 个

🔴 阻塞级问题（必须修复）

  1. [apps/web/src/pages/editing-planner/components/EditorDrawers.tsx] 参数解构遗漏

    • 问题类型：逻辑bug
    • 问题描述：在 EditorDrawers 组件的 Props 接口中新增了 totalDuration: number，并在父组件 EditingPlanner.tsx 中正确传入，但在 EditorDrawers 组件的函数参数解构中遗漏了 totalDuration。这导致传递给 CoverSelector 的 totalDuration 值为 undefined，若封面选择器内部依赖此参数进行时间计算或边界校验，将导致功能异常或运行时错误。
    • 修改建议：在组件参数解构列表中补充 totalDuration。

  2. [apps/web/src/pages/editing-planner/components/cover-selector/index.tsx] 成功提示逻辑错误

    • 问题类型：逻辑bug
    • 问题描述：在 handleGenerateCover 函数中，message.success("封面生成成功") 放在了 if (imageUrl) 判断块之外。如果 API 返回成功但未包含有效的图片 URL（imageUrl 为空），代码虽然不会更新封面，但仍然会提示用户“生成成功”，造成误导。
    • 修改建议：将成功提示移入 if (imageUrl) 代码块内部，确保只有在实际获取到图片链接时才提示成功。

💡 改进建议（不阻塞合并）

  1. [apps/web/src/pages/editing-planner/components/cover-selector/index.tsx] API 参数确认

    • 具体内容：调用 generateCover 时传递了 asset_ids: []。请确认该接口是否确实不需要传入素材 ID。如果 AI 生成封面需要基于视频内容，空数组可能导致生成结果不符合预期。

  2. [apps/web/src/pages/editing-planner/components/cover-selector/index.tsx] UI 交互冗余

  • 具体内容：当前 generating 状态下，按钮文字变为“生成中...”且禁用，同时弹出一个全屏遮罩的 Modal。两者功能重复（都在阻塞操作），建议保留 Modal 遮罩即可，按钮状态变化可以移除，以简化代码和交互逻辑。

✅ 良好实践

  • 在调用 API 前增加了 templateId 的非空校验，避免无效请求。
  • 使用了 finally 块确保 generating 状态能被正确重置，防止交互卡死。
  • 类型定义更新及时，Props 传递链路清晰。

✅ 格式检查通过 | ❌ 逻辑审查需修改 | ⚠️ 建议关注性能

🤖 由 AI 代码审查机器人自动生成 | 2026-08-12 07:12:26 | 模型:

### 【阻塞级判定】 - 是否存在阻塞级问题：是 - 阻塞级问题数量：2 个 ### 📊 审查概览 - 整体评价：需修改 - 建议级问题数量：2 个 ### 🔴 阻塞级问题（必须修复） 1. **[apps/web/src/pages/editing-planner/components/EditorDrawers.tsx] 参数解构遗漏** - 问题类型：逻辑bug - 问题描述：在 `EditorDrawers` 组件的 `Props` 接口中新增了 `totalDuration: number`，并在父组件 `EditingPlanner.tsx` 中正确传入，但在 `EditorDrawers` 组件的函数参数解构中**遗漏了 `totalDuration`**。这导致传递给 `CoverSelector` 的 `totalDuration` 值为 `undefined`，若封面选择器内部依赖此参数进行时间计算或边界校验，将导致功能异常或运行时错误。 - 修改建议：在组件参数解构列表中补充 `totalDuration`。 2. **[apps/web/src/pages/editing-planner/components/cover-selector/index.tsx] 成功提示逻辑错误** - 问题类型：逻辑bug - 问题描述：在 `handleGenerateCover` 函数中，`message.success("封面生成成功")` 放在了 `if (imageUrl)` 判断块之外。如果 API 返回成功但未包含有效的图片 URL（`imageUrl` 为空），代码虽然不会更新封面，但仍然会提示用户“生成成功”，造成误导。 - 修改建议：将成功提示移入 `if (imageUrl)` 代码块内部，确保只有在实际获取到图片链接时才提示成功。 ### 💡 改进建议（不阻塞合并） 1. **[apps/web/src/pages/editing-planner/components/cover-selector/index.tsx] API 参数确认** - 具体内容：调用 `generateCover` 时传递了 `asset_ids: []`。请确认该接口是否确实不需要传入素材 ID。如果 AI 生成封面需要基于视频内容，空数组可能导致生成结果不符合预期。 2. **[apps/web/src/pages/editing-planner/components/cover-selector/index.tsx] UI 交互冗余** - 具体内容：当前 `generating` 状态下，按钮文字变为“生成中...”且禁用，同时弹出一个全屏遮罩的 Modal。两者功能重复（都在阻塞操作），建议保留 Modal 遮罩即可，按钮状态变化可以移除，以简化代码和交互逻辑。 ### ✅ 良好实践 - 在调用 API 前增加了 `templateId` 的非空校验，避免无效请求。 - 使用了 `finally` 块确保 `generating` 状态能被正确重置，防止交互卡死。 - 类型定义更新及时，Props 传递链路清晰。 --- ✅ 格式检查通过 | ❌ 逻辑审查需修改 | ⚠️ 建议关注性能 --- <sub>🤖 由 AI 代码审查机器人自动生成 | 2026-08-12 07:12:26 | 模型: </sub> <!-- AI_CODE_REVIEW_AUTO_COMMENT -->
xiaoxia closed this pull request 2026-08-15 09:49:14 +08:00
xiaoxia commented 2026-08-15 09:49:14 +08:00
Author
Owner
Copy Link
Copy Source

#1371 统一封面生成管道重构后，代码已完全重构，此PR过时关闭。感谢贡献。

#1371 统一封面生成管道重构后，代码已完全重构，此PR过时关闭。感谢贡献。
gitea-actions bot commented 2026-08-15 09:50:13 +08:00
Copy Link
Copy Source

🗑️ 预览环境已清理

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

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

🗑️ **预览环境已清理** PR #1343 已关闭或合并，对应的预览环境已被清理。 > 如有需要，可以重新打开 PR 来重新生成预览环境。
Some checks are pending
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 / 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 / Check if frontend-only change (pull_request) Successful in 47s
Details
CI/CD Pipeline / Unit Tests (pull_request) Has been skipped
Details
CI/CD Pipeline / PR Build API Image (pull_request) Has been skipped
Details
CI/CD Pipeline / PR Build Worker Image (pull_request) Has been skipped
Details
Preview Deploy / Deploy Preview Environment (pull_request) Failing after 57s
Details
CI/CD Pipeline / Frontend Unit Tests (pull_request) Successful in 59s
Details
PR Automation / Auto Merge on CI Green + Approved (pull_request) Successful in 1m48s
Details
CI/CD Pipeline / Frontend Lint (pull_request) Failing after 1m1s
Details
AI Code Review / AI Code Review (pull_request) Failing after 1m53s
Details
PR Automation / Auto Approve on CI Green (pull_request) Successful in 2m0s
Details
CI/CD Pipeline / Validate - Migration (alembic) (pull_request) Successful in 2m2s
Details
CI/CD Pipeline / Validate - Type Check (mypy) (pull_request) Successful in 2m10s
Details
CI/CD Pipeline / PR Build Web Image (pull_request) Failing after 2m31s
Details
CI/CD Pipeline / Validate - Code Quality (pull_request) Successful in 6m35s
Details
CI/CD Pipeline / Integration Tests (pull_request) Has been skipped
Details
CI/CD Pipeline / Build Production Web Image (pull_request) Has been skipped
Details
CI/CD Pipeline / Build Production API 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 / Production Browser E2E (pull_request) Has been skipped
Details
CI/CD Pipeline / Canary Release to Production (pull_request) Has been skipped
Details
CI/CD Pipeline / CI Gate (pull_request) Failing after 14s
Details
ACR Cleanup / ACR Image Cleanup (pull_request_target) Has been cancelled
Details
Preview Cleanup / Cleanup Preview Environment (pull_request) Successful in 59s
Details

Pull request closed

Please reopen this pull request to perform a merge.
Sign in to join this conversation.
Reviewers
No Reviewers
Labels
Clear labels
P0
阻塞性，必须立即处理
 P1
高优先级
 P2
中优先级
 P3
低优先级/后考虑
 architecture
架构设计
 backend
后端相关
 blocked
阻塞中
 bug
Bug修复
 ci-bug
CI本身的bug
 ci-optimization
CI优化类任务
 ci-pipeline
CI流水线/workflow相关
 cleanup
代码清理
 devops
运维/部署/CI
 documentation
文档相关
 feature
新功能
 frontend
前端相关
 question
需要讨论确认
 ready
PR CI通过，可合并
 refactor
代码重构
No Label feature
Milestone
No items
No Milestone
Projects
Clear projects
No project
Assignees
Clear assignees
auto-approve-bot xiaoxia
No Assignees
3 Participants
Notifications
Due Date
No due date set.
Dependencies

No dependencies set.

Reference: xiaoxia/xiaoxia-saas#1343
Delete Branch "feat/cover-generation-ui-1341"

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?