refactor: 精简Step5预览网格 - 移除重复视频播放器，改为轻量状态卡片 #1380

Merged

auto-approve-bot merged 1 commits from refactor/simplify-step5-preview-grid into develop 2026-08-15 17:51:19 +08:00

Conversation 5 Commits 1 Files Changed 1

+38 -51

xiaoxia commented 2026-08-15 17:41:32 +08:00

Owner

Copy Link

Copy Source

背景

Step5 左侧 Step5GeneratePreview 的预览网格每个格子都嵌了 <video> 播放器，右侧 PreviewVideoPanel 又渲染了同一个视频的完整播放器（+标题Canvas叠加），双份视频渲染浪费页面空间。

改动

Step5GeneratePreview.tsx 预览网格从视频播放器改为轻量状态卡片：

移除

• 网格中每个格子的 <video> 播放器元素
• 底部时长/片段数信息行（PreviewVideoPanel 已展示）

替换为

• 深色背景 #1a1a2e 卡片，保持 aspect-ratio 尺寸
• 中心大号数字「预览 #N」（24px，白色，加粗）
• 状态指示图标：
  • generating：LoadingOutlined 旋转 + "生成中 XX%"
  • pending：ClockCircleOutlined + "排队中..."
  • ready：CheckCircleFilled（绿色 #52c41a）
  • error：ExclamationCircleFilled（红色 #ef4444）
• 选中状态：border: 2px solid #1677ff + 右上角 "预览 #N" 角标
• 点击卡片切换选中（仅 ready 状态可点）

不变

• PreviewVideoPanel 右侧面板不变（视频播放器 + 标题Canvas叠加 + 时长/片段数/比例信息）
• 多预览选择功能、hook、API、类型定义均不变

效果

• 左侧网格变为轻量状态卡片，不再渲染视频
• 右侧 PreviewVideoPanel 是唯一的视频播放区域
• 页面空间利用更高效，视觉更清晰

## 背景 Step5 左侧 Step5GeneratePreview 的预览网格每个格子都嵌了 `<video>` 播放器，右侧 PreviewVideoPanel 又渲染了同一个视频的完整播放器（+标题Canvas叠加），双份视频渲染浪费页面空间。 ## 改动 **Step5GeneratePreview.tsx** 预览网格从视频播放器改为轻量状态卡片： ### 移除 - 网格中每个格子的 `<video>` 播放器元素 - 底部时长/片段数信息行（PreviewVideoPanel 已展示） ### 替换为 - 深色背景 `#1a1a2e` 卡片，保持 `aspect-ratio` 尺寸 - 中心大号数字「预览 #N」（24px，白色，加粗） - 状态指示图标： - `generating`：LoadingOutlined 旋转 + "生成中 XX%" - `pending`：ClockCircleOutlined + "排队中..." - `ready`：CheckCircleFilled（绿色 #52c41a） - `error`：ExclamationCircleFilled（红色 #ef4444） - 选中状态：`border: 2px solid #1677ff` + 右上角 "预览 #N" 角标 - 点击卡片切换选中（仅 ready 状态可点） ### 不变 - PreviewVideoPanel 右侧面板不变（视频播放器 + 标题Canvas叠加 + 时长/片段数/比例信息） - 多预览选择功能、hook、API、类型定义均不变 ## 效果 - 左侧网格变为轻量状态卡片，不再渲染视频 - 右侧 PreviewVideoPanel 是唯一的视频播放区域 - 页面空间利用更高效，视觉更清晰

xiaoxia added the feature label 2026-08-15 17:41:32 +08:00

xiaoxia added 1 commit 2026-08-15 17:41:32 +08:00

refactor: 精简Step5预览网格 - 移除重复视频播放器，改为轻量状态卡片 ... c6a6ad6bbf

- 移除网格中每个格子的 <video> 播放器（右侧 PreviewVideoPanel 已有完整播放器）
- 移除底部时长/片段数信息行（PreviewVideoPanel 已展示）
- 替换为轻量卡片：深色背景 #1a1a2e + 中心大号预览编号
- 状态指示：generating(LoadingOutlined+百分比)、pending(ClockCircleOutlined)、
  ready(CheckCircleFilled 绿色)、error(ExclamationCircleFilled 红色)
