refactor: 移除 Step5 左侧预览网格卡片 #1391

Merged

auto-approve-bot merged 2 commits from fix/remove-step5-preview-grid into develop 2026-08-17 15:56:32 +08:00

Conversation 5 Commits 2 Files Changed 3

+4 -125

xiaoxia commented 2026-08-16 18:19:38 +08:00

Owner

Copy Link

Copy Source

修改说明

左侧 Step5 中的多预览网格（深色"预览 #1"卡片）与右侧 PreviewVideoPanel 实际预览视频重复，显得拥挤。

变更内容

• Step5GeneratePreview.tsx：删除多预览网格卡片（~100行），保留生成按钮、进度条、状态提示
• GenerateStepContent.tsx：移除传递给 Step5GeneratePreview 的多余 props（videoRatio, selectedIndex, onSelectPreview）
• GeneratePage.tsx：移除传递给 GenerateStepContent 的多余 props

保留功能

• ✅ 预览数量选择器（idle 状态）
• ✅ 一键生成预览按钮
• ✅ 排队/生成中状态提示
• ✅ 进度条
• ✅ 完成提示 + 重新生成按钮
• ✅ 错误状态 + 重试按钮

UI 变化

• 左侧不再有"预览 #1"等深色占位卡片
• 实际预览视频统一由右侧 PreviewVideoPanel 展示

## 修改说明 左侧 Step5 中的多预览网格（深色"预览 #1"卡片）与右侧 PreviewVideoPanel 实际预览视频重复，显得拥挤。 ### 变更内容 - **Step5GeneratePreview.tsx**：删除多预览网格卡片（~100行），保留生成按钮、进度条、状态提示 - **GenerateStepContent.tsx**：移除传递给 Step5GeneratePreview 的多余 props（videoRatio, selectedIndex, onSelectPreview） - **GeneratePage.tsx**：移除传递给 GenerateStepContent 的多余 props ### 保留功能 - ✅ 预览数量选择器（idle 状态） - ✅ 一键生成预览按钮 - ✅ 排队/生成中状态提示 - ✅ 进度条 - ✅ 完成提示 + 重新生成按钮 - ✅ 错误状态 + 重试按钮 ### UI 变化 - 左侧不再有"预览 #1"等深色占位卡片 - 实际预览视频统一由右侧 PreviewVideoPanel 展示

auto-approve-bot commented 2026-08-16 18:25:31 +08:00

Collaborator

Copy Link

Copy Source

【阻塞级判定】

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

📊 审查概览

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

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

1. [apps/web/src/pages/generate/components/Step5GeneratePreview.tsx: ~143] JSX 字符串渲染包含多余引号
   • 问题类型：逻辑bug
   • 问题描述：在 <span> 标签内直接使用了带双引号的字符串字面量 "，请在右侧预览面板查看效果"。在 JSX/React 中，这会导致双引号作为文本内容被渲染到 DOM 中，用户界面上会显示带引号的文本（例如：3 个预览生成成功"，请在右侧预览面板查看效果"），属于明显的显示错误。
   • 修改建议：移除字符串字面量周围的双引号，将其作为 JSX 文本节点，或者将其合并到上一行表达式中。修改为：，请在右侧预览面板查看效果（无引号）。

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

1. [apps/web/src/pages/generate/components/Step5GeneratePreview.tsx] 确认 videoRatio 数据来源
   • 具体内容：代码中移除了 videoRatio 属性及其传递链路。请确认右侧的 PreviewVideoPanel 组件（不在本次 Diff 中）能够正确获取视频比例信息（例如从 items 数据中或其他全局状态），否则可能导致预览视频的宽高比显示异常。

✅ 良好实践

• 组件职责分离：将预览列表的展示逻辑从 Step5GeneratePreview 中移除，交由右侧面板负责，降低了组件复杂度，符合单一职责原则。
• 代码清理彻底：移除了不再使用的 Props（previewSelectedIndex, onSelectPreview, videoRatio）、变量（aspectRatio）和 Import（LoadingOutlined），避免了死代码残留。

---

_{🤖 由 AI 代码审查机器人自动生成 | 2026-08-16 10:25:31 | 模型:}

