mz/video-gen
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

样式优化

Browse Source
This commit is contained in:
sjy
2026-07-17 18:02:39 +08:00
parent bba29d79a2
commit 519c1e58b9
10 changed files with 238 additions and 146 deletions
Download Patch File Download Diff File Expand all files Collapse all files
video-gen-app/src/components/generation/GenerationTaskResourceGrid.tsx
+69 -2
View File
@@ -65,8 +65,9 @@ const PROGRESS_RATE = 0.6;
const calculateProgressValue = (createdAt?: string): number => {
if (!createdAt) return 0;
const createdTime = new Date(createdAt).getTime();
if (isNaN(createdTime)) return 0;
const now = Date.now();
const elapsedSeconds = (now - createdTime) / 1000;
const elapsedSeconds = Math.max(0, (now - createdTime) / 1000);
if (elapsedSeconds >= MAX_DURATION_SECONDS) {
return 99;
}
@@ -189,6 +190,71 @@ const GenerationTaskResourceGrid: React.FC<Props> = ({ task, onPreview, resolveU
const [fullProgressItems, setFullProgressItems] = useState<Set<string>>(new Set());
const processedItems = useRef<Set<string>>(new Set());
useEffect(() => {
const styleId = 'gen-task-resource-grid-animations';
if (document.getElementById(styleId)) return;
const style = document.createElement('style');
style.id = styleId;
style.textContent = `
.gen-task-loading-bg {
position: relative;
overflow: hidden;
background: linear-gradient(135deg, #faf8ff 0%, #f5f3ff 100%);
}
.gen-task-loading-bg::before,
.gen-task-loading-bg::after,
.gen-task-loading-bg .gen-task-aurora-3 {
content: '';
position: absolute;
border-radius: 50%;
filter: blur(30px);
pointer-events: none;
z-index: 0;
}
.gen-task-loading-bg::before {
width: 220px;
height: 220px;
background: radial-gradient(circle, rgba(139, 92, 246, 0.45) 0%, rgba(168, 85, 247, 0.25) 50%, transparent 100%);
animation: genTaskAurora1 6s linear infinite;
}
.gen-task-loading-bg::after {
width: 240px;
height: 240px;
background: radial-gradient(circle, rgba(168, 85, 247, 0.35) 0%, rgba(192, 132, 252, 0.2) 50%, transparent 100%);
animation: genTaskAurora2 7.5s linear infinite;
}
.gen-task-loading-bg .gen-task-aurora-3 {
width: 180px;
height: 180px;
background: radial-gradient(circle, rgba(99, 102, 241, 0.3) 0%, rgba(139, 92, 246, 0.15) 50%, transparent 100%);
animation: genTaskAurora3 5s linear infinite;
}
.gen-task-loading-bg > * { position: relative; z-index: 1; }
@keyframes genTaskAurora1 {
0% { transform: translate(-100px, -80px); }
25% { transform: translate(100px, -60px); }
50% { transform: translate(120px, 80px); }
75% { transform: translate(-60px, 100px); }
100% { transform: translate(-100px, -80px); }
}
@keyframes genTaskAurora2 {
0% { transform: translate(120px, 100px); }
25% { transform: translate(-80px, 120px); }
50% { transform: translate(-100px, -60px); }
75% { transform: translate(80px, -80px); }
100% { transform: translate(120px, 100px); }
}
@keyframes genTaskAurora3 {
0% { transform: translate(60px, -40px); }
25% { transform: translate(-40px, 60px); }
50% { transform: translate(40px, 100px); }
75% { transform: translate(100px, -20px); }
100% { transform: translate(60px, -40px); }
}
`;
document.head.appendChild(style);
}, []);
const handleProgressChange = (itemId: string, progress: number) => {
if (progress >= 100) {
setFullProgressItems(prev => {
@@ -271,7 +337,8 @@ const GenerationTaskResourceGrid: React.FC<Props> = ({ task, onPreview, resolveU
{isVideo ? <PlayCircleFilled style={{ position: 'absolute', left: '50%', top: '50%', transform: 'translate(-50%, -50%)', fontSize: items.length > 2 ? 28 : 46, color: 'rgba(255,255,255,.92)', filter: 'drop-shadow(0 4px 10px rgba(0,0,0,.28))' }} /> : null}
</button>
) : (
<div style={{ width: '100%', height: '100%', minHeight: 0, display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', gap: 7, padding: 8, textAlign: 'center' }}>
<div className={pending || isFinishing ? 'gen-task-loading-bg' : ''} style={{ width: '100%', height: '100%', minHeight: 0, display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', gap: 7, padding: 8, textAlign: 'center' }}>
{pending || isFinishing ? <span className="gen-task-aurora-3" /> : null}
{pending || isFinishing ? <LoadingOutlined spin style={{ color: '#8b5cf6', fontSize: items.length > 2 ? 20 : 34 }} /> : <WarningOutlined style={{ color: displayStatus === 'deleted' ? '#98A2B3' : '#A45B5B', fontSize: items.length > 2 ? 20 : 34 }} />}
<span style={{ fontSize: items.length > 2 ? 10 : 12, color: pending || isFinishing ? '#8b5cf6' : (displayStatus === 'deleted' ? '#98A2B3' : '#A45B5B'), fontWeight: 500 }}>{statusLabel}</span>
<ProgressItem item={item} isPending={pending || isFinishing} isCompleted={completed} onAnimationComplete={() => handleFinishAnimation(itemId)} onProgressChange={(progress) => handleProgressChange(itemId, progress)} />