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-01 17:57:56 +08:00
parent 935af9ee2d
commit 0c562fb325
7 changed files with 879 additions and 1053 deletions
Download Patch File Download Diff File Expand all files Collapse all files
video-gen-app/src/api/index.ts
+6
View File
@@ -664,6 +664,7 @@ export async function getResourcesMaterialList(params: ResourcesMaterialListPara
if (params.page_size !== undefined) query.set('page_size', String(params.page_size));
return api.get(`/resources-material/list?${query.toString()}`);
}
// home 获取各模块媒体
export async function getmedit(limit:number): Promise<any> {
return api.get(`/recent-generations?limit=${limit}&modules=project&modules=chat_ai&modules=hot_opening_replicate&modules=shot_replicate`);
@@ -708,3 +709,8 @@ export async function deleteOAuthAccount(params: DeleteOAuthAccountParams): Prom
export async function getAllOAuthAccountList(): Promise<any> {
return api.post(`/upload-material/oauth_account_list`);
}
// 获取用户全部授权账户列表 resources_material_ids pre_test_template_id
export async function submitPreTest(params: { resources_material_ids: any[]; pre_test_template_id: string }): Promise<any> {
return api.post(`/resources-material/pre-commit`, params);
}
video-gen-app/src/components/PreResultDisplay.tsx
+6 -4
View File
@@ -57,10 +57,12 @@ const PreResultDisplay: React.FC<PreResultDisplayProps> = ({ preResult }) => {
const isYes = value === 'YES';
const isUnknown = value === 'UNKNOWN';
let displayLabel, displayColor;
if (isUnknown) {
displayLabel = config.unknownLabel;
displayColor = config.unknownColor;
} else if (isYes) {
// if (isUnknown) {
// displayLabel = config.unknownLabel;
// displayColor = config.unknownColor;
// } else
if (isYes) {
displayLabel = config.label;
displayColor = config.yesColor;
} else {
video-gen-app/src/index.css
+24
View File
@@ -885,4 +885,28 @@ body {
.homepage-tabs .ant-tabs-ink-bar {
background: linear-gradient(135deg, #6366f1, #8b5cf6);
}
.media-download-btn {
position: absolute;
top: 8px;
right: 8px;
z-index: 10;
opacity: 0;
pointer-events: none;
transition: opacity 0.2s;
}
.media-card:hover .media-download-btn {
opacity: 1;
pointer-events: auto;
}
.media-preview-tip {
opacity: 0;
transition: opacity 0.2s;
}
.media-card:hover .media-preview-tip {
opacity: 1;
}
video-gen-app/src/pages/ConsumePage.tsx
+3 -8
View File
@@ -101,13 +101,6 @@ const ConsumePage: React.FC = () => {
loadData(1, pageSize);
};
const handleReset = () => {
setAdvertiserId('');
setConsumeDateRange(undefined);
setCurrentPage(1);
loadData(1, pageSize, null, '');
};
const handleSync = () => {
Modal.confirm({
title: '拉取消耗数据',
@@ -164,7 +157,9 @@ const ConsumePage: React.FC = () => {
return (
<div style={{ minHeight: '94vh' }}>
<div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 12 }}>
<Button type="text" icon={<ArrowLeftOutlined />} onClick={handleBack} />
{searchParams.get('advertiserId') && (
<Button type="text" icon={<ArrowLeftOutlined />} onClick={handleBack} />
)}
<DollarOutlined style={{ color: '#6366f1', fontSize: 16 }} />
<Typography.Text strong style={{ fontSize: 16 }}>消耗记录</Typography.Text>
</div>
video-gen-app/src/pages/GeneratedRecord.tsx
+778 -1023
View File
File diff suppressed because it is too large Load Diff
video-gen-app/src/pages/MaterialListPage.tsx
+62 -17
View File
@@ -2,7 +2,7 @@ import React, { useEffect, useState } from 'react';
import { Button, Table, Tag, Input, Pagination, Typography, Select, App, Modal } from 'antd';
import { useNavigate } from 'react-router-dom';
import { FolderOpenOutlined, EyeOutlined } from '@ant-design/icons';
import { getResourcesMaterialList, getPreTestList } from '../api';
import { getResourcesMaterialList, getPreTestList, submitPreTest, getDefaultPreTest } from '../api';
import PreResultDisplay from '../components/PreResultDisplay';
// 格式化时间 2026-06-12T03:47:28.542988Z -> 2026-06-12 03:47:28
@@ -90,6 +90,9 @@ const MaterialListPage: React.FC = () => {
const [total, setTotal] = useState(0);
const [selectedRows, setSelectedRows] = useState<Set<string>>(new Set());
const [pushModalOpen, setPushModalOpen] = useState(false);
const [previewModalOpen, setPreviewModalOpen] = useState(false);
const [previewUrl, setPreviewUrl] = useState('');
const [previewType, setPreviewType] = useState<'image' | 'video'>('image');
const [pushPreTestTemplate, setPushPreTestTemplate] = useState<string>('');
const [pushTemplates, setPushTemplates] = useState<any[]>([]);
const [pushTemplatesLoading, setPushTemplatesLoading] = useState(false);
@@ -181,7 +184,11 @@ const MaterialListPage: React.FC = () => {
<Button
type="link"
icon={<EyeOutlined />}
onClick={() => window.open(buildUrl(url), '_blank')}
onClick={() => {
setPreviewUrl(buildUrl(url));
setPreviewType(record.resourceType === 'video' ? 'video' : 'image');
setPreviewModalOpen(true);
}}
size="small"
>
查看
@@ -318,14 +325,17 @@ const MaterialListPage: React.FC = () => {
}
setPushTemplatesLoading(true);
try {
const res = await getPreTestList({ page: 1, pageSize: 100 });
setPushTemplates(res.data || []);
const [listRes, defaultRes] = await Promise.all([
getPreTestList({ page: 1, pageSize: 100 }),
getDefaultPreTest(),
]);
setPushTemplates(listRes.data || []);
setPushPreTestTemplate(defaultRes.data?.id || '');
} catch (error) {
message.error('获取前测模板列表失败');
} finally {
setPushTemplatesLoading(false);
}
setPushPreTestTemplate('');
setPushModalOpen(true);
};
@@ -338,9 +348,18 @@ const MaterialListPage: React.FC = () => {
message.warning('请选择前测模板');
return;
}
message.success('推送素材成功');
setPushModalOpen(false);
setSelectedRows(new Set());
try {
const materialIds = Array.from(selectedRows);
await submitPreTest({
resources_material_ids: materialIds,
pre_test_template_id: pushPreTestTemplate,
});
message.success('推送素材成功');
setPushModalOpen(false);
setSelectedRows(new Set());
} catch (error: any) {
message.error(error.message || '推送素材失败');
}
};
const selectedRecords = records.filter(record => selectedRows.has(record.id));
@@ -403,7 +422,7 @@ const MaterialListPage: React.FC = () => {
搜索
</Button>
</div>
{/* <div style={{ display: 'flex', gap: 12 }}>
<div style={{ display: 'flex', gap: 12 }}>
<Button
type="primary"
loading={pushTemplatesLoading}
@@ -420,7 +439,7 @@ const MaterialListPage: React.FC = () => {
>
推送前测 ({selectedRows.size})
</Button>
</div> */}
</div>
</div>
<div style={{ background: '#fff', borderRadius: 12, boxShadow: '0 1px 3px rgba(0,0,0,0.05)' }}>
<Table
@@ -431,13 +450,13 @@ const MaterialListPage: React.FC = () => {
rowKey="id"
bordered={false}
scroll={{ x: 'max-content' }}
// rowSelection={{
// type: 'checkbox',
// selectedRowKeys: Array.from(selectedRows),
// onChange: (keys) => {
// setSelectedRows(new Set(keys as string[]));
// },
// }}
rowSelection={{
type: 'checkbox',
selectedRowKeys: Array.from(selectedRows),
onChange: (keys) => {
setSelectedRows(new Set(keys as string[]));
},
}}
/>
<div style={{ padding: '16px', textAlign: 'right' }}>
<Pagination
@@ -505,6 +524,32 @@ const MaterialListPage: React.FC = () => {
</div>
</div>
</Modal>
<Modal
title="预览"
open={previewModalOpen}
onCancel={() => setPreviewModalOpen(false)}
footer={null}
width={600}
style={{ borderRadius: 16 }}
>
<div style={{ display: 'flex', justifyContent: 'center', alignItems: 'center', minHeight: 400 }}>
{previewType === 'video' ? (
<video
src={previewUrl}
controls
style={{ maxWidth: '100%', maxHeight: 400, borderRadius: 8 }}
autoPlay
/>
) : (
<img
src={previewUrl}
alt="预览"
style={{ maxWidth: '100%', maxHeight: 400, borderRadius: 8 }}
/>
)}
</div>
</Modal>
</div>
);
};
video-gen-app/src/pages/PreTest.tsx
-1
View File
@@ -163,7 +163,6 @@ const PreTest: React.FC = () => {
const loadRecords = async (params?: { page?: number; pageSize?: number; platform?: string }) => {
setLoading(true);
try {
console.log(params);
const page = params?.page ?? currentPage;
const size = params?.pageSize ?? pageSize;
const platform = params?.platform ?? searchPlatform;