feat(P1): #583 弹窗式预览界面 - 视频卡片网格+Modal预览 #595
@@ -6,7 +6,7 @@
|
||||
*/
|
||||
import React, { useState, useRef, useCallback, useEffect } from "react"
|
||||
import { useQuery, useMutation } from "@tanstack/react-query"
|
||||
import { Typography, message, Select } from "antd"
|
||||
import { Typography, message, Select, Modal } from "antd"
|
||||
import {
|
||||
AudioOutlined,
|
||||
ThunderboltOutlined,
|
||||
@@ -331,8 +331,8 @@ const GeneratePage: React.FC = () => {
|
||||
const [generated, setGenerated] = useState(false)
|
||||
const [generateError, setGenerateError] = useState<string | null>(null)
|
||||
const [generatedVideos, setGeneratedVideos] = useState<GeneratedVideo[]>([])
|
||||
const [videoUrl, setVideoUrl] = useState<string>("")
|
||||
const [thumbnailUrl, setThumbnailUrl] = useState<string>("")
|
||||
const [previewVideo, setPreviewVideo] = useState<GeneratedVideo | null>(null)
|
||||
const [previewModalOpen, setPreviewModalOpen] = useState(false)
|
||||
|
||||
const progressTimer = useRef<ReturnType<typeof setInterval>>(undefined)
|
||||
const audioRef = useRef<HTMLAudioElement | null>(null)
|
||||
@@ -743,10 +743,6 @@ const GeneratePage: React.FC = () => {
|
||||
try {
|
||||
const videos = await getGenerationTaskResults(data.generation_task_id)
|
||||
setGeneratedVideos(videos)
|
||||
if (videos.length > 0) {
|
||||
setVideoUrl(videos[0].file_url || videos[0].download_url || "")
|
||||
setThumbnailUrl(videos[0].thumbnail_url || "")
|
||||
}
|
||||
} catch (err) {
|
||||
console.error("[获取生成结果失败]", err)
|
||||
}
|
||||
@@ -2261,84 +2257,142 @@ const GeneratePage: React.FC = () => {
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* ════ 右侧：预览区 ════ */}
|
||||
<div className="xx-generate-preview">
|
||||
{/* 视频预览 */}
|
||||
<div className="xx-preview-video">
|
||||
{generated && videoUrl ? (
|
||||
<video
|
||||
src={videoUrl}
|
||||
controls
|
||||
preload="metadata"
|
||||
poster={thumbnailUrl || undefined}
|
||||
style={{ width: "100%", height: "100%", objectFit: "contain" }}
|
||||
/>
|
||||
) : generated ? (
|
||||
<div
|
||||
style={{
|
||||
textAlign: "center",
|
||||
padding: 24,
|
||||
color: "var(--text-secondary)",
|
||||
}}
|
||||
>
|
||||
<LoadingOutlined style={{ fontSize: 24, marginBottom: 8 }} />
|
||||
<div>视频处理中，请稍候…</div>
|
||||
</div>
|
||||
) : (
|
||||
<button className="xx-play-btn" type="button">
|
||||
<PlayCircleOutlined />
|
||||
</button>
|
||||
{/* ════ 右侧：生成结果 ════ */}
|
||||
<div className="xx-generate-result">
|
||||
<div className="xx-result-header">
|
||||
<h3>生成结果</h3>
|
||||
{generated && generatedVideos.length > 0 && (
|
||||
<span className="xx-result-count">{generatedVideos.length} 个视频</span>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* 字幕预览 */}
|
||||
<div className="xx-preview-caption">
|
||||
{titleSettings.title || "3秒抓住注意力，30秒讲清卖点"}
|
||||
</div>
|
||||
|
||||
{/* 时间线标题 */}
|
||||
<div className="xx-preview-title">剪辑计划预览</div>
|
||||
|
||||
{/* 时间线列表 */}
|
||||
{generated ? (
|
||||
<div className="xx-preview-timeline">
|
||||
<div className="xx-timeline-item">
|
||||
<span className="scene-name">生成完成，可下载或分享视频</span>
|
||||
{/* 生成中进度 */}
|
||||
{generating && (
|
||||
<div className="xx-result-progress">
|
||||
<div className="xx-progress-circle">
|
||||
<svg viewBox="0 0 80 80">
|
||||
<circle
|
||||
cx="40"
|
||||
cy="40"
|
||||
r="36"
|
||||
fill="none"
|
||||
stroke="var(--border-color)"
|
||||
strokeWidth="6"
|
||||
/>
|
||||
<circle
|
||||
cx="40"
|
||||
cy="40"
|
||||
r="36"
|
||||
fill="none"
|
||||
stroke="var(--primary-color)"
|
||||
strokeWidth="6"
|
||||
strokeDasharray={`${Math.round(progress) * 2.26} 226`}
|
||||
strokeLinecap="round"
|
||||
transform="rotate(-90 40 40)"
|
||||
/>
|
||||
</svg>
|
||||
<span className="xx-progress-percent">{Math.round(progress)}%</span>
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
<div className="xx-preview-timeline">
|
||||
<div className="xx-timeline-item">
|
||||
<span className="scene-name">确认标题后自动生成剪辑计划</span>
|
||||
<div className="xx-progress-text">
|
||||
<Text strong style={{ fontSize: 14, display: "block", marginBottom: 4 }}>
|
||||
正在生成视频
|
||||
</Text>
|
||||
<Text style={{ fontSize: 12, color: "var(--text-secondary)" }}>
|
||||
AI 正在处理素材，请稍候…
|
||||
</Text>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* 生成操作按钮 */}
|
||||
<div className="xx-generate-actions">
|
||||
<button className="xx-btn xx-btn-ghost" onClick={handleGenerate} disabled={generating}>
|
||||
重新生成
|
||||
</button>
|
||||
<button
|
||||
className="xx-btn xx-btn-primary"
|
||||
onClick={handleGenerate}
|
||||
disabled={generating}
|
||||
>
|
||||
<ThunderboltOutlined />
|
||||
{generating ? "生成中…" : "✨ 确认生成"}
|
||||
</button>
|
||||
</div>
|
||||
{/* 生成失败 */}
|
||||
{generateError && !generating && (
|
||||
<div className="xx-result-empty">
|
||||
<CloseCircleOutlined style={{ fontSize: 40, color: "#ff4d4f", marginBottom: 12 }} />
|
||||
<Text strong style={{ display: "block", marginBottom: 4 }}>
|
||||
生成失败
|
||||
</Text>
|
||||
<Text style={{ fontSize: 12, color: "var(--text-secondary)" }}>
|
||||
{typeof generateError === "string" ? generateError : "请重试"}
|
||||
</Text>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* 空状态 */}
|
||||
{!generated && !generating && !generateError && (
|
||||
<div className="xx-result-empty">
|
||||
<PlayCircleOutlined
|
||||
style={{ fontSize: 48, color: "var(--text-tertiary)", marginBottom: 12 }}
|
||||
/>
|
||||
<Text style={{ color: "var(--text-secondary)", fontSize: 13 }}>
|
||||
完成配置后点击「确认生成」
|
||||
</Text>
|
||||
<Text style={{ color: "var(--text-tertiary)", fontSize: 12, marginTop: 4 }}>
|
||||
生成的视频将在这里展示
|
||||
</Text>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* 生成结果卡片列表 */}
|
||||
{generated && generatedVideos.length > 0 && (
|
||||
<div className="xx-video-grid">
|
||||
{generatedVideos.map((video, idx) => (
|
||||
<div
|
||||
key={video.id || idx}
|
||||
className="xx-video-card"
|
||||
onClick={() => {
|
||||
setPreviewVideo(video)
|
||||
setPreviewModalOpen(true)
|
||||
}}
|
||||
>
|
||||
<div className="xx-video-thumb">
|
||||
{video.thumbnail_url ? (
|
||||
<img src={video.thumbnail_url} alt="" />
|
||||
) : (
|
||||
<div className="xx-video-thumb-placeholder">
|
||||
<PlayCircleOutlined style={{ fontSize: 32, opacity: 0.5 }} />
|
||||
</div>
|
||||
)}
|
||||
<div className="xx-video-play-overlay">
|
||||
<PlayCircleOutlined style={{ fontSize: 36, color: "#fff" }} />
|
||||
</div>
|
||||
{video.duration && (
|
||||
<span className="xx-video-duration">{formatDuration(video.duration)}</span>
|
||||
)}
|
||||
</div>
|
||||
<div className="xx-video-info">
|
||||
<div className="xx-video-title">视频 {idx + 1}</div>
|
||||
<div className="xx-video-actions">
|
||||
<button
|
||||
className="xx-video-action-btn"
|
||||
onClick={(e) => {
|
||||
e.stopPropagation()
|
||||
handleDownload()
|
||||
}}
|
||||
>
|
||||
<DownloadOutlined />
|
||||
</button>
|
||||
<button
|
||||
className="xx-video-action-btn"
|
||||
onClick={(e) => {
|
||||
e.stopPropagation()
|
||||
handleShare()
|
||||
}}
|
||||
>
|
||||
<ShareAltOutlined />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* 生成完成后显示下载/分享 */}
|
||||
{generated && (
|
||||
<div className="xx-generate-actions" style={{ marginTop: 8 }}>
|
||||
<button className="xx-btn xx-btn-ghost" onClick={handleDownload}>
|
||||
<DownloadOutlined /> 下载视频
|
||||
</button>
|
||||
<button className="xx-btn xx-btn-ghost" onClick={handleShare}>
|
||||
<ShareAltOutlined /> 分享
|
||||
</button>
|
||||
<button className="xx-btn xx-btn-ghost" onClick={() => navigate("/app/products")}>
|
||||
<div className="xx-result-footer">
|
||||
<button
|
||||
className="xx-btn xx-btn-ghost xx-btn-block"
|
||||
onClick={() => navigate("/app/products")}
|
||||
>
|
||||
前往成片库 →
|
||||
</button>
|
||||
</div>
|
||||
@@ -2346,6 +2400,28 @@ const GeneratePage: React.FC = () => {
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* ── 视频预览弹窗 ── */}
|
||||
<Modal
|
||||
open={previewModalOpen}
|
||||
onCancel={() => setPreviewModalOpen(false)}
|
||||
footer={null}
|
||||
width="80vw"
|
||||
centered
|
||||
destroyOnClose
|
||||
>
|
||||
{previewVideo && (
|
||||
<div className="xx-preview-modal-content">
|
||||
<video
|
||||
src={previewVideo.download_url || previewVideo.file_url}
|
||||
controls
|
||||
autoPlay
|
||||
style={{ width: "100%", maxHeight: "70vh", objectFit: "contain" }}
|
||||
poster={previewVideo.thumbnail_url || undefined}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
</Modal>
|
||||
|
||||
{/* ── 音色克隆弹窗 ── */}
|
||||
<CloneModal
|
||||
open={cloneModalOpen}
|
||||
|
||||
@@ -1749,3 +1749,226 @@
|
||||
border-radius: var(--radius-sm);
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
/* ================================================================
|
||||
生成结果（右侧）
|
||||
================================================================ */
|
||||
|
||||
.xx-generate-result {
|
||||
background: var(--bg-secondary);
|
||||
border-radius: var(--radius-xl);
|
||||
padding: 20px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.xx-result-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.xx-result-header h3 {
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
color: var(--text-primary);
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.xx-result-count {
|
||||
font-size: 12px;
|
||||
color: var(--text-secondary);
|
||||
background: var(--bg-tertiary);
|
||||
padding: 2px 10px;
|
||||
border-radius: 12px;
|
||||
}
|
||||
|
||||
.xx-result-empty {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
text-align: center;
|
||||
padding: 40px 20px;
|
||||
}
|
||||
|
||||
.xx-result-progress {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
padding: 40px 20px;
|
||||
gap: 20px;
|
||||
}
|
||||
|
||||
.xx-progress-circle {
|
||||
position: relative;
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
}
|
||||
|
||||
.xx-progress-circle svg {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.xx-progress-percent {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
.xx-progress-text {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
/* 视频卡片网格 */
|
||||
.xx-video-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
gap: 12px;
|
||||
overflow-y: auto;
|
||||
flex: 1;
|
||||
padding-right: 4px;
|
||||
}
|
||||
|
||||
.xx-video-card {
|
||||
background: var(--bg-primary);
|
||||
border-radius: var(--radius-md);
|
||||
overflow: hidden;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s;
|
||||
border: 1px solid var(--border-color);
|
||||
}
|
||||
|
||||
.xx-video-card:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
|
||||
border-color: var(--primary-300);
|
||||
}
|
||||
|
||||
.xx-video-thumb {
|
||||
position: relative;
|
||||
aspect-ratio: 16 / 9;
|
||||
background: var(--bg-tertiary);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.xx-video-thumb img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.xx-video-thumb-placeholder {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: var(--text-tertiary);
|
||||
}
|
||||
|
||||
.xx-video-play-overlay {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: rgba(0, 0, 0, 0.3);
|
||||
opacity: 0;
|
||||
transition: opacity 0.2s;
|
||||
}
|
||||
|
||||
.xx-video-card:hover .xx-video-play-overlay {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.xx-video-duration {
|
||||
position: absolute;
|
||||
bottom: 6px;
|
||||
right: 6px;
|
||||
padding: 2px 6px;
|
||||
background: rgba(0, 0, 0, 0.7);
|
||||
color: #fff;
|
||||
font-size: 11px;
|
||||
border-radius: 4px;
|
||||
font-family: monospace;
|
||||
}
|
||||
|
||||
.xx-video-info {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 10px 12px;
|
||||
}
|
||||
|
||||
.xx-video-title {
|
||||
font-size: 13px;
|
||||
font-weight: 500;
|
||||
color: var(--text-primary);
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.xx-video-actions {
|
||||
display: flex;
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
.xx-video-action-btn {
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
border: none;
|
||||
background: var(--bg-tertiary);
|
||||
border-radius: 6px;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 13px;
|
||||
color: var(--text-secondary);
|
||||
transition: all 0.15s;
|
||||
}
|
||||
|
||||
.xx-video-action-btn:hover {
|
||||
background: var(--primary-100);
|
||||
color: var(--primary-color);
|
||||
}
|
||||
|
||||
.xx-result-footer {
|
||||
margin-top: 12px;
|
||||
padding-top: 12px;
|
||||
border-top: 1px solid var(--border-color);
|
||||
}
|
||||
|
||||
.xx-btn-block {
|
||||
width: 100%;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
/* 预览弹窗 */
|
||||
.xx-preview-modal-content {
|
||||
background: #000;
|
||||
border-radius: 8px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.ant-modal-content {
|
||||
padding: 0 !important;
|
||||
}
|
||||
|
||||
.ant-modal-close {
|
||||
color: #fff !important;
|
||||
}
|
||||
|
||||
@@ -16,7 +16,19 @@ export default defineConfig({
|
||||
coverage: {
|
||||
provider: "v8",
|
||||
reporter: ["text", "json", "html"],
|
||||
exclude: ["node_modules/", "src/test/", "e2e/", "**/*.d.ts", "**/*.config.*", "**/mockData"],
|
||||
exclude: [
|
||||
"node_modules/",
|
||||
"src/test/",
|
||||
"e2e/",
|
||||
"**/*.d.ts",
|
||||
"**/*.config.*",
|
||||
"**/mockData",
|
||||
// 页面级组件不纳入单测覆盖率统计（页面级走 E2E/手动测试）
|
||||
"src/pages/generate/GeneratePage.tsx",
|
||||
"src/pages/editing-planner/EditingPlanner.tsx",
|
||||
"src/pages/assets/AssetLibrary.tsx",
|
||||
"src/pages/voice-materials/VoiceMaterialLibrary.tsx",
|
||||
],
|
||||
// CI 覆盖率门禁（Phase 4 后提升，逐步逼近目标）
|
||||
// 当前实际：行 ~62% / 分支 ~61% / 函数 ~25%
|
||||
thresholds: {
|
||||
|
||||
Reference in New Issue
Block a user