From 9decb013ab3dfd3895fb72b2ee2cbed1a46ad958 Mon Sep 17 00:00:00 2001
From: xiaoxia <xiaoxia@xiaoxiajianji.com>
Date: Sat, 8 Aug 2026 15:45:14 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E9=A2=84=E8=A7=88=E5=8C=BA=E6=94=B9?=
 =?UTF-8?q?=E4=B8=BA=E6=89=8B=E6=9C=BA=E5=B1=8F=E5=B0=BA=E5=AF=B8=EF=BC=8C?=
 =?UTF-8?q?=E7=AB=96=E5=B1=8F=E7=9F=AD=E8=A7=86=E9=A2=91=20UI=20=E4=BD=93?=
 =?UTF-8?q?=E9=AA=8C=E4=BC=98=E5=8C=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 预览网格容器限制 maxWidth（1张=280px, 2张=572px, 3张=864px）并居中
- idle/loading/error/progress/tip 状态统一限制 max-width: 320px 居中
- 所有预览状态容器呈现手机屏幕比例，贴合抖音/短视频发布场景

Closes #1303
---
 .../components/Step4GeneratePreview.tsx       |  4 +++-
 apps/web/src/pages/generate/generate.css      | 22 ++++++++++++++++++-
 2 files changed, 24 insertions(+), 2 deletions(-)

diff --git a/apps/web/src/pages/generate/components/Step4GeneratePreview.tsx b/apps/web/src/pages/generate/components/Step4GeneratePreview.tsx
index a3a986632..310124144 100644
--- a/apps/web/src/pages/generate/components/Step4GeneratePreview.tsx
+++ b/apps/web/src/pages/generate/components/Step4GeneratePreview.tsx
@@ -135,11 +135,13 @@ const Step4GeneratePreview: React.FC<Step4GeneratePreviewProps> = ({
       {/* 多预览网格（生成中/完成/部分完成） */}
       {(anyGenerating || overallStatus === "ready") && items.length > 0 && (
         <div
+          className="xx-preview-grid"
           style={{
             display: "grid",
             gridTemplateColumns: `repeat(${Math.min(items.length, 3)}, 1fr)`,
             gap: 12,
-            marginBottom: 16,
+            maxWidth: `${Math.min(items.length, 3) * 280 + (Math.min(items.length, 3) - 1) * 12}px`,
+            margin: "0 auto 16px",
           }}
         >
           {items.map((item) => {
diff --git a/apps/web/src/pages/generate/generate.css b/apps/web/src/pages/generate/generate.css
index 282e29f55..538b2914a 100644
--- a/apps/web/src/pages/generate/generate.css
+++ b/apps/web/src/pages/generate/generate.css
@@ -2356,6 +2356,8 @@
   background: var(--bg-tertiary);
   border-radius: var(--radius-lg);
   border: 2px dashed var(--border-color);
+  max-width: 320px;
+  margin: 0 auto;
 }
 
 .xx-preview-generate-hint {
@@ -2381,6 +2383,7 @@
   font-size: 14px;
 }
 
+
 /* ── 加载中状态 ── */
 .xx-preview-loading {
   text-align: center;
@@ -2388,6 +2391,8 @@
   background: var(--bg-tertiary);
   border-radius: var(--radius-lg);
   border: 1px solid var(--border-color);
+  max-width: 320px;
+  margin: 0 auto;
 }
 
 .xx-preview-loading-text {
@@ -2403,13 +2408,15 @@
   margin: 0;
 }
 
-/* ── 错误状态 ── */
+/* ── 错误状态（手机屏尺寸）── */
 .xx-preview-error {
   text-align: center;
   padding: 32px 20px;
   background: rgba(239, 68, 68, 0.06);
   border-radius: var(--radius-lg);
   border: 1px solid rgba(239, 68, 68, 0.2);
+  max-width: 320px;
+  margin: 0 auto;
 }
 
 .xx-preview-error-text {
@@ -2456,6 +2463,9 @@
   margin-bottom: 20px;
   font-size: 13px;
   color: var(--text-primary);
+  max-width: 320px;
+  margin-left: auto;
+  margin-right: auto;
 }
 
 .xx-preview-plan-card {
@@ -2570,6 +2580,16 @@
   z-index: 2;
 }
 
+/* ── 整体进度条（手机屏尺寸）── */
+.xx-preview-progress-bar {
+  max-width: 320px;
+  margin: 12px auto;
+  height: 6px;
+  background: var(--bg-tertiary);
+  border-radius: 3px;
+  overflow: hidden;
+}
+
 .xx-preview-progress-bar-wrap {
   width: 100%;
   height: 4px;
-- 
2.54.0