### 【阻塞级判定】 - 是否存在阻塞级问题：是 - 阻塞级问题数量：1 个 ### 📊 审查概览 - 整体评价：需修改 - 建议级问题数量：1 个 ### 🔴 阻塞级问题（必须修复） 1. **[apps/web/src/pages/generate/components/Step5GeneratePreview.tsx: ~143] JSX 字符串渲染包含多余引号** - 问题类型：逻辑bug - 问题描述：在 `<span>` 标签内直接使用了带双引号的字符串字面量 `"，请在右侧预览面板查看效果"`。在 JSX/React 中，这会导致双引号作为文本内容被渲染到 DOM 中，用户界面上会显示带引号的文本（例如：`3 个预览生成成功"，请在右侧预览面板查看效果"`），属于明显的显示错误。 - 修改建议：移除字符串字面量周围的双引号，将其作为 JSX 文本节点，或者将其合并到上一行表达式中。修改为：`，请在右侧预览面板查看效果`（无引号）。 ### 💡 改进建议（不阻塞合并） 1. **[apps/web/src/pages/generate/components/Step5GeneratePreview.tsx] 确认 videoRatio 数据来源** - 具体内容：代码中移除了 `videoRatio` 属性及其传递链路。请确认右侧的 `PreviewVideoPanel` 组件（不在本次 Diff 中）能够正确获取视频比例信息（例如从 `items` 数据中或其他全局状态），否则可能导致预览视频的宽高比显示异常。 ### ✅ 良好实践 - **组件职责分离**：将预览列表的展示逻辑从 `Step5GeneratePreview` 中移除，交由右侧面板负责，降低了组件复杂度，符合单一职责原则。 - **代码清理彻底**：移除了不再使用的 Props（`previewSelectedIndex`, `onSelectPreview`, `videoRatio`）、变量（`aspectRatio`）和 Import（`LoadingOutlined`），避免了死代码残留。 --- _{🤖 由 AI 代码审查机器人自动生成 | 2026-08-16 10:25:31 | 模型:} <!-- AI_CODE_REVIEW_AUTO_COMMENT -->

xiaoxia added 2 commits 2026-08-17 15:47:51 +08:00

refactor: 移除 Step5 左侧预览网格卡片 ... 57122f8642

- 删除 Step5GeneratePreview 中的多预览网格（深色预览卡片）
- 右侧 PreviewVideoPanel 已展示实际预览视频，左侧不再重复显示
- 清理相关未使用的 props（videoRatio, selectedIndex, onSelectPreview）
- 保留生成按钮、进度条、状态提示等交互功能

fix: 移除传递给GenerateStepContent的videoRatio prop ... de09485a09

- GenerateStepContentProps接口已移除videoRatio
- 同步清理GeneratePage中的videoRatio传递

xiaoxia force-pushed fix/remove-step5-preview-grid from a3b3052902 to de09485a09 2026-08-17 15:47:51 +08:00 Compare

gitea-actions bot commented 2026-08-17 15:50:09 +08:00

Copy Link

Copy Source

🚀 预览环境已部署

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

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

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

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

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

auto-approve-bot approved these changes 2026-08-17 15:50:11 +08:00

auto-approve-bot left a comment

Collaborator

Copy Link

Copy Source

CI全绿，自动审批通过。

CI全绿，自动审批通过。

auto-approve-bot approved these changes 2026-08-17 15:50:11 +08:00

auto-approve-bot left a comment

Collaborator

Copy Link

Copy Source

CI全绿，自动审批通过。

CI全绿，自动审批通过。

auto-approve-bot merged commit e2d10dd357 into develop 2026-08-17 15:56:32 +08:00

auto-approve-bot deleted branch fix/remove-step5-preview-grid 2026-08-17 15:56:33 +08:00

gitea-actions bot commented 2026-08-17 15:57:23 +08:00

Copy Link

Copy Source

🗑️ 预览环境已清理

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

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

🗑️ **预览环境已清理** PR #1391 已关闭或合并，对应的预览环境已被清理。 > 如有需要，可以重新打开 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

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#1391