xueteng/video-flow-b
1
0
Fork 0
forked from 77media/video-flow
Code Pull Requests Activity

加载中设计

Browse Source
This commit is contained in:
北枳 2025-10-09 14:32:49 +08:00
parent 50e36c5ec3
commit 0e09519633
1 changed files with 33 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

45
components/pages/work-flow/media-viewer.tsx
View File

@ -398,6 +398,37 @@ export const MediaViewer = React.memo(function MediaViewer({
};
}, []);
// 加载中
const renderLoading = () => {
return (
<div data-alt="generating-overlay" className="absolute inset-0 bg-black/40 flex items-center justify-center">
<div data-alt="generating-content" className="relative flex flex-col items-center gap-4">
{/* 渐变进度环 */}
<div className="relative w-24 h-24">
{/* 外层旋转渐变边框 */}
<div
className="absolute inset-0 rounded-full opacity-80 animate-spin"
style={{
background: 'conic-gradient(from 0deg, transparent 0%, #3b82f6 25%, #60a5fa 50%, #93c5fd 75%, transparent 100%)',
animation: 'spin 2s linear infinite'
}}
/>
{/* 内层遮罩（形成边框效果） */}
<div className="absolute inset-[2px] rounded-full bg-black/60 backdrop-blur-sm" />
</div>
{/* 文案 */}
<div className="text-white text-center">
<div className="text-sm font-medium" role="status" aria-live="polite" aria-busy="true">
Generating...
</div>
<div className="text-xs text-white/60 mt-1">Processing your request</div>
</div>
</div>
</div>
)
}
// 渲染底部通栏控制条（与图2一致）
const renderBottomControls = (
isFinal: boolean,
@ -524,12 +555,7 @@ export const MediaViewer = React.memo(function MediaViewer({
<div className="absolute inset-0 overflow-hidden z-20">
{/* 生成中 */}
{taskObject.videos.data[currentSketchIndex].video_status === 0 && (
<div className="absolute inset-0 bg-black/10 flex items-center justify-center">
<div className="text-blue-500 text-2xl font-bold flex items-center gap-2">
<Loader2 className="w-10 h-10 animate-spin" />
<span>Generating...</span>
</div>
</div>
renderLoading()
)}
{/* 生成失败 */}
{taskObject.videos.data[currentSketchIndex].video_status === 2 && (
@ -696,12 +722,7 @@ export const MediaViewer = React.memo(function MediaViewer({
>
{/* 状态 */}
{currentSketch.status === 0 && (
<div className="absolute inset-0 bg-black/10 flex items-center justify-center">
<div className="text-blue-500 text-2xl font-bold flex items-center gap-2">
<Loader2 className="w-10 h-10 animate-spin" />
<span>Generating...</span>
</div>
</div>
renderLoading()
)}
{currentSketch.status === 2 && (
<div className="absolute inset-0 bg-[#fcb0ba1a] flex items-center justify-center">