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

解决页面资源加载过慢问题

Browse Source
This commit is contained in:
Lrd
2026-07-02 15:57:52 +08:00
parent ac87ac7059
commit 33a78cb4a5
1 changed files with 61 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files
video-gen-app/src/pages/GeneratedRecord.tsx
+61 -21
View File
@@ -21,7 +21,32 @@ import { gethistory, gethistoryItems, getOAuthList, asyncBatchUploadMaterial, up
const { Search } = Input;
const { Text } = Typography;
const usePageAllLoaded = (callback: () => void) => {
const executedRef = React.useRef(false);
useEffect(() => {
if (executedRef.current) return;
const handleLoad = () => {
if (executedRef.current) return;
executedRef.current = true;
callback?.();
};
if (document.readyState === 'complete') {
handleLoad();
} else {
window.addEventListener('load', handleLoad);
}
return () => {
window.removeEventListener('load', handleLoad);
};
}, [callback]);
};
const GeneratedRecord: React.FC = () => {
const [isPageLoaded, setIsPageLoaded] = useState(false);
usePageAllLoaded(() => {
setIsPageLoaded(true);
});
const [filterType, setFilterType] = useState<'project' | 'creation' | 'hot_opening_replicate' | 'shot_replicate'>('project');
const [filterMedia, setFilterMedia] = useState<'video' | 'image'>('video');
const [recordlist, setRecordList] = useState<any[]>([]);
@@ -745,16 +770,8 @@ const GeneratedRecord: React.FC = () => {
if (historySource) {
parameters = `${selectedDate}?gen_type=${filterMedia}&history_source=${historySource}&page=${Pagebreak.page}&page_size=${Pagebreak.pageSize}`;
}
gethistoryItems(parameters).then(async (res: any) => {
gethistoryItems(parameters).then((res: any) => {
const data = Array.isArray(res) ? res : (res?.items || []);
for (const item of data) {
if (item.videoUrl && item.videoUrl.trim()) {
const dimensions = await getVideoDimensions(item.videoUrl);
if (dimensions) {
item.imagePx = dimensions;
}
}
}
let recordList = [{
generatedDate: res.generatedDate,
items: data,
@@ -766,6 +783,21 @@ const GeneratedRecord: React.FC = () => {
} else {
setRecordList([]);
}
if (isPageLoaded) {
data.forEach(async (item: any) => {
if (item.videoUrl && item.videoUrl.trim()) {
const dimensions = await getVideoDimensions(item.videoUrl);
if (dimensions) {
setRecordList(prev => prev.map(group => ({
...group,
items: group.items.map((i: any) =>
i.id === item.id ? { ...i, imagePx: dimensions } : i
),
})));
}
}
});
}
}).catch((err) => {
}).finally(() => {
setLoading(false);
@@ -775,26 +807,34 @@ const GeneratedRecord: React.FC = () => {
} finally {
}
} else {
gethistory(parameters).then(async (res: any) => {
gethistory(parameters).then((res: any) => {
const data = Array.isArray(res) ? res : (res?.groups || []);
for (const group of data) {
data.forEach(group => {
group.page = 1;
for (const item of group.items) {
if (item.videoUrl && item.videoUrl.trim()) {
const dimensions = await getVideoDimensions(item.videoUrl);
if (dimensions) {
console.log(dimensions);
item.imagePx = dimensions;
}
}
}
}
});
if (Pagebreak.page === 1) {
setRecordList(data);
} else {
setRecordList(prev => [...prev, ...data]);
}
setTotalnumber(res?.totalDays || 0);
if (isPageLoaded) {
data.forEach(group => {
group.items.forEach(async (item: any) => {
if (item.videoUrl && item.videoUrl.trim()) {
const dimensions = await getVideoDimensions(item.videoUrl);
if (dimensions) {
setRecordList(prev => prev.map(g => ({
...g,
items: g.items.map((i: any) =>
i.id === item.id ? { ...i, imagePx: dimensions } : i
),
})));
}
}
});
});
}
}).catch((err) => {
if (Pagebreak.page === 1) {
setRecordList([]);