Compare commits

...

1 Commits

Author SHA1 Message Date
saas前端工程师 adc2693d58 fix(viral-video): STEP2/STEP3 主按钮始终显示并按状态禁用/加载/切换文案
CI/CD Pipeline / Dedup Check - skip PR tests when covered by push pipeline (pull_request) Successful in 4s
CI/CD Pipeline / Check push changed paths (pull_request) Has been skipped
CI/CD Pipeline / Check if frontend-only change (pull_request) Successful in 3s
CI/CD Pipeline / Build Staging API Image (pull_request) Has been skipped
CI/CD Pipeline / Build Staging Web Image (pull_request) Has been skipped
CI/CD Pipeline / Build Staging Worker Image (pull_request) Has been skipped
CI/CD Pipeline / Unit Tests (pull_request) Has been skipped
CI/CD Pipeline / Integration Tests (pull_request) Has been skipped
CI/CD Pipeline / PR Build API Image (pull_request) Has been skipped
CI/CD Pipeline / PR Build Worker Image (pull_request) Has been skipped
CI/CD Pipeline / Retag skipped Staging API Image (pull_request) Has been skipped
CI/CD Pipeline / Retag skipped Staging Web Image (pull_request) Has been skipped
CI/CD Pipeline / Retag skipped Staging Worker Image (pull_request) Has been skipped
Preview Cleanup / Cleanup Preview Environment (pull_request) Successful in 1m26s
CI/CD Pipeline / PR Build Web Image (pull_request) Successful in 1m41s
CI/CD Pipeline / Frontend Lint (pull_request) Successful in 1m55s
CI/CD Pipeline / Frontend Unit Tests (pull_request) Successful in 1m56s
PR Automation / Auto Approve on CI Green (pull_request) Failing after 2m37s
Preview Deploy / Deploy Preview Environment (pull_request) Successful in 2m37s
ACR Cleanup / ACR Image Cleanup (pull_request_target) Successful in 2m10s
CI/CD Pipeline / Validate - Style (pull_request) Successful in 5m41s
CI/CD Pipeline / Deploy Staging (Watchtower auto-deploy) (pull_request) Has been skipped
PR Automation / Auto Merge on CI Green + Approved (pull_request) Has been skipped
CI/CD Pipeline / Validate - Python (mypy + alembic) (pull_request) Successful in 6m19s
AI Code Review / AI Code Review (pull_request) Successful in 6m57s
CI/CD Pipeline / Staging E2E Tests (pull_request) Has been skipped
CI/CD Pipeline / Staging API Integration Tests (pull_request) Has been skipped
CI/CD Pipeline / ACR Image Cleanup (pull_request) Has been skipped
CI/CD Pipeline / Validate - Security (pull_request) Successful in 14m21s
CI/CD Pipeline / Build Production API Image (pull_request) Has been skipped
CI/CD Pipeline / Build Production Web Image (pull_request) Has been skipped
CI/CD Pipeline / Build Production Worker Image (pull_request) Has been skipped
CI/CD Pipeline / CI Gate (pull_request) Successful in 2s
CI/CD Pipeline / Deploy Production (pull_request) Has been skipped
CI/CD Pipeline / Canary Release to Production (pull_request) Has been skipped
CI/CD Pipeline / Production Browser E2E (pull_request) Has been skipped
- 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 冲淡看不清
2026-10-01 11:31:36 +08:00
2 changed files with 78 additions and 41 deletions
@@ -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 {
@@ -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>