轮询修改，媒体过期判断

video-gen-app/src/api/client.ts

@@ -13,6 +13,7 @@ interface RequestOptions {
   body?: unknown;
   auth?: boolean;
   encryptBody?: boolean;
+  signal?: AbortSignal;
 }
 
 /** Convert snake_case string to camelCase */
@@ -53,7 +54,7 @@ async function tryDecrypt(data: string): Promise<string | null> {
 }
 
 export async function apiRequest<T>(path: string, options: RequestOptions = {}): Promise<T> {
-  const { method = 'GET', body, auth = true, encryptBody = USE_ENCRYPTION } = options;
+  const { method = 'GET', body, auth = true, encryptBody = USE_ENCRYPTION, signal } = options;
 
   const headers: Record<string, string> = {
     'Content-Type': 'application/json',
@@ -79,6 +80,7 @@ export async function apiRequest<T>(path: string, options: RequestOptions = {}):
     method,
     headers,
     body: bodyStr,
+    signal,
   });
 
   if (res.status === 204) return undefined as T;
@@ -120,7 +122,10 @@ if (!res.ok) {
 
 // Convenience methods
 export const api = {
-  get: <T>(path: string, auth = true) => apiRequest<T>(path, { auth }),
+  get: <T>(path: string, options: boolean | { auth?: boolean; signal?: AbortSignal } = true) => {
+    const opts = typeof options === 'boolean' ? { auth: options } : options;
+    return apiRequest<T>(path, opts);
+  },
   post: <T>(path: string, body?: unknown, auth = true) => apiRequest<T>(path, { method: 'POST', body, auth }),
   put: <T>(path: string, body?: unknown, auth = true) => apiRequest<T>(path, { method: 'PUT', body, auth }),
   delete: <T>(path: string, auth = true) => apiRequest<T>(path, { method: 'DELETE', auth }),

video-gen-app/src/api/index.ts

@@ -66,10 +66,47 @@ export async function deleteProject(id: string): Promise<void> {
 
 // ── Generation ────────────────────────────────────────────
 
-export async function getRecords(projectId?: string): Promise<GenerationRecord[]> {
+export interface GenerationRecordPageListOut {
-  if (USE_MOCK) return mock.mockGetGenerationRecords(projectId);
+  page: number;
-  const q = projectId ? `?project_id=${projectId}` : '';
+  pageSize: number;
-  return api.get<GenerationRecord[]>(`/generation-records${q}`);
+  total: number;
+  items: GenerationRecord[];
+}
+
+export interface GetRecordsPageParams {
+  projectId?: string;
+  status?: string;
+  page?: number;
+  pageSize?: number;
+  signal?: AbortSignal;
+}
+
+export async function getRecordsPage(params: GetRecordsPageParams = {}): Promise<GenerationRecordPageListOut> {
+  const page = params.page && params.page > 0 ? params.page : 1;
+  const pageSize = params.pageSize && params.pageSize > 0 ? params.pageSize : 10;
+
+  if (USE_MOCK) {
+    const mockRecords = await mock.mockGetGenerationRecords(params.projectId);
+    const filtered = params.status
+      ? mockRecords.filter((record) => record.status === params.status)
+      : mockRecords;
+    const start = (page - 1) * pageSize;
+
+    return {
+      page,
+      pageSize,
+      total: filtered.length,
+      items: filtered.slice(start, start + pageSize),
+    };
+  }
+
+  const query = new URLSearchParams();
+  if (params.projectId) query.set('project_id', params.projectId);
+  if (params.status) query.set('status', params.status);
+  query.set('page', String(page));
+  query.set('page_size', String(pageSize));
+
+  return api.get<GenerationRecordPageListOut>(`/generation-records?${query.toString()}`, { signal: params.signal });
 }
 
 export async function optimizePrompt(
@@ -288,19 +325,19 @@ export async function getEngine(): Promise<any[]> {
 // ── Generation AI Tasks ────────────────────────────────────
 
 
-
+// 创建ai生成任务
 export async function createGenerationTask(params: any): Promise<any> {
   return api.post('/generation-ai/tasks', params);
 }
-
+// 获取ai生成任务列表
 export async function getgen_list(Pagebreak: any): Promise<any[]> {
   return api.get('/generation-ai/tasks?page='+Pagebreak.page+'&page_size='+Pagebreak.pageSize);
 }
-
+// 获取生成任务历史记录
 export async function gethistory(Pagebreak: any): Promise<any[]> {
   return api.get('/generation-ai/history'+Pagebreak);
 }
-
+// 获取生成任务历史记录子项
 export async function gethistoryItems(Pagebreak: any): Promise<any[]> {
   return api.get('/generation-ai/history/'+Pagebreak);
 }

video-gen-app/src/api/mock.ts

@@ -47,6 +47,7 @@ let MOCK_PROJECTS: Project[] = [
 let MOCK_RECORDS: GenerationRecord[] = [
   {
     id: 'r-1',
+    items: [],
     projectId: 'p-1',
     projectName: '618电商大促宣传片',
     originalPrompt: '一个年轻女性在时尚直播间推荐夏季新款连衣裙，背景明亮温馨',
@@ -69,6 +70,7 @@ let MOCK_RECORDS: GenerationRecord[] = [
   },
   {
     id: 'r-2',
+    items: [],
     projectId: 'p-2',
     projectName: '在线课程推广视频',
     originalPrompt: '学生在明亮的教室里用平板电脑学习编程课程',
@@ -91,7 +93,9 @@ let MOCK_RECORDS: GenerationRecord[] = [
   },
   {
     id: 'r-3',
+    items: [],
     projectId: 'p-1',
+    
     projectName: '618电商大促宣传片',
     originalPrompt: '多个快递包裹从仓库货架上飞出，物流车快速配送',
     optimizedPrompt: '高速摄影风格，镜头从大型智能仓储中心内部开始，自动化机械臂精准抓取印有品牌Logo的快递包裹。包裹沿传送带高速移动，在分拣中心精准落入对应区域。画面切换至无人机和无人配送车在城市街道上进行最后一公里配送。最终画面定格在消费者微笑签收包裹的瞬间。整体采用蓝色科技感色调，快节奏剪辑。',
@@ -111,6 +115,7 @@ let MOCK_RECORDS: GenerationRecord[] = [
   },
   {
     id: 'r-4',
+    items: [],
     projectId: 'p-3',
     projectName: '新游戏预告片',
     originalPrompt: '一个奇幻世界里的魔法城堡，龙在天空飞过',
@@ -217,6 +222,7 @@ export async function mockOptimizePrompt(
   const record: GenerationRecord = {
     id: `r-${Date.now()}`,
     projectId,
+    items: [],
     projectName: project?.name ?? '未知项目',
     originalPrompt: params.prompt,
     optimizedPrompt,

video-gen-app/src/components/Layout/AppLayout.tsx

@@ -389,15 +389,17 @@ const AppLayout: React.FC = () => {
 
       {/* Floating sidebar toggle hover zone */}
       <div
+        className="desktop-sidebar-toggle-zone"
         onMouseEnter={() => setToggleHover(true)}
         onMouseLeave={() => setToggleHover(false)}
         style={{
           position: 'fixed', left: sidebarW - 16, top: 0, bottom: 0,
           zIndex: 110, width: 32, cursor: 'default',
+          transition: 'left 0.25s ease',
         }}
       >
         {toggleHover && (
-          <div onClick={() => setCollapsed(!collapsed)} style={{
+          <div onClick={() => setCollapsed(prev => !prev)} style={{
             position: 'absolute', left: '50%', top: '50%',
             transform: 'translate(-50%, -50%)',
             width: 24, height: 56, borderRadius: '0 8px 8px 0',

video-gen-app/src/components/NotificationPopup.tsx

@@ -2,6 +2,7 @@ import React, { useEffect, useState, useCallback } from 'react';
 import { Tag, Typography, Button } from 'antd';
 import { BellOutlined, ThunderboltOutlined, GiftOutlined, StarOutlined, CloseOutlined } from '@ant-design/icons';
 import { getNotifications, markNotificationRead } from '../api';
+import { useAuthStore } from '../store/useAuthStore';
 
 interface Notification {
   id: string;
@@ -22,6 +23,7 @@ const NotificationPopup: React.FC = () => {
   const [visible, setVisible] = useState(false);
   const [notifications, setNotifications] = useState<Notification[]>([]);
   const [currentIndex, setCurrentIndex] = useState(0);
+  const refreshUser = useAuthStore((state) => state.refreshUser);
 
   const fetchNotifications = useCallback(async () => {
     try {
@@ -52,6 +54,8 @@ const NotificationPopup: React.FC = () => {
       setVisible(false);
       setNotifications([]);
       setCurrentIndex(0);
+      // 刷新用户信息（包括积分）
+      try { await refreshUser(); } catch { /* ignore */ }
     }
   };
 

video-gen-app/src/index.css

@@ -146,6 +146,7 @@ html, body {
 @media (max-width: 768px) {
   .desktop-sidebar { display: none !important; }
   .desktop-content { margin-left: 0 !important; padding: 16px !important; padding-bottom: 80px !important; overflow-x: hidden !important; }
+  .desktop-sidebar-toggle-zone { display: none !important; }
   .mobile-bottom-nav { display: flex !important; }
 
   /* Prevent horizontal overflow globally */
@@ -319,11 +320,13 @@ html, body {
   .mobile-mb-12 { margin-bottom: 12px !important; }
 }
 
-/* ── Tablet Breakpoint (768px to 1024px) ────────────── */
+/* ── Tablet Breakpoint (769px to 1024px) ────────────── */
 @media (min-width: 769px) and (max-width: 1024px) {
-  /* Desktop sidebar adjustments */
+  /*
-  .desktop-sidebar { width: 180px !important; }
+    左侧栏宽度必须统一由 AppLayout.tsx 的 sidebarW 控制。
-  .desktop-content { margin-left: 180px !important; }
+    不要在这里覆盖 .desktop-sidebar width 或 .desktop-content margin-left，
+    否则展开/折叠状态会和真实布局宽度不一致。
+  */
 
   /* Card max-width */
   .ant-card { max-width: calc(50% - 8px) !important; }

video-gen-app/src/pages/GeneratedRecord.tsx

@@ -1,5 +1,5 @@
-import React, { useEffect, useState, useLayoutEffect } from 'react';
+import React, { useEffect, useState, useLayoutEffect, useRef, useCallback } from 'react';
-import { Button, Empty, Input, Select, Space, Typography, Tag } from 'antd';
+import { Button, Empty, Input, Select, Space, Typography, Tag, message } from 'antd';
 import {
     SearchOutlined,
     FilterOutlined,
@@ -9,10 +9,12 @@ import {
     FileTextOutlined,
     DownloadOutlined,
     XOutlined,
+    ClockCircleOutlined,
 } from '@ant-design/icons';
 import { gethistory,gethistoryItems } from '../api';
 
 const { Search } = Input;
+const { Text } = Typography;
 
 const GeneratedRecord: React.FC = () => {
     const [filterType, setFilterType] = useState<'project' | 'creation'>('project');
@@ -29,6 +31,89 @@ const GeneratedRecord: React.FC = () => {
     const [previewItem, setPreviewItem] = useState<any>(null);
     const videoRef = React.createRef<HTMLVideoElement>();
 
+    // 全局 Intersection Observer 实例（复用，避免创建过多实例）
+    let globalObserver: IntersectionObserver | null = null;
+    const observerCallbacks = new Map<HTMLElement, () => void>();
+
+    // 加载队列控制 - 限制同时加载的媒体数量
+    // 使用优先级队列，完全在可视区的元素优先加载
+    interface LoadTask {
+        callback: () => void;
+        priority: number; // 优先级：2=完全可见(立即加载)，1=部分可见，0=即将进入
+        element: HTMLElement;
+    }
+    const loadingQueue: LoadTask[] = [];
+    const MAX_CONCURRENT_LOADS = 15; // 最大同时加载数量
+    const MAX_VISIBLE_LOADS = 8; // 可视区最大并发数（不受队列限制）
+    let currentLoads = 0;
+    let visibleLoads = 0; // 当前可视区加载数
+
+    const enqueueLoad = (callback: () => void, element: HTMLElement, isFullyVisible: boolean) => {
+        // 完全可见的元素立即加载，不受队列限制
+        if (isFullyVisible && visibleLoads < MAX_VISIBLE_LOADS) {
+            visibleLoads++;
+            currentLoads++;
+            callback();
+        } else if (currentLoads < MAX_CONCURRENT_LOADS) {
+            // 部分可见或预加载区域的元素，受队列限制
+            currentLoads++;
+            callback();
+        } else {
+            // 添加到优先级队列
+            const task: LoadTask = {
+                callback,
+                priority: isFullyVisible ? 2 : 1,
+                element
+            };
+            loadingQueue.push(task);
+            // 按优先级排序，高优先级在前
+            loadingQueue.sort((a, b) => b.priority - a.priority);
+        }
+    };
+
+    const completeLoad = () => {
+        currentLoads--;
+        // 如果是可视区加载完成
+        if (visibleLoads > 0) {
+            visibleLoads--;
+        }
+        // 处理队列中的任务
+        if (loadingQueue.length > 0) {
+            // 优先处理高优先级任务
+            const nextTask = loadingQueue.shift();
+            if (nextTask) {
+                currentLoads++;
+                // 如果是完全可见的任务，计入可视区加载数
+                if (nextTask.priority === 2) {
+                    visibleLoads++;
+                }
+                nextTask.callback();
+            }
+        }
+    };
+
+    const getGlobalObserver = (): IntersectionObserver => {
+        if (!globalObserver) {
+            globalObserver = new IntersectionObserver(
+                (entries) => {
+                    entries.forEach((entry) => {
+                        const callback = observerCallbacks.get(entry.target as HTMLElement);
+                        if (entry.isIntersecting && callback) {
+                            observerCallbacks.delete(entry.target as HTMLElement);
+                            globalObserver?.unobserve(entry.target);
+                            // 判断是否完全可见（intersectionRatio >= 1）
+                            const isFullyVisible = entry.intersectionRatio >= 1;
+                            // 使用优先级队列控制加载
+                            enqueueLoad(callback, entry.target as HTMLElement, isFullyVisible);
+                        }
+                    });
+                },
+                { rootMargin: '400px', threshold: [0.01, 0.5, 1.0] } // 提前400px开始加载，多阈值检测
+            );
+        }
+        return globalObserver;
+    };
+
     // 从URL中提取exp时间戳（支持相对路径和完整URL）
     const extractExpTimestamp = (url: string): number | null => {
         if (!url) return null;
@@ -63,10 +148,292 @@ const GeneratedRecord: React.FC = () => {
     // 检查媒体是否过期
     const isMediaExpired = (url: string): boolean => {
         const expTimestamp = extractExpTimestamp(url);
-        if (!expTimestamp) return false;
+        if (!expTimestamp) {
+            return false; // 没有exp参数，视为不过期
+        }
         const currentTimestamp = Math.floor(Date.now() / 1000);
         return currentTimestamp > expTimestamp;
     };
+
+    // 懒加载媒体组件
+    const LazyMedia: React.FC<{
+        item: any;
+        mediaType: 'video' | 'image';
+        onClick: () => void;
+    }> = ({ item, mediaType, onClick }) => {
+        const [isLoaded, setIsLoaded] = useState(false);
+        const [isError, setIsError] = useState(false);
+        const [isExpired, setIsExpired] = useState(false);
+        const [isLoading, setIsLoading] = useState(false);
+        const placeholderRef = useRef<HTMLDivElement>(null);
+        const mediaRef = useRef<HTMLImageElement | HTMLVideoElement>(null);
+        const errorTimer = useRef<ReturnType<typeof setTimeout> | null>(null);
+
+        // 检查媒体是否过期
+        useEffect(() => {
+            const url = mediaType === 'video' ? item.videoUrl : item.imageUrl;
+            if (url && isMediaExpired(url)) {
+                setIsExpired(true);
+            }
+        }, [item, mediaType]);
+
+        useEffect(() => {
+            // 如果已过期，不需要监听
+            if (isExpired) return;
+
+            const placeholder = placeholderRef.current;
+            if (!placeholder) return;
+
+            const observer = getGlobalObserver();
+            const callback = () => {
+                setIsLoading(true);
+            };
+
+            observerCallbacks.set(placeholder, callback);
+            observer.observe(placeholder);
+
+            return () => {
+                observerCallbacks.delete(placeholder);
+                observer.unobserve(placeholder);
+            };
+        }, [isExpired]);
+
+        // 安全拼接URL，避免双斜杠
+        const buildUrl = (path: string, isImage: boolean = false): string => {
+            const baseUrl = import.meta.env.VITE_API_BASE || "http://localhost:8000";
+            // 移除路径开头的斜杠（如果有）
+            const cleanPath = path.startsWith('/') ? path.slice(1) : path;
+            // 移除baseUrl结尾的斜杠（如果有）
+            const cleanBase = baseUrl.endsWith('/') ? baseUrl.slice(0, -1) : baseUrl;
+            if (isImage) {
+                return `${cleanBase}/static/${cleanPath}&w=300&q=50`;
+            }
+            return `${cleanBase}/${cleanPath}`;
+        };
+
+        // 处理加载完成
+        const handleLoad = () => {
+            // 清除可能的错误延迟定时器
+            if (errorTimer.current) {
+                clearTimeout(errorTimer.current);
+            }
+            setIsLoaded(true);
+            setIsLoading(false);
+            completeLoad();
+        };
+
+        const handleError = () => {
+            // 使用防抖，只有错误持续一段时间后才显示错误状态
+            errorTimer.current = setTimeout(() => {
+                const mediaUrl = mediaType === 'video' ? buildUrl(item.videoUrl) : buildUrl(item.imageUrl);
+                // console.warn(`媒体加载失败: ${mediaUrl}`, item);
+                setIsError(true);
+                setIsLoading(false);
+                completeLoad();
+            }, 1000); // 1秒防抖延迟
+        };
+
+        // 获取媒体URL
+        const mediaUrl = mediaType === 'video' ? buildUrl(item.videoUrl) : buildUrl(item.imageUrl, true);
+        const coverUrl = item.videoCoverUrl ? buildUrl(item.videoCoverUrl, true) : undefined;
+
+        return (
+            <div
+                ref={placeholderRef}
+                style={{
+                    width: 160,
+                    height: 120,
+                    borderRadius: 4,
+                    overflow: 'hidden',
+                    cursor: 'pointer',
+                    boxShadow: '0 2px 8px rgba(0,0,0,0.1)',
+                    transition: 'transform 0.2s, box-shadow 0.2s',
+                    position: 'relative',
+                    backgroundColor: '#f1f5f9',
+                }}
+                onClick={onClick}
+                onMouseEnter={(e) => {
+                    (e.currentTarget as HTMLElement).style.transform = 'scale(1.05)';
+                    (e.currentTarget as HTMLElement).style.boxShadow = '0 4px 16px rgba(0,0,0,0.2)';
+                }}
+                onMouseLeave={(e) => {
+                    (e.currentTarget as HTMLElement).style.transform = 'scale(1)';
+                    (e.currentTarget as HTMLElement).style.boxShadow = '0 2px 8px rgba(0,0,0,0.1)';
+                }}
+            >
+                {/* 加载占位符 - 显示渐变背景和加载状态 */}
+                {!isLoading && !isLoaded && !isError && (
+                    <div style={{
+                        width: '100%',
+                        height: '100%',
+                        display: 'flex',
+                        alignItems: 'center',
+                        justifyContent: 'center',
+                        background: 'linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%)',
+                    }}>
+                        <div style={{
+                            width: 32,
+                            height: 32,
+                            borderRadius: 8,
+                            backgroundColor: '#cbd5e1',
+                            display: 'flex',
+                            alignItems: 'center',
+                            justifyContent: 'center',
+                        }}>
+                            {mediaType === 'video' ? (
+                                <VideoCameraOutlined style={{ color: '#64748b', fontSize: 16 }} />
+                            ) : (
+                                <PictureOutlined style={{ color: '#64748b', fontSize: 16 }} />
+                            )}
+                        </div>
+                    </div>
+                )}
+
+                {/* 视频无封面时直接显示占位符 */}
+                {mediaType === 'video' && !item.videoCoverUrl && !isError && (
+                    <div style={{
+                        width: '100%',
+                        height: '100%',
+                        display: 'flex',
+                        flexDirection: 'column',
+                        alignItems: 'center',
+                        justifyContent: 'center',
+                        backgroundColor: '#1e293b',
+                    }}>
+                        <VideoCameraOutlined style={{ color: '#64748b', fontSize: 24 }} />
+                        <Text style={{ fontSize: 12, color: '#94a3b8', marginTop: 4 }}>暂无封面</Text>
+                    </div>
+                )}
+
+                {/* 媒体内容 - 当isLoading为true时开始渲染，加载完成后显示 */}
+                {((mediaType === 'video' && item.videoCoverUrl) || mediaType === 'image') && (isLoading || isLoaded) && !isError && (
+                    <div style={{
+                        width: '100%',
+                        height: '100%',
+                        position: 'relative',
+                    }}>
+                        {/* 加载中遮罩 */}
+                        {isLoading && !isLoaded && (
+                            <div style={{
+                                position: 'absolute',
+                                top: 0,
+                                left: 0,
+                                right: 0,
+                                bottom: 0,
+                                backgroundColor: 'rgba(248, 250, 252, 0.9)',
+                                display: 'flex',
+                                alignItems: 'center',
+                                justifyContent: 'center',
+                                zIndex: 1,
+                            }}>
+                                <div style={{
+                                    width: 28,
+                                    height: 28,
+                                    border: '3px solid #e2e8f0',
+                                    borderTopColor: '#3b82f6',
+                                    borderRadius: '50%',
+                                    animation: 'spin 0.8s linear infinite',
+                                }} />
+                            </div>
+                        )}
+                        {mediaType === 'video' && item.videoCoverUrl && (
+                            <img
+                                ref={mediaRef as React.RefObject<HTMLImageElement>}
+                                src={coverUrl}
+                                style={{ 
+                                    width: '100%', 
+                                    height: '100%', 
+                                    objectFit: 'cover',
+                                    opacity: isLoaded ? 1 : 0,
+                                    transition: 'opacity 0.3s ease-in-out'
+                                }}
+                                loading="lazy"
+                                onLoad={handleLoad}
+                                onError={handleError}
+                            />
+                        )}
+                        {mediaType === 'image' && (
+                            <img
+                                ref={mediaRef as React.RefObject<HTMLImageElement>}
+                                src={mediaUrl}
+                                alt="图片预览"
+                                style={{ 
+                                    width: '100%', 
+                                    height: '100%', 
+                                    objectFit: 'cover',
+                                    opacity: isLoaded ? 1 : 0,
+                                    transition: 'opacity 0.3s ease-in-out'
+                                }}
+                                loading="lazy"
+                                onLoad={handleLoad}
+                                onError={handleError}
+                            />
+                        )}
+                    </div>
+                )}
+
+                {/* 过期占位符 */}
+                {isExpired && (
+                    <div style={{
+                        width: '100%',
+                        height: '100%',
+                        display: 'flex',
+                        alignItems: 'center',
+                        justifyContent: 'center',
+                        backgroundColor: '#fef3c7',
+                        color: '#d97706',
+                        fontSize: 12,
+                        flexDirection: 'column',
+                        gap: 4,
+                    }}>
+                        <ClockCircleOutlined style={{ fontSize: 24 }} />
+                        图片过期
+                    </div>
+                )}
+
+                {/* 错误占位符 */}
+                {isError && (
+                    <div style={{
+                        width: '100%',
+                        height: '100%',
+                        display: 'flex',
+                        alignItems: 'center',
+                        justifyContent: 'center',
+                        backgroundColor: '#fef2f2',
+                        color: '#dc2626',
+                        fontSize: 12,
+                    }}>
+                        加载失败
+                    </div>
+                )}
+
+                {/* 点击提示 */}
+                {!isExpired && (
+                    <div style={{
+                        position: 'absolute',
+                        bottom: 0,
+                        left: 0,
+                        right: 0,
+                        background: 'linear-gradient(transparent, rgba(0,0,0,0.5))',
+                        padding: '8px',
+                        color: '#fff',
+                        fontSize: 12,
+                        opacity: 0,
+                        transition: 'opacity 0.2s',
+                    }}
+                    onMouseEnter={(e) => {
+                        (e.currentTarget as HTMLElement).style.opacity = '1';
+                    }}
+                    onMouseLeave={(e) => {
+                        (e.currentTarget as HTMLElement).style.opacity = '0';
+                    }}
+                    >
+                        点击预览
+                    </div>
+                )}
+            </div>
+        );
+    };
     
     // 下载文件
     const handleDownload = (item: any) => {
@@ -279,7 +646,7 @@ const GeneratedRecord: React.FC = () => {
                                 : '#f8f9fc',
                             border: filterMedia === 'video' ? 'none' : '1px solid #e2e8f0',
                             color: filterMedia === 'video' ? '#fff' : '#64748b',
-                            fontWeight: 600,
+                            fontWeight: 600,    
                         }}
                         icon={<VideoCameraOutlined />}
                     >
@@ -313,8 +680,8 @@ const GeneratedRecord: React.FC = () => {
                 />
             ) : (
                 <div style={{ padding: '0 4px' }}>
-                    {recordlist.map((group: any) => (
+                    {recordlist.map((group: any,index: number) => (
-                        <div key={group.date} style={{ marginBottom: 32 }}>
+                        <div key={index} style={{ marginBottom: 32 }}>
                             {/* Date label */}
                             <div style={{
                                 fontSize: 14,
@@ -332,72 +699,21 @@ const GeneratedRecord: React.FC = () => {
                                 gap: 8,
                             }}>
                                 {group.items.map((item: any) => (
-                                    <div
+                                    <LazyMedia
                                         key={item.id}
-                                        style={{
+                                        item={item}
-                                            width: 160,
+                                        mediaType={filterMedia}
-                                            height: 120,
-                                            borderRadius: 4,
-                                            overflow: 'hidden',
-                                            cursor: 'pointer',
-                                            boxShadow: '0 2px 8px rgba(0,0,0,0.1)',
-                                            transition: 'transform 0.2s, box-shadow 0.2s',
-                                        }}
                                         onClick={() => handlePreview(item)}
-                                        onMouseEnter={(e) => {
+                                    />
-                                            (e.currentTarget as HTMLElement).style.transform = 'scale(1.05)';
-                                            (e.currentTarget as HTMLElement).style.boxShadow = '0 4px 16px rgba(0,0,0,0.2)';
-                                        }}
-                                        onMouseLeave={(e) => {
-                                            (e.currentTarget as HTMLElement).style.transform = 'scale(1)';
-                                            (e.currentTarget as HTMLElement).style.boxShadow = '0 2px 8px rgba(0,0,0,0.1)';
-                                        }}
-                                    >
-                                        {filterMedia === 'video' ? (
-                                            <video
-                                                src={`${import.meta.env.VITE_API_BASE || "http://localhost:8000"}${item.videoUrl}`}
-                                                
-                                                style={{ width: '100%', height: '100%', objectFit: 'cover' }}
-                                            />
-                                        ) : (
-                                            <img
-                                                src={`${import.meta.env.VITE_API_BASE || "http://localhost:8000"}${item.imageUrl}`}
-                                                alt="图片预览"
-                                                style={{ width: '100%', height: '100%', objectFit: 'cover' }}
-                                            />
-                                        )}
-                                        {/* 点击提示 */}
-                                        <div style={{
-                                            position: 'absolute',
-                                            bottom: 0,
-                                            left: 0,
-                                            right: 0,
-                                            background: 'linear-gradient(transparent, rgba(0,0,0,0.5))',
-                                            padding: '8px',
-                                            color: '#fff',
-                                            fontSize: 12,
-                                            opacity: 0,
-                                            transition: 'opacity 0.2s',
-                                        }}
-                                        onMouseEnter={(e) => {
-                                            (e.currentTarget as HTMLElement).style.opacity = '1';
-                                        }}
-                                        onMouseLeave={(e) => {
-                                            (e.currentTarget as HTMLElement).style.opacity = '0';
-                                        }}
-                                        >
-                                            点击预览
-                                        </div>
-                                    </div>
                                 ))}
                             </div>
                             {/* 分组内加载更多 */}
                             {group.total && group.total > group.items.length && (
                                 <div style={{ padding: '12px 0', textAlign: 'left' }}>
                                     <Button
-                                        onClick={() => handleGroupLoadMore(group.generatedDate,group.items, group.page)}
+                                        onClick={() => handleGroupLoadMore(group.generatedDate, group.items, group.page)}
-                                        loading={loadingGroups.has(group.date)}
+                                        loading={loadingGroups.has(group.generatedDate)}
-                                        disabled={loadingGroups.has(group.date)}
+                                        disabled={loadingGroups.has(group.generatedDate)}
                                         size="small"
                                         style={{
                                             borderRadius: 6,
@@ -496,16 +812,17 @@ const GeneratedRecord: React.FC = () => {
                             />
                         </div>
                         
-                        {/* 内容区域 - 响应式布局 */}
+                        {/* 内容区域  */}
                         <div style={{
                             flex: 1,
                             display: 'flex',
                             flexWrap: 'wrap',
+                            height: '500px',
                             gap: 20,
                             padding: 20,
                             overflow: 'auto',
                             justifyContent: 'center',
-                            alignItems: 'flex-start',
+                            alignItems: 'center',
                         }}>
                             {/* 媒体预览 */}
                             <div style={{ 
@@ -517,7 +834,13 @@ const GeneratedRecord: React.FC = () => {
                                 justifyContent: 'center',
                                 minHeight: '200px',
                             }}>
-                                {filterMedia === 'video' ? (
+                                {/* 检查媒体是否过期 */}
+                                {isMediaExpired(previewItem.videoUrl || previewItem.imageUrl) ? (
+                                    <div style={{ textAlign: 'center', padding: '40px' }}>
+                                        <div style={{ fontSize: 48, marginBottom: 16 }}>⚠️</div>
+                                        <p style={{ fontSize: 16, color: '#ff4d4f', marginBottom: 16 }}>图片/视频资源已过期，请刷新重新加载～</p>
+                                    </div>
+                                ) : filterMedia === 'video' ? (
                                     <video
                                         ref={videoRef}
                                         src={`${import.meta.env.VITE_API_BASE || "http://localhost:8000"}${previewItem.videoUrl}`}
@@ -532,7 +855,7 @@ const GeneratedRecord: React.FC = () => {
                                     />
                                 ) : (
                                     <img
-                                        src={`${import.meta.env.VITE_API_BASE || "http://localhost:8000"}${previewItem.imageUrl}`}
+                                        src={`${import.meta.env.VITE_API_BASE || "http://localhost:8000"}/static${previewItem.imageUrl}&w=300&q=50`}
                                         alt="预览"
                                         style={{ 
                                             maxWidth: '100%', 
@@ -757,6 +1080,16 @@ function formatFileSize(bytes: number): string {
     return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i];
 }
 
+// 添加旋转动画样式
+const styleSheet = document.createElement('style');
+styleSheet.textContent = `
+    @keyframes spin {
+        from { transform: rotate(0deg); }
+        to { transform: rotate(360deg); }
+    }
+`;
+document.head.appendChild(styleSheet);
+
 // 日期格式化（年月日时分秒）
 function formatDateTime(dateString: string): string {
     if (!dateString) return '-';

video-gen-app/src/pages/RecordsPage.tsx

@@ -5,6 +5,7 @@ import {
   Input,
   message,
   Modal,
+  Pagination,
   Select,
   Space,
   Tag,
@@ -41,6 +42,9 @@ const statusConfig: Record<GenerationStatus, { color: string; text: string; icon
 
 const RecordsPage: React.FC = () => {
   const { records, projects, fetchRecords, fetchProjects, generateVideo } = useAppStore();
+  const recordItems = records.items;
+  const [currentPage, setCurrentPage] = useState(1);
+  const [pageSize, setPageSize] = useState(10);
   const [generating, setGenerating] = useState<Record<string, boolean>>({});
   const [filterProject, setFilterProject] = useState<string | undefined>(undefined);
   const [filterStatus, setFilterStatus] = useState<string | undefined>(undefined);
@@ -50,7 +54,18 @@ const RecordsPage: React.FC = () => {
   // Generate modal for param selection
   const [genModal, setGenModal] = useState<{ recordId: string; projectName: string; ratio: AspectRatio; resolution: Resolution } | null>(null);
 
-  useEffect(() => { fetchRecords(); fetchProjects(); }, []);
+  useEffect(() => {
+    fetchProjects();
+  }, [fetchProjects]);
+
+  useEffect(() => {
+    fetchRecords({
+      projectId: filterProject,
+      status: filterStatus,
+      page: currentPage,
+      pageSize,
+    });
+  }, [fetchRecords, filterProject, filterStatus, currentPage, pageSize]);
 
   const handleGenerate = async () => {
     if (!genModal) return;
@@ -94,11 +109,7 @@ const RecordsPage: React.FC = () => {
     });
   };
 
-  const filtered = records.filter((r) => {
+  const filtered = recordItems;
-    if (filterProject && r.projectId !== filterProject) return false;
-    if (filterStatus && r.status !== filterStatus) return false;
-    return true;
-  });
 
   return (
     <div>
@@ -117,11 +128,11 @@ const RecordsPage: React.FC = () => {
         <Space>
           <FilterOutlined style={{ color: '#94a3b8' }} />
           <Select placeholder="全部项目" allowClear style={{ width: 200 }}
-            onChange={(v) => setFilterProject(v)}>
+            onChange={(v) => { setFilterProject(v); setCurrentPage(1); }}>
             {projects.map((p) => <Select.Option key={p.id} value={p.id}>{p.name}</Select.Option>)}
           </Select>
           <Select placeholder="全部状态" allowClear style={{ width: 140 }}
-            onChange={(v) => setFilterStatus(v)}>
+            onChange={(v) => { setFilterStatus(v); setCurrentPage(1); }}>
             <Select.Option value="prompt_optimized">待生成</Select.Option>
             <Select.Option value="generating">生成中</Select.Option>
             <Select.Option value="completed">已完成</Select.Option>
@@ -129,7 +140,7 @@ const RecordsPage: React.FC = () => {
           </Select>
         </Space>
         <Typography.Text style={{ marginLeft: 'auto', lineHeight: '32px', color: '#94a3b8', fontSize: 13 }}>
-          共 {filtered.length} 条记录
+          共 {records.total} 条记录
         </Typography.Text>
       </div>
 
@@ -409,7 +420,7 @@ const RecordsPage: React.FC = () => {
                                   src={`${import.meta.env.VITE_API_BASE || 'http://localhost:8000'}${record.imageUrl}`}
                                   alt={record.projectName}
                                   style={{ width: '100%', maxHeight: '400px', objectFit: 'contain', display: 'block' }}
-                                />
+                                />  
                               )}
                             </div>
                             <div style={{
@@ -461,6 +472,22 @@ const RecordsPage: React.FC = () => {
         </div>
       )}
 
+      {records.total > 0 && (
+        <div style={{ display: 'flex', justifyContent: 'flex-end', marginTop: 18 }}>
+          <Pagination
+            current={records.page || currentPage}
+            pageSize={records.pageSize || pageSize}
+            total={records.total}
+            showSizeChanger
+            showTotal={(total) => `共 ${total} 条记录`}
+            onChange={(page, size) => {
+              setCurrentPage(page);
+              setPageSize(size);
+            }}
+          />
+        </div>
+      )}
+
       {/* Generate modal */}
       <Modal
         title={<Space><RocketOutlined />生成视频</Space>}
@@ -474,7 +501,7 @@ const RecordsPage: React.FC = () => {
         {genModal && (
           <div style={{ display: 'flex', flexDirection: 'column', gap: 16, marginTop: 16 }}>
             {(() => {
-              const rec = records.find(r => r.id === genModal.recordId);
+              const rec = recordItems.find(r => r.id === genModal.recordId);
               return (
                 <>
                   <div style={{ padding: 12, borderRadius: 10, background: '#f8f9fc' }}>

video-gen-app/src/store/useAppStore.ts

@@ -3,16 +3,23 @@ import type { Project, GenerationRecord, OptimizeParams, GenerateParams, Optimiz
 import * as api from '../api';
 import { useAuthStore } from './useAuthStore';
 
+const emptyRecordsPage = (): api.GenerationRecordPageListOut => ({
+  page: 1,
+  pageSize: 10,
+  total: 0,
+  items: [],
+});
+
 interface AppState {
   projects: Project[];
-  records: GenerationRecord[];
+  records: api.GenerationRecordPageListOut;
   loading: boolean;
 
   fetchProjects: () => Promise<void>;
   createProject: (name: string, industry: Industry) => Promise<Project>;
   deleteProject: (id: string) => Promise<void>;
 
-  fetchRecords: (projectId?: string) => Promise<void>;
+  fetchRecords: (params?: api.GetRecordsPageParams) => Promise<void>;
   optimizePrompt: (projectId: string, params: OptimizeParams) => Promise<OptimizeResult>;
   generateVideo: (recordId: string, params: GenerateParams) => Promise<GenerationRecord>;
   updateRecordReferences: (recordId: string, references: MediaReference[]) => void;
@@ -20,7 +27,7 @@ interface AppState {
 
 export const useAppStore = create<AppState>((set, get) => ({
   projects: [],
-  records: [],
+  records: emptyRecordsPage(),
   loading: false,
 
   fetchProjects: async () => {
@@ -44,10 +51,10 @@ export const useAppStore = create<AppState>((set, get) => ({
     set({ projects: get().projects.filter((p) => p.id !== id) });
   },
 
-  fetchRecords: async (projectId) => {
+  fetchRecords: async (params = {}) => {
     set({ loading: true });
     try {
-      const records = await api.getRecords(projectId);
+      const records = await api.getRecordsPage(params);
       set({ records, loading: false });
     } catch {
       set({ loading: false });
@@ -57,22 +64,39 @@ export const useAppStore = create<AppState>((set, get) => ({
   optimizePrompt: async (projectId, params) => {
     const result = await api.optimizePrompt(projectId, params);
     try { await useAuthStore.getState().checkAuth(); } catch { /* */ }
-    set({ records: [result.record, ...get().records] });
+
+    const currentRecords = get().records;
+    set({
+      records: {
+        ...currentRecords,
+        total: currentRecords.total + 1,
+        items: [result.record, ...currentRecords.items],
+      },
+    });
     return result;
   },
 
   generateVideo: async (recordId, params) => {
     const record = await api.generateVideo(recordId, params);
     try { await useAuthStore.getState().checkAuth(); } catch { /* */ }
+
+    const currentRecords = get().records;
     set({
-      records: get().records.map((r) => (r.id === recordId ? record : r)),
+      records: {
+        ...currentRecords,
+        items: currentRecords.items.map((r) => (r.id === recordId ? record : r)),
+      },
     });
     return record;
   },
 
   updateRecordReferences: (recordId, references) => {
+    const currentRecords = get().records;
     set({
-      records: get().records.map((r) => (r.id === recordId ? { ...r, references } : r)),
+      records: {
+        ...currentRecords,
+        items: currentRecords.items.map((r) => (r.id === recordId ? { ...r, references } : r)),
+      },
     });
   },
 }));

video-gen-app/src/store/useAuthStore.ts

@@ -9,6 +9,7 @@ interface AuthState {
   logout: () => Promise<void>;
   checkAuth: () => Promise<void>;
   changePassword: (oldPwd: string, newPwd: string) => Promise<void>;
+  refreshUser: () => Promise<void>;
 }
 
 export const useAuthStore = create<AuthState>((set) => ({
@@ -42,4 +43,13 @@ export const useAuthStore = create<AuthState>((set) => ({
   changePassword: async (oldPwd, newPwd) => {
     await api.changePassword(oldPwd, newPwd);
   },
+
+  refreshUser: async () => {
+    try {
+      const user = await api.getUser();
+      set({ user });
+    } catch (error) {
+      console.error('Failed to refresh user:', error);
+    }
+  },
 }));

video-gen-app/src/types/index.ts

@@ -60,6 +60,7 @@ export interface MediaReference {
 
 export interface GenerationRecord {
   id: string;
+  items:[],
   projectId: string;
   projectName: string;
   originalPrompt: string;