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) => {

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;