feat: 生成页面剪辑模式选择 + 智能编排时间轴 #26

2026-06-26T21:10:19+08:00

xiaoxia commented

2026-06-26 21:10:19 +08:00

功能描述

1. 剪辑模式选择器（ProjectGeneration.tsx）

新增 Radio.Group 剪辑模式选择组件，支持 4 种模式：

🎬 一镜到底 (one-take)
🖼️ 画中画 (pip)
🎙️ 口播 (voiceover)
🎙️🖼️ 口播+画中画 (voice_pip)

2. 智能编排 UI（ProjectGeneration.tsx）

新增 AutoArrangePanel 组件：

调用 POST /api/v1/projects/{id}/edit-plans/auto-generate/ API
支持选择 editing_mode 后生成编排
编排结果以时间轴形式展示

3. 时间轴组件（Timeline.tsx）

横向时间轴显示每个 clip 的起止时间
每个 clip 显示素材名称和时长
不同 layer（main/pip/broll）用不同行显示

4. API 增强（editPlans.ts, generation.ts）

editPlans.ts: 新增 autoGenerateEditPlan, getEditPlans, deleteEditPlan 等 API
generation.ts: GenerationTaskItem 和 GeneratedVideoItem 新增 editing_mode 字段

5. CSS 增强（ProjectGeneration.css）

新增时间轴、模式选择器、编排面板等 UI 样式

修改文件

apps/web/src/api/editPlans.ts
apps/web/src/api/generation.ts
apps/web/src/pages/workspace/ProjectGeneration.tsx
apps/web/src/pages/workspace/ProjectGeneration.css

## 功能描述 ### 1. 剪辑模式选择器（ProjectGeneration.tsx）新增 Radio.Group 剪辑模式选择组件，支持 4 种模式： - 🎬 一镜到底 (one-take) - 🖼️ 画中画 (pip) - 🎙️ 口播 (voiceover) - 🎙️🖼️ 口播+画中画 (voice_pip) ### 2. 智能编排 UI（ProjectGeneration.tsx）新增 AutoArrangePanel 组件： - 调用 POST /api/v1/projects/{id}/edit-plans/auto-generate/ API - 支持选择 editing_mode 后生成编排 - 编排结果以时间轴形式展示 ### 3. 时间轴组件（Timeline.tsx） - 横向时间轴显示每个 clip 的起止时间 - 每个 clip 显示素材名称和时长 - 不同 layer（main/pip/broll）用不同行显示 ### 4. API 增强（editPlans.ts, generation.ts） - editPlans.ts: 新增 autoGenerateEditPlan, getEditPlans, deleteEditPlan 等 API - generation.ts: GenerationTaskItem 和 GeneratedVideoItem 新增 editing_mode 字段 ### 5. CSS 增强（ProjectGeneration.css）新增时间轴、模式选择器、编排面板等 UI 样式 ## 修改文件 - apps/web/src/api/editPlans.ts - apps/web/src/api/generation.ts - apps/web/src/pages/workspace/ProjectGeneration.tsx - apps/web/src/pages/workspace/ProjectGeneration.css

xiaoxia added 1 commit 2026-06-26 21:10:19 +08:00

feat: 生成页面剪辑模式选择 + 智能编排时间轴

CI/CD Pipeline / Validate Code Quality And Tests (push) Waiting to run

Details

CI/CD Pipeline / Validate Code Quality And Tests (pull_request) Waiting to run

Details

2458329749

- 新增剪辑模式选择器（one-take/pip/voiceover/voice_pip）
- 新增智能编排 API（auto-generate, getEditPlans, deleteEditPlan 等）
- 新增时间轴组件展示编排预览
- 新增 AutoArrangePanel 智能编排面板
- GenerationTaskItem 和 GeneratedVideoItem 新增 editing_mode 字段
- 生成弹窗新增剪辑模式选择 UI

xiaoxia referenced this issue from a commit

2026-06-26 21:27:27 +08:00

feat: merge frontend generation UI (#26)

xiaoxia closed this pull request

2026-06-27 00:41:40 +08:00

xiaoxia referenced this issue from a commit

2026-06-27 17:01:40 +08:00

fix: remove console.log statements from frontend code

xiaoxia referenced this pull request

2026-06-27 17:01:46 +08:00

fix: 修复前端审计问题 (#26-28) #50

xiaoxia referenced this issue from a commit