From 53c92887a06af118d5174c77e763d8d1f88bb10b Mon Sep 17 00:00:00 2001
From: xiaoxia <xiaoxia@xiaoxiajianji.com>
Date: Mon, 7 Sep 2026 19:42:39 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20Step5=20=E5=8D=95=E8=A7=86=E9=A2=91?=
 =?UTF-8?q?=E5=85=A8=E5=AE=BD=E5=B8=83=E5=B1=80+=E8=A7=86=E9=A2=91?=
 =?UTF-8?q?=E6=92=AD=E6=94=BE=E5=99=A8=E5=B1=85=E4=B8=AD=20(#1761)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

问题：单视频 Step 5 使用两栏布局(1fr 320px)，视频被挤在右侧 320px 窄列
根因：layoutClassName 对 Step 5 单视频未加 full-width

修复：
- Step 5 始终使用 full-width 布局（不再走两栏）
- 视频播放器移入 xx-generate-form 内部，居中显示（maxWidth: 320px）
- 右侧 xx-generate-right-col 播放器仅在 Step 6 显示
- Step 6 封面选择保持两栏布局不变

验收：单视频 Step 5 视频卡片居中，宽度≤320px，左右留白对称
---
 apps/web/src/pages/generate/GeneratePage.tsx | 60 +++++++++++++++++++-
 1 file changed, 57 insertions(+), 3 deletions(-)

diff --git a/apps/web/src/pages/generate/GeneratePage.tsx b/apps/web/src/pages/generate/GeneratePage.tsx
index d3c5214ae..368a56437 100644
--- a/apps/web/src/pages/generate/GeneratePage.tsx
+++ b/apps/web/src/pages/generate/GeneratePage.tsx
@@ -420,7 +420,9 @@ const GeneratePage: React.FC = () => {
   const layoutClassName = useMemo(() => {
     if (currentStep < 4) return "xx-generate-layout full-width"
     if (currentStep === 4) return "xx-generate-layout step4-layout"
-    // 步骤5/6：批量网格需要整行宽度；单视频保持 表单+右侧成片 两栏
+    // 步骤5：全宽+内容居中（单视频视频播放器居中，批量网格居中）
+    if (currentStep === 5) return "xx-generate-layout full-width"
+    // 步骤6：封面选择保持两栏布局
     return isBatch ? "xx-generate-layout full-width" : "xx-generate-layout"
   }, [currentStep, isBatch])
 
@@ -553,10 +555,62 @@ const GeneratePage: React.FC = () => {
             generateError={generateError}
             selectedCount={isBatch ? selectedVariantIds.length : 1}
           />
+
+          {/* ════ 步骤5（单视频）：成片播放器内联居中（#1761） ════ */}
+          {currentStep === 5 && !isBatch && generated && finalVideo && (
+            <div
+              style={{
+                display: "flex",
+                justifyContent: "center",
+                marginTop: 16,
+              }}
+            >
+              <div
+                style={{
+                  display: "flex",
+                  flexDirection: "column",
+                  alignItems: "center",
+                  background: "#000",
+                  borderRadius: 12,
+                  padding: 8,
+                  maxWidth: 320,
+                  width: "100%",
+                }}
+              >
+                <video
+                  src={finalVideo.download_url || finalVideo.file_url}
+                  controls
+                  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>
+          )}
         </div>
 
-        {/* ════ 步骤5/6（单视频）：右侧成片播放器 ════ */}
-        {currentStep >= 5 && !isBatch && generated && finalVideo && (
+        {/* ════ 步骤6（单视频）：右侧成片播放器 ════ */}
+        {currentStep >= 6 && !isBatch && generated && finalVideo && (
           <div className="xx-generate-right-col">
             <div
               className="xx-inline-video-player"
-- 
2.54.0