zyc
566c3a476f
All checks were successful
Build and Deploy / build-and-deploy (push) Successful in 2m17s
53 lines
1.6 KiB
TypeScript
53 lines
1.6 KiB
TypeScript
import { useRef, useEffect } from 'react';
|
||
import { Sidebar } from './Sidebar';
|
||
import { InputBar } from './InputBar';
|
||
import { GenerationCard } from './GenerationCard';
|
||
import { Toast } from './Toast';
|
||
import { UserInfoBar } from './UserInfoBar';
|
||
import { useGenerationStore } from '../store/generation';
|
||
import styles from './VideoGenerationPage.module.css';
|
||
|
||
export function VideoGenerationPage() {
|
||
const tasks = useGenerationStore((s) => s.tasks);
|
||
const loadTasks = useGenerationStore((s) => s.loadTasks);
|
||
const scrollRef = useRef<HTMLDivElement>(null);
|
||
const prevCountRef = useRef(tasks.length);
|
||
|
||
// Load tasks from backend on mount (persist across page refresh)
|
||
useEffect(() => {
|
||
loadTasks();
|
||
}, [loadTasks]);
|
||
|
||
// Auto-scroll to top when new task is added
|
||
useEffect(() => {
|
||
if (tasks.length > prevCountRef.current && scrollRef.current) {
|
||
scrollRef.current.scrollTo({ top: 0, behavior: 'smooth' });
|
||
}
|
||
prevCountRef.current = tasks.length;
|
||
}, [tasks.length]);
|
||
|
||
return (
|
||
<div className={styles.layout}>
|
||
<Sidebar />
|
||
<main className={styles.main}>
|
||
<UserInfoBar />
|
||
<div className={styles.contentArea} ref={scrollRef}>
|
||
{tasks.length === 0 ? (
|
||
<div className={styles.emptyArea}>
|
||
<p className={styles.emptyHint}>在下方输入提示词，开始创作 AI 视频</p>
|
||
</div>
|
||
) : (
|
||
<div className={styles.taskList}>
|
||
{tasks.map((task) => (
|
||
<GenerationCard key={task.id} task={task} />
|
||
))}
|
||
</div>
|
||
)}
|
||
</div>
|
||
<InputBar />
|
||
</main>
|
||
<Toast />
|
||
</div>
|
||
);
|
||
}
|