xiaoxia/xiaoxia-saas
1
0
Fork 0
Code Issues 16 Pull Requests 9 Actions 34.2k Packages Projects Releases 7 Wiki Activity

fix(viral-video): STEP2/STEP3 主按钮缺失修复（始终显示，状态驱动禁用/加载） #2119

Merged
xiaoxia merged 1 commits from fix/2041-step2-step3-buttons into develop 2026-10-01 11:33:13 +08:00
Conversation 4 Commits 1 Files Changed 2
+78 -41
2 changed files with 78 additions and 41 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/web/src/pages/viral-video/ViralVideoPage.css
+35 -16
View File
@@ -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 {
apps/web/src/pages/viral-video/ViralVideoPage.tsx
+43 -25
View File
@@ -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>