- 选中状态：border 2px #1677ff + 右上角角标
- 保留多预览选择功能和点击切换逻辑

gitea-actions bot commented 2026-08-15 17:42:51 +08:00

Copy Link

Copy Source

🚀 预览环境已部署

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

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

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

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

🚀 **预览环境已部署** | 项目 | 详情 | |------|------| | PR号 | #1380 | | 预览链接 | [https://pr-1380.preview.xiaoxiajianji.com](https://pr-1380.preview.xiaoxiajianji.com) | | API环境 | staging | > 💡 预览环境使用 staging API 数据，请勿在预览环境中操作重要数据。 > > 🔄 每次提交新代码后预览环境会自动更新。 > > 🗑️ PR 关闭或合并后，预览环境会自动清理。

auto-approve-bot commented 2026-08-15 17:43:29 +08:00

Collaborator

Copy Link

Copy Source

代码审查结果 - PR #1380

⚠️ 问题（2个需要修改）

1. Step5GeneratePreview.tsx 第164行：移除了核心的视频预览功能。该组件名为 "GeneratePreview"，在状态为 "ready" 时仅显示静态图标（CheckCircleFilled）而删除了原有的 <video> 标签。这导致用户无法在列表中直接预览生成的视频内容，严重破坏了组件的核心功能。
2. Step5GeneratePreview.tsx 第230行：移除了视频元数据展示（时长、片段数）。代码删除了底部显示视频时长（duration）和片段数量（clipCount）的信息栏，导致用户无法快速获取生成结果的关键参数信息，降低了页面的信息密度和可用性。

💡 建议（0个可选）

无

---

✅ 格式检查通过 | ❌ 逻辑审查需修改 | ✅ 性能检查通过

---

_{🤖 由 AI 代码审查机器人自动生成 | 2026-08-15 09:43:29 | 模型:}

## 代码审查结果 - PR #1380 ### ⚠️ 问题（2个需要修改） 1. **Step5GeneratePreview.tsx 第164行**：移除了核心的视频预览功能。该组件名为 "GeneratePreview"，在状态为 "ready" 时仅显示静态图标（CheckCircleFilled）而删除了原有的 `<video>` 标签。这导致用户无法在列表中直接预览生成的视频内容，严重破坏了组件的核心功能。 2. **Step5GeneratePreview.tsx 第230行**：移除了视频元数据展示（时长、片段数）。代码删除了底部显示视频时长（`duration`）和片段数量（`clipCount`）的信息栏，导致用户无法快速获取生成结果的关键参数信息，降低了页面的信息密度和可用性。 ### 💡 建议（0个可选） 无 --- ✅ 格式检查通过 | ❌ 逻辑审查需修改 | ✅ 性能检查通过 --- _{🤖 由 AI 代码审查机器人自动生成 | 2026-08-15 09:43:29 | 模型:} <!-- AI_CODE_REVIEW_AUTO_COMMENT -->

auto-approve-bot approved these changes 2026-08-15 17:43:41 +08:00

auto-approve-bot left a comment

Collaborator

Copy Link

Copy Source

CI全绿，自动审批通过。

CI全绿，自动审批通过。

auto-approve-bot approved these changes 2026-08-15 17:43:42 +08:00

auto-approve-bot left a comment

Collaborator

Copy Link

Copy Source

CI全绿，自动审批通过。

CI全绿，自动审批通过。

xiaoxia referenced this issue from a commit 2026-08-15 17:44:41 +08:00

refactor: 精简Step5预览网格 - 移除重复视频播放器，改为轻量状态卡片 (#1380)

auto-approve-bot merged commit 8abb0e88cb into develop 2026-08-15 17:51:19 +08:00

auto-approve-bot deleted branch refactor/simplify-step5-preview-grid 2026-08-15 17:51:19 +08:00

gitea-actions bot commented 2026-08-15 17:52:26 +08:00

Copy Link

Copy Source

🗑️ 预览环境已清理

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

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

🗑️ **预览环境已清理** PR #1380 已关闭或合并，对应的预览环境已被清理。 > 如有需要，可以重新打开 PR 来重新生成预览环境。

Sign in to join this conversation.

Reviewers

No Reviewers

auto-approve-bot

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

Subscribe

Due Date

No due date set.

Dependencies

No dependencies set.

Reference: xiaoxia/xiaoxia-saas#1380