From f14a83ff35a8129d72914339281d714284a4e809 Mon Sep 17 00:00:00 2001
From: xiaoxia <dev@xiaoxiajianji.com>
Date: Mon, 14 Sep 2026 21:28:55 +0800
Subject: [PATCH] style: format Step2MaterialSelect.tsx with prettier (#1899
 #1900)

---
 .../components/Step2MaterialSelect.tsx        | 63 +++++++++++--------
 1 file changed, 37 insertions(+), 26 deletions(-)

diff --git a/apps/web/src/pages/generate/components/Step2MaterialSelect.tsx b/apps/web/src/pages/generate/components/Step2MaterialSelect.tsx
index 8c5e2c487..dc9306393 100644
--- a/apps/web/src/pages/generate/components/Step2MaterialSelect.tsx
+++ b/apps/web/src/pages/generate/components/Step2MaterialSelect.tsx
@@ -2,30 +2,30 @@
  * Step 1 素材选择组件（#1899 原 Step2 前移）
  * 新增片段数量输入，系统按片段数智能匹配素材
  */
-import React from "react"
-import type { EditPlanClip } from "@/api/template-editor"
-import { useStep2Materials } from "../hooks/useStep2Materials"
-import MaterialModeTabs from "./material/MaterialModeTabs"
-import ManualMaterialList from "./material/ManualMaterialList"
-import SmartMatchInput from "./material/SmartMatchInput"
-import SmartMatchResults from "./material/SmartMatchResults"
+import React from "react";
+import type { EditPlanClip } from "@/api/template-editor";
+import { useStep2Materials } from "../hooks/useStep2Materials";
+import MaterialModeTabs from "./material/MaterialModeTabs";
+import ManualMaterialList from "./material/ManualMaterialList";
+import SmartMatchInput from "./material/SmartMatchInput";
+import SmartMatchResults from "./material/SmartMatchResults";
 
 interface Step2MaterialSelectProps {
-  materialMode: "manual" | "auto"
-  onMaterialModeChange: (mode: "manual" | "auto") => void
-  selectedMaterials: string[]
-  onSelectedMaterialsChange: (ids: string[]) => void
-  smartSelectedIds: string[]
-  onSmartSelectedIdsChange: (ids: string[]) => void
+  materialMode: "manual" | "auto";
+  onMaterialModeChange: (mode: "manual" | "auto") => void;
+  selectedMaterials: string[];
+  onSelectedMaterialsChange: (ids: string[]) => void;
+  smartSelectedIds: string[];
+  onSmartSelectedIdsChange: (ids: string[]) => void;
   /** 片段数量（#1899） */
-  clipCount: number
-  onClipCountChange: (n: number) => void
+  clipCount: number;
+  onClipCountChange: (n: number) => void;
   /** 服务端 clips 创建成功后的回调 */
-  onServerClipsChange?: (clips: EditPlanClip[]) => void
+  onServerClipsChange?: (clips: EditPlanClip[]) => void;
 }
 
 const Step2MaterialSelect: React.FC<Step2MaterialSelectProps> = (props) => {
-  const m = useStep2Materials(props)
+  const m = useStep2Materials(props);
 
   return (
     <div className="xx-form-section">
@@ -42,8 +42,9 @@ const Step2MaterialSelect: React.FC<Step2MaterialSelectProps> = (props) => {
             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)))
+              const v = parseInt(e.target.value, 10);
+              if (!isNaN(v))
+                props.onClipCountChange(Math.max(1, Math.min(10, v)));
             }}
             style={{
               width: 80,
@@ -55,13 +56,18 @@ const Step2MaterialSelect: React.FC<Step2MaterialSelectProps> = (props) => {
               fontSize: 14,
             }}
           />
-          <span style={{ fontSize: 12, color: "var(--text-secondary, #6b7280)" }}>
+          <span
+            style={{ fontSize: 12, color: "var(--text-secondary, #6b7280)" }}
+          >
             系统将按片段数量智能匹配素材（1-10，默认3）
           </span>
         </div>
       </div>
 
-      <MaterialModeTabs mode={m.materialMode} onModeChange={m.onMaterialModeChange} />
+      <MaterialModeTabs
+        mode={m.materialMode}
+        onModeChange={m.onMaterialModeChange}
+      />
 
       <div className="xx-form-field" style={{ marginTop: 12 }}>
         <label>选择视频库</label>
@@ -96,7 +102,9 @@ const Step2MaterialSelect: React.FC<Step2MaterialSelectProps> = (props) => {
               gap: 10,
             }}
           >
-            <span className="xx-pill xx-pill-ok">已选 {m.selectedMaterials.length} 个素材</span>
+            <span className="xx-pill xx-pill-ok">
+              已选 {m.selectedMaterials.length} 个素材
+            </span>
           </div>
 
           <ManualMaterialList
@@ -120,11 +128,14 @@ const Step2MaterialSelect: React.FC<Step2MaterialSelectProps> = (props) => {
             loading={m.materialsLoading}
           />
 
-          <SmartMatchResults matching={m.smartMatching} hasMatched={m.hasMatched} />
+          <SmartMatchResults
+            matching={m.smartMatching}
+            hasMatched={m.hasMatched}
+          />
         </div>
       )}
     </div>
-  )
-}
+  );
+};
 
-export default Step2MaterialSelect
+export default Step2MaterialSelect;