diff --git a/apps/web/src/pages/generate/GeneratePage.tsx b/apps/web/src/pages/generate/GeneratePage.tsx index 368a56437..0f0565bed 100644 --- a/apps/web/src/pages/generate/GeneratePage.tsx +++ b/apps/web/src/pages/generate/GeneratePage.tsx @@ -416,15 +416,11 @@ const GeneratePage: React.FC = () => { /* ── 最终成片(单视频右侧播放) ── */ const finalVideo = generatedVideos[0] - /* ── 布局 class:步骤4标题页=预览+标题侧栏;步骤5/6批量=整行宽;步骤1~3=整行宽 ── */ + /* ── 布局 class:步骤4标题页=预览+标题侧栏两栏;其余步骤(含步骤5确认生成、步骤6封面)=整行宽 ── */ const layoutClassName = useMemo(() => { - if (currentStep < 4) return "xx-generate-layout full-width" if (currentStep === 4) return "xx-generate-layout step4-layout" - // 步骤5:全宽+内容居中(单视频视频播放器居中,批量网格居中) - if (currentStep === 5) return "xx-generate-layout full-width" - // 步骤6:封面选择保持两栏布局 - return isBatch ? "xx-generate-layout full-width" : "xx-generate-layout" - }, [currentStep, isBatch]) + return "xx-generate-layout full-width" + }, [currentStep]) /* ================================================================ 渲染 @@ -545,18 +541,7 @@ const GeneratePage: React.FC = () => { selectedVariantIds={selectedVariantIds} /> - - - {/* ════ 步骤5(单视频):成片播放器内联居中(#1761) ════ */} + {/* ════ 步骤5(单视频):成片播放器置于按钮上方、居中展示 ════ */} {currentStep === 5 && !isBatch && generated && finalVideo && (
{
)} - - {/* ════ 步骤6(单视频):右侧成片播放器 ════ */} - {currentStep >= 6 && !isBatch && generated && finalVideo && ( -
-
-
-
- )} + + {/* 数量选择弹窗 */} diff --git a/apps/web/src/pages/generate/components/GenerateStepContent.tsx b/apps/web/src/pages/generate/components/GenerateStepContent.tsx index 639c99aa5..887274ee3 100644 --- a/apps/web/src/pages/generate/components/GenerateStepContent.tsx +++ b/apps/web/src/pages/generate/components/GenerateStepContent.tsx @@ -189,7 +189,7 @@ export const GenerateStepContent: React.FC = (props) = /> ) case 5: - /* 确认生成页:批量=逐任务进度网格;单视频=进度状态卡(成片播放器在左侧大区域) */ + /* 确认生成页:批量=逐任务进度网格;单视频=仅渲染进度/失败状态(完成后只显示成片播放器,播放器在按钮上方) */ if (previewCount > 1) { return ( = (props) = /> ) } - /* 单视频:渲染进度 / 失败重试 / 完成提示(成片播放器在右侧栏) */ + /* 单视频:生成中显示进度卡、失败显示重试卡;生成完成后不再渲染提示卡,页面只保留成片播放器+操作按钮 */ + if (generated && !generating && !generateError) return null return (
-

🎬 确认生成

{generating && (
@@ -234,14 +234,6 @@ export const GenerateStepContent: React.FC = (props) =
)} - {generated && !generating && ( -
-
-
✅ 视频生成完成!
-
右侧可预览成片,点击「下一步」选择封面
-
-
- )}
) case 6: diff --git a/apps/web/src/pages/generate/generate.css b/apps/web/src/pages/generate/generate.css index b37c3cf20..2e81c174a 100644 --- a/apps/web/src/pages/generate/generate.css +++ b/apps/web/src/pages/generate/generate.css @@ -117,10 +117,6 @@ grid-template-columns: 1fr; } -.xx-generate-layout.full-width .xx-generate-right-col { - display: none; -} - /* ============================================================ 左侧表单区 generate-form ============================================================ */ @@ -2323,28 +2319,6 @@ 生成结果(右侧) ================================================================ */ -.xx-generate-right-col { - display: flex; - flex-direction: column; - align-items: center; - gap: 16px; -} - -/* ── 内联视频播放器(右侧) ── */ -.xx-inline-video-player { - width: 100%; - max-width: 320px; - background: var(--bg-surface, #fff); - border: 1px solid var(--border-primary, #e2e8f0); - border-radius: 16px; - padding: 16px; - box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04); -} - -.xx-inline-video-player video { - background: #000; -} - .xx-preview-header { display: flex; align-items: center; @@ -2710,11 +2684,12 @@ /* ── 封面设置区域改造样式 ── */ -/* 封面操作按钮区 */ +/* 封面操作按钮区(单视频全宽页居中) */ .xx-cover-actions { display: flex; gap: 12px; margin-bottom: 12px; + justify-content: center; } /* 已选模板文字 */ @@ -3202,10 +3177,11 @@ margin: 0; } -/* ── 批量封面网格 ── */ +/* ── 批量封面网格(单卡/少卡时居中排列,卡片限宽不拉伸) ── */ .xx-cover-grid { display: grid; - grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); + grid-template-columns: repeat(auto-fill, minmax(180px, 220px)); + justify-content: center; gap: 16px; }