feat(points): update apps/web/src/pages/generate/components/GenerateStepActions.tsx

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<void>
   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<GenerateStepActionsProps> = ({
@@ -30,10 +44,15 @@ const GenerateStepActions: React.FC<GenerateStepActionsProps> = ({
   generated,
   generateError,
   selectedCount = 1,
+  estimatedCost,
+  pointsInsufficient,
+  insufficientReason,
+  freeClipsUsedThisTime,
+  onRecharge,
 }) => {
   const renderPrimaryButton = () => {
-    /* 步骤 1~2：上一步 / 下一步 */
-    if (currentStep < 3) {
+    /* 步骤 1~3：上一步 / 下一步 */
+    if (currentStep < 4) {
       return (
         <button className="xx-btn xx-btn-primary" onClick={onNext}>
           下一步 →
@@ -41,8 +60,20 @@ const GenerateStepActions: React.FC<GenerateStepActionsProps> = ({
       )
     }
 
-    /* 步骤 3：选择标题 — 确认生成 */
-    if (currentStep === 3) {
+    /* 步骤 4：选择标题 — 确认生成 */
+    if (currentStep === 4) {
+      const costTag =
+        typeof estimatedCost === "number" && estimatedCost > 0 ? (
+          <span className="xx-step-cost-tag">
+            <DiamondOutlined />
+            {estimatedCost}
+          </span>
+        ) : typeof estimatedCost === "number" &&
+          estimatedCost === 0 &&
+          typeof freeClipsUsedThisTime === "number" ? (
+          <span className="xx-step-cost-tag free">使用 {freeClipsUsedThisTime} 次免费额度</span>
+        ) : null
+
       if (generating) {
         return (
           <button className="xx-btn xx-btn-primary" disabled>
@@ -54,18 +85,41 @@ const GenerateStepActions: React.FC<GenerateStepActionsProps> = ({
         return (
           <button className="xx-btn xx-btn-primary" onClick={onConfirmGenerate}>
             🔄 重新生成
+            {costTag}
           </button>
         )
       }
+      if (pointsInsufficient) {
+        return (
+          <Tooltip title={insufficientReason ?? "积分不足，请充值"}>
+            <span>
+              <button className="xx-btn xx-btn-primary" disabled>
+                <ExclamationCircleOutlined /> 积分不足
+                {costTag}
+              </button>
+              {onRecharge && (
+                <button
+                  className="xx-btn xx-btn-ghost"
+                  style={{ marginLeft: 8, color: "#7c3aed", borderColor: "#c4b5fd" }}
+                  onClick={onRecharge}
+                >
+                  去充值 →
+                </button>
+              )}
+            </span>
+          </Tooltip>
+        )
+      }
       return (
         <button className="xx-btn xx-btn-primary" onClick={onConfirmGenerate}>
           {selectedCount > 1 ? `✨ 确认生成 ${selectedCount} 个视频` : "✨ 确认生成视频"}
+          {costTag}
         </button>
       )
     }
 
-    /* 步骤 4：确认生成进度页 — 全部完成后下一步进封面 */
-    if (currentStep === 4) {
+    /* 步骤 5：确认生成进度页 — 全部完成后下一步进封面 */
+    if (currentStep === 5) {
       if (generated) {
         return (
           <button className="xx-btn xx-btn-primary" onClick={onNext}>
@@ -80,7 +134,7 @@ const GenerateStepActions: React.FC<GenerateStepActionsProps> = ({
       )
     }
 
-    /* 步骤 5（封面，最后一步）：无主按钮 */
+    /* 步骤 6（封面，最后一步）：无主按钮 */
     return null
   }