diff --git a/apps/web/src/pages/generate/components/GenerateStepActions.tsx b/apps/web/src/pages/generate/components/GenerateStepActions.tsx index 68b256fe9..85e20d29b 100644 --- a/apps/web/src/pages/generate/components/GenerateStepActions.tsx +++ b/apps/web/src/pages/generate/components/GenerateStepActions.tsx @@ -1,24 +1,38 @@ /** - * GeneratePage 步骤底部操作按钮(#1899 简化为 5 步) + * GeneratePage 步骤底部操作按钮(Issue #1677 修正:固定 6 步) + * v2: 步骤4 按钮前显示本次积分消耗;积分不足时禁用按钮并提示充值 * - * 步骤 1~2:上一步 / 下一步 - * 步骤 3(选择标题):「✨ 确认生成视频 / 确认生成 N 个视频」→ 创建正式生成任务,成功后跳步骤4 - * 步骤 4(确认生成):渲染进度页,全部完成后「下一步:选择封面」;仅上一步 - * 步骤 5(选择封面):仅上一步 + * 步骤 1~3:上一步 / 下一步 + * 步骤 4(选择标题):「✨ 确认生成视频 / 确认生成 N 个视频」→ 创建正式生成任务,成功后跳步骤5 + * 步骤 5(确认生成):渲染进度页,全部完成后「下一步:选择封面」;仅上一步 + * 步骤 6(选择封面):仅上一步 */ import React from "react" +import { Button, Tooltip } from "antd" +import { DiamondOutlined, ExclamationCircleOutlined } from "@ant-design/icons" export interface GenerateStepActionsProps { currentStep: number onPrev: () => void onNext: () => void - /** 步骤3:确认生成视频(校验 + 创建渲染任务) */ + /** 步骤4:确认生成视频(校验 + 创建渲染任务) */ onConfirmGenerate: () => void | Promise generating: boolean generated: boolean generateError: string | null /** 批量模式下勾选的视频数量(N=1 时为1) */ selectedCount?: number + // v2: 积分相关 + /** 本次预估消耗积分 */ + estimatedCost?: number + /** 是否积分不足 */ + pointsInsufficient?: boolean + /** 积分不足原因 */ + insufficientReason?: string + /** 剩余免费混剪次数 */ + freeClipsUsedThisTime?: number + /** 前往充值 */ + onRecharge?: () => void } const GenerateStepActions: React.FC = ({ @@ -30,10 +44,15 @@ const GenerateStepActions: React.FC = ({ generated, generateError, selectedCount = 1, + estimatedCost, + pointsInsufficient, + insufficientReason, + freeClipsUsedThisTime, + onRecharge, }) => { const renderPrimaryButton = () => { - /* 步骤 1~2:上一步 / 下一步 */ - if (currentStep < 3) { + /* 步骤 1~3:上一步 / 下一步 */ + if (currentStep < 4) { return ( ) } + if (pointsInsufficient) { + return ( + + + + {onRecharge && ( + + )} + + + ) + } return ( ) } - /* 步骤 4:确认生成进度页 — 全部完成后下一步进封面 */ - if (currentStep === 4) { + /* 步骤 5:确认生成进度页 — 全部完成后下一步进封面 */ + if (currentStep === 5) { if (generated) { return (