From 73cddd73ba0bbdd8fac8a8c3ac3df483f65d8ba5 Mon Sep 17 00:00:00 2001
From: xiaoxia <dev@xiaoxiajianji.com>
Date: Mon, 14 Sep 2026 20:47:55 +0800
Subject: [PATCH] refactor: update Step2MaterialSelect with clipCount prop,
 remove template props (#1899)

---
 .../components/Step2MaterialSelect.tsx        | 43 +++++++++++++++----
 1 file changed, 35 insertions(+), 8 deletions(-)

diff --git a/apps/web/src/pages/generate/components/Step2MaterialSelect.tsx b/apps/web/src/pages/generate/components/Step2MaterialSelect.tsx
index 39ee02a15..8c5e2c487 100644
--- a/apps/web/src/pages/generate/components/Step2MaterialSelect.tsx
+++ b/apps/web/src/pages/generate/components/Step2MaterialSelect.tsx
@@ -1,8 +1,8 @@
 /**
- * Step 2 素材选择组件
+ * Step 1 素材选择组件（#1899 原 Step2 前移）
+ * 新增片段数量输入，系统按片段数智能匹配素材
  */
 import React from "react"
-import type { TemplateSegment } from "@/api/templates/types"
 import type { EditPlanClip } from "@/api/template-editor"
 import { useStep2Materials } from "../hooks/useStep2Materials"
 import MaterialModeTabs from "./material/MaterialModeTabs"
@@ -17,14 +17,11 @@ interface Step2MaterialSelectProps {
   onSelectedMaterialsChange: (ids: string[]) => void
   smartSelectedIds: string[]
   onSmartSelectedIdsChange: (ids: string[]) => void
-  /** 当前选中的模板/草稿 ID，用于自动保存 */
-  selectedTemplate?: string
-  /** 当前模板的 segments（用于构建 clips duration） */
-  templateSegments?: TemplateSegment[]
+  /** 片段数量（#1899） */
+  clipCount: number
+  onClipCountChange: (n: number) => void
   /** 服务端 clips 创建成功后的回调 */
   onServerClipsChange?: (clips: EditPlanClip[]) => void
-  /** 当前模板创建片段返回 404/400/422（模板失效）时的自动回退回调（#1777） */
-  onTemplateInvalid?: () => boolean
 }
 
 const Step2MaterialSelect: React.FC<Step2MaterialSelectProps> = (props) => {
@@ -34,6 +31,36 @@ const Step2MaterialSelect: React.FC<Step2MaterialSelectProps> = (props) => {
     <div className="xx-form-section">
       <h3>📦 选择素材</h3>
 
+      {/* 片段数量（#1899） */}
+      <div className="xx-form-field" style={{ marginTop: 12 }}>
+        <label>片段数量</label>
+        <div style={{ display: "flex", alignItems: "center", gap: 12 }}>
+          <input
+            type="number"
+            min={1}
+            max={10}
+            step={1}
+            value={props.clipCount}
+            onChange={(e) => {
+              const v = parseInt(e.target.value, 10)
+              if (!isNaN(v)) props.onClipCountChange(Math.max(1, Math.min(10, v)))
+            }}
+            style={{
+              width: 80,
+              padding: "8px 12px",
+              border: "1px solid var(--line, #e5e7eb)",
+              borderRadius: 8,
+              background: "var(--bg-card, #fff)",
+              color: "var(--text-primary, #111)",
+              fontSize: 14,
+            }}
+          />
+          <span style={{ fontSize: 12, color: "var(--text-secondary, #6b7280)" }}>
+            系统将按片段数量智能匹配素材（1-10，默认3）
+          </span>
+        </div>
+      </div>
+
       <MaterialModeTabs mode={m.materialMode} onModeChange={m.onMaterialModeChange} />
 
       <div className="xx-form-field" style={{ marginTop: 12 }}>