feat(P1): #580 智能剪辑流程重构 - 新增生成预览步骤

- 流程调整为7步：选择模板→选择素材→生成预览→选择标题→选择配音→选择封面→确认生成
- 新增「生成预览」步骤，展示剪辑计划概览（模板、素材、时长、比例）
- 所有步骤编号顺延调整

apps/web/src/pages/generate/GeneratePage.tsx

@@ -76,10 +76,11 @@ const VOICE_GENDER_ICON: Record<string, string> = {
 const STEPS = [
   { key: 1, label: "选择模板" },
   { key: 2, label: "选择素材" },
-  { key: 3, label: "选择标题" },
-  { key: 4, label: "选择配音" },
-  { key: 5, label: "选择封面" },
-  { key: 6, label: "确认生成" },
+  { key: 3, label: "生成预览" },
+  { key: 4, label: "选择标题" },
+  { key: 5, label: "选择配音" },
+  { key: 6, label: "选择封面" },
+  { key: 7, label: "确认生成" },
 ]
 
 /* ── 标题设置常量 ── */
@@ -964,11 +965,11 @@ const GeneratePage: React.FC = () => {
       message.warning("请至少选择一个素材")
       return
     }
-    if (currentStep === 3 && !titleSettings.title.trim()) {
+    if (currentStep === 4 && !titleSettings.title.trim()) {
       message.warning("请选择或输入标题")
       return
     }
-    if (currentStep < 6) {
+    if (currentStep < 7) {
       setCurrentStep((s) => s + 1)
     }
   }, [
@@ -1234,8 +1235,45 @@ const GeneratePage: React.FC = () => {
     </div>
   )
 
-  /** 步骤 3：选择标题 + 标题样式设置 */
+  /** 步骤 3：生成预览 */
   const renderStep3 = () => (
+    <div className="xx-form-section">
+      <h3>🎬 生成预览</h3>
+      <div className="xx-preview-tip">
+        <CheckCircleFilled style={{ color: "#52c41a", marginRight: 8 }} />
+        <span>素材已选好，AI 将为您智能匹配剪辑方案</span>
+      </div>
+      <div className="xx-preview-plan-card">
+        <div className="xx-preview-plan-title">剪辑计划预览</div>
+        <div className="xx-preview-plan-info">
+          <div className="xx-preview-plan-row">
+            <span className="xx-preview-plan-label">模板</span>
+            <span className="xx-preview-plan-value">{getTemplateName()}</span>
+          </div>
+          <div className="xx-preview-plan-row">
+            <span className="xx-preview-plan-label">素材数量</span>
+            <span className="xx-preview-plan-value">
+              {materialMode === "auto" ? "AI自动匹配" : `${selectedMaterials.length} 个素材`}
+            </span>
+          </div>
+          <div className="xx-preview-plan-row">
+            <span className="xx-preview-plan-label">预计时长</span>
+            <span className="xx-preview-plan-value">{duration} 秒</span>
+          </div>
+          <div className="xx-preview-plan-row">
+            <span className="xx-preview-plan-label">视频比例</span>
+            <span className="xx-preview-plan-value">{videoRatio}</span>
+          </div>
+        </div>
+        <div className="xx-preview-plan-hint">
+          💡 点击「下一步」进入标题设置，AI 将根据素材内容为您推荐标题
+        </div>
+      </div>
+    </div>
+  )
+
+  /** 步骤 4：选择标题 + 标题样式设置 */
+  const renderStep4 = () => (
     <div className="xx-form-section">
       <h3>📝 选择标题</h3>
 
@@ -1426,7 +1464,7 @@ const GeneratePage: React.FC = () => {
   )
 
   /** 步骤 4：选择配音 */
-  const renderStep4 = () => (
+  const renderStep5 = () => (
     <div className="xx-form-section">
       <h3>🎙️ 选择配音</h3>
 
@@ -1802,7 +1840,7 @@ const GeneratePage: React.FC = () => {
   )
 
   /** 步骤 5：选择封面 */
-  const renderStep5 = () => {
+  const renderStep6 = () => {
     const formatTime = (seconds: number) => {
       const m = Math.floor(seconds / 60)
       const s = Math.floor(seconds % 60)
@@ -1992,7 +2030,7 @@ const GeneratePage: React.FC = () => {
   }
 
   /** 步骤 6：确认生成 */
-  const renderStep6 = () => (
+  const renderStep7 = () => (
     <div className="xx-form-section">
       <h3>✨ 确认生成</h3>
       <div className="xx-summary-card">
@@ -2137,6 +2175,8 @@ const GeneratePage: React.FC = () => {
         return renderStep5()
       case 6:
         return renderStep6()
+      case 7:
+        return renderStep7()
       default:
         return null
     }
@@ -2213,7 +2253,7 @@ const GeneratePage: React.FC = () => {
             <button className="xx-btn xx-btn-ghost" onClick={goPrev} disabled={currentStep === 1}>
               ← 上一步
             </button>
-            {currentStep < 6 ? (
+            {currentStep < 7 ? (
               <button className="xx-btn xx-btn-primary" onClick={goNext}>
                 下一步 →
               </button>

apps/web/src/pages/generate/generate.css

@@ -1684,3 +1684,68 @@
   border-radius: 4px;
   font-family: monospace;
 }
+
+/* ================================================================
+   生成预览步骤
+   ================================================================ */
+
+.xx-preview-tip {
+  display: flex;
+  align-items: center;
+  padding: 12px 16px;
+  background: rgba(82, 196, 26, 0.08);
+  border: 1px solid rgba(82, 196, 26, 0.2);
+  border-radius: var(--radius-md);
+  margin-bottom: 20px;
+  font-size: 13px;
+  color: var(--text-primary);
+}
+
+.xx-preview-plan-card {
+  background: var(--bg-tertiary);
+  border-radius: var(--radius-lg);
+  padding: 20px;
+  border: 1px solid var(--border-color);
+}
+
+.xx-preview-plan-title {
+  font-size: 15px;
+  font-weight: 600;
+  color: var(--text-primary);
+  margin-bottom: 16px;
+  padding-bottom: 12px;
+  border-bottom: 1px solid var(--border-color);
+}
+
+.xx-preview-plan-info {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  margin-bottom: 16px;
+}
+
+.xx-preview-plan-row {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.xx-preview-plan-label {
+  font-size: 13px;
+  color: var(--text-secondary);
+}
+
+.xx-preview-plan-value {
+  font-size: 13px;
+  font-weight: 500;
+  color: var(--text-primary);
+}
+
+.xx-preview-plan-hint {
+  font-size: 12px;
+  color: var(--text-tertiary);
+  padding: 10px 12px;
+  background: var(--bg-primary);
+  border-radius: var(--radius-sm);
+  line-height: 1.5;
+}