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
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 冲淡看不清
This commit is contained in:
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user