fix: Step5 播放器上移+去完成提示；Step6 封面页去视频全宽居中 (#1781)

Co-authored-by: xiaoxia <dev@xiaoxiajianji.com> Co-committed-by: xiaoxia <dev@xiaoxiajianji.com>
2026-09-08 00:31:06 +08:00
parent 7766ba1479
commit 2114b7e7ae
3 changed files with 24 additions and 107 deletions
@@ -417,15 +417,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])

  /* ================================================================
     渲染
@@ -547,18 +543,7 @@ const GeneratePage: React.FC = () => {
            selectedVariantIds={selectedVariantIds}
          />

-          <GenerateStepActions
-            currentStep={currentStep}
-            onPrev={goPrev}
-            onNext={goNext}
-            onConfirmGenerate={handleConfirmGenerate}
-            generating={generating}
-            generated={generated}
-            generateError={generateError}
-            selectedCount={isBatch ? selectedVariantIds.length : 1}
-          />
-
-          {/* ════ 步骤5（单视频）：成片播放器内联居中（#1761） ════ */}
+          {/* ════ 步骤5（单视频）：成片播放器置于按钮上方、居中展示 ════ */}
          {currentStep === 5 && !isBatch && generated && finalVideo && (
            <div
              style={{
@@ -582,6 +567,7 @@ const GeneratePage: React.FC = () => {
                <video
                  src={finalVideo.download_url || finalVideo.file_url}
                  controls
+                  autoPlay
                  style={{
                    width: "auto",
                    maxWidth: "100%",
@@ -609,55 +595,18 @@ const GeneratePage: React.FC = () => {
              </div>
            </div>
          )}
-        </div>

-        {/* ════ 步骤6（单视频）：右侧成片播放器 ════ */}
-        {currentStep >= 6 && !isBatch && generated && finalVideo && (
-          <div className="xx-generate-right-col">
-            <div
-              className="xx-inline-video-player"
-              style={{
-                display: "flex",
-                justifyContent: "center",
-                alignItems: "center",
-                background: "#000",
-                borderRadius: 12,
-                padding: 8,
-              }}
-            >
-              <video
-                src={finalVideo.download_url || finalVideo.file_url}
-                controls
-                autoPlay={currentStep === 5}
-                // 竖屏自适应（#1750）：成片固定 1080×1920（9:16），元数据到达前按 9:16 占位，
-                // 到达后浏览器按真实宽高比 contain；黑底居中杜绝左右大黑边
-                style={{
-                  width: "auto",
-                  maxWidth: "100%",
-                  maxHeight: "70vh",
-                  aspectRatio: "9 / 16",
-                  objectFit: "contain",
-                  borderRadius: 8,
-                }}
-                poster={finalVideo.thumbnail_url || undefined}
-              />
-              <div style={{ display: "flex", gap: 8, marginTop: 12, justifyContent: "center" }}>
-                <button className="xx-btn xx-btn-ghost xx-btn-sm" onClick={handleDownload}>
-                  ⬇️ 下载
-                </button>
-                <button className="xx-btn xx-btn-ghost xx-btn-sm" onClick={handleShare}>
-                  🔗 分享
-                </button>
-                <button
-                  className="xx-btn xx-btn-ghost xx-btn-sm"
-                  onClick={() => navigate("/app/products")}
-                >
-                  📁 前往成片库
-                </button>
-              </div>
-            </div>
-          </div>
-        )}
+          <GenerateStepActions
+            currentStep={currentStep}
+            onPrev={goPrev}
+            onNext={goNext}
+            onConfirmGenerate={handleConfirmGenerate}
+            generating={generating}
+            generated={generated}
+            generateError={generateError}
+            selectedCount={isBatch ? selectedVariantIds.length : 1}
+          />
+        </div>
      </div>

      {/* 数量选择弹窗 */}
@@ -193,7 +193,7 @@ export const GenerateStepContent: React.FC<GenerateStepContentProps> = (props) =
        />
      )
    case 5:
-      /* 确认生成页：批量=逐任务进度网格；单视频=进度状态卡（成片播放器在左侧大区域） */
+      /* 确认生成页：批量=逐任务进度网格；单视频=仅渲染进度/失败状态（完成后只显示成片播放器，播放器在按钮上方） */
      if (previewCount > 1) {
        return (
          <BatchGenerationGrid
@@ -203,10 +203,10 @@ export const GenerateStepContent: React.FC<GenerateStepContentProps> = (props) =
          />
        )
      }
-      /* 单视频：渲染进度 / 失败重试 / 完成提示（成片播放器在右侧栏） */
+      /* 单视频：生成中显示进度卡、失败显示重试卡；生成完成后不再渲染提示卡，页面只保留成片播放器+操作按钮 */
+      if (generated && !generating && !generateError) return null
      return (
        <div className="xx-form-section">
-          <h3>🎬 确认生成</h3>
          {generating && (
            <div className="xx-gen-progress-card">
              <div className="xx-gen-progress-header">
@@ -238,14 +238,6 @@ export const GenerateStepContent: React.FC<GenerateStepContentProps> = (props) =
              </button>
            </div>
          )}
-          {generated && !generating && (
-            <div className="xx-gen-success-card">
-              <div className="xx-gen-success-info">
-                <div className="xx-gen-success-title">✅ 视频生成完成！</div>
-                <div className="xx-gen-success-sub">右侧可预览成片，点击「下一步」选择封面</div>
-              </div>
-            </div>
-          )}
        </div>
      )
    case 6:
@@ -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;
 }