From e7b28623d6983cf86cbb7406160eb5ade7706cfa Mon Sep 17 00:00:00 2001
From: xiaoxia <dev@xiaoxiajianji.com>
Date: Thu, 30 Jul 2026 14:01:25 +0800
Subject: [PATCH] =?UTF-8?q?fix(#1197):=20=E5=A2=9E=E5=8A=A0Step3=E9=A2=84?=
 =?UTF-8?q?=E8=A7=88=E7=94=9F=E6=88=90=E7=9B=B8=E5=85=B3CSS=E6=A0=B7?=
 =?UTF-8?q?=E5=BC=8F=EF=BC=88=E7=94=9F=E6=88=90=E6=8C=89=E9=92=AE/?=
 =?UTF-8?q?=E5=8A=A0=E8=BD=BD/=E9=94=99=E8=AF=AF=E7=8A=B6=E6=80=81?=
 =?UTF-8?q?=EF=BC=89?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 apps/web/src/pages/generate/generate.css | 98 ++++++++++++++++++++++++
 1 file changed, 98 insertions(+)

diff --git a/apps/web/src/pages/generate/generate.css b/apps/web/src/pages/generate/generate.css
index 2c2f0702c..1b958195d 100644
--- a/apps/web/src/pages/generate/generate.css
+++ b/apps/web/src/pages/generate/generate.css
@@ -2356,6 +2356,103 @@
    生成预览步骤
    ================================================================ */
 
+/* ── 初始状态：生成按钮 ── */
+.xx-preview-generate-section {
+  text-align: center;
+  padding: 40px 20px;
+  background: var(--bg-tertiary);
+  border-radius: var(--radius-lg);
+  border: 2px dashed var(--border-color);
+}
+
+.xx-preview-generate-hint {
+  margin-bottom: 24px;
+}
+
+.xx-preview-generate-title {
+  font-size: 16px;
+  font-weight: 600;
+  color: var(--text-primary);
+  margin: 0 0 8px 0;
+}
+
+.xx-preview-generate-desc {
+  font-size: 13px;
+  color: var(--text-secondary);
+  margin: 0;
+}
+
+.xx-preview-generate-btn {
+  min-width: 160px;
+  height: 42px;
+  font-size: 14px;
+}
+
+/* ── 加载中状态 ── */
+.xx-preview-loading {
+  text-align: center;
+  padding: 40px 20px;
+  background: var(--bg-tertiary);
+  border-radius: var(--radius-lg);
+  border: 1px solid var(--border-color);
+}
+
+.xx-preview-loading-text {
+  font-size: 15px;
+  font-weight: 600;
+  color: var(--text-primary);
+  margin: 16px 0 8px 0;
+}
+
+.xx-preview-loading-desc {
+  font-size: 13px;
+  color: var(--text-secondary);
+  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);
+}
+
+.xx-preview-error-text {
+  font-size: 15px;
+  font-weight: 600;
+  color: var(--error-color, #ef4444);
+  margin: 12px 0 6px 0;
+}
+
+.xx-preview-error-desc {
+  font-size: 13px;
+  color: var(--text-secondary);
+  margin: 0 0 16px 0;
+}
+
+/* ── 成功状态的操作按钮 ── */
+.xx-preview-regenerate-btn {
+  margin-left: auto;
+  background: none;
+  border: none;
+  color: var(--text-tertiary);
+  font-size: 12px;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  padding: 4px 8px;
+  border-radius: 4px;
+  transition: all 0.2s ease;
+}
+
+.xx-preview-regenerate-btn:hover {
+  color: var(--primary-color);
+  background: rgba(59, 130, 246, 0.1);
+}
+
 .xx-preview-tip {
   display: flex;
   align-items: center;
@@ -2639,3 +2736,4 @@
 .ant-modal-close {
   color: #fff !important;
 }
+