From adc2693d5855b7bf6d93f8b93d49d317bcef0f03 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?saas=E5=89=8D=E7=AB=AF=E5=B7=A5=E7=A8=8B=E5=B8=88?=
 <agent@coze.cn>
Date: Thu, 1 Oct 2026 11:31:36 +0800
Subject: [PATCH] =?UTF-8?q?fix(viral-video):=20STEP2/STEP3=20=E4=B8=BB?=
 =?UTF-8?q?=E6=8C=89=E9=92=AE=E5=A7=8B=E7=BB=88=E6=98=BE=E7=A4=BA=E5=B9=B6?=
 =?UTF-8?q?=E6=8C=89=E7=8A=B6=E6=80=81=E7=A6=81=E7=94=A8/=E5=8A=A0?=
 =?UTF-8?q?=E8=BD=BD/=E5=88=87=E6=8D=A2=E6=96=87=E6=A1=88?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- STEP2「生成文案」按钮：移除 step2Enabled 条件隐藏，改为始终渲染；未完成STEP1时灰色disabled+提示「请先完成图片分析」，生成中显示「AI生成文案中…」spinner
- STEP3「开始生成视频」按钮：统一为始终渲染的单按钮，按状态切换：未完成STEP1灰色「…（请先完成图片分析）」/文案未确认灰色「…（请先确认文案）」/ready紫色可点/生成中spinner「AI正在生成视频中…」/完成后显示「再生成一个」ghost按钮
- 删除原先的 vv-hint-gray/vv-hint-yellow 提示条（按钮自身带提示文案）
- vv-col-disabled 禁用态调整：表单/控件区 opacity:0.55 + pointer-events:none 保留，但主按钮 vv-btn-primary 强制 opacity:1 且使用 vv-btn-disabled-gray 灰色样式覆盖紫色渐变，避免 disabled 按钮被父级 opacity 冲淡看不清
---
 .../src/pages/viral-video/ViralVideoPage.css  | 51 +++++++++-----
 .../src/pages/viral-video/ViralVideoPage.tsx  | 68 ++++++++++++-------
 2 files changed, 78 insertions(+), 41 deletions(-)

diff --git a/apps/web/src/pages/viral-video/ViralVideoPage.css b/apps/web/src/pages/viral-video/ViralVideoPage.css
index ab3966a36..f3d314d08 100644
--- a/apps/web/src/pages/viral-video/ViralVideoPage.css
+++ b/apps/web/src/pages/viral-video/ViralVideoPage.css
@@ -889,9 +889,22 @@
   transform: translateY(-1px);
 }
 .vv-btn-primary:disabled {
-  opacity: 0.5;
+  opacity: 0.55;
   cursor: not-allowed;
 }
+.vv-btn-primary.vv-btn-disabled-gray,
+.vv-btn-primary:disabled.vv-btn-disabled-gray {
+  background: #d1d5db !important;
+  color: #6b7280 !important;
+  opacity: 1;
+  box-shadow: none !important;
+  transform: none !important;
+  cursor: not-allowed;
+}
+.vv-btn-primary.vv-btn-disabled-gray:hover {
+  box-shadow: none !important;
+  transform: none !important;
+}
 .vv-btn-ghost {
   background: #fff;
   color: #6b7280;
@@ -1180,13 +1193,29 @@
 }
 
 /* 列禁用态 */
