xiaoxia/xiaoxia-saas
1
0
Fork 0
Code Issues 14 Pull Requests Actions Packages Projects Releases 7 Wiki Activity

fix: Step5 播放器上移+去完成提示；Step6 封面页去视频全宽居中 #1781

Merged
auto-approve-bot merged 1 commits from fix/step5-video-above-actions into develop 2026-09-08 00:31:27 +08:00
Conversation 1 Commits 1 Files Changed 3
+24 -107
3 changed files with 24 additions and 107 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/web/src/pages/generate/GeneratePage.tsx
+16 -67
View File
@@ -416,15 +416,11 @@ const GeneratePage: React.FC = () => {
/* ── 最终成片（单视频右侧播放） ── */
const finalVideo = generatedVideos[0]
/* ── 布局 class：步骤4标题页=预览+标题侧栏；步骤5/6批量=整行宽；步骤1~3=整行宽 ── */
/* ── 布局 class：步骤4标题页=预览+标题侧栏两栏；其余步骤（含步骤5确认生成、步骤6封面）=整行宽 ── */
const layoutClassName = useMemo(() => {
if (currentStep < 4) return "xx-generate-layout full-width"
if (currentStep === 4) return "xx-generate-layout step4-layout"
// 步骤5：全宽+内容居中（单视频视频播放器居中，批量网格居中）
if (currentStep === 5) return "xx-generate-layout full-width"
// 步骤6：封面选择保持两栏布局
return isBatch ? "xx-generate-layout full-width" : "xx-generate-layout"
}, [currentStep, isBatch])
return "xx-generate-layout full-width"
}, [currentStep])
/* ================================================================
渲染
@@ -545,18 +541,7 @@ const GeneratePage: React.FC = () => {
selectedVariantIds={selectedVariantIds}
/>
<GenerateStepActions
currentStep={currentStep}
onPrev={goPrev}
onNext={goNext}
onConfirmGenerate={handleConfirmGenerate}
generating={generating}
generated={generated}
generateError={generateError}
selectedCount={isBatch ? selectedVariantIds.length : 1}
/>
{/* ════ 步骤5（单视频）：成片播放器内联居中（#1761） ════ */}
{/* ════ 步骤5（单视频）：成片播放器置于按钮上方、居中展示 ════ */}
{currentStep === 5 && !isBatch && generated && finalVideo && (
<div
style={{
@@ -580,6 +565,7 @@ const GeneratePage: React.FC = () => {
<video
src={finalVideo.download_url || finalVideo.file_url}
controls
autoPlay
style={{
width: "auto",
maxWidth: "100%",
@@ -607,55 +593,18 @@ const GeneratePage: React.FC = () => {
</div>
</div>
)}
</div>
{/* ════ 步骤6（单视频）：右侧成片播放器 ════ */}
{currentStep >= 6 && !isBatch && generated && finalVideo && (
<div className="xx-generate-right-col">
<div
className="xx-inline-video-player"
style={{
display: "flex",
justifyContent: "center",
alignItems: "center",
background: "#000",
borderRadius: 12,
padding: 8,
}}
>
<video
src={finalVideo.download_url || finalVideo.file_url}
controls
autoPlay={currentStep === 5}
// 竖屏自适应（#1750）：成片固定 1080×1920（9:16），元数据到达前按 9:16 占位，
// 到达后浏览器按真实宽高比 contain；黑底居中杜绝左右大黑边
style={{
width: "auto",
maxWidth: "100%",
maxHeight: "70vh",
aspectRatio: "9 / 16",
objectFit: "contain",
borderRadius: 8,
}}
poster={finalVideo.thumbnail_url || undefined}
/>
<div style={{ display: "flex", gap: 8, marginTop: 12, justifyContent: "center" }}>
<button className="xx-btn xx-btn-ghost xx-btn-sm" onClick={handleDownload}>
⬇️ 下载
</button>
<button className="xx-btn xx-btn-ghost xx-btn-sm" onClick={handleShare}>
🔗 分享
</button>
<button
className="xx-btn xx-btn-ghost xx-btn-sm"
onClick={() => navigate("/app/products")}
>
📁 前往成片库
</button>
</div>
</div>
</div>
)}
<GenerateStepActions
currentStep={currentStep}
onPrev={goPrev}
onNext={goNext}
onConfirmGenerate={handleConfirmGenerate}
generating={generating}
generated={generated}
generateError={generateError}
selectedCount={isBatch ? selectedVariantIds.length : 1}
/>
</div>
</div>
{/* 数量选择弹窗 */}
apps/web/src/pages/generate/components/GenerateStepContent.tsx
+3 -11
View File
@@ -189,7 +189,7 @@ export const GenerateStepContent: React.FC<GenerateStepContentProps> = (props) =
/>
)
case 5:
/* 确认生成页：批量=逐任务进度网格；单视频=进度状态卡（成片播放器在左侧大区域） */
/* 确认生成页：批量=逐任务进度网格；单视频=仅渲染进度/失败状态（完成后只显示成片播放器，播放器在按钮上方） */
if (previewCount > 1) {
return (
<BatchGenerationGrid
@@ -199,10 +199,10 @@ export const GenerateStepContent: React.FC<GenerateStepContentProps> = (props) =
/>
)
}
/* 单视频：渲染进度 / 失败重试 / 完成提示（成片播放器在右侧栏） */
/* 单视频：生成中显示进度卡、失败显示重试卡；生成完成后不再渲染提示卡，页面只保留成片播放器+操作按钮 */
if (generated && !generating && !generateError) return null
return (
<div className="xx-form-section">
<h3>🎬 确认生成</h3>
{generating && (
<div className="xx-gen-progress-card">
<div className="xx-gen-progress-header">
@@ -234,14 +234,6 @@ export const GenerateStepContent: React.FC<GenerateStepContentProps> = (props) =
</button>
</div>
)}
{generated && !generating && (
<div className="xx-gen-success-card">
<div className="xx-gen-success-info">
<div className="xx-gen-success-title">✅ 视频生成完成！</div>
<div className="xx-gen-success-sub">右侧可预览成片，点击「下一步」选择封面</div>
</div>
</div>
)}
</div>
)
case 6:
apps/web/src/pages/generate/generate.css
+5 -29
View File
@@ -117,10 +117,6 @@
grid-template-columns: 1fr;
}
.xx-generate-layout.full-width .xx-generate-right-col {
display: none;
}
/* ============================================================
左侧表单区 generate-form
============================================================ */
@@ -2323,28 +2319,6 @@
生成结果（右侧）
================================================================ */
.xx-generate-right-col {
display: flex;
flex-direction: column;
align-items: center;
gap: 16px;
}
/* ── 内联视频播放器（右侧） ── */
.xx-inline-video-player {
width: 100%;
max-width: 320px;
background: var(--bg-surface, #fff);
border: 1px solid var(--border-primary, #e2e8f0);
border-radius: 16px;
padding: 16px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}
.xx-inline-video-player video {
background: #000;
}
.xx-preview-header {
display: flex;
align-items: center;
@@ -2710,11 +2684,12 @@
/* ── 封面设置区域改造样式 ── */
/* 封面操作按钮区 */
/* 封面操作按钮区（单视频全宽页居中） */
.xx-cover-actions {
display: flex;
gap: 12px;
margin-bottom: 12px;
justify-content: center;
}
/* 已选模板文字 */
@@ -3202,10 +3177,11 @@
margin: 0;
}
/* ── 批量封面网格 ── */
/* ── 批量封面网格（单卡/少卡时居中排列，卡片限宽不拉伸） ── */
.xx-cover-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
grid-template-columns: repeat(auto-fill, minmax(180px, 220px));
justify-content: center;
gap: 16px;
}