From 0e5cc384218765f4a95c0ed93aa078f6b32ed085 Mon Sep 17 00:00:00 2001
From: xiaoxia <xiaoxia@xiaoxiajianji.com>
Date: Mon, 7 Sep 2026 18:46:48 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20Step5=20BatchGenerationGrid=20=E5=8D=95?=
 =?UTF-8?q?=E5=8D=A1=E5=B1=85=E4=B8=AD=20+=20maxWidth=20240px=20(#1759)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- xx-batch-gen-grid 加 justify-items:center 确保 grid item 居中
- BatchGenerationGrid grid 容器加 inline style 保底居中
  (display:grid, justifyContent:center, justifyItems:center, width:100%)
- 每张卡片 maxWidth:240px 防止单卡撑满
- 响应式 @media 960px 同步加 justify-items:center

验收：1个视频卡片水平居中，宽度≤240px；多个卡片网格居中排列
---
 .../components/BatchGenerationGrid.tsx         | 18 ++++++++++++++++--
 apps/web/src/pages/generate/generate.css       |  2 ++
 2 files changed, 18 insertions(+), 2 deletions(-)

diff --git a/apps/web/src/pages/generate/components/BatchGenerationGrid.tsx b/apps/web/src/pages/generate/components/BatchGenerationGrid.tsx
index 4e370d279..02226eb88 100644
--- a/apps/web/src/pages/generate/components/BatchGenerationGrid.tsx
+++ b/apps/web/src/pages/generate/components/BatchGenerationGrid.tsx
@@ -34,12 +34,26 @@ const BatchGenerationGrid: React.FC<BatchGenerationGridProps> = ({
           完成 {tasks.filter((t) => t.status === "completed").length} / {tasks.length}
         </span>
       </div>
-      <div className="xx-batch-gen-grid">
+      <div
+        className="xx-batch-gen-grid"
+        style={{
+          display: "grid",
+          gridTemplateColumns: "repeat(auto-fill, minmax(160px, 180px))",
+          justifyContent: "center",
+          justifyItems: "center",
+          gap: 14,
+          width: "100%",
+        }}
+      >
         {sorted.map((task) => {
           const title = titles[task.variantIndex] || `视频 ${task.variantIndex + 1}`
           const video = (task.videos?.[0] || null) as GeneratedVideo | null
           return (
-            <div key={task.taskId} className={`xx-batch-gen-card status-${task.status}`}>
+            <div
+              key={task.taskId}
+              className={`xx-batch-gen-card status-${task.status}`}
+              style={{ maxWidth: 240 }}
+            >
               <div className="xx-batch-gen-card-head">
                 <span className="xx-batch-gen-card-title" title={title}>
                   {task.status === "completed" ? (
diff --git a/apps/web/src/pages/generate/generate.css b/apps/web/src/pages/generate/generate.css
index feb343656..b37c3cf20 100644
--- a/apps/web/src/pages/generate/generate.css
+++ b/apps/web/src/pages/generate/generate.css
@@ -3403,6 +3403,7 @@
    第5步确认生成：批量渲染进度网格（Issue #1677）
    ============================================================ */
 .xx-batch-gen-grid {
+  justify-items: center;
   display: grid;
   grid-template-columns: repeat(auto-fill, minmax(160px, 180px));
   justify-content: center;
@@ -3481,6 +3482,7 @@
 /* ── 响应式：窄屏批量网格回退单列（.xx-canvas-grid 的窄屏限宽见网格定义处 #1741） ── */
 @media (max-width: 960px) {
   .xx-batch-gen-grid {
+    justify-items: center;
     grid-template-columns: minmax(0, 320px);
   }
 }
-- 
2.54.0