-.vv-col-disabled .vv-section {
+.vv-col-disabled .vv-section-body,
+.vv-col-disabled .vv-step-subhead,
+.vv-col-disabled .vv-credits,
+.vv-col-disabled .vv-preview,
+.vv-col-disabled .vv-error,
+.vv-col-disabled .vv-hint-gray,
+.vv-col-disabled .vv-hint-yellow {
   opacity: 0.55;
-  pointer-events: none;
 }
-.vv-col-disabled .vv-section .vv-btn-primary {
-  background: #d1d5db !important;
-  cursor: not-allowed;
+.vv-col-disabled .vv-btn-primary,
+.vv-col-disabled .vv-btn-primary:hover {
+  opacity: 1 !important;
+}
+.vv-col-disabled .vv-section .vv-form-row,
+.vv-col-disabled .vv-section .vv-pill-row,
+.vv-col-disabled .vv-section input,
+.vv-col-disabled .vv-section textarea,
+.vv-col-disabled .vv-section .ant-select,
+.vv-col-disabled .vv-section .vv-pill,
+.vv-col-disabled .vv-section .vv-action-btn,
+.vv-col-disabled .vv-section .vv-audio-cell,
+.vv-col-disabled .vv-section .vv-step-lock {
+  pointer-events: none;
 }
 
 /* Section 内小标题 */
@@ -1289,16 +1318,6 @@
 }
 
 /* 列禁用态 */
-.vv-col-disabled .vv-section {
-  opacity: 0.55;
-}
-.vv-col-disabled .vv-section .vv-btn,
-.vv-col-disabled .vv-section button,
-.vv-col-disabled .vv-section input,
-.vv-col-disabled .vv-section textarea,
-.vv-col-disabled .vv-section .ant-select {
-  pointer-events: none;
-}
 
 /* Section 内小标题 */
 .vv-section-subtitle {
diff --git a/apps/web/src/pages/viral-video/ViralVideoPage.tsx b/apps/web/src/pages/viral-video/ViralVideoPage.tsx
index b059a7306..16c4a4808 100644
--- a/apps/web/src/pages/viral-video/ViralVideoPage.tsx
+++ b/apps/web/src/pages/viral-video/ViralVideoPage.tsx
@@ -1357,20 +1357,24 @@ const ViralVideoPage: React.FC = () => {
                 </div>
               )}
 
-              {/* STEP2 主按钮：✍️ 生成文案 */}
-              {step2Enabled &&
-                task.uiStep !== "step2_copy_ready" &&
+              {/* STEP2 主按钮：✍️ 生成文案（文案未确认前显示） */}
+              {task.uiStep !== "step2_copy_ready" &&
                 task.uiStep !== "step3_ready" &&
                 task.uiStep !== "step3_generating" &&
                 task.uiStep !== "step3_done" && (
                   <button
-                    className="vv-btn vv-btn-primary"
+                    className={`vv-btn vv-btn-primary ${!step2Enabled ? "vv-btn-disabled-gray" : ""}`}
                     onClick={handleGenerateCopy}
                     disabled={task.uiStep === "step2_generating" || !step2Enabled}
+                    title={!step2Enabled ? "请先完成图片分析" : ""}
                   >
                     {task.uiStep === "step2_generating" ? (
                       <>
-                        <span className="vv-spinner" /> AI 创作中…
+                        <span className="vv-spinner" /> AI 生成文案中…
+                      </>
+                    ) : !step2Enabled ? (
+                      <>
+                        <EditOutlined /> 生成文案（请先完成图片分析）
                       </>
                     ) : (
                       <>
@@ -1485,27 +1489,41 @@ const ViralVideoPage: React.FC = () => {
             </div>
           )}
 
-          {/* 步骤提示/主按钮 */}
-          {!step2Enabled && (
-            <div className="vv-hint-gray">请先在 STEP 1 上传素材并点击「分析图片」</div>
-          )}
-          {step2Enabled && !step3Enabled && (
-            <div className="vv-hint-yellow">请在 STEP 2 配置参数并点击「生成文案」</div>
-          )}
-          {task.uiStep === "step3_ready" && (
-            <button className="vv-btn vv-btn-primary" onClick={handleGenerateVideo}>
-              <VideoCameraOutlined /> 开始生成视频
-            </button>
-          )}
-          {task.uiStep === "step3_generating" && (
-            <button className="vv-btn vv-btn-primary" disabled>
-              <span className="vv-spinner" /> AI 正在生成视频中…
-            </button>
-          )}
-          {task.uiStep === "step3_done" && outputUrl && (
-            <button className="vv-btn vv-btn-ghost vv-btn-block" onClick={resetTask}>
-              <ReloadOutlined /> 再生成一个
+          {/* STEP3 主按钮：🎬 开始生成视频（始终展示，状态驱动 disabled/文案） */}
+          {task.uiStep !== "step3_done" ? (
+            <button
+              className={`vv-btn vv-btn-primary ${!step3Enabled ? "vv-btn-disabled-gray" : ""}`}
+              onClick={handleGenerateVideo}
+              disabled={task.uiStep === "step3_generating" || !step3Enabled}
+              title={
+                !step3Enabled
+                  ? !step2Enabled
+                    ? "请先完成图片分析"
+                    : "请先在 STEP 2 生成并确认文案"
+                  : ""
+              }
+            >
+              {task.uiStep === "step3_generating" ? (
+                <>
+                  <span className="vv-spinner" /> AI 正在生成视频中…
+                </>
+              ) : !step3Enabled ? (
+                <>
+                  <VideoCameraOutlined /> 开始生成视频
+                  {!step2Enabled ? "（请先完成图片分析）" : "（请先确认文案）"}
+                </>
+              ) : (
+                <>
+                  <VideoCameraOutlined /> 开始生成视频
+                </>
+              )}
             </button>
+          ) : (
+            outputUrl && (
+              <button className="vv-btn vv-btn-ghost vv-btn-block" onClick={resetTask}>
+                <ReloadOutlined /> 再生成一个
+              </button>
+            )
           )}
         </div>
       </div>
-- 
2.54.0