Compare commits
1 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
 xiaoxia
|
ee7c99c92d |
@@ -71,6 +71,20 @@ const GeneratePage: React.FC = () => {
|
||||
setPreviewModalOpen,
|
||||
} = formState
|
||||
|
||||
/* ── 查询视频素材，用于 Step4 标题预览背景 ── */
|
||||
const { data: videoAssets = [] } = useQuery({
|
||||
queryKey: ["generate-video-assets"],
|
||||
queryFn: () => getAssetsByKind("video", { limit: 50 }),
|
||||
})
|
||||
|
||||
// 获取第一个选中素材的 URL
|
||||
const sourceVideoUrl = useMemo(() => {
|
||||
const firstId = selectedMaterials[0]
|
||||
if (!firstId) return undefined
|
||||
const asset = videoAssets.find((a) => a.id === firstId)
|
||||
return asset?.file_url
|
||||
}, [selectedMaterials, videoAssets])
|
||||
|
||||
/* ── 克隆声音 ── */
|
||||
const { clones: clonedVoices, addClone, hasProcessing } = useCloneProgress()
|
||||
|
||||
@@ -237,8 +251,8 @@ const GeneratePage: React.FC = () => {
|
||||
|
||||
{/* ════ 右侧：预览 + 生成结果 ════ */}
|
||||
<div className="xx-generate-right-col">
|
||||
{/* 预览视频面板（Step5+ 常驻，展示选中的预览） */}
|
||||
{currentStep >= 5 && (
|
||||
{/* 预览视频面板（Step4+ 常驻，Step4 显示标题预览，Step5+ 显示预览视频） */}
|
||||
{currentStep >= 4 && (
|
||||
<PreviewVideoPanel
|
||||
previewStatus={step5Preview.previewStatus}
|
||||
previewResult={step5Preview.previewResult}
|
||||
@@ -247,7 +261,9 @@ const GeneratePage: React.FC = () => {
|
||||
videoRatio={videoRatio}
|
||||
onRegenerate={step5Preview.regeneratePreview}
|
||||
titleText={titleSettings.title}
|
||||
titleSettings={currentStep >= 4 ? titleSettings : undefined}
|
||||
titleSettings={titleSettings}
|
||||
showTitlePreview={currentStep === 4}
|
||||
sourceVideoUrl={sourceVideoUrl}
|
||||
/>
|
||||
)}
|
||||
|
||||
|
||||
@@ -24,10 +24,14 @@ interface PreviewVideoPanelProps {
|
||||
progress: number
|
||||
videoRatio: string
|
||||
onRegenerate: () => void
|
||||
/** 标题文字（Step5 起传入） */
|
||||
/** 标题文字 */
|
||||
titleText?: string
|
||||
/** 标题样式设置（Step5 起传入） */
|
||||
/** 标题样式设置 */
|
||||
titleSettings?: TitleSettings
|
||||
/** Step4 标题预览模式 */
|
||||
showTitlePreview?: boolean
|
||||
/** 素材视频 URL（用于 Step4 标题预览背景） */
|
||||
sourceVideoUrl?: string
|
||||
}
|
||||
|
||||
/* ── 组件 ── */
|
||||
@@ -41,6 +45,8 @@ export const PreviewVideoPanel: React.FC<PreviewVideoPanelProps> = ({
|
||||
onRegenerate,
|
||||
titleText,
|
||||
titleSettings,
|
||||
showTitlePreview,
|
||||
sourceVideoUrl,
|
||||
}) => {
|
||||
const hasPreview = previewStatus === "ready" && previewResult
|
||||
const isLoading = previewStatus === "pending" || previewStatus === "generating"
|
||||
@@ -170,101 +176,132 @@ export const PreviewVideoPanel: React.FC<PreviewVideoPanelProps> = ({
|
||||
return (
|
||||
<div className="xx-generate-preview">
|
||||
<div className="xx-preview-header">
|
||||
<h3>预览视频</h3>
|
||||
{hasPreview && <span className="xx-preview-badge">480p 预览版</span>}
|
||||
<h3>{showTitlePreview ? "标题预览" : "预览视频"}</h3>
|
||||
{hasPreview && !showTitlePreview && <span className="xx-preview-badge">480p 预览版</span>}
|
||||
</div>
|
||||
|
||||
{/* 空状态：还没生成预览 */}
|
||||
{previewStatus === "idle" && (
|
||||
{/* Step4 标题预览模式 */}
|
||||
{showTitlePreview && titleSettings && titleText && (
|
||||
<div style={{ padding: "0 16px 16px" }}>
|
||||
<TitlePreviewCanvas
|
||||
titleText={titleText}
|
||||
titleSettings={titleSettings}
|
||||
videoRatio="9:16"
|
||||
sourceVideoUrl={sourceVideoUrl}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Step4 但无标题时的空状态 */}
|
||||
{showTitlePreview && (!titleText || !titleSettings) && (
|
||||
<div className="xx-preview-empty">
|
||||
<PlayCircleOutlined
|
||||
style={{ fontSize: 48, color: "var(--text-tertiary)", marginBottom: 12 }}
|
||||
/>
|
||||
<p className="xx-preview-empty-title">暂无预览</p>
|
||||
<p className="xx-preview-empty-desc">在第 3 步生成预览后在此查看</p>
|
||||
<p className="xx-preview-empty-title">请输入标题</p>
|
||||
<p className="xx-preview-empty-desc">在左侧设置标题后，这里会实时预览效果</p>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* 生成中 */}
|
||||
{isLoading && (
|
||||
<div className="xx-preview-loading-panel">
|
||||
<div className="xx-preview-video" style={videoAspectStyle}>
|
||||
<div className="xx-preview-loading-center">
|
||||
<LoadingOutlined style={{ fontSize: 36, color: "#fff" }} spin />
|
||||
<p style={{ marginTop: 12, color: "rgba(255,255,255,0.8)", fontSize: 14 }}>
|
||||
{previewStatus === "pending" ? "排队中..." : `生成中 ${progress}%`}
|
||||
</p>
|
||||
{/* 非 Step4 模式才显示以下内容 */}
|
||||
{!showTitlePreview && (
|
||||
<>
|
||||
{/* 空状态：还没生成预览 */}
|
||||
{previewStatus === "idle" && (
|
||||
<div className="xx-preview-empty">
|
||||
<PlayCircleOutlined
|
||||
style={{ fontSize: 48, color: "var(--text-tertiary)", marginBottom: 12 }}
|
||||
/>
|
||||
<p className="xx-preview-empty-title">暂无预览</p>
|
||||
<p className="xx-preview-empty-desc">在第 3 步生成预览后在此查看</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="xx-preview-progress-bar-wrap">
|
||||
<div className="xx-preview-progress-fill" style={{ width: `${progress}%` }} />
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* 生成失败 */}
|
||||
{isError && (
|
||||
<div className="xx-preview-error-panel">
|
||||
<div className="xx-preview-video xx-preview-video--error" style={videoAspectStyle}>
|
||||
<p style={{ color: "rgba(255,255,255,0.8)", fontSize: 14 }}>预览生成失败</p>
|
||||
</div>
|
||||
<p className="xx-preview-error-msg">
|
||||
{typeof previewError === "string" && previewError ? previewError : "请重试"}
|
||||
</p>
|
||||
<button className="xx-btn xx-btn-ghost xx-btn-block" onClick={onRegenerate}>
|
||||
重新生成
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* 预览成功 + Canvas 标题叠加 */}
|
||||
{hasPreview && (
|
||||
<div ref={containerRef} style={{ position: "relative" }}>
|
||||
<div className="xx-preview-video" style={videoAspectStyle}>
|
||||
<video
|
||||
ref={videoRef}
|
||||
src={previewResult.videoUrl}
|
||||
controls
|
||||
preload="metadata"
|
||||
onLoadedMetadata={handleVideoLoaded}
|
||||
/>
|
||||
</div>
|
||||
{showTitlePreview && (
|
||||
<canvas
|
||||
ref={canvasRef}
|
||||
style={{
|
||||
position: "absolute",
|
||||
top: 0,
|
||||
left: 0,
|
||||
width: "100%",
|
||||
height: "100%",
|
||||
zIndex: 1,
|
||||
pointerEvents: "none",
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* 预览信息 */}
|
||||
{hasPreview && previewResult && (
|
||||
<div className="xx-preview-info">
|
||||
<div className="xx-preview-info-row">
|
||||
<span>时长</span>
|
||||
<span>
|
||||
{(typeof previewResult.duration === "number" ? previewResult.duration : 0).toFixed(1)}{" "}
|
||||
秒
|
||||
</span>
|
||||
</div>
|
||||
<div className="xx-preview-info-row">
|
||||
<span>片段数</span>
|
||||
<span>{previewResult.clipCount} 段</span>
|
||||
</div>
|
||||
<div className="xx-preview-info-row">
|
||||
<span>比例</span>
|
||||
<span>{videoRatio}</span>
|
||||
</div>
|
||||
</div>
|
||||
{/* 生成中 */}
|
||||
{isLoading && (
|
||||
<div className="xx-preview-loading-panel">
|
||||
<div className="xx-preview-video" style={videoAspectStyle}>
|
||||
<div className="xx-preview-loading-center">
|
||||
<LoadingOutlined style={{ fontSize: 36, color: "#fff" }} spin />
|
||||
<p style={{ marginTop: 12, color: "rgba(255,255,255,0.8)", fontSize: 14 }}>
|
||||
{previewStatus === "pending" ? "排队中..." : `生成中 ${progress}%`}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="xx-preview-progress-bar-wrap">
|
||||
<div className="xx-preview-progress-fill" style={{ width: `${progress}%` }} />
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* 生成失败 */}
|
||||
{isError && (
|
||||
<div className="xx-preview-error-panel">
|
||||
<div className="xx-preview-video xx-preview-video--error" style={videoAspectStyle}>
|
||||
<p style={{ color: "rgba(255,255,255,0.8)", fontSize: 14 }}>预览生成失败</p>
|
||||
</div>
|
||||
<p className="xx-preview-error-msg">
|
||||
{typeof previewError === "string" && previewError ? previewError : "请重试"}
|
||||
</p>
|
||||
<button className="xx-btn xx-btn-ghost xx-btn-block" onClick={onRegenerate}>
|
||||
重新生成
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* 预览成功 + Canvas 标题叠加 */}
|
||||
{hasPreview && (
|
||||
<div ref={containerRef} style={{ position: "relative" }}>
|
||||
<div className="xx-preview-video" style={videoAspectStyle}>
|
||||
<video
|
||||
ref={videoRef}
|
||||
src={previewResult.videoUrl}
|
||||
controls
|
||||
preload="metadata"
|
||||
onLoadedMetadata={handleVideoLoaded}
|
||||
/>
|
||||
</div>
|
||||
{showTitlePreview && (
|
||||
<canvas
|
||||
ref={canvasRef}
|
||||
style={{
|
||||
position: "absolute",
|
||||
top: 0,
|
||||
left: 0,
|
||||
width: "100%",
|
||||
height: "100%",
|
||||
zIndex: 1,
|
||||
pointerEvents: "none",
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* 预览信息 */}
|
||||
{hasPreview && previewResult && (
|
||||
<div className="xx-preview-info">
|
||||
<div className="xx-preview-info-row">
|
||||
<span>时长</span>
|
||||
<span>
|
||||
{(typeof previewResult.duration === "number"
|
||||
? previewResult.duration
|
||||
: 0
|
||||
).toFixed(1)}{" "}
|
||||
秒
|
||||
</span>
|
||||
</div>
|
||||
<div className="xx-preview-info-row">
|
||||
<span>片段数</span>
|
||||
<span>{previewResult.clipCount} 段</span>
|
||||
</div>
|
||||
<div className="xx-preview-info-row">
|
||||
<span>比例</span>
|
||||
<span>{videoRatio}</span>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
|
||||
@@ -112,11 +112,6 @@ const Step4TitleSettings: React.FC<Step4TitleSettingsProps> = (props) => {
|
||||
</>
|
||||
)}
|
||||
|
||||
{/* 标题实时预览 - 仅当有标题文字时显示 */}
|
||||
{t.titleSettings.title && (
|
||||
<TitlePreviewCanvas titleText={t.titleSettings.title} titleSettings={t.titleSettings} />
|
||||
)}
|
||||
|
||||
{/* 样式面板始终可见，两种模式下都可调整标题展示样式 */}
|
||||
<TitleStylePanel
|
||||
settings={t.titleSettings}
|
||||
|
||||
@@ -15,21 +15,24 @@ interface TitlePreviewCanvasProps {
|
||||
titleText: string
|
||||
/** 标题样式设置 */
|
||||
titleSettings: TitleSettings
|
||||
/** 视频比例，默认 "16:9" */
|
||||
/** 视频比例，默认 "9:16"（竖屏） */
|
||||
videoRatio?: string
|
||||
/** 素材视频 URL（作为背景显示） */
|
||||
sourceVideoUrl?: string
|
||||
}
|
||||
|
||||
/**
|
||||
* 解析 videoRatio 字符串为 aspect-ratio CSS 值
|
||||
*/
|
||||
function parseAspect(ratio: string): string {
|
||||
return (ratio || "16:9").replace(":", "/")
|
||||
return (ratio || "9:16").replace(":", "/")
|
||||
}
|
||||
|
||||
const TitlePreviewCanvas: React.FC<TitlePreviewCanvasProps> = ({
|
||||
titleText,
|
||||
titleSettings,
|
||||
videoRatio = "16:9",
|
||||
videoRatio = "9:16",
|
||||
sourceVideoUrl,
|
||||
}) => {
|
||||
const containerRef = useRef<HTMLDivElement>(null)
|
||||
const canvasRef = useRef<HTMLCanvasElement>(null)
|
||||
@@ -142,12 +145,31 @@ const TitlePreviewCanvas: React.FC<TitlePreviewCanvasProps> = ({
|
||||
style={{
|
||||
width: "100%",
|
||||
aspectRatio: parseAspect(videoRatio),
|
||||
background: "linear-gradient(135deg, #1a1a2e, #16213e, #0f3460)",
|
||||
background: sourceVideoUrl
|
||||
? "#000"
|
||||
: "linear-gradient(135deg, #1a1a2e, #16213e, #0f3460)",
|
||||
borderRadius: 8,
|
||||
overflow: "hidden",
|
||||
position: "relative",
|
||||
}}
|
||||
>
|
||||
{sourceVideoUrl && (
|
||||
<video
|
||||
src={sourceVideoUrl}
|
||||
muted
|
||||
loop
|
||||
autoPlay
|
||||
playsInline
|
||||
style={{
|
||||
position: "absolute",
|
||||
top: 0,
|
||||
left: 0,
|
||||
width: "100%",
|
||||
height: "100%",
|
||||
objectFit: "cover",
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
<canvas
|
||||
ref={canvasRef}
|
||||
style={{
|
||||
|
||||
Reference in New Issue
Block a user