From 7e62d886deb50876df85d53ff1b8cd5ba8d10bbc Mon Sep 17 00:00:00 2001 From: xiaoxia Date: Sun, 19 Jul 2026 15:46:33 +0800 Subject: [PATCH] =?UTF-8?q?feat(P1):=20#580=20=E6=99=BA=E8=83=BD=E5=89=AA?= =?UTF-8?q?=E8=BE=91=E6=B5=81=E7=A8=8B=E9=87=8D=E6=9E=84=20-=20=E6=96=B0?= =?UTF-8?q?=E5=A2=9E=E7=94=9F=E6=88=90=E9=A2=84=E8=A7=88=E6=AD=A5=E9=AA=A4?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 流程调整为7步：选择模板→选择素材→生成预览→选择标题→选择配音→选择封面→确认生成 - 新增「生成预览」步骤，展示剪辑计划概览（模板、素材、时长、比例） - 所有步骤编号顺延调整 --- apps/web/src/pages/generate/GeneratePage.tsx | 62 +++++++++++++++---- apps/web/src/pages/generate/generate.css | 65 ++++++++++++++++++++ 2 files changed, 116 insertions(+), 11 deletions(-) diff --git a/apps/web/src/pages/generate/GeneratePage.tsx b/apps/web/src/pages/generate/GeneratePage.tsx index 5b089e657..e7e6a862f 100755 --- a/apps/web/src/pages/generate/GeneratePage.tsx +++ b/apps/web/src/pages/generate/GeneratePage.tsx @@ -76,10 +76,11 @@ const VOICE_GENDER_ICON: Record = { 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 = () => { ) - /** 步骤 3：选择标题 + 标题样式设置 */ + /** 步骤 3：生成预览 */ const renderStep3 = () => ( +
+

🎬 生成预览

+
+ + 素材已选好，AI 将为您智能匹配剪辑方案 +
+
+
剪辑计划预览
+
+
+ 模板 + {getTemplateName()} +
+
+ 素材数量 + + {materialMode === "auto" ? "AI自动匹配" : `${selectedMaterials.length} 个素材`} + +
+
+ 预计时长 + {duration} 秒 +
+
+ 视频比例 + {videoRatio} +
+
+
+ 💡 点击「下一步」进入标题设置，AI 将根据素材内容为您推荐标题 +
+
+
+ ) + + /** 步骤 4：选择标题 + 标题样式设置 */ + const renderStep4 = () => (

📝 选择标题

@@ -1426,7 +1464,7 @@ const GeneratePage: React.FC = () => { ) /** 步骤 4：选择配音 */ - const renderStep4 = () => ( + const renderStep5 = () => (

🎙️ 选择配音

@@ -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 = () => (

✨ 确认生成

@@ -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 = () => { - {currentStep < 6 ? ( + {currentStep < 7 ? ( diff --git a/apps/web/src/pages/generate/generate.css b/apps/web/src/pages/generate/generate.css index 15534873d..88db68607 100755 --- a/apps/web/src/pages/generate/generate.css +++ b/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; +}