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

xiaoxia commented 2026-10-01 11:32:13 +08:00

Owner

Copy Link

Copy Source

Bug 修复

用户反馈 STEP2/STEP3 紫色主按钮不显示。原因：按钮渲染被 step2Enabled/step3Enabled 条件隐藏，未到达对应步骤时整列进入 vv-col-disabled，按钮根本不挂载，且提示条是独立 div，用户看不到操作入口。

改动

STEP2「✍️ 生成文案」按钮

• 移除 step2Enabled && 外层条件，按钮始终渲染
• 未完成 STEP1（图片未分析）：灰色 disabled + 文案「生成文案（请先完成图片分析）」+ title 提示
• STEP1 完成后：紫色渐变可点击，文案「生成文案」
• 点击生成中：spinner + 「AI 生成文案中…」
• 文案生成后（step2_copy_ready）：按钮隐藏，改由 vv-copy-box 内的「🎬 确认文案并生成视频」紫色按钮承担（原逻辑保留，仍在 vv-copy-box 底部）
• 文案确认后进入 STEP3：按钮保持隐藏

STEP3「🎬 开始生成视频」按钮

• 合并原先多个条件分支（hint-gray/hint-yellow/ready/generating/done）为一个始终渲染的按钮，文案/disabled/样式由状态驱动
• 未完成 STEP1：灰色 disabled + 「开始生成视频（请先完成图片分析）」
• STEP1 完成但文案未确认（step1_done/step2_generating/step2_copy_ready/failed）：灰色 disabled + 「开始生成视频（请先确认文案）」
• 文案已确认（step3_ready）：紫色渐变可点击 + 「开始生成视频」
• 生成中（step3_generating）：紫色 disabled + spinner + 「AI 正在生成视频中…」
• 完成（step3_done）：主按钮消失，改显示「🔄 再生成一个」ghost 按钮

CSS 调整

• 新增 .vv-btn-primary.vv-btn-disabled-gray：灰色 #d1d5db 背景 + 灰字 #6b7280，覆盖紫色渐变（opacity:1 确保不被父级冲淡）
• .vv-col-disabled 重构：
  • 表单/控件/输入/pill/action-btn/audio-cell 保持 pointer-events:none + opacity:0.55
  • .vv-btn-primary 强制 opacity:1，由自身 vv-btn-disabled-gray 控制灰/紫色
  • 移除原先对整个 .vv-section 的 pointer-events:none（避免主按钮无法交互）
• 删除旧的 .vv-hint-gray / .vv-hint-yellow 提示条渲染逻辑（按钮自身已带提示文案，不再需要独立提示 div）

按钮样式一致性

三个步骤主按钮统一使用 vv-btn vv-btn-primary（紫色渐变 135deg #7c3aed→#a855f7、全宽、padding 12px、圆角 8px、14px 字号），与 STEP1「🔍 分析图片」完全一致；disabled 态统一灰色。

测试

• tsc --noEmit 通过
• vite build 通过
• prettier 通过

## Bug 修复 用户反馈 STEP2/STEP3 紫色主按钮不显示。原因：按钮渲染被 `step2Enabled`/`step3Enabled` 条件隐藏，未到达对应步骤时整列进入 `vv-col-disabled`，按钮根本不挂载，且提示条是独立 div，用户看不到操作入口。 ## 改动 ### STEP2「✍️ 生成文案」按钮 - 移除 `step2Enabled &&` 外层条件，按钮**始终渲染** - 未完成 STEP1（图片未分析）：灰色 disabled + 文案「生成文案（请先完成图片分析）」+ title 提示 - STEP1 完成后：紫色渐变可点击，文案「生成文案」 - 点击生成中：spinner + 「AI 生成文案中…」 - 文案生成后（step2_copy_ready）：按钮隐藏，改由 vv-copy-box 内的「🎬 确认文案并生成视频」紫色按钮承担（原逻辑保留，仍在 vv-copy-box 底部） - 文案确认后进入 STEP3：按钮保持隐藏 ### STEP3「🎬 开始生成视频」按钮 - 合并原先多个条件分支（hint-gray/hint-yellow/ready/generating/done）为**一个始终渲染**的按钮，文案/disabled/样式由状态驱动 - 未完成 STEP1：灰色 disabled + 「开始生成视频（请先完成图片分析）」 - STEP1 完成但文案未确认（step1_done/step2_generating/step2_copy_ready/failed）：灰色 disabled + 「开始生成视频（请先确认文案）」 - 文案已确认（step3_ready）：紫色渐变可点击 + 「开始生成视频」 - 生成中（step3_generating）：紫色 disabled + spinner + 「AI 正在生成视频中…」 - 完成（step3_done）：主按钮消失，改显示「🔄 再生成一个」ghost 按钮 ### CSS 调整 - 新增 `.vv-btn-primary.vv-btn-disabled-gray`：灰色 `#d1d5db` 背景 + 灰字 `#6b7280`，覆盖紫色渐变（opacity:1 确保不被父级冲淡） - `.vv-col-disabled` 重构： - 表单/控件/输入/pill/action-btn/audio-cell 保持 `pointer-events:none` + `opacity:0.55` - `.vv-btn-primary` 强制 `opacity:1`，由自身 `vv-btn-disabled-gray` 控制灰/紫色 - 移除原先对整个 `.vv-section` 的 `pointer-events:none`（避免主按钮无法交互） - 删除旧的 `.vv-hint-gray` / `.vv-hint-yellow` 提示条渲染逻辑（按钮自身已带提示文案，不再需要独立提示 div） ## 按钮样式一致性 三个步骤主按钮统一使用 `vv-btn vv-btn-primary`（紫色渐变 135deg #7c3aed→#a855f7、全宽、padding 12px、圆角 8px、14px 字号），与 STEP1「🔍 分析图片」完全一致；disabled 态统一灰色。 ## 测试 - [x] tsc --noEmit 通过 - [x] vite build 通过 - [x] prettier 通过

xiaoxia added 1 commit 2026-10-01 11:32:35 +08:00

fix(viral-video): STEP2/STEP3 主按钮始终显示并按状态禁用/加载/切换文案 ... adc2693d58

- 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 冲淡看不清

xiaoxia reviewed 2026-10-01 11:33:01 +08:00

xiaoxia left a comment

Author

Owner

Copy Link

Copy Source

LGTM

LGTM

xiaoxia merged commit 4b04c6401c into develop 2026-10-01 11:33:13 +08:00

gitea-actions bot commented 2026-10-01 11:35:04 +08:00

Copy Link

Copy Source

🗑️ 预览环境已清理

PR #2119 已关闭或合并，对应的预览环境已被清理。

如有需要，可以重新打开 PR 来重新生成预览环境。

🗑️ **预览环境已清理** PR #2119 已关闭或合并，对应的预览环境已被清理。 > 如有需要，可以重新打开 PR 来重新生成预览环境。

auto-approve-bot reviewed 2026-10-01 11:35:30 +08:00

auto-approve-bot left a comment

Collaborator

Copy Link

Copy Source

CI全绿，自动审批通过。

CI全绿，自动审批通过。

gitea-actions bot commented 2026-10-01 11:35:44 +08:00

Copy Link

Copy Source

🚀 预览环境已部署

项目	详情
PR号	#2119
预览链接	https://pr-2119.preview.xiaoxiajianji.com
API环境	staging

💡 预览环境使用 staging API 数据，请勿在预览环境中操作重要数据。

🔄 每次提交新代码后预览环境会自动更新。

🗑️ PR 关闭或合并后，预览环境会自动清理。

🚀 **预览环境已部署** | 项目 | 详情 | |------|------| | PR号 | #2119 | | 预览链接 | [https://pr-2119.preview.xiaoxiajianji.com](https://pr-2119.preview.xiaoxiajianji.com) | | API环境 | staging | > 💡 预览环境使用 staging API 数据，请勿在预览环境中操作重要数据。 > > 🔄 每次提交新代码后预览环境会自动更新。 > > 🗑️ PR 关闭或合并后，预览环境会自动清理。

Sign in to join this conversation.

Reviewers

No Reviewers

Labels

Clear labels

architecture

架构设计

backend

后端相关

blocked

阻塞中

bug

Bug修复

ci-bug

CI本身的bug

ci-optimization

CI优化类任务

ci-pipeline

CI流水线/workflow相关

cleanup

代码清理

devops

运维/部署/CI

documentation

文档相关

feature

新功能

frontend

前端相关

P0

阻塞性，必须立即处理

P1

高优先级

P2

中优先级

P3

低优先级/后考虑

question

需要讨论确认

ready

PR CI通过，可合并

refactor

代码重构

No Label

Milestone

No items

No Milestone

Projects

Clear projects

No project

Assignees

Clear assignees

auto-approve-bot frontend-dev xiaoxia

No Assignees

3 Participants

Notifications

Subscribe

Due Date

No due date set.

Dependencies

No dependencies set.

Reference: xiaoxia/xiaoxia-saas